Merge pull request #38 from Rakesh9100/main

Responsive Sticky Navbar added
tecky708 · Oct 18, 2023 · 331158d · 331158d
2 parents eaedd50 + 53cb334
commit 331158d
Show file tree

Hide file tree

Showing 3 changed files with 401 additions and 0 deletions.
diff --git a/Responsive-Sticky-Navbar/index.html b/Responsive-Sticky-Navbar/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<title>live</title>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header>
+        <button class="nav-toggle">
+            <span class="hamburger"></span>
+        </button>
+        <div class="smalllogo">
+            <a href="#welcome-section" class="logolink">
+                <h2> <i class="fas fa-code"></i> coding sumit</h2>
+            </a>
+        </div>
+
+        <nav class="nav" id="navbar">
+            <div class="logo">
+                <a href="index.html" id="logo">
+                    <h1> <i class="fas fa-code" style="font-size: 20px;"></i> coding sumit</h1>
+                </a>
+            </div>
+
+
+            <ul class="nav__list" id="navlinkitems">
+                <li class="nav__item">
+                    <a href="#home-section" class="nav__link" id="home">Home</a>
+                </li>
+                <li class="nav__item">
+                    <a href="#about-section" class="nav__link" id="about">About</a>
+                </li>
+                <li class="nav__item">
+                    <a href="#skills-section" class="nav__link" id="service">Skills</a>
+                </li>
+                <li class="nav__item">
+                    <a href="#projects-section" class="nav__link" id="work">Work</a>
+                </li>
+
+                <li class="nav__item">
+                    <a href="#contacts-section" class="nav__link" id="contact">Contact</a>
+                </li>
+            </ul>
+
+        </nav>
+    </header>
+    <section class="section one" id="home-section">
+
+    </section>
+    <section class="section two" id="about-section">
+
+    </section>
+    <section class="section three" id="skills-section">
+
+    </section>
+    <section class="section four" id="projects-section">
+
+    </section>
+    <section class="section five" id="contacts-section">
+
+    </section>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Responsive-Sticky-Navbar/script.js b/Responsive-Sticky-Navbar/script.js
@@ -0,0 +1,19 @@
+window.onscroll = function () {
+    scrollFunction();
+  };
+  function scrollFunction() {
+    document.getElementById("navbar").style.background = "#fff";
+  }
+
+  const navToggle = document.querySelector(".nav-toggle");
+  const navLinks = document.querySelectorAll(".nav__link");
+
+  navToggle.addEventListener("click", () => {
+    document.body.classList.toggle("nav-open");
+  });
+
+  navLinks.forEach((link) => {
+    link.addEventListener("click", () => {
+      document.body.classList.remove("nav-open");
+    });
+  });