updated section1 responsive design

awwwards_ss2/main.js

@@ -64,3 +64,22 @@ function loadingAnimation() {
 }
 loadingAnimation()
 
+//navbar
+function menuAnimation() {
+    var menu = document.querySelector("nav h3")
+    var full = document.querySelector("#full-screen")
+    var navimg = document.querySelector("nav img")
+    var flag = 0
+    menu.addEventListener("click", function () {
+        if (flag == 0) {
+            full.style.top = 0
+            navimg.style.opacity = 0
+            flag = 1
+        } else {
+            full.style.top = "-100%"
+            navimg.style.opacity = 1
+            flag = 0
+        }
+    })
+}
+menuAnimation()

awwwards_ss2/style.css

@@ -8,7 +8,6 @@
 html, body{
     height: 100%;
     width: 100%;
-    background-color: #EFEAE3;
     color: black;
 }
 a{
@@ -79,16 +78,16 @@ a{
     margin-top: 4vw;
     width: 100%;
 }
-nav {
+nav{
     padding: 2vw 0;
     width: 100%;
     display: flex;
     align-items: center;
     position: relative;
     justify-content: space-between;
-    z-index: 99;
+    z-index: 100;
 }
-nav h3 {
+nav h3{
     display: none;
 }
 #navbar{
@@ -141,16 +140,17 @@ nav h3 {
 }
 #left h3{
     width: 25vw;
-    font-size: 1.8vw;
+    font-size: 30px;
-    line-height: 2vw;
+    line-height: 30px;
     font-weight: 600;
-    letter-spacing: -2px;
+    letter-spacing: -1px;
 }
 #right h1{
     text-align: right;
-    font-size: 10vw;
+    font-size: 190px;
     font-weight: 600;
-    line-height: 8vw;
+    line-height: 150px;
+    letter-spacing: -10px;
 }
 #hero-bottom{
     position: absolute;
@@ -523,13 +523,13 @@ nav h3 {
     width: 100%;
     background: linear-gradient(to top right, #ff2d03, #ff5c0b);
     filter: blur(30px);
-    animation-name: sunspot;
+    animation-name: footerSunspot;
     animation-duration: 10s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
 }
-@keyframes sunspot{
+@keyframes footerSunspot{
     from {
         filter: blur(100px);
         transform: translate(20%, -10%) skew(0);
@@ -551,3 +551,163 @@ nav h3 {
 }
 
 /*========== Responsive ==========*/
+@media (max-width: 1450px){
+    #hero-top{
+        height: 55vh;
+    }
+    #left h3{
+        font-size: 26px;
+        line-height: 26px;
+        letter-spacing: -2px;
+    }
+    #right h1{
+        font-size: 150px;
+        line-height: 130px;
+    }
+}
+@media (max-width: 1200px){
+    #hero-top{
+        height: 50vh;
+    }
+    #left h3{
+        width: 30vw;
+        font-size: 24px;
+    }
+    #hero-bottom{
+        top: 55vh;
+    }
+}
+@media (max-width: 980px){
+    #hero-top{
+        height: 45vh;
+    }
+    #left h3{
+        font-size: 20px;
+        line-height: 20px;
+        letter-spacing: -2px;
+    }
+    #right h1{
+        font-size: 120px;
+        line-height: 120px;
+    }
+    #hero-bottom{
+        top: 50vh;
+    }
+}
+@media (max-width:750px) {
+    .section-1{
+        min-height: 100vh;
+        width: 100vw;
+    }
+    #section-1 video {
+        position: relative;
+        border-radius: 15px;
+        margin-top: 4vw;
+        height: 30vh;
+        object-fit: cover;
+        object-position: center;
+        width: 92%;
+        margin-left: 4%;
+    }
+    nav{
+        padding: 20px 20px;
+        background-color: #EFEAE3;
+    }
+    nav img{
+        width: 130px;
+    }
+    #navbar{
+        display: none;
+    }
+    nav h3{
+        display: block;
+        padding: 10px 15px;
+        border: 1px solid #ababab;
+        border-radius: 50px;
+        font-size: 16px;
+        font-weight: 200;
+        padding-left: 10vw;
+        cursor: pointer;
+    }
+    #hero-top{
+        width: 100%;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        border-bottom: 1px solid transparent;
+        padding: 20px 20px;
+        padding-bottom: 10vw;
+        flex-direction: column-reverse;
+        position: relative;
+        z-index: 9;
+    }
+    #left h3 {
+        width: 50%;
+        font-size: 22px;
+        line-height: 20px;
+    }
+    #hero-top h1 {
+        font-size: 100px;
+        text-align: right;
+        line-height: 80px;
+        letter-spacing: -8px;
+    }
+    #hero-2{
+        height: 50vw;
+        width: 80vw;
+    }
+    #hero-3{
+        height: 50vw;
+        width: 80vw;
+    }
+    #hero-bottom{
+        top: 45vh;
+    }
+}
+@media (max-width:590px) {
+    #hero-top{
+        height: 40vh;
+    }
+    #left h3 {
+        width: 60%;
+        font-size: 21px;
+        line-height: 20px;
+    }
+    #hero-bottom{
+        width: 60vw;
+        height: 60vw;
+        top: 40vh;
+    }
+}
+@media (max-width:480px) {
+    #section-1 video {
+        height: 50vh;
+    }
+    #hero-top{
+        height: 35vh;
+    }
+    #left h3 {
+        width: 80%;
+        font-size: 21px;
+        line-height: 20px;
+    }
+    #hero-top h1 {
+        font-size: 65px;
+        text-align: right;
+        line-height: 50px;
+        letter-spacing: -5px;
+    }
+    #hero-bottom{
+        width: 60vw;
+        height: 60vw;
+        top: 35vh;
+    }  
+}
+@media (max-width:380px) {
+    #section-1 video {
+        height: 40vh;
+    } 
+    #left h3 {
+        width: 100%;
+    }
+}