opencodeiiita · MishtiGarg250 · Dec 30, 2025 · Dec 29, 2025 · Dec 29, 2025
diff --git a/webdev/contributors/IIT2025077/task-02/explanation.md b/webdev/contributors/IIT2025077/task-02/explanation.md
@@ -0,0 +1,16 @@
+## Explain What This Code Does
+
+What this task was trying to teach you?
+This task taught me how to create nav bar which is adaptable to both mobile and laptops.
+
+How you designed the navbar structure?
+In html code i made a div for navbar which contains a logo and few navlinks which i made using anchor tags.
+
+How responsiveness was handled
+Responsiveness was handled using css media querie.
+How JavaScript controls the menu
+when hamburger is clicked a dropdown menu appears which contains navlinks.
+What you learned from this task
+New concept which i learned is how to make navbar responsive for mobiles.
+Any difficulties or thoughts you had while working?
+I faced difficulty in mediaquerie section. 
diff --git a/webdev/contributors/IIT2025077/task-02/index.html b/webdev/contributors/IIT2025077/task-02/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Task 02 - Navbar</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <!-- TODO: Navbar goes here -->
+    <header>
+        <div class="navbar">
+            <div class="logo">TechTonic</div>
+            <div id="navlinks" class="navlinks">
+            <a href="#home">Home</a>
+            <a href="#about">About</a>
+            <a href="#services">Services</a>
+            <a href="#contact">Contact</a>
+            </div>
+        <div id="hamburger" class="hamburger">☰</div>
+        </div>
+     </header>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/webdev/contributors/IIT2025077/task-02/script.js b/webdev/contributors/IIT2025077/task-02/script.js
@@ -0,0 +1,6 @@
+const hamburger = document.getElementById("hamburger");
+const navLinks = document.getElementById("navlinks");
+
+hamburger.addEventListener("click", () => {
+  navLinks.classList.toggle("active");
+});
diff --git a/webdev/contributors/IIT2025077/task-02/style.css b/webdev/contributors/IIT2025077/task-02/style.css
@@ -0,0 +1,78 @@
+/* Base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  line-height: 1.5;
+}
+
+.navbar{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: black;
+    height: 50px;
+}
+.logo{
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: #ff9900;
+}
+.navlinks{
+    display:flex;
+    justify-content: space-evenly;
+    gap: 50px;
+    font-family: 'Poppins', sans-serif;
+    margin-left: auto;
+}
+.navlinks a{
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    padding-right: 10px;
+    transition: color 0.3s ease;
+    font-weight: 500;
+    cursor: pointer;
+}
+.navlinks a:hover{
+  text-decoration: underline;
+  color: #00d4ff;
+  transition: color 0.3s ease;
+}
+.hamburger {
+  display: none;
+  font-size: 24px;
+  color: white;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+    .navlinks {
+        display: none; 
+        flex-direction: column;
+        position: absolute;
+        background-color: #111;
+        height: 100%;
+        z-index: 999; 
+        right: 0;
+        width: 70px;
+        top: 50px;     
+        margin-left: auto;
+        padding-right: 10px;
+    }
+    .hamburger{
+        display: block;
+        margin-left: auto;
+    }
+}
+
+.navlinks.active {
+  display: flex;
+}
+body{
+    background-color: #00d4ff;
+}