Main off canvas navigation finished

src/css/main.css

@@ -10,6 +10,7 @@
     --errorDefault: hsla(0, 62%, 51%, 1);
     --grey: hsla(0, 0%, 39%, 1);
     --mutedGrey: hsla(0, 0%, 67%, 0.58);
+    --mutedBlack: hsla(0, 0%, 0%, 0.25);
 
     /* font sizes */
     --titleFS: 2.25rem;
@@ -73,15 +74,15 @@ a.btn:active, form input[type="submit"]:active{
 }
 
 .boxShadowOut:hover {
-    box-shadow: 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
+    box-shadow: 0 6px 4px 0 var(--mutedBlack);
 }
 
 .boxShadowIn:active {
-    box-shadow: inset 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
+    box-shadow: inset 0 6px 4px 0 var(--mutedBlack);
 }
 
 .textShadow:hover {
-    text-shadow: 0 6px 4px hsla(0, 0%, 0%, 0.25);
+    text-shadow: 0 6px 4px var(--mutedBlack);
 }
 
 /*** Standard Styles ****/
@@ -95,7 +96,7 @@ body{
 }
 
 header {
-    background: url("../imgs/hero.jpg") no-repeat bottom;
+    background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom;
     background-size: cover;
     height: 40%;
     color:  #FFFFFF;
@@ -108,6 +109,16 @@ nav{
     flex-direction: row;
     justify-content: space-between;
     padding: 0.25em;
+    position: sticky;
+    top: 0;
+}
+
+nav #nav-check {
+    display: none;
+}
+
+nav .nav-btn {
+    display: none;
 }
 
 nav h1 {
@@ -124,7 +135,7 @@ nav ul {
     flex-direction: row;
     gap: 1em;
     margin: 0;
-    justify-content: right;
+    justify-content: flex-end;
     align-items: flex-end;
 }
 
@@ -136,7 +147,7 @@ nav ul li span{
     visibility: hidden;
 }
 
-nav ul li a:hover > span{
+nav ul li a:hover span {
     visibility: visible;
 }
 
@@ -168,17 +179,168 @@ i.fa-chevron-down{
     margin: 1.5rem 0;
 }
 
-
 @media screen and (max-width: 75em) {
     nav {
-        flex-direction: column;
+        display: block;
-        justify-content: left;
+        height: 50px;
-        align-items: end;
+        width: 100%;
-        gap: 1em;
+        background-color: #4d4d4d;
+        position: relative;
+        padding: 0;
+    }
+
+    nav a h1{
+        margin-left: 1ch;
+    }
+
+    nav  .nav-btn {
+        display: inline-block;
+        position: absolute;
+        right: 30px;
+        top: -353px;
     }
 
     nav ul {
-        flex-direction: column;
+        position: relative;
-        padding: 0;
+        display: block;
+        width: 100%;
+        background-color: #333;
+        transition: all 0.4s ease-in;
+        overflow-y: hidden;
+        padding-left: 0;
+        margin-top: 7px;
+    }
+
+    nav ul li a {
+        display: block;
+        width: 100%;
+        transform: translateX(-30px);
+        transition: all 0.4s ease-in;
+        opacity: 0;
+    }
+
+    .nav-btn label {
+        display: inline-block;
+        padding: 13px 0;
+        margin: 0;
+        cursor: pointer;
+        width: 60px;
+        height: 20px;
+        position: relative;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .5s ease-in;
+        -moz-transition: .5s ease-in;
+        -o-transition: .5s ease-in;
+        transition: .5s ease-in;
+    }
+
+    .nav-btn label span {
+        display: block;
+        position: absolute;
+        height: 5px;
+        width: 100%;
+        background-color: #FFFFFF;
+        opacity: 1;
+        right: 0;
+        top: 20px;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .25s ease-in;
+        -moz-transition: .25s ease-in;
+        -o-transition: .25s ease-in;
+        transition: .25s ease-in;
+    }
+
+    nav  #nav-check:not(:checked) ~ ul{
+        height: auto;
+        max-height: 0;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
+        top: 0;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
+        top: 15px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
+        top: 30px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav .nav-btn  label:hover, nav  #nav-check:checked ~ .nav-btn  label {
+        background-color: rgba(-1, 0, 0, 0.3);
+    }
+
+    nav #nav-check:checked ~ ul{
+        max-height: 50vh;
+        overflow-y: hidden;
+    }
+
+    nav #nav-check:checked ~ ul li a {
+        opacity: 1;
+        transform: translateX(0px);
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(1) a {
+        transition-delay: 0.15s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(2) a {
+        transition-delay: 0.25s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(3) a {
+        transition-delay: 0.35s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(4) a {
+        transition-delay: 0.45s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(5) a {
+        transition-delay: 0.55s;
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:first-child {
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:nth-child(2){
+        width: 0;
+        opacity: 0;
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:last-child {
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+    }
+}
+
+@media screen and (max-width: 31em) {
+    header div h1{
+        width: min-content;
     }
 }

src/index.html

@@ -12,9 +12,17 @@
 <body>
     <header>
         <nav>
+            <input type="checkbox" id="nav-check">
             <a href="/">
                 <h1>rohit pai</h1>
             </a>
+            <div class="nav-btn">
+                <label for="nav-check">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </label>
+            </div>
             <ul>
                 <li><a href="#about" class="textShadow"><span>&lt;</span>about<span>&gt;</span></a></li>
                 <li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
@@ -22,6 +30,7 @@
                 <li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
                 <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
             </ul>
+            
         </nav>
         <div>
             <h1>full stack developer_</h1>