+ 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;
+}