From 2294d0cf3af036cd7fcb58a965af929e8f8d7f0d Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Tue, 25 May 2021 20:14:25 +0100
Subject: [PATCH] Simplified hero

---
 index.html | 14 +++++++-------
 main.css   | 23 +++++++++++++----------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 4256332..df7dd72 100644
--- a/index.html
+++ b/index.html
@@ -40,14 +40,14 @@
     
     
     <section class="hero-section" style="padding-top: 40px;">
-        <div class="container-1200px">
+        <div class="container-1200px hero-content-container">
             <div class="column-50">
-                <h1><span style="font-family:'Satisfy';font-size:.7em;color:#888;">Hi!&nbsp;I'm&nbsp;<span style="font-family:'Poppins';color:#ddd;font-size:.5em;white-space:nowrap;">---------------------------</span></span><br>Benjamin Toby.</h1>
-                <h2 class="hero-subtext">
-                    <a href="#" class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
-                    <a href="#" class="hero-content-link" id="web-design">Web Designer</a>,
-                    <a href="#" class="hero-content-link" id="frontend-dev">Frontend Web Developer</a>,
-                    <a href="#" class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
+                <h1>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="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;">
diff --git a/main.css b/main.css
index e3471f3..20892df 100644
--- a/main.css
+++ b/main.css
@@ -170,8 +170,8 @@ input:focus {
     width: 50%;
 }
 
-.hero-section {
-    
+section.hero-section {
+    padding: 0px 40px 40px 40px;
 }
 
 
@@ -201,7 +201,8 @@ input:focus {
 }
 
 .hero-content-link {
-    color: #888;    
+    color: #888;
+    transition: all .3s ease-out;
 }
 
 .hero-content-link:hover {
@@ -212,6 +213,7 @@ input:focus {
 
 .nav-cta-button {
     border: 3px solid transparent;
+    transition: all .3s ease-out;
 }
 
 .nav-cta-button:hover {
@@ -236,6 +238,11 @@ input:focus {
 
 
 /*................................................... Hero Section */
+
+.hero-content-container {
+    align-items: center;
+}
+
 .my-name {
     color: #3C60DE;
     background-color: #E6EDFF;
@@ -249,6 +256,7 @@ input:focus {
     display: flex;
     align-items: center;
     border-radius: 100px;
+    transition: all .3s ease-out;
 }
 
 .linkedin-block:hover {
@@ -272,7 +280,6 @@ input:focus {
     width: 500px;
     height: 500px;
     position: relative;
-    margin-top: -40px;
 }
 
 .face-wrapper {
@@ -366,10 +373,6 @@ input:focus {
     .hamburger-line {
     }
     
-    .hero-section {
-        padding-top: 40px;
-    }
-    
     #my-face {
         right: -20vw;
     }
@@ -390,8 +393,8 @@ input:focus {
         padding: 20px;
     }
     
-    .hero-section {
-        padding: 20px;
+    section.hero-section {
+        padding: 0px 20px;
     }
     
     .hero-content-link {