Fix bug on header

garciajordy · Apr 30, 2021 · 365e01f · 365e01f
1 parent 3b8b3bc
commit 365e01f
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 212 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 </head>
 
 <body>
-
+  <section id="s1" class="intro-con">
 
   <div class="hexagon hexagon1"></div>
   <div class="hexagon hexagon2"></div>
@@ -34,12 +34,14 @@ <h1 class="header">&#60;Jordy Garcia<span>/</span>&#62;</h1>
 
 
 
-  <section id="s1" class="intro-con">
+
     <div class="head-con">
+<div class="typing-con">
 
-      <h1 id="head-one">I am </h1> <h1 id="head-two"><span id="span-one"></span><abbr id="cursor"></abbr></h1>
+  <h1 id="head-one">I am </h1> <h1 id="head-two"><span id="span-one"></span><abbr id="cursor"></abbr></h1>
+</div>
+      <p>As a software engineer with a passion for coding, I create amazing websites and web apps to make the internet a better place. Get in touch to discuss how we can work together.</p>
     </div>
-<p>As a software engineer with a passion for coding, I create amazing websites and web apps to make the internet a better place. Get in touch to discuss how we can work together.</p>
   </section>
   <nav id="nav" class="top">
 
@@ -183,10 +185,10 @@ <h4> Functionalities:</h4>
       <h1>Get in <span>Touch</span></h1>
       <div class="contact-con">
        <p>Wanna talk? Send me an email through the form below or get in touch through my social media profiles.</p>
-      </div>
+
 
 
-    </div>
+
 <div class="form-con">
 
   <form>
@@ -196,8 +198,10 @@ <h1>Get in <span>Touch</span></h1>
     <input type="email" name="email" id="email">
     <label for="text">Your Message</label>
     <textarea name="text" id="text"></textarea>
-    <button onclick="sendEmail();">Send >></button>
+    <button type="button" onclick="sendEmail();">Send >></button>
   </form>
+</div>
+</div>
 </div>
   </section>
 

diff --git a/script/script.js b/script/script.js
@@ -155,10 +155,10 @@ function role() {
 
 let nav = document.getElementById("nav")
 let line = document.getElementById("line")
-var home = document.getElementById("s1").scrollHeight
-var about = document.getElementById("s2").scrollHeight
-var project = document.getElementById("s3").scrollHeight
-var contact = document.getElementById("s4").scrollHeight
+var home = document.getElementById("s1").clientHeight
+var about = document.getElementById("s2").clientHeight
+var project = document.getElementById("s3").clientHeight
+var contact = document.getElementById("s4").clientHeight
 
 function scrolling() {
     navbar()

diff --git a/style/_contact.scss b/style/_contact.scss
@@ -8,7 +8,9 @@ $primary-color: rgb(233, 78, 27);
   justify-content: center;
   .contact-con {
     display: flex;
-    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 40%;
   }
   h1 {
     font-size: 50px;
@@ -18,7 +20,6 @@ $primary-color: rgb(233, 78, 27);
 
   p {
     font-size: 25px;
-    width: 50%;
     text-align: left;
     padding: 1rem;
   }

diff --git a/style/_form.scss b/style/_form.scss
@@ -4,8 +4,9 @@
 form {
   display: flex;
   flex-direction: column;
+  width: 100%;
   input {
-    width: 400px;
+    width: 100%;
     height: 2rem;
     padding-left: 0.5rem;
     font-size: 20px;
@@ -41,4 +42,5 @@ form {
 .form-con {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
diff --git a/style/_header.scss b/style/_header.scss
@@ -3,6 +3,7 @@
   margin-top: 1rem;
   font-size: 3rem;
   z-index: 5;
+  margin-bottom: 5rem;
   text-align: center;
 }
 #head-one {
@@ -11,14 +12,19 @@
 }
 .head-con {
   display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 3rem;
+}
+.typing-con {
+  display: flex;
 }
 #span-one,
 #head-two {
   font-size: 50px;
 }
 .intro-con {
-  margin: 3rem;
-  margin-top: 8rem;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
 
@@ -72,24 +78,24 @@
     left: 20%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 30%;
-    transform: rotate(100deg);
+    transform: rotate(170deg);
   }
 }
 @keyframes hexagon2 {
   from {
     top: -20%;
     opacity: 0.3;
-    left: 5%;
+    left: 15%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 20%;
 
-    transform: rotate(120deg);
+    transform: rotate(200deg);
   }
 }
 @keyframes hexagon3 {
@@ -99,36 +105,36 @@
     left: 20%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
-    left: 5%;
-    transform: rotate(180deg);
+    left: 25%;
+    transform: rotate(240deg);
   }
 }
 @keyframes hexagon4 {
   from {
     top: -20%;
     opacity: 0.3;
-    left: 80%;
+    left: 75%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
-    left: 90%;
-    transform: rotate(80deg);
+    left: 75%;
+    transform: rotate(150deg);
   }
 }
 @keyframes hexagon5 {
   from {
     top: -20%;
     opacity: 0.3;
-    left: 90%;
+    left: 75%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 70%;
-    transform: rotate(90deg);
+    transform: rotate(180deg);
   }
 }
 @keyframes hexagon6 {
@@ -138,10 +144,10 @@
     left: 70%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 50%;
-    transform: rotate(-150deg);
+    transform: rotate(-230deg);
   }
 }
 @keyframes hexagon7 {
@@ -151,10 +157,10 @@
     left: 60%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 30%;
-    transform: rotate(-140deg);
+    transform: rotate(-210deg);
   }
 }
 @keyframes hexagon8 {
@@ -164,9 +170,9 @@
     left: 50%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
-    left: 80%;
+    left: 75%;
     transform: rotate(-200deg);
   }
 }
@@ -177,10 +183,10 @@
     left: 40%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 30%;
-    transform: rotate(-110deg);
+    transform: rotate(-180deg);
   }
 }
 @keyframes hexagon10 {
@@ -190,52 +196,52 @@
     left: 20%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
-    left: 10%;
-    transform: rotate(-160deg);
+    left: 15%;
+    transform: rotate(-240deg);
   }
 }
 @keyframes hexagon11 {
   from {
     top: -20%;
     opacity: 0.3;
-    left: 10%;
+    left: 15%;
   }
   to {
-    top: 80%;
+    top: 140%;
     opacity: 0;
     left: 30%;
-    transform: rotate(180deg);
+    transform: rotate(260deg);
   }
 }
 .hexagon2 {
-  animation: hexagon2 ease-out infinite 15s 5s;
+  animation: hexagon2 ease-out infinite 18s 5s;
 }
 .hexagon3 {
-  animation: hexagon3 ease-out infinite 19s 15s;
+  animation: hexagon3 ease-out infinite 22s 15s;
 }
 .hexagon4 {
-  animation: hexagon4 ease-out infinite 16s 5s;
+  animation: hexagon4 ease-out infinite 19s 5s;
 }
 .hexagon5 {
-  animation: hexagon5 ease-out infinite 20s 01s;
+  animation: hexagon5 ease-out infinite 23s 01s;
 }
 .hexagon6 {
-  animation: hexagon6 ease-out infinite 14s 16s;
+  animation: hexagon6 ease-out infinite 17s 16s;
 }
 .hexagon7 {
-  animation: hexagon7 ease-out infinite 13s 12s;
+  animation: hexagon7 ease-out infinite 16s 12s;
 }
 .hexagon8 {
-  animation: hexagon8 ease-out infinite 19s 12s;
+  animation: hexagon8 ease-out infinite 22s 12s;
 }
 .hexagon9 {
-  animation: hexagon9 ease-out infinite 11s 3s;
+  animation: hexagon9 ease-out infinite 16s 3s;
 }
 .hexagon10 {
-  animation: hexagon9 ease-out infinite 11s 8s;
+  animation: hexagon9 ease-out infinite 15s 8s;
 }
 .hexagon11 {
-  animation: hexagon9 ease-out infinite 11s 9s;
+  animation: hexagon9 ease-out infinite 16s 9s;
 }
diff --git a/style/_mobile.scss b/style/_mobile.scss
@@ -13,9 +13,10 @@
       font-size: 25px;
     }
   }
+  .head-con {
+    padding: 1rem;
+  }
   .intro-con {
-    margin: 0.5rem;
-    margin-top: 6rem;
     p {
       font-size: 20px;
       padding-right: 0;
@@ -74,22 +75,6 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    div {
-      margin: 1rem;
-      padding: 1rem 2rem;
-      display: flex;
-      flex-direction: column;
-      font-size: 20px;
-      background-color: $background;
-      border-radius: 20px;
-      border: #fff solid 5px;
-      transition: 400ms;
-
-      &:hover {
-        padding: 0.5rem 1rem;
-        border: darken($primary-color, 10) solid 5px;
-      }
-    }
   }
 
   //// Project
@@ -382,9 +367,6 @@
   form {
     display: flex;
     flex-direction: column;
-    input {
-      width: 200px;
-    }
   }
 
   .contact {
@@ -395,6 +377,7 @@
     .contact-con {
       display: flex;
       justify-content: center;
+      width: 80%;
     }
     h1 {
       font-size: 40px;