added hamburger menu

princekotadia · princekotadia · commit 8e21dec1bbdc · 2025-10-18T12:15:25.000+05:30
diff --git a/Portfoliowebsite/port.css b/Portfoliowebsite/port.css
@@ -74,6 +74,7 @@ ul li a:hover{
     padding:77px;
     height: 290px;
 }
+
 .right_section img{
     margin-top: -30px;
     width:600px;
@@ -198,6 +199,10 @@ footer{
     height: 0.1rem;
 }
 
+.menu, .hamburger{
+    display: none;
+}
+
 @media (max-width: 950px){
     .con{
         flex-direction: column;
@@ -240,6 +245,7 @@ footer{
     .components{
         font-size: 14px;
     }
+
 }
 
 @media (max-width: 650px){
@@ -260,18 +266,71 @@ footer{
 
     .box{
         justify-content: space-around;
-        height: 80px;
+        height: 50px;
         /* margin-top: 0px; */
     }
     
     
     .components{
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr;
-        margin-top: -27px;
-        font-size: 13px;
+        display: none;
     }
 
-    
+    .menu {
+        display: block;
+    }
+
+    .hamburger{
+        display: inline;
+    }
+
+    .hamburger {
+        position: fixed;
+        /* a large z-index puts the ham button above the rest of the page*/
+        z-index: 99;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .menu {
+        position: fixed;
+        /* give the menu a larger z-index than the ham link
+        to put the menu above it */
+        z-index: 100;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100vh;
+        /* basic menu styling*/
+        list-style: none;
+        background: black;
+        display: flex;
+
+        flex-direction: column;
+        /* animate slide up/down */
+        transform: translateY(-100%);
+        transition: transform 0.2s ease;
+    }
+
+    .close {
+        position: absolute;
+        border: none;
+        color: white;
+        cursor: pointer;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .menu:target {
+        /* show menu */
+        transform: translateY(0);
+    }
+
+    .service{
+        display: none;
+    }
 }
diff --git a/Portfoliowebsite/port.html b/Portfoliowebsite/port.html
@@ -13,7 +13,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@700&display=swap" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" 
+    rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body>
@@ -32,6 +34,23 @@
 
 
             </ul>
+            <ul class="menu" id="menu">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Services</a></li>
+                <li><a href="#">Projects</a></li>
+                <li><a href="#">Contact Me</a></li>
+                <a class="close" href="#">
+                    <span class="material-icons">
+                    close
+                    </span>
+                </a>
+            </ul>
+            <a class="hamburger" href="#menu">
+                <span class="material-icons">
+                menu
+                </span>
+            </a>
         </nav>
     </section>
 
