From 61a83e8b5dbc6e918be622ac9750247ad6b03ffe Mon Sep 17 00:00:00 2001 From: Lavay Garg Date: Mon, 29 Dec 2025 22:21:51 +0530 Subject: [PATCH 1/2] built navbar --- .../IIT2025077/task-02/explanation.md | 0 .../IIT2025077/task-02/index.html | 25 ++++++ .../contributors/IIT2025077/task-02/script.js | 6 ++ .../contributors/IIT2025077/task-02/style.css | 78 +++++++++++++++++++ 4 files changed, 109 insertions(+) create mode 100644 webdev/contributors/IIT2025077/task-02/explanation.md create mode 100644 webdev/contributors/IIT2025077/task-02/index.html create mode 100644 webdev/contributors/IIT2025077/task-02/script.js create mode 100644 webdev/contributors/IIT2025077/task-02/style.css diff --git a/webdev/contributors/IIT2025077/task-02/explanation.md b/webdev/contributors/IIT2025077/task-02/explanation.md new file mode 100644 index 0000000..e69de29 diff --git a/webdev/contributors/IIT2025077/task-02/index.html b/webdev/contributors/IIT2025077/task-02/index.html new file mode 100644 index 0000000..9df2411 --- /dev/null +++ b/webdev/contributors/IIT2025077/task-02/index.html @@ -0,0 +1,25 @@ + + + + + + Task 02 - Navbar + + + + +
+
+ + +
☰
+
+
+ + + diff --git a/webdev/contributors/IIT2025077/task-02/script.js b/webdev/contributors/IIT2025077/task-02/script.js new file mode 100644 index 0000000..6480b72 --- /dev/null +++ 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"); +}); \ No newline at end of file diff --git a/webdev/contributors/IIT2025077/task-02/style.css b/webdev/contributors/IIT2025077/task-02/style.css new file mode 100644 index 0000000..62b7b3c --- /dev/null +++ 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; +} \ No newline at end of file From 4e63c5989ed835a949a961ffb5a1cb81fc3d5b8c Mon Sep 17 00:00:00 2001 From: Lavay Garg Date: Mon, 29 Dec 2025 22:34:33 +0530 Subject: [PATCH 2/2] added explanation --- .../IIT2025077/task-02/explanation.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/webdev/contributors/IIT2025077/task-02/explanation.md b/webdev/contributors/IIT2025077/task-02/explanation.md index e69de29..3321cd8 100644 --- 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.