Mobile css update

index.html

@@ -39,18 +39,19 @@
     
     
     
-    <section class="hero-section" style="padding-top: 40px;">
+    <section class="hero-section">
         <div class="container-1200px hero-content-container">
             <div class="column-50">
-                <h1>Benjamin Toby.</h1>
+                <h1 style="background-color:white;">Benjamin Toby.</h1>
                 <h2 class="hero-subtext">Hi! I'm a
                     <a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
-                    <a class="hero-content-link" id="web-design">Web Designer</a>,
+                    <a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>,
                     <a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>,
                     <a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
                 </h2>
                 
-                <a href="#" style="border:none;margin-top:15px;display:flex;justify-content:flex-start;">
+                <div class="hero-ctas-block">
+                    <a href="#" class="linkedin-link">
                         <div class="linkedin-block">
                             <div class="linkedin-profile-pic-block">
                                 <img src="images/Profile-Pic.jpg" alt="" width="40" height="40">
@@ -61,6 +62,9 @@
                             </div>
                         </div>
                     </a>
+                    
+                    <button class="main-cta-button">Hire Me</button>
+                </div>
             </div>
             
             <div class="column-50 centered-content" style="perspective:600px;z-index:-1;">

main.css

@@ -39,6 +39,7 @@ section {
     align-items: center;
     justify-content: center;
     padding: 60px 40px;
+    position: relative;
 }
 
 
@@ -168,6 +169,7 @@ input:focus {
     display: flex;
     flex-direction: column;
     width: 50%;
+    position: relative;
 }
 
 section.hero-section {
@@ -243,6 +245,41 @@ section.hero-section {
     align-items: center;
 }
 
+.hero-ctas-block {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 15px;
+}
+
+.main-cta-button {
+    margin: 0;
+    border: 3px solid #333;
+    background-color: white;
+    color: #222;
+    font-size: 18px;
+    font-weight: 600;
+    transition: all .3s ease-out;
+    padding: 15px 40px;
+}
+
+.main-cta-button:hover {
+    background-color: #222;
+    color: white;
+    padding: 15px 50px;
+}
+
+.linkedin-link {
+    border: none;
+    display: flex;
+    justify-content: flex-start;
+    margin-right: 10px;
+}
+
+.linkedin-link:hover {
+    border: none;
+}
+
 .my-name {
     color: #3C60DE;
     background-color: #E6EDFF;
@@ -342,6 +379,36 @@ section.hero-section {
 
 /*.................................................................................................................. Mobile Styles */
 
+@media (max-width: 950px) {
+    
+    .hamburger {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        padding: 10px;
+        width: 40px;
+        height: 40px;
+        background-color: white;
+    }
+    
+    .hamburger:hover {
+        padding: 18px 10px;
+    }
+    
+    .hamburger-line {
+    }
+    
+    nav {
+        display: none;
+    }
+    
+}
+
+
+
+
+
 @media (max-width: 800px) {
     
     .column-50 {
@@ -352,38 +419,21 @@ section.hero-section {
         flex-direction: column;
     }       
     
-    nav {
-        display: none;
-    }
-    
-    .hamburger {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        padding: 10px;
-        width: 40px;
-        height: 40px;
-    }
-    
-    .hamburger:hover {
-        padding: 18px 10px;
-    }
-    
-    .hamburger-line {
-    }
-    
     #my-face {
         right: -20vw;
     }
     
+    .face-wrapper {
+        margin-top: -10vw;
+    }
+    
 }
 
 
 
 
 
-@media (max-width: 600px) {
+@media (max-width: 550px) {
     
     h1 {
         font-size: 44px;
@@ -394,11 +444,21 @@ section.hero-section {
     }
     
     section.hero-section {
-        padding: 0px 20px;
+        padding: 30px 20px;
+    }
+    
+    .container-1200px.hero-content-container {
+        padding-right: 30vw;
     }
     
     .hero-content-link {
         font-size: 20px;
+        background-color: white;
+    }
+    
+    .hero-ctas-block {
+        flex-direction: column;
+        align-items: flex-start;
     }
     
     .linkedin-cta-text {
@@ -407,17 +467,34 @@ section.hero-section {
     
     .linkedin-block {
         padding: 7px 15px 7px 7px;
+        margin-bottom: 15px;
     }
     
     #my-face {
-        right: -20vw;
+        right: -60vw;
         margin-top: 0;
     }
     
     .face-wrapper {
+        top: 0;
+        right: 0;
+        width: auto;
+        height: auto;
+        margin-top: -65vh;
+    }
     
 }
 
+
+
+
+
+@media (max-width: 380px) {
+    
+    .face-wrapper {
+        margin-top: -160vw;
+    }
+    
 }