From 1f744677ce41226b1711068142fb66120aaaf8be Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Fri, 11 Mar 2022 09:54:21 +0530 Subject: [PATCH] day 25 completed --- my code/25-sticky-navigation/index.html | 54 +++++++++++++++ my code/25-sticky-navigation/script.js | 9 +++ my code/25-sticky-navigation/style.css | 89 +++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 my code/25-sticky-navigation/index.html create mode 100644 my code/25-sticky-navigation/script.js create mode 100644 my code/25-sticky-navigation/style.css diff --git a/my code/25-sticky-navigation/index.html b/my code/25-sticky-navigation/index.html new file mode 100644 index 0000000..104859c --- /dev/null +++ b/my code/25-sticky-navigation/index.html @@ -0,0 +1,54 @@ + + + + + + + + 25 sticky navigation + + + + + + + +
+
+

Welcome To My Website

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?

+
+
+ +
+

Content One

+

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!

+ +

Content Two

+

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?

+
+ + + + + \ No newline at end of file diff --git a/my code/25-sticky-navigation/script.js b/my code/25-sticky-navigation/script.js new file mode 100644 index 0000000..2023954 --- /dev/null +++ b/my 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"); + } +}); diff --git a/my code/25-sticky-navigation/style.css b/my code/25-sticky-navigation/style.css new file mode 100644 index 0000000..50f6939 --- /dev/null +++ b/my 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; +}