day 25 completed

4 years ago · 1f744677ce
parent cd3d41c960
commit 1f744677ce
3 changed files with 152 additions and 0 deletions
--- a/code/25-sticky-navigation/index.html
+++ b/code/25-sticky-navigation/index.html
@ -0,0 +1,54 @@
+<!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">
+    <title>25 sticky navigation</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <nav id="nav">
+        <h2 class="icon">My website</h2>
+
+        <div class="nav-items">
+            <span class="nav-item active">Home</span>
+            <span class="nav-item">About</span>
+            <span class="nav-item">Services</span>
+            <span class="nav-item">Contact</span>
+        </div>
+    </nav>
+
+    <div class="hero" id='hero'>
+        <div class="container">
+            <h1>Welcome To My Website</h1>
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>
+        </div>
+    </div>
+
+    <section class="content">
+        <h2>Content One</h2>
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut
+            cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia
+            aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error
+            reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a
+            dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum
+            labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi
+            facere,
+            iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>
+
+        <h3>Content Two</h3>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi
+            laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident,
+            voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est!
+            Tenetur
+            tempora doloremque quae iste aperiam hic cumque repellat?</p>
+    </section>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/25-sticky-navigation/script.js
+++ b/code/25-sticky-navigation/script.js
@ -0,0 +1,9 @@
+const nav = document.getElementById("nav");
+
+window.addEventListener("scroll", (e) => {
+  if (window.scrollY > nav.offsetHeight + 150) {
+    nav.classList.add("scrolled");
+  } else {
+    nav.classList.remove("scrolled");
+  }
+});
--- a/code/25-sticky-navigation/style.css
+++ b/code/25-sticky-navigation/style.css
@ -0,0 +1,89 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #222;
+  height: 80px;
+  width: 100vw;
+  color: #fff;
+  transition: all 0.3s linear;
+}
+
+nav.scrolled {
+  background-color: #fff;
+  color: #000;
+  height: 60px;
+}
+
+nav h2 {
+  font-weight: 600;
+}
+
+.nav-items {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 30px;
+}
+
+.nav-item {
+  font-size: 18px;
+  transition: color 0.3s linear;
+}
+
+.nav-item.active,
+.nav-item:hover {
+  color: red;
+}
+
+.hero {
+  width: 100vw;
+  height: 100vh;
+  background: 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-position: center;
+  background-size: cover;
+}
+
+.hero .container {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  text-align: center;
+}
+.hero .container h1 {
+  margin-bottom: 30px;
+}
+
+.content {
+  margin-top: 30px;
+  padding: 0 50px;
+}
+
+.content h2 {
+  margin-bottom: 20px;
+}
+
+.content p {
+  margin-bottom: 30px;
+  letter-spacing: 15px;
+  line-height: 30px;
+}