opencodeiiita · VaidikKindaCodes · Jan 9, 2026 · Jan 8, 2026
diff --git a/webdev/contributors/IIT2025262/task-02/explaination.md b/webdev/contributors/IIT2025262/task-02/explaination.md
@@ -0,0 +1,20 @@
+Q1 What was this task trying to teach you?
+This task helped me understand why responsive navbars are important People use websites on mobile and laptop, so the navbar should work properly on all screen sizes.
+
+Q2: How you designed the navbar structure
+I used basic HTML to create the navbar. The logo is inside a div and the links are inside a list. This makes the structure simple and easy to manage.
+
+Q3: How responsiveness was handled?
+I used CSS media queries for responsiveness. On small screens, the navigation links are hidden and a hamburger icon is shown. On large screens, the links are visible normally.
+
+Q4: How JavaScript controls the menu?
+JavaScript is used to show and hide the menu. When the hamburger icon is clicked, a class is toggled on the nav links. This helps in opening and closing the menu on mobile.
+
+Q5: What you learned from this task?
+I learned how HTML, CSS, and JavaScript work together.
+
+Q6: What you think is good and what could be improved?
+The navbar works correctly on both mobile and desktop. The animations and design could be improved.
+
+Q7: Any difficulties or thoughts you had while working?
+At first, JavaScript was confusing for me. After practicing step by step, I understood how the hamburger menu works.
diff --git a/webdev/contributors/IIT2025262/task-02/index.html b/webdev/contributors/IIT2025262/task-02/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive navbar</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="logo">TechTonic</div>
+        <ul class="nav-links" id="NavLinks">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Projects</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+        <div class="hamburger" id="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </nav>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/webdev/contributors/IIT2025262/task-02/script.js b/webdev/contributors/IIT2025262/task-02/script.js
@@ -0,0 +1,5 @@
+let hamburger=document.getElementById("hamburger");
+let navLinks=document.getElementById("NavLinks");
+hamburger.addEventListener("click", function(){
+    navLinks.classList.toggle("active");
+})
diff --git a/webdev/contributors/IIT2025262/task-02/style.css b/webdev/contributors/IIT2025262/task-02/style.css
@@ -0,0 +1,58 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+}
+body{
+    font-family: Arial,sans-serif;
+}
+.navbar{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    background-color:#111;
+    padding:15px 20px;
+}
+.logo{
+    color:white;
+    font-size: 20px;
+    font-weight:bold;
+}
+.nav-links{
+    list-style:none;
+    display:flex;
+    gap:20px;
+}
+.nav-links li a{
+    color:white;
+    text-decoration:none;
+}
+.hamburger{
+    display:none;
+    flex-direction:column;
+    cursor:pointer;
+}
+.hamburger span{
+    height:3px;
+    width:25px;
+    background:white;
+    margin:4px 0;
+}
+@media(max-width:768px){
+    .nav-links{
+        display:none;
+        position:absolute;
+        top:60px;
+        right:0;
+        background-color:#111;
+        width:100%;
+        flex-direction:column;
+        text-align:center;
+    }
+    .nav-links.active{
+        display:flex;
+    }
+    .hamburger{
+        display:flex;
+    }
+}