diff --git a/webdev/contributors/IIT2025077/task-02/explanation.md b/webdev/contributors/IIT2025077/task-02/explanation.md new file mode 100644 index 0000000..3321cd8 --- /dev/null +++ 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 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