fix styling optimize for mobile

src/app/page-header/default-page-header/default-page-header.component.html

@@ -1,9 +1,9 @@
 <div
   class="page-header section-dark"
-  style="background-image: url('assets/img/dark-fog-forest-haze-small.jpg');"
+  style="background-image: url('assets/img/dark-fog-forest-haze-with-avatar.jpg');"
 >
   <div class="filter"></div>
-  <div class="container-left slide-in-right">
+  <div class="slide-in-right">
     <div class="title-brand text-left">
       <h1 class="presentation-title">Christian Ziermann</h1>
       <h1>Web Developer</h1>
@@ -13,9 +13,4 @@
     class="moving-clouds"
     style="background-image: url('assets/img/clouds.png');"
   ></div>
-
-  <div
-  class="avatar-head"
-  style="background-image: url('assets/img/avatar-transparent.png');"
-></div>
 </div>

src/app/pages/resume/resume.component.html

@@ -1,21 +1,16 @@
 <div class="wrapper">
   <app-default-page-header></app-default-page-header>
   <div class="main">
-    <div class="section section-transparent profile-content">
+    <div class="section section-image section-profile-content">
       <div class="container">
         <div class="owner">
           <div class="avatar">
-            <img
-              src="/assets/img/avatar/profilbild.jpg"
-              alt="Circle Image"
-              class="img-circle img-no-padding img-responsive"
-            />
             <a
               href="/assets/pdf/ZIERMACH.pdf"
               class="btn btn-primary"
               download="ZIERMACH.pdf"
             >
-              Download
+              Download PDF
             </a>
           </div>
           <div class="name">
@@ -79,29 +74,23 @@
               <h4 class="title">Education</h4>
               <table class="description table ta table-borderless">
                 <tr>
-                  <th></th>
-                  <th></th>
-                  <th>Focus</th>
+                  <th>Date</th>
+                  <th>School</th>
                   <th>Graduation</th>
                 </tr>
+                <tr></tr>
                 <tr class="job-date">
                   <td>
                     August 2015 - July 2018
                   </td>
-
                   <td>
-                    <a href="https://www.gso-koeln.de/"
-                      >Georg-Simon-Ohm-Berufskolleg Köln</a
-                    >
+                    <a href="https://www.gso-koeln.de/">
+                      Georg-Simon-Ohm-Berufskolleg Köln
+                    </a>
                   </td>
                   <td>
                     IT specialist application development
                   </td>
-                  <td>
-                    IT specialist application development
-                    <br />
-                    (ger. Fachinformatiker/-in Anwendungsentwicklung)
-                  </td>
                 </tr>
               </table>
             </div>
@@ -109,7 +98,7 @@
         </div>
       </div>
     </div>
-
+    <div class="section section-transparent"></div>
     <div class="section section-image section-experience">
       <div class="container">
         <div class="row">
@@ -349,7 +338,7 @@
               <label>Message</label>
               <textarea
                 class="form-control"
-                rows="4"
+                rows="6"
                 placeholder="Tell us your thoughts and feelings..."
               ></textarea>
               <div class="row">
@@ -357,10 +346,15 @@
                   <button class="btn btn-danger btn-lg btn-fill" disabled>
                     Send Message
                   </button>
-                  
                 </div>
-                <div class="col-md-4 mr-auto ml-auto">
-                  <a class="btn btn-warning btn-lg btn-fill" href="mailto:cziermann@mailbox.org">cziermann@mailbox.org</a>
+              </div>
+              <div class="row text-center">
+                <div class="col-md-5 mr-auto ml-auto">
+                  <a
+                    class="btn btn-warning btn-lg btn-fill"
+                    href="mailto:cziermann@mailbox.org"
+                    >cziermann@mailbox.org</a
+                  >
                 </div>
               </div>
             </form>

src/app/pages/resume/resume.component.scss

@@ -25,7 +25,11 @@ table {
 }
 
 .section-experience {
-    background-image: url("/assets/img/pexels-photo-370799.jpeg");
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
+.section-profile-content {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
 }
 
 .section-soft-skills {

src/assets/sass/paper-kit/_ziermach.scss

@@ -94,10 +94,6 @@
     color: #fff;
 }
 
-.container-left {
-    padding-right: 25%;
-}
-
 .register-background .container {
     margin-top: 11%;
     position: relative;