completed sticky navbar

tsr-kairi · Jul 7, 2021 · a9c7cd1 · a9c7cd1
1 parent b02550e
commit a9c7cd1
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 0 deletions.
diff --git a/Day 25 - Sticky Navbar/app.js b/Day 25 - Sticky Navbar/app.js
@@ -0,0 +1,10 @@
+const nav = document.querySelector(".nav");
+window.addEventListener("scroll", fixNav);
+
+function fixNav() {
+  if (window.scrollY > nav.offsetHeight + 150) {
+    nav.classList.add("active");
+  } else {
+    nav.classList.remove("active");
+  }
+}
diff --git a/Day 25 - Sticky Navbar/index.html b/Day 25 - Sticky Navbar/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Sticky | Navbar</title>
+  </head>
+  <body>
+    <nav class="nav">
+      <div class="container">
+        <h1 class="logo"><a href="./index.html">TSR VLOGS</a></h1>
+        <ul>
+          <li><a href="#" class="current">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Vlog</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <div class="hero">
+      <div class="container">
+        <h1>Welcome To My Website</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto,
+          perspiciatis?
+        </p>
+      </div>
+    </div>
+
+    <section class="container content">
+      <h2>Content One</h2>
+      <p>
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam
+        reprehenderit ex quo voluptate, unde saepe odio? Facere error eum,
+        repellendus mollitia nam reiciendis cum magnam ea eius sint dolor
+        excepturi porro suscipit in! Ipsum eaque iusto excepturi ut eos, facilis
+        accusamus assumenda perferendis sit consequuntur. Suscipit eaque nobis
+        praesentium sint facere. Magnam molestias eum veniam nihil odio, aliquam
+        dignissimos repellat, asperiores suscipit nisi minima atque illum nulla
+        officia placeat nemo error enim illo ratione? Sapiente dicta quae
+        distinctio delectus sunt modi consequuntur accusantium natus nihil
+        placeat harum libero, animi fugiat officiis, ab adipisci repellat earum
+        obcaecati dignissimos tempore cum? Ullam.
+      </p>
+
+      <h3>Content Two</h3>
+
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat modi
+        quia nesciunt excepturi, assumenda commodi aspernatur error delectus
+        numquam suscipit praesentium quidem qui fugiat obcaecati, sint, sapiente
+        est voluptatibus accusamus! Veniam accusantium neque consequatur
+        corporis deleniti, et necessitatibus quod sequi, reprehenderit, nostrum
+        iusto excepturi. Placeat consequuntur ipsum dignissimos tempora natus.
+      </p>
+    </section>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 25 - Sticky Navbar/style.css b/Day 25 - Sticky Navbar/style.css
@@ -0,0 +1,115 @@
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  color: #222;
+  padding-bottom: 50px;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.nav {
+  position: fixed;
+  background-color: #222;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.nav .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* padding: 20px 0; */
+}
+
+.nav ul {
+  display: flex;
+  list-style-type: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav a {
+  color: #fff;
+  text-decoration: none;
+  padding: 6px 13px;
+  transition: all 0.3s ease-in-out;
+}
+
+.nav.active {
+  background-color: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.nav.active a {
+  color: #000;
+}
+
+.nav.active .container {
+  padding: 6px 0;
+}
+
+.nav a.current,
+.nav a:hover {
+  color: #c0392b;
+  font-weight: bold;
+}
+
+.hero {
+  background-image: url("https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: bottom center;
+  height: 100vh;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  margin-bottom: 20px;
+  z-index: -2;
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -1;
+}
+
+.hero h1 {
+  font-size: 46px;
+  margin: -20px 0 20px;
+}
+
+.hero p {
+  font-size: 20px;
+  letter-spacing: 1px;
+}
+
+.content h2,
+.content h3 {
+  font-size: 150%;
+  margin: 10px 0;
+}
+
+.content p {
+  color: #555;
+  line-height: 30px;
+  letter-spacing: 1.2px;
+}