From 05fc6e96ec1f65343bdbe7f5a86514ddf5e18744 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:37:34 +0200
Subject: [PATCH 01/40] docs: reorg sections

---
 README.md | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index dcf6e2b..94c4c16 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,24 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaSc
 
 [View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
 
+## Companion Guide
+
+Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection.
+
+Inside the PDF, you'll find:
+
+- **Day 0: Before Starting Up**<br>
+  Quick-start setup instructions and a boilerplate walkthrough.
+- **Days 1–102: Challenges & Enhancements**
+  - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
+  - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.
+  - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand.
+  - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository.
+
+This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
+
+[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)
+
 ## Project Showcase
 
 Explore each project individually and view live demos to see them in action:
@@ -113,28 +131,12 @@ Explore each project individually and view live demos to see them in action:
 | 101 | [Cascade Layers](101-cascade%20layers)                                 | [Live Demo](https://codepen.io/solygambas/full/poYaZmv)  |
 | 102 | [Container Queries](102-container%20queries)                           | [Live Demo](https://codepen.io/solygambas/full/abMqPNy)  |
 
+> **Ready to master all 102 projects?** Don't just build them—transform them into portfolio showpieces with our [**Ultimate Companion Guide**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)!
+
 ## Get Inspired
 
 Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
 
-## Companion Guide
-
-Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection.
-
-Inside the PDF, you'll find:
-
-- **Day 0: Before Starting Up**<br>
-  Quick-start setup instructions and a boilerplate walkthrough.
-- **Days 1–102: Challenges & Enhancements**
-  - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
-  - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.
-  - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand.
-  - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository.
-
-This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
-
-[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)
-
 ## Setup Instructions
 
 To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps:

From f35a0d0d9552575080ce346a13b6eeca659a0bc5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:41:54 +0200
Subject: [PATCH 02/40] docs: move collection link

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 94c4c16..53756b9 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,6 @@
 
 Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself.
 
-[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
-
 ## Companion Guide
 
 Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection.
@@ -24,6 +22,8 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 
 ## Project Showcase
 
+[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
+
 Explore each project individually and view live demos to see them in action:
 
 |  #  | Project                                                                | Live Demo                                                |

From 4c3d76fe280d202e58b9db7b546a4079221f73dc Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 9 Jul 2025 13:36:15 +0200
Subject: [PATCH 03/40] docs: update youtube setup link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 53756b9..a0c99fc 100644
--- a/README.md
+++ b/README.md
@@ -139,7 +139,7 @@ Check out our [**collection of articles**](https://www.onbusinessplan.com/) for
 
 ## Setup Instructions
 
-To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps:
+To get started with these projects, [**watch the setup tutorial on YouTube**](https://www.youtube.com/watch?v=GlKnIym2xnk) or follow these simple steps:
 
 1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.
 

From 9d3278cb5ee5a988d9d60350dfc834173202034f Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 23 Jul 2025 15:53:30 +0200
Subject: [PATCH 04/40] fix: loader

---
 069-infinite scroll posts/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/069-infinite scroll posts/script.js b/069-infinite scroll posts/script.js
index a27732f..c01c0c2 100644
--- a/069-infinite scroll posts/script.js	
+++ b/069-infinite scroll posts/script.js	
@@ -1,5 +1,5 @@
 const postsContainer = document.getElementById("posts-container");
-const loading = document.getElementById("loader");
+const loader = document.getElementById("loader");
 const filter = document.getElementById("filter");
 
 let limit = 5;

From 6624274d23d2941c5b4430b2d4ad79f76185de03 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 24 Jul 2025 14:45:07 +0200
Subject: [PATCH 05/40] fix: card right

---
 072-memory cards/style.css | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/072-memory cards/style.css b/072-memory cards/style.css
index d6be60c..5467662 100644
--- a/072-memory cards/style.css	
+++ b/072-memory cards/style.css	
@@ -14,7 +14,11 @@
 
 body {
   background-color: var(--background-color);
-  background-image: linear-gradient(315deg, var(--background-color) 0%, var(--secondary-background-color) 100%);
+  background-image: linear-gradient(
+    315deg,
+    var(--background-color) 0%,
+    var(--secondary-background-color) 100%
+  );
   font-family: "Poppins", sans-serif;
   display: flex;
   flex-direction: column;
@@ -62,7 +66,8 @@ h1 button {
   color: var(--light-color);
 }
 
-.btn:focus, .navigation .nav-button:focus {
+.btn:focus,
+.navigation .nav-button:focus {
   outline: none;
 }
 
@@ -105,6 +110,10 @@ h1 button {
   transform: translateX(-50%) rotateY(10deg);
 }
 
+.card.right {
+  transform: translateX(50%) rotateY(-10deg);
+}
+
 .inner-card {
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
   border-radius: 0.625rem;
@@ -119,7 +128,8 @@ h1 button {
   transform: rotateX(180deg);
 }
 
-.inner-card-front, .inner-card-back {
+.inner-card-front,
+.inner-card-back {
   backface-visibility: hidden;
   background-color: var(--light-color);
   border-radius: 0.625rem;
@@ -142,9 +152,10 @@ h1 button {
   transform: rotateX(180deg);
 }
 
-.inner-card-front::after, .inner-card-back::after {
-  content: '\f021  Flip';
-  font-family: 'Font Awesome 5 Free', 'Poppins', sans-serif;
+.inner-card-front::after,
+.inner-card-back::after {
+  content: "\f021  Flip";
+  font-family: "Font Awesome 5 Free", "Poppins", sans-serif;
   position: absolute;
   top: 0.625rem;
   right: 0.625rem;
@@ -166,7 +177,7 @@ h1 button {
 }
 
 .navigation .nav-button:hover {
-  transform: scale(1.2)
+  transform: scale(1.2);
 }
 
 .navigation p {

From 06abb3f54ba230c8ba681c4c6a2dc57b2e2b5b82 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 25 Jul 2025 09:31:27 +0200
Subject: [PATCH 06/40] chore: replace api

---
 073-lyrics search app/index.html |  1 -
 073-lyrics search app/script.js  | 72 +++++++++++---------------------
 2 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/073-lyrics search app/index.html b/073-lyrics search app/index.html
index 7c0fbdd..eb995e1 100644
--- a/073-lyrics search app/index.html	
+++ b/073-lyrics search app/index.html	
@@ -21,7 +21,6 @@ <h1>Lyrics Search</h1>
     <div id="result" class="container">
       <p>Results will be displayed here</p>
     </div>
-    <div id="more" class="container centered"></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/073-lyrics search app/script.js b/073-lyrics search app/script.js
index 02cbd29..8ff9206 100644
--- a/073-lyrics search app/script.js	
+++ b/073-lyrics search app/script.js	
@@ -1,67 +1,43 @@
 const form = document.getElementById("form");
 const search = document.getElementById("search");
 const result = document.getElementById("result");
-const more = document.getElementById("more");
 
-const apiURL = "https://api.lyrics.ovh";
+let lastSearchResults = [];
+const apiURL = "https://lrclib.net/api";
 
 async function searchSongs(term) {
-  const res = await fetch(`${apiURL}/suggest/${term}`);
+  const res = await fetch(`${apiURL}/search?q=${encodeURIComponent(term)}`);
   const data = await res.json();
-  showData(data);
+  lastSearchResults = data || [];
+  showData(lastSearchResults);
 }
 
-async function getLyrics(artist, songTitle) {
-  const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`);
-  const data = await res.json();
-  console.log(artist, songTitle);
-  if (data.error) {
-    showAlert(data.error);
-  } else {
-    const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, "<br>");
-
-    result.innerHTML = `
-        <h2><strong>${artist}</strong> - ${songTitle}</h2>
-        <span>${lyrics}</span>
-    `;
+function showLyricsByIndex(index) {
+  const song = lastSearchResults[index];
+  if (!song) {
+    showAlert("Lyrics not found.");
+    return;
   }
-  more.innerHTML = "";
-}
-
-async function getMoreSongs(url) {
-  const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); // proxy is required to avoid CORS issue
-  const data = await res.json();
-  showData(data);
+  const lyrics = song.plainLyrics || "No lyrics available.";
+  result.innerHTML = `
+    <h2><strong>${song.artistName}</strong> - ${song.trackName}</h2>
+    <span>${lyrics.replace(/(\r\n|\r|\n)/g, "<br>")}</span>
+  `;
 }
 
 function showData(data) {
   result.innerHTML = `
     <ul class="songs">
-      ${data.data
+      ${data
         .map(
-          (song) => `<li>
-      <span><strong>${song.artist.name}</strong> - ${song.title}</span>
-      <button class="btn" data-artist="${song.artist.name}" data-songtitle="${song.title}">Get Lyrics</button>
+          (song, index) => `<li>
+      <span><strong>${song.artistName}</strong> - ${song.trackName}</span>
+      <button class="btn" data-index="${index}">Get Lyrics</button>
     </li>`
         )
         .join("")}
     </ul>
     `;
-  // Pagination
-  if (data.prev || data.next) {
-    more.innerHTML = `
-                    ${
-                      data.prev
-                        ? `<button class="btn" onclick="getMoreSongs('${data.prev}')">Prev</button>`
-                        : ""
-                    }
-                    ${
-                      data.next
-                        ? `<button class="btn" onclick="getMoreSongs('${data.next}')">Next</button>`
-                        : ""
-                    }
-                    `;
-  } else more.innerHTML = "";
 }
 
 function showAlert(message) {
@@ -81,10 +57,12 @@ form.addEventListener("submit", (e) => {
 });
 result.addEventListener("click", (e) => {
   const clickedElement = e.target;
-  if (clickedElement.tagName === "BUTTON") {
-    const artist = clickedElement.getAttribute("data-artist");
-    const songTitle = clickedElement.getAttribute("data-songtitle");
-    getLyrics(artist, songTitle);
+  if (
+    clickedElement.tagName === "BUTTON" &&
+    clickedElement.hasAttribute("data-index")
+  ) {
+    const index = clickedElement.getAttribute("data-index");
+    showLyricsByIndex(index);
   }
 });
 

From c9f71fb8be32f73dc8f46d85f22ce5f4c0465ec8 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 26 Jul 2025 10:02:31 +0200
Subject: [PATCH 07/40] fix: richest people list

---
 077-sortable list/script.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/077-sortable list/script.js b/077-sortable list/script.js
index ff72df4..243913c 100644
--- a/077-sortable list/script.js	
+++ b/077-sortable list/script.js	
@@ -2,16 +2,16 @@ const draggableList = document.getElementById("draggable-list");
 const check = document.getElementById("check");
 
 const richestPeople = [
+  "Elon Musk",
+  "Larry Ellison",
+  "Mark Zuckerberg",
   "Jeff Bezos",
-  "Bill Gates",
+  "Larry Page",
+  "Sergey Brin",
   "Bernard Arnault",
+  "Jensen Huang",
   "Warren Buffett",
-  "Larry Ellison",
-  "Amancio Ortega",
-  "Mark Zuckerberg",
-  "Jim Walton",
-  "Alice Walton",
-  "S. Robson Walton",
+  "Steve Ballmer",
 ];
 
 const listItems = [];

From d627e1db4eb9818e53a69ca03e71d3545b05b72a Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 26 Jul 2025 13:23:16 +0200
Subject: [PATCH 08/40] chore: handle ff

---
 078-speak number guessing game/script.js | 90 +++++++++++++-----------
 1 file changed, 48 insertions(+), 42 deletions(-)

diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js
index 8c0f07c..db2f562 100644
--- a/078-speak number guessing game/script.js	
+++ b/078-speak number guessing game/script.js	
@@ -1,57 +1,63 @@
-const messageElement = document.getElementById("msg");
-
-const randomNumber = getRandomNumber();
-
-window.SpeechRecognition =
+const SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
-let recognition = new window.SpeechRecognition();
-recognition.lang = "en-US";
-recognition.start();
+if (!SpeechRecognition) {
+  document.body.innerHTML = `
+    <h2>Sorry, your browser does not support Speech Recognition.</h2>
+    <p>Please use Chrome or Edge for the best experience.</p>
+  `;
+} else {
+  const messageElement = document.getElementById("msg");
 
-function getRandomNumber() {
-  return Math.floor(Math.random() * 100) + 1;
-}
+  const randomNumber = getRandomNumber();
+  let recognition = new SpeechRecognition();
+  recognition.lang = "en-US";
+  recognition.start();
 
-function onSpeak(event) {
-  const message = event.results[0][0].transcript;
-  writeMessage(message);
-  checkNumber(message);
-}
+  function getRandomNumber() {
+    return Math.floor(Math.random() * 100) + 1;
+  }
+
+  function onSpeak(event) {
+    const message = event.results[0][0].transcript;
+    writeMessage(message);
+    checkNumber(message);
+  }
 
-function writeMessage(message) {
-  messageElement.innerHTML = `
+  function writeMessage(message) {
+    messageElement.innerHTML = `
     <div>You said: </div>
     <span class="box">${message}</span>
   `;
-}
-
-function checkNumber(message) {
-  const number = +message;
-  if (Number.isNaN(number)) {
-    messageElement.innerHTML += "<div>That is not a valid number</div>";
-    return;
-  }
-  if (number > 100 || number < 1) {
-    messageElement.innerHTML += "<div>Number must be between 1 and 100</div>";
-    return;
   }
-  if (number === randomNumber) {
-    document.body.innerHTML = `
+
+  function checkNumber(message) {
+    const number = +message;
+    if (Number.isNaN(number)) {
+      messageElement.innerHTML += "<div>That is not a valid number</div>";
+      return;
+    }
+    if (number > 100 || number < 1) {
+      messageElement.innerHTML += "<div>Number must be between 1 and 100</div>";
+      return;
+    }
+    if (number === randomNumber) {
+      document.body.innerHTML = `
           <h2>Congrats! You have guessed the number! <br><br>
           It was ${number}</h2>
           <button class="play-again" id="play-again">Play Again</button>
         `;
-  } else if (number > randomNumber) {
-    messageElement.innerHTML += "<div>GO LOWER</div>";
-  } else {
-    messageElement.innerHTML += "<div>GO HIGHER</div>";
+    } else if (number > randomNumber) {
+      messageElement.innerHTML += "<div>GO LOWER</div>";
+    } else {
+      messageElement.innerHTML += "<div>GO HIGHER</div>";
+    }
   }
-}
 
-// Event Listeners
-recognition.addEventListener("result", onSpeak);
-recognition.addEventListener("end", () => recognition.start());
+  // Event Listeners
+  recognition.addEventListener("result", onSpeak);
+  recognition.addEventListener("end", () => recognition.start());
 
-document.body.addEventListener("click", (e) => {
-  if (e.target.id == "play-again") history.go(0);
-});
+  document.body.addEventListener("click", (e) => {
+    if (e.target.id == "play-again") history.go(0);
+  });
+}

From 86810a8b52ebaf88aaf6e015750a26602c7dc76c Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 27 Jul 2025 11:48:29 +0200
Subject: [PATCH 09/40] fix: bg position

---
 082-parallax landing page/style.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 7817c55..9055ab3 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -69,8 +69,8 @@ ul {
 .section-top {
   min-height: 200px;
   padding-top: 20px;
-  background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center
-    bottom/cover;
+  background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center bottom /
+    100vw auto;
 }
 
 .section-top .content {
@@ -92,7 +92,8 @@ ul {
 
 .section-stream {
   min-height: 400px;
-  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top/cover;
+  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top /
+    100vw auto;
 }
 
 .section-stream h2 {

From 6619712f1fb732d74cd1a3e61fda5eda822dde39 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 27 Jul 2025 12:00:40 +0200
Subject: [PATCH 10/40] fix: bg under 768

---
 082-parallax landing page/style.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 9055ab3..2b4b12c 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -91,6 +91,7 @@ ul {
 }
 
 .section-stream {
+  margin-top: -1px;
   min-height: 400px;
   background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top /
     100vw auto;
@@ -103,7 +104,7 @@ ul {
 .section-stream .play {
   width: 50%;
   display: block;
-  margin: 30px auto;
+  margin: 0 auto 30px;
   opacity: 0.5;
 }
 

From 5b2421d950ec7958c0777c34783cc918ff338f98 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 28 Jul 2025 17:19:17 +0200
Subject: [PATCH 11/40] chore: update canvas-confetti

---
 088-promo code/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/088-promo code/index.html b/088-promo code/index.html
index be41ffc..bfd2e08 100644
--- a/088-promo code/index.html	
+++ b/088-promo code/index.html	
@@ -23,7 +23,7 @@ <h2>ILOVEYOU</h2>
         <span></span>
       </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>

From 148e0c8c5648d748b2293bc68446720173043c5b Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 29 Jul 2025 09:47:14 +0200
Subject: [PATCH 12/40] chore: @use

---
 089-one color UI/styles/_global.scss        |  55 +++++++
 089-one color UI/styles/_media-queries.scss |  73 ++++++++++
 089-one color UI/styles/style.css           | 154 ++++----------------
 089-one color UI/styles/style.css.map       |  14 +-
 089-one color UI/styles/style.min.css       |   1 +
 089-one color UI/styles/style.min.css.map   |   1 +
 089-one color UI/styles/style.scss          | 140 +-----------------
 7 files changed, 165 insertions(+), 273 deletions(-)
 create mode 100644 089-one color UI/styles/_global.scss
 create mode 100644 089-one color UI/styles/_media-queries.scss
 create mode 100644 089-one color UI/styles/style.min.css
 create mode 100644 089-one color UI/styles/style.min.css.map

diff --git a/089-one color UI/styles/_global.scss b/089-one color UI/styles/_global.scss
new file mode 100644
index 0000000..d51dc1c
--- /dev/null
+++ b/089-one color UI/styles/_global.scss	
@@ -0,0 +1,55 @@
+@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
+
+:root {
+  --primary-color: #f54538;
+  --black: #070707;
+  --gradient: radial-gradient(#525252, #131313);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  color: white;
+  font-family: "Montserrat", sans-serif;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-family: "Lobster", cursive;
+  font-weight: lighter;
+}
+
+h2 {
+  font-size: 8rem;
+  font-family: "Lobster", cursive;
+  font-weight: lighter;
+}
+
+h3 {
+  font-size: 3.5rem;
+}
+
+h4 {
+  font-size: 3rem;
+}
+
+p {
+  font-size: 2.5rem;
+}
+
+li {
+  font-size: 2rem;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
diff --git a/089-one color UI/styles/_media-queries.scss b/089-one color UI/styles/_media-queries.scss
new file mode 100644
index 0000000..9c09e18
--- /dev/null
+++ b/089-one color UI/styles/_media-queries.scss	
@@ -0,0 +1,73 @@
+@media screen and (max-width: 1200px) {
+  html {
+    font-size: 50%;
+  }
+
+  nav {
+    #logo {
+      flex: 1;
+    }
+    ul {
+      margin-left: 5rem;
+    }
+  }
+
+  .showcase {
+    grid-template-columns: 10% 1fr 10%;
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+
+    img,
+    h2,
+    .info {
+      grid-column: 2/3;
+      text-align: center;
+    }
+  }
+
+  .features {
+    align-items: center;
+
+    h2 {
+      margin-top: 5rem;
+    }
+
+    .cards {
+      flex-direction: column;
+      width: 60%;
+
+      .card {
+        margin: 5rem 0rem;
+      }
+    }
+  }
+
+  .soon {
+    overflow: hidden;
+
+    img {
+      width: 60%;
+    }
+
+    h2 {
+      font-size: 5rem;
+    }
+  }
+
+  .footer {
+    h1 {
+      flex: 1;
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .features {
+    .cards {
+      width: 100%;
+    }
+  }
+}
diff --git a/089-one color UI/styles/style.css b/089-one color UI/styles/style.css
index ec60ad7..a12343e 100644
--- a/089-one color UI/styles/style.css	
+++ b/089-one color UI/styles/style.css	
@@ -6,8 +6,7 @@
 }
 
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
@@ -60,7 +59,6 @@ a {
 
 .nav-container {
   background: var(--black);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -71,37 +69,20 @@ nav {
   margin: auto;
   min-height: 10vh;
   padding: 3rem 0rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  justify-content: space-between;
+  align-items: center;
 }
-
 nav ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   list-style: none;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
-
 nav #logo {
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
+  flex: 3;
   position: relative;
 }
-
 nav #logo::after {
   content: "";
   position: absolute;
@@ -111,11 +92,9 @@ nav #logo::after {
   height: 6rem;
   background: var(--primary-color);
   border-radius: 50%;
-  -webkit-transform: translate(-10%, -20%);
-          transform: translate(-10%, -20%);
+  transform: translate(-10%, -20%);
   mix-blend-mode: screen;
 }
-
 nav .order {
   background: var(--primary-color);
   padding: 1rem 2rem;
@@ -123,53 +102,31 @@ nav .order {
 }
 
 .showcase {
-  display: -ms-grid;
   display: grid;
   min-height: 90vh;
-  -ms-grid-columns: 10% (minmax(5rem, 1fr))[3] 10%;
-      grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
-  -ms-grid-rows: 1fr 2fr 1fr;
-      grid-template-rows: 1fr 2fr 1fr;
+  grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
+  grid-template-rows: 1fr 2fr 1fr;
 }
-
 .showcase h2 {
-  -ms-grid-column: 2;
-  -ms-grid-column-span: 1;
   grid-column: 2/3;
-  -ms-flex-item-align: end;
-      align-self: flex-end;
+  align-self: flex-end;
 }
-
 .showcase img {
-  -ms-grid-row: 2;
-  -ms-grid-row-span: 1;
   grid-row: 2/3;
-  -ms-grid-column: 3;
-  -ms-grid-column-span: 1;
   grid-column: 3/4;
   height: 110%;
   -o-object-fit: cover;
      object-fit: cover;
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
-  -ms-grid-column-align: center;
-      justify-self: center;
+  align-self: center;
+  justify-self: center;
 }
-
 .showcase .info {
-  -ms-grid-row: 3;
-  -ms-grid-row-span: 1;
   grid-row: 3/4;
-  -ms-grid-column: 4;
-  -ms-grid-column-span: 1;
   grid-column: 4/5;
 }
-
 .showcase .info h3 {
   padding-bottom: 3rem;
 }
-
 .showcase .info p {
   color: #c4c4c4;
 }
@@ -180,7 +137,6 @@ nav .order {
   z-index: 0;
   overflow: hidden;
 }
-
 .features-container .wave {
   position: absolute;
   left: 0;
@@ -193,51 +149,31 @@ nav .order {
   min-height: 90vh;
   width: 80%;
   margin: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
+  flex-direction: column;
+  justify-content: space-around;
 }
-
 .features .cards {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   color: var(--black);
 }
-
 .features .cards .card {
   background: white;
   margin: 0rem 5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   text-align: center;
   border-radius: 0.625rem;
   overflow: hidden;
 }
-
 .features .cards .card h4 {
   margin: 2rem 0rem 1rem;
 }
-
 .features .cards .card p {
   padding: 2rem;
   color: #686868;
 }
-
 .features .cards .card img {
   -o-object-fit: cover;
      object-fit: cover;
@@ -249,21 +185,17 @@ nav .order {
   position: relative;
   z-index: 0;
 }
-
 .soon img,
 .soon .circle,
 .soon h2 {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
-
 .soon .circle {
   z-index: -1;
 }
-
 .soon h2 {
   top: 25%;
 }
@@ -273,34 +205,18 @@ footer {
   background: var(--black);
   padding-left: 10%;
   padding-right: 10%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
-
 footer ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   list-style: none;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
-
 footer h1 {
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
+  flex: 3;
 }
 
 @media screen and (max-width: 1200px) {
@@ -308,16 +224,13 @@ footer h1 {
     font-size: 50%;
   }
   nav #logo {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
   nav ul {
     margin-left: 5rem;
   }
   .showcase {
-    -ms-grid-columns: 10% 1fr 10%;
-        grid-template-columns: 10% 1fr 10%;
+    grid-template-columns: 10% 1fr 10%;
   }
   .showcase img {
     width: 100%;
@@ -327,24 +240,17 @@ footer h1 {
   .showcase img,
   .showcase h2,
   .showcase .info {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 1;
     grid-column: 2/3;
     text-align: center;
   }
   .features {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+    align-items: center;
   }
   .features h2 {
     margin-top: 5rem;
   }
   .features .cards {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     width: 60%;
   }
   .features .cards .card {
@@ -360,15 +266,11 @@ footer h1 {
     font-size: 5rem;
   }
   .footer h1 {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
 }
-
 @media screen and (max-width: 640px) {
   .features .cards {
     width: 100%;
   }
-}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.css.map b/089-one color UI/styles/style.css.map
index 9630141..fb3b054 100644
--- a/089-one color UI/styles/style.css.map	
+++ b/089-one color UI/styles/style.css.map	
@@ -1,13 +1 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "style.scss",
-        "_home.scss",
-        "_features.scss",
-        "_soon.scss",
-        "_footer.scss"
-    ],
-    "names": [],
-    "file": "style.css"
-}
\ No newline at end of file
+{"version":3,"sources":["_global.scss","style.css","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css b/089-one color UI/styles/style.min.css
new file mode 100644
index 0000000..4a765cd
--- /dev/null
+++ b/089-one color UI/styles/style.min.css	
@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap";:root{--primary-color: #f54538;--black: #070707;--gradient: radial-gradient(#525252, #131313)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{color:#fff;font-family:"Montserrat",sans-serif}h1{font-size:2.5rem;font-family:"Lobster",cursive;font-weight:lighter}h2{font-size:8rem;font-family:"Lobster",cursive;font-weight:lighter}h3{font-size:3.5rem}h4{font-size:3rem}p{font-size:2.5rem}li{font-size:2rem}a{color:#fff;text-decoration:none}.home{background:var(--gradient)}.nav-container{background:var(--black);position:sticky;top:0;z-index:2}nav{width:80%;margin:auto;min-height:10vh;padding:3rem 0rem;display:flex;justify-content:space-between;align-items:center}nav ul{display:flex;justify-content:space-between;list-style:none;flex:1}nav #logo{flex:3;position:relative}nav #logo::after{content:"";position:absolute;top:0;left:0;width:6rem;height:6rem;background:var(--primary-color);border-radius:50%;transform:translate(-10%, -20%);mix-blend-mode:screen}nav .order{background:var(--primary-color);padding:1rem 2rem;border-radius:.625rem}.showcase{display:grid;min-height:90vh;grid-template-columns:10% repeat(3, minmax(5rem, 1fr)) 10%;grid-template-rows:1fr 2fr 1fr}.showcase h2{grid-column:2/3;align-self:flex-end}.showcase img{grid-row:2/3;grid-column:3/4;height:110%;-o-object-fit:cover;object-fit:cover;align-self:center;justify-self:center}.showcase .info{grid-row:3/4;grid-column:4/5}.showcase .info h3{padding-bottom:3rem}.showcase .info p{color:#c4c4c4}.features-container{background:#323232;position:relative;z-index:0;overflow:hidden}.features-container .wave{position:absolute;left:0;bottom:-25%;width:100%;z-index:-1}.features{min-height:90vh;width:80%;margin:auto;display:flex;flex-direction:column;justify-content:space-around}.features .cards{display:flex;justify-content:space-between;color:var(--black)}.features .cards .card{background:#fff;margin:0rem 5rem;display:flex;flex-direction:column;text-align:center;border-radius:.625rem;overflow:hidden}.features .cards .card h4{margin:2rem 0rem 1rem}.features .cards .card p{padding:2rem;color:#686868}.features .cards .card img{-o-object-fit:cover;object-fit:cover}.soon{background:var(--gradient);min-height:80vh;position:relative;z-index:0}.soon img,.soon .circle,.soon h2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.soon .circle{z-index:-1}.soon h2{top:25%}footer{min-height:10vh;background:var(--black);padding-left:10%;padding-right:10%;display:flex;align-items:center;justify-content:space-between}footer ul{display:flex;flex:1;list-style:none;justify-content:space-between}footer h1{flex:3}@media screen and (max-width: 1200px){html{font-size:50%}nav #logo{flex:1}nav ul{margin-left:5rem}.showcase{grid-template-columns:10% 1fr 10%}.showcase img{width:100%;-o-object-fit:contain;object-fit:contain}.showcase img,.showcase h2,.showcase .info{grid-column:2/3;text-align:center}.features{align-items:center}.features h2{margin-top:5rem}.features .cards{flex-direction:column;width:60%}.features .cards .card{margin:5rem 0rem}.soon{overflow:hidden}.soon img{width:60%}.soon h2{font-size:5rem}.footer h1{flex:1}}@media screen and (max-width: 640px){.features .cards{width:100%}}/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css.map b/089-one color UI/styles/style.min.css.map
new file mode 100644
index 0000000..728443a
--- /dev/null
+++ b/089-one color UI/styles/style.min.css.map	
@@ -0,0 +1 @@
+{"version":3,"sources":["_global.scss","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,qGAAA,CAER,MACE,wBAAA,CACA,gBAAA,CACA,6CAAA,CAGF,EACE,qBAAA,CACA,QAAA,CACA,SAAA,CAGF,KACE,eAAA,CAGF,KACE,UAAA,CACA,mCAAA,CAGF,GACE,gBAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,cAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,UAAA,CACA,oBAAA,CCrDF,MACE,0BAAA,CAGF,eACE,uBAAA,CACA,eAAA,CACA,KAAA,CACA,SAAA,CAGF,IACE,SAAA,CACA,WAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,OACE,YAAA,CACA,6BAAA,CACA,eAAA,CACA,MAAA,CAGF,UACE,MAAA,CACA,iBAAA,CACA,iBACE,UAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,WAAA,CACA,+BAAA,CACA,iBAAA,CACA,+BAAA,CACA,qBAAA,CAGJ,WACE,+BAAA,CACA,iBAAA,CACA,qBAAA,CAIJ,UACE,YAAA,CACA,eAAA,CACA,0DAAA,CACA,8BAAA,CAEA,aACE,eAAA,CACA,mBAAA,CAGF,cACE,YAAA,CACA,eAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CACA,iBAAA,CACA,mBAAA,CAGF,gBACE,YAAA,CACA,eAAA,CAEA,mBACE,mBAAA,CAGF,kBACE,aAAA,CC/EN,oBACE,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,eAAA,CAEA,0BACE,iBAAA,CACA,MAAA,CACA,WAAA,CACA,UAAA,CACA,UAAA,CAIJ,UACE,eAAA,CACA,SAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,4BAAA,CAEA,iBACE,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,uBACE,eAAA,CACA,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,qBAAA,CACA,eAAA,CAEA,0BACE,qBAAA,CAGF,yBACE,YAAA,CACA,aAAA,CAGF,2BACE,mBAAA,CAAA,gBAAA,CC/CR,MACE,0BAAA,CACA,eAAA,CACA,iBAAA,CACA,SAAA,CAEA,iCAGE,iBAAA,CACA,OAAA,CACA,QAAA,CACA,+BAAA,CAGF,cACE,UAAA,CAGF,SACE,OAAA,CCpBJ,OACE,eAAA,CACA,uBAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CAEA,UACE,YAAA,CACA,MAAA,CACA,eAAA,CACA,6BAAA,CAGF,UACE,MAAA,CCjBJ,sCACE,KACE,aAAA,CAIA,UACE,MAAA,CAEF,OACE,gBAAA,CAIJ,UACE,iCAAA,CAEA,cACE,UAAA,CACA,qBAAA,CAAA,kBAAA,CAGF,2CAGE,eAAA,CACA,iBAAA,CAIJ,UACE,kBAAA,CAEA,aACE,eAAA,CAGF,iBACE,qBAAA,CACA,SAAA,CAEA,uBACE,gBAAA,CAKN,MACE,eAAA,CAEA,UACE,SAAA,CAGF,SACE,cAAA,CAKF,WACE,MAAA,CAAA,CAKN,qCAEI,iBACE,UAAA,CAAA","file":"style.min.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.scss b/089-one color UI/styles/style.scss
index ecfdfb1..331af9a 100644
--- a/089-one color UI/styles/style.scss	
+++ b/089-one color UI/styles/style.scss	
@@ -1,134 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
-
-:root {
-  --primary-color: #f54538;
-  --black: #070707;
-  --gradient: radial-gradient(#525252, #131313);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  color: white;
-  font-family: "Montserrat", sans-serif;
-}
-
-h1 {
-  font-size: 2.5rem;
-  font-family: "Lobster", cursive;
-  font-weight: lighter;
-}
-
-h2 {
-  font-size: 8rem;
-  font-family: "Lobster", cursive;
-  font-weight: lighter;
-}
-
-h3 {
-  font-size: 3.5rem;
-}
-
-h4 {
-  font-size: 3rem;
-}
-
-p {
-  font-size: 2.5rem;
-}
-
-li {
-  font-size: 2rem;
-}
-
-a {
-  color: white;
-  text-decoration: none;
-}
-
-@import "home";
-@import "features";
-@import "soon";
-@import "footer";
-
-@media screen and (max-width: 1200px) {
-  html {
-    font-size: 50%;
-  }
-
-  nav {
-    #logo {
-      flex: 1;
-    }
-    ul {
-      margin-left: 5rem;
-    }
-  }
-
-  .showcase {
-    grid-template-columns: 10% 1fr 10%;
-
-    img {
-      width: 100%;
-      object-fit: contain;
-    }
-
-    img,
-    h2,
-    .info {
-      grid-column: 2/3;
-      text-align: center;
-    }
-  }
-
-  .features {
-    align-items: center;
-
-    h2 {
-      margin-top: 5rem;
-    }
-
-    .cards {
-      flex-direction: column;
-      width: 60%;
-
-      .card {
-        margin: 5rem 0rem;
-      }
-    }
-  }
-
-  .soon {
-    overflow: hidden;
-
-    img {
-      width: 60%;
-    }
-
-    h2 {
-      font-size: 5rem;
-    }
-  }
-
-  .footer {
-    h1 {
-      flex: 1;
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .features {
-    .cards {
-      width: 100%;
-    }
-  }
-}
+@use "global";
+@use "home";
+@use "features";
+@use "soon";
+@use "footer";
+@use "media-queries";

From 316ab18029adc90d337fdd44b6cef526b31e2c67 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 29 Jul 2025 18:49:55 +0200
Subject: [PATCH 13/40] fix: social icons

---
 092-music streaming service/style.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/092-music streaming service/style.css b/092-music streaming service/style.css
index aa8985f..b9e2464 100644
--- a/092-music streaming service/style.css	
+++ b/092-music streaming service/style.css	
@@ -65,14 +65,21 @@ body {
   font-weight: bold;
 }
 
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
 .social-link svg {
   width: 1em;
-  margin-right: 0.25rem;
 }
 
 .main-footer .container {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 /* layout */

From 0614e8c12d10bf399514f175f36c1c4d6dd81804 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 07:23:30 +0200
Subject: [PATCH 14/40] fix: link color

---
 101-cascade layers/styles/content.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/101-cascade layers/styles/content.css b/101-cascade layers/styles/content.css
index 74171c8..a0c0586 100644
--- a/101-cascade layers/styles/content.css	
+++ b/101-cascade layers/styles/content.css	
@@ -1,3 +1,4 @@
+a,
 h1,
 h2,
 h3,
@@ -23,4 +24,4 @@ article footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
\ No newline at end of file
+}

From 6a90994f6b8ce720617833244f4cf10b61c6db90 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:10:14 +0200
Subject: [PATCH 15/40] chore: update to gsap3

---
 093-creative portfolio/index.html |  11 +--
 093-creative portfolio/script.js  | 110 ++++++++++++++++--------------
 2 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/093-creative portfolio/index.html b/093-creative portfolio/index.html
index 3664d16..a506690 100644
--- a/093-creative portfolio/index.html	
+++ b/093-creative portfolio/index.html	
@@ -197,16 +197,7 @@ <h3>03</h3>
         </aside>
       </main>
     </div>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
-      integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U="
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"
-      integrity="sha256-fIkQKQryItPqpaWZbtwG25Jp2p5ujqo/NwJrfqAB+Qk="
-      crossorigin="anonymous"
-    ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/093-creative portfolio/script.js b/093-creative portfolio/script.js
index f36983c..e973e3f 100644
--- a/093-creative portfolio/script.js	
+++ b/093-creative portfolio/script.js	
@@ -9,21 +9,26 @@ function init() {
   ];
   let current = 0;
   let scrollSlide = 0;
+  let isAnimating = false;
+
+  function updateActiveDot(index) {
+    slides.forEach((slide) => slide.classList.remove("active"));
+    slides[index].classList.add("active");
+  }
 
   slides.forEach((slide, index) => {
     slide.addEventListener("click", function () {
-      changeDots(this);
+      if (isAnimating) return;
+      updateActiveDot(index);
       nextSlide(index);
       scrollSlide = index;
     });
   });
 
-  function changeDots(dot) {
-    slides.forEach((slide) => slide.classList.remove("active"));
-    dot.classList.add("active");
-  }
+  async function nextSlide(pageNumber) {
+    if (isAnimating || pageNumber === current) return;
+    isAnimating = true;
 
-  function nextSlide(pageNumber) {
     const nextPage = pages[pageNumber];
     const currentPage = pages[current];
     const nextLeft = nextPage.querySelector(".hero .model-left");
@@ -33,81 +38,84 @@ function init() {
     const nextText = nextPage.querySelector(".details");
     const portfolio = document.querySelector(".portfolio");
 
-    const tl = new TimelineMax({
-      // disable clicks during animations
-      onStart: function () {
-        slides.forEach((slide) => (slide.style.pointerEvents = "none"));
-      },
-      onComplete: function () {
-        slides.forEach((slide) => (slide.style.pointerEvents = "all"));
-      },
-    });
-
-    tl.fromTo(currentLeft, 0.3, { y: "-10%" }, { y: "-100%" })
-      .fromTo(currentRight, 0.3, { y: "10%" }, { y: "-100%" }, "-=0.2")
-      .to(portfolio, 0.3, { backgroundImage: backgrounds[pageNumber] })
+    const tl = gsap.timeline({});
+    tl.fromTo(currentLeft, { y: "-10%" }, { duration: 0.3, y: "-100%" })
+      .fromTo(
+        currentRight,
+        { y: "10%" },
+        { duration: 0.3, y: "-100%" },
+        "-=0.2"
+      )
+      .to(portfolio, {
+        duration: 0.3,
+        backgroundImage: backgrounds[pageNumber],
+      })
       .fromTo(
         currentPage,
-        0.3,
-        { opacity: 1, pointerEvents: "all" },
-        { opacity: 0, pointerEvents: "none" }
+        { opacity: 1 },
+        { duration: 0.3, opacity: 0, pointerEvents: "none" }
       )
       .fromTo(
         nextPage,
-        0.3,
         { opacity: 0, pointerEvents: "none" },
-        { opacity: 1, pointerEvents: "all" },
+        { duration: 0.3, opacity: 1, pointerEvents: "all" },
         "-=0.6"
       )
-      .fromTo(nextLeft, 0.3, { y: "-100%" }, { y: "-10%" }, "-=0.6")
-      .fromTo(nextRight, 0.3, { y: "-100%" }, { y: "10%" }, "-=0.8")
-      .fromTo(nextText, 0.3, { opacity: 0, y: 0 }, { opacity: 1, y: 0 })
+      .fromTo(nextLeft, { y: "-100%" }, { duration: 0.3, y: "-10%" }, "-=0.6")
+      .fromTo(nextRight, { y: "-100%" }, { duration: 0.3, y: "10%" }, "-=0.8")
+      .fromTo(nextText, { opacity: 0, y: 0 }, { duration: 0.3, opacity: 1 })
       .set(nextLeft, { clearProps: "all" })
       .set(nextRight, { clearProps: "all" });
+
+    await tl;
+
     current = pageNumber;
+    isAnimating = false;
   }
   document.addEventListener("wheel", throttle(scrollChange, 1500));
-  document.addEventListener("touchmove", throttle(scrollChange, 1500));
-
-  function swithDots(dotNumber) {
-    const activeDot = document.querySelectorAll(".slide")[dotNumber];
-    slides.forEach((slide) => slide.classList.remove("active"));
-    activeDot.classList.add("active");
-  }
 
   function scrollChange(e) {
+    if (isAnimating) return;
     e.deltaY > 0 ? (scrollSlide += 1) : (scrollSlide -= 1);
-    // reset
     if (scrollSlide > 2) scrollSlide = 0;
     if (scrollSlide < 0) scrollSlide = 2;
-    swithDots(scrollSlide);
+    updateActiveDot(scrollSlide);
     nextSlide(scrollSlide);
   }
 
   //   menu
   const hamburger = document.querySelector(".menu");
-  const hamburgerLines = document.querySelectorAll(".menu line");
-  const navOpen = document.querySelector(".nav-open");
-  const contact = document.querySelector(".contact");
-  const social = document.querySelector(".social");
-  const logo = document.querySelector(".logo");
-
-  const tl = new TimelineMax({ paused: true, reversed: true });
 
-  tl.to(navOpen, 0.5, { y: 0 })
-    .fromTo(contact, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.1")
-    .fromTo(social, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.5")
-    .fromTo(logo, 0.2, { color: "var(--white)" }, { color: "black" }, "-=1")
+  const menuTl = gsap.timeline({ paused: true, reversed: true });
+  menuTl
+    .to(".nav-open", { duration: 0.5, y: 0 })
+    .fromTo(
+      ".contact",
+      { opacity: 0, y: 10 },
+      { duration: 0.5, opacity: 1, y: 0 },
+      "-=0.1"
+    )
+    .fromTo(
+      ".social",
+      { opacity: 0, y: 10 },
+      { duration: 0.5, opacity: 1, y: 0 },
+      "-=0.5"
+    )
+    .fromTo(
+      ".logo",
+      { color: "var(--white)" },
+      { duration: 0.2, color: "black" },
+      "-=1"
+    )
     .fromTo(
-      hamburgerLines,
-      0.2,
+      ".menu line",
       { stroke: "var(--white)" },
-      { stroke: "black" },
+      { duration: 0.2, stroke: "black" },
       "-=1"
     );
 
   hamburger.addEventListener("click", () => {
-    tl.reversed() ? tl.play() : tl.reverse();
+    menuTl.reversed() ? menuTl.play() : menuTl.reverse();
   });
 }
 

From 077a6a2b032eb24949d223f387c609c3e4c52b57 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:28:11 +0200
Subject: [PATCH 16/40] fix: remove throttle

---
 093-creative portfolio/script.js | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/093-creative portfolio/script.js b/093-creative portfolio/script.js
index e973e3f..81165ee 100644
--- a/093-creative portfolio/script.js	
+++ b/093-creative portfolio/script.js	
@@ -72,7 +72,7 @@ function init() {
     current = pageNumber;
     isAnimating = false;
   }
-  document.addEventListener("wheel", throttle(scrollChange, 1500));
+  document.addEventListener("wheel", scrollChange);
 
   function scrollChange(e) {
     if (isAnimating) return;
@@ -119,18 +119,4 @@ function init() {
   });
 }
 
-// avoid multiple firing
-function throttle(func, limit) {
-  let inThrottle;
-  return function () {
-    const args = arguments;
-    const context = this;
-    if (!inThrottle) {
-      func.apply(context, args);
-      inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
-    }
-  };
-}
-
 init();

From 60d2077a1d132e9d084de2383bdeaeb398351228 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 18:05:16 +0200
Subject: [PATCH 17/40] refacto: gsap3 syntax

---
 099-parallax website/script.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/099-parallax website/script.js b/099-parallax website/script.js
index a95d704..2defb35 100644
--- a/099-parallax website/script.js	
+++ b/099-parallax website/script.js	
@@ -1,19 +1,18 @@
-let controller = new ScrollMagic.Controller();
-let timeline = new TimelineMax();
+const controller = new ScrollMagic.Controller();
+const tl = gsap.timeline();
 
-timeline
-  .to(".rock", 10, { y: -300 })
-  .to(".girl", 10, { y: -200 }, "-=10")
-  .fromTo(".background", { y: -50 }, { y: 0, duration: 10 }, "-=10")
-  .to(".content", 10, { top: "0%" }, "-=10")
-  .fromTo(".content-images", { opacity: 0 }, { opacity: 1, duration: 3 })
-  .fromTo(".text", { opacity: 0 }, { opacity: 1, duration: 3 });
+tl.to(".rock", { duration: 10, y: -300 })
+  .to(".girl", { duration: 10, y: -200 }, "-=10")
+  .fromTo(".background", { y: -50 }, { duration: 10, y: 0 }, "-=10")
+  .to(".content", { duration: 10, top: "0%" }, "-=10")
+  .fromTo(".content-images", { opacity: 0 }, { duration: 3, opacity: 1 })
+  .fromTo(".text", { opacity: 0 }, { duration: 3, opacity: 1 });
 
 let scene = new ScrollMagic.Scene({
   triggerElement: "section",
   duration: "300%",
   triggerHook: 0,
 })
-  .setTween(timeline)
+  .setTween(tl)
   .setPin("section")
   .addTo(controller);

From 1b429b74fd52cc838d829b3d59f217b59773ec01 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 23:05:49 +0200
Subject: [PATCH 18/40] fix: image width

---
 099-parallax website/style.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index 48a6b8c..fe8848b 100644
--- a/099-parallax website/style.css	
+++ b/099-parallax website/style.css	
@@ -50,10 +50,19 @@ nav {
   align-items: center;
   min-height: 60vh;
   text-align: center;
+  gap: 1rem;
+}
+
+.content-images img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
 }
 
 .text {
-  padding: 2rem 20rem;
+  max-width: 800px;
+  margin: 2rem auto;
   font-size: 1.1rem;
 }
 

From 2cde7fadcf9d670769792f7f8f94477147332948 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 31 Jul 2025 06:13:19 +0200
Subject: [PATCH 19/40] fix: mb images

---
 099-parallax website/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index fe8848b..34f5381 100644
--- a/099-parallax website/style.css	
+++ b/099-parallax website/style.css	
@@ -57,7 +57,7 @@ nav {
   max-width: 100%;
   height: auto;
   display: block;
-  margin: 0 auto;
+  margin: 0 auto 1rem;
 }
 
 .text {

From 43a66d928f7e93dedcdd8dbef76e0c1abe5ad71f Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 29 Jul 2025 09:47:14 +0200
Subject: [PATCH 20/40] chore: remove accidental mention

---
 089-one color UI/styles/_global.scss        |  55 +++++++
 089-one color UI/styles/_media-queries.scss |  73 ++++++++++
 089-one color UI/styles/style.css           | 154 ++++----------------
 089-one color UI/styles/style.css.map       |  14 +-
 089-one color UI/styles/style.min.css       |   1 +
 089-one color UI/styles/style.min.css.map   |   1 +
 089-one color UI/styles/style.scss          | 140 +-----------------
 7 files changed, 165 insertions(+), 273 deletions(-)
 create mode 100644 089-one color UI/styles/_global.scss
 create mode 100644 089-one color UI/styles/_media-queries.scss
 create mode 100644 089-one color UI/styles/style.min.css
 create mode 100644 089-one color UI/styles/style.min.css.map

diff --git a/089-one color UI/styles/_global.scss b/089-one color UI/styles/_global.scss
new file mode 100644
index 0000000..d51dc1c
--- /dev/null
+++ b/089-one color UI/styles/_global.scss	
@@ -0,0 +1,55 @@
+@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
+
+:root {
+  --primary-color: #f54538;
+  --black: #070707;
+  --gradient: radial-gradient(#525252, #131313);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  color: white;
+  font-family: "Montserrat", sans-serif;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-family: "Lobster", cursive;
+  font-weight: lighter;
+}
+
+h2 {
+  font-size: 8rem;
+  font-family: "Lobster", cursive;
+  font-weight: lighter;
+}
+
+h3 {
+  font-size: 3.5rem;
+}
+
+h4 {
+  font-size: 3rem;
+}
+
+p {
+  font-size: 2.5rem;
+}
+
+li {
+  font-size: 2rem;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
diff --git a/089-one color UI/styles/_media-queries.scss b/089-one color UI/styles/_media-queries.scss
new file mode 100644
index 0000000..9c09e18
--- /dev/null
+++ b/089-one color UI/styles/_media-queries.scss	
@@ -0,0 +1,73 @@
+@media screen and (max-width: 1200px) {
+  html {
+    font-size: 50%;
+  }
+
+  nav {
+    #logo {
+      flex: 1;
+    }
+    ul {
+      margin-left: 5rem;
+    }
+  }
+
+  .showcase {
+    grid-template-columns: 10% 1fr 10%;
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+
+    img,
+    h2,
+    .info {
+      grid-column: 2/3;
+      text-align: center;
+    }
+  }
+
+  .features {
+    align-items: center;
+
+    h2 {
+      margin-top: 5rem;
+    }
+
+    .cards {
+      flex-direction: column;
+      width: 60%;
+
+      .card {
+        margin: 5rem 0rem;
+      }
+    }
+  }
+
+  .soon {
+    overflow: hidden;
+
+    img {
+      width: 60%;
+    }
+
+    h2 {
+      font-size: 5rem;
+    }
+  }
+
+  .footer {
+    h1 {
+      flex: 1;
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .features {
+    .cards {
+      width: 100%;
+    }
+  }
+}
diff --git a/089-one color UI/styles/style.css b/089-one color UI/styles/style.css
index ec60ad7..a12343e 100644
--- a/089-one color UI/styles/style.css	
+++ b/089-one color UI/styles/style.css	
@@ -6,8 +6,7 @@
 }
 
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
@@ -60,7 +59,6 @@ a {
 
 .nav-container {
   background: var(--black);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -71,37 +69,20 @@ nav {
   margin: auto;
   min-height: 10vh;
   padding: 3rem 0rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  justify-content: space-between;
+  align-items: center;
 }
-
 nav ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   list-style: none;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
-
 nav #logo {
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
+  flex: 3;
   position: relative;
 }
-
 nav #logo::after {
   content: "";
   position: absolute;
@@ -111,11 +92,9 @@ nav #logo::after {
   height: 6rem;
   background: var(--primary-color);
   border-radius: 50%;
-  -webkit-transform: translate(-10%, -20%);
-          transform: translate(-10%, -20%);
+  transform: translate(-10%, -20%);
   mix-blend-mode: screen;
 }
-
 nav .order {
   background: var(--primary-color);
   padding: 1rem 2rem;
@@ -123,53 +102,31 @@ nav .order {
 }
 
 .showcase {
-  display: -ms-grid;
   display: grid;
   min-height: 90vh;
-  -ms-grid-columns: 10% (minmax(5rem, 1fr))[3] 10%;
-      grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
-  -ms-grid-rows: 1fr 2fr 1fr;
-      grid-template-rows: 1fr 2fr 1fr;
+  grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
+  grid-template-rows: 1fr 2fr 1fr;
 }
-
 .showcase h2 {
-  -ms-grid-column: 2;
-  -ms-grid-column-span: 1;
   grid-column: 2/3;
-  -ms-flex-item-align: end;
-      align-self: flex-end;
+  align-self: flex-end;
 }
-
 .showcase img {
-  -ms-grid-row: 2;
-  -ms-grid-row-span: 1;
   grid-row: 2/3;
-  -ms-grid-column: 3;
-  -ms-grid-column-span: 1;
   grid-column: 3/4;
   height: 110%;
   -o-object-fit: cover;
      object-fit: cover;
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
-  -ms-grid-column-align: center;
-      justify-self: center;
+  align-self: center;
+  justify-self: center;
 }
-
 .showcase .info {
-  -ms-grid-row: 3;
-  -ms-grid-row-span: 1;
   grid-row: 3/4;
-  -ms-grid-column: 4;
-  -ms-grid-column-span: 1;
   grid-column: 4/5;
 }
-
 .showcase .info h3 {
   padding-bottom: 3rem;
 }
-
 .showcase .info p {
   color: #c4c4c4;
 }
@@ -180,7 +137,6 @@ nav .order {
   z-index: 0;
   overflow: hidden;
 }
-
 .features-container .wave {
   position: absolute;
   left: 0;
@@ -193,51 +149,31 @@ nav .order {
   min-height: 90vh;
   width: 80%;
   margin: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
+  flex-direction: column;
+  justify-content: space-around;
 }
-
 .features .cards {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   color: var(--black);
 }
-
 .features .cards .card {
   background: white;
   margin: 0rem 5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   text-align: center;
   border-radius: 0.625rem;
   overflow: hidden;
 }
-
 .features .cards .card h4 {
   margin: 2rem 0rem 1rem;
 }
-
 .features .cards .card p {
   padding: 2rem;
   color: #686868;
 }
-
 .features .cards .card img {
   -o-object-fit: cover;
      object-fit: cover;
@@ -249,21 +185,17 @@ nav .order {
   position: relative;
   z-index: 0;
 }
-
 .soon img,
 .soon .circle,
 .soon h2 {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
-
 .soon .circle {
   z-index: -1;
 }
-
 .soon h2 {
   top: 25%;
 }
@@ -273,34 +205,18 @@ footer {
   background: var(--black);
   padding-left: 10%;
   padding-right: 10%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
-
 footer ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   list-style: none;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
-
 footer h1 {
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
+  flex: 3;
 }
 
 @media screen and (max-width: 1200px) {
@@ -308,16 +224,13 @@ footer h1 {
     font-size: 50%;
   }
   nav #logo {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
   nav ul {
     margin-left: 5rem;
   }
   .showcase {
-    -ms-grid-columns: 10% 1fr 10%;
-        grid-template-columns: 10% 1fr 10%;
+    grid-template-columns: 10% 1fr 10%;
   }
   .showcase img {
     width: 100%;
@@ -327,24 +240,17 @@ footer h1 {
   .showcase img,
   .showcase h2,
   .showcase .info {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 1;
     grid-column: 2/3;
     text-align: center;
   }
   .features {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+    align-items: center;
   }
   .features h2 {
     margin-top: 5rem;
   }
   .features .cards {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     width: 60%;
   }
   .features .cards .card {
@@ -360,15 +266,11 @@ footer h1 {
     font-size: 5rem;
   }
   .footer h1 {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
 }
-
 @media screen and (max-width: 640px) {
   .features .cards {
     width: 100%;
   }
-}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.css.map b/089-one color UI/styles/style.css.map
index 9630141..fb3b054 100644
--- a/089-one color UI/styles/style.css.map	
+++ b/089-one color UI/styles/style.css.map	
@@ -1,13 +1 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "style.scss",
-        "_home.scss",
-        "_features.scss",
-        "_soon.scss",
-        "_footer.scss"
-    ],
-    "names": [],
-    "file": "style.css"
-}
\ No newline at end of file
+{"version":3,"sources":["_global.scss","style.css","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css b/089-one color UI/styles/style.min.css
new file mode 100644
index 0000000..4a765cd
--- /dev/null
+++ b/089-one color UI/styles/style.min.css	
@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap";:root{--primary-color: #f54538;--black: #070707;--gradient: radial-gradient(#525252, #131313)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{color:#fff;font-family:"Montserrat",sans-serif}h1{font-size:2.5rem;font-family:"Lobster",cursive;font-weight:lighter}h2{font-size:8rem;font-family:"Lobster",cursive;font-weight:lighter}h3{font-size:3.5rem}h4{font-size:3rem}p{font-size:2.5rem}li{font-size:2rem}a{color:#fff;text-decoration:none}.home{background:var(--gradient)}.nav-container{background:var(--black);position:sticky;top:0;z-index:2}nav{width:80%;margin:auto;min-height:10vh;padding:3rem 0rem;display:flex;justify-content:space-between;align-items:center}nav ul{display:flex;justify-content:space-between;list-style:none;flex:1}nav #logo{flex:3;position:relative}nav #logo::after{content:"";position:absolute;top:0;left:0;width:6rem;height:6rem;background:var(--primary-color);border-radius:50%;transform:translate(-10%, -20%);mix-blend-mode:screen}nav .order{background:var(--primary-color);padding:1rem 2rem;border-radius:.625rem}.showcase{display:grid;min-height:90vh;grid-template-columns:10% repeat(3, minmax(5rem, 1fr)) 10%;grid-template-rows:1fr 2fr 1fr}.showcase h2{grid-column:2/3;align-self:flex-end}.showcase img{grid-row:2/3;grid-column:3/4;height:110%;-o-object-fit:cover;object-fit:cover;align-self:center;justify-self:center}.showcase .info{grid-row:3/4;grid-column:4/5}.showcase .info h3{padding-bottom:3rem}.showcase .info p{color:#c4c4c4}.features-container{background:#323232;position:relative;z-index:0;overflow:hidden}.features-container .wave{position:absolute;left:0;bottom:-25%;width:100%;z-index:-1}.features{min-height:90vh;width:80%;margin:auto;display:flex;flex-direction:column;justify-content:space-around}.features .cards{display:flex;justify-content:space-between;color:var(--black)}.features .cards .card{background:#fff;margin:0rem 5rem;display:flex;flex-direction:column;text-align:center;border-radius:.625rem;overflow:hidden}.features .cards .card h4{margin:2rem 0rem 1rem}.features .cards .card p{padding:2rem;color:#686868}.features .cards .card img{-o-object-fit:cover;object-fit:cover}.soon{background:var(--gradient);min-height:80vh;position:relative;z-index:0}.soon img,.soon .circle,.soon h2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.soon .circle{z-index:-1}.soon h2{top:25%}footer{min-height:10vh;background:var(--black);padding-left:10%;padding-right:10%;display:flex;align-items:center;justify-content:space-between}footer ul{display:flex;flex:1;list-style:none;justify-content:space-between}footer h1{flex:3}@media screen and (max-width: 1200px){html{font-size:50%}nav #logo{flex:1}nav ul{margin-left:5rem}.showcase{grid-template-columns:10% 1fr 10%}.showcase img{width:100%;-o-object-fit:contain;object-fit:contain}.showcase img,.showcase h2,.showcase .info{grid-column:2/3;text-align:center}.features{align-items:center}.features h2{margin-top:5rem}.features .cards{flex-direction:column;width:60%}.features .cards .card{margin:5rem 0rem}.soon{overflow:hidden}.soon img{width:60%}.soon h2{font-size:5rem}.footer h1{flex:1}}@media screen and (max-width: 640px){.features .cards{width:100%}}/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css.map b/089-one color UI/styles/style.min.css.map
new file mode 100644
index 0000000..728443a
--- /dev/null
+++ b/089-one color UI/styles/style.min.css.map	
@@ -0,0 +1 @@
+{"version":3,"sources":["_global.scss","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,qGAAA,CAER,MACE,wBAAA,CACA,gBAAA,CACA,6CAAA,CAGF,EACE,qBAAA,CACA,QAAA,CACA,SAAA,CAGF,KACE,eAAA,CAGF,KACE,UAAA,CACA,mCAAA,CAGF,GACE,gBAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,cAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,UAAA,CACA,oBAAA,CCrDF,MACE,0BAAA,CAGF,eACE,uBAAA,CACA,eAAA,CACA,KAAA,CACA,SAAA,CAGF,IACE,SAAA,CACA,WAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,OACE,YAAA,CACA,6BAAA,CACA,eAAA,CACA,MAAA,CAGF,UACE,MAAA,CACA,iBAAA,CACA,iBACE,UAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,WAAA,CACA,+BAAA,CACA,iBAAA,CACA,+BAAA,CACA,qBAAA,CAGJ,WACE,+BAAA,CACA,iBAAA,CACA,qBAAA,CAIJ,UACE,YAAA,CACA,eAAA,CACA,0DAAA,CACA,8BAAA,CAEA,aACE,eAAA,CACA,mBAAA,CAGF,cACE,YAAA,CACA,eAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CACA,iBAAA,CACA,mBAAA,CAGF,gBACE,YAAA,CACA,eAAA,CAEA,mBACE,mBAAA,CAGF,kBACE,aAAA,CC/EN,oBACE,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,eAAA,CAEA,0BACE,iBAAA,CACA,MAAA,CACA,WAAA,CACA,UAAA,CACA,UAAA,CAIJ,UACE,eAAA,CACA,SAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,4BAAA,CAEA,iBACE,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,uBACE,eAAA,CACA,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,qBAAA,CACA,eAAA,CAEA,0BACE,qBAAA,CAGF,yBACE,YAAA,CACA,aAAA,CAGF,2BACE,mBAAA,CAAA,gBAAA,CC/CR,MACE,0BAAA,CACA,eAAA,CACA,iBAAA,CACA,SAAA,CAEA,iCAGE,iBAAA,CACA,OAAA,CACA,QAAA,CACA,+BAAA,CAGF,cACE,UAAA,CAGF,SACE,OAAA,CCpBJ,OACE,eAAA,CACA,uBAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CAEA,UACE,YAAA,CACA,MAAA,CACA,eAAA,CACA,6BAAA,CAGF,UACE,MAAA,CCjBJ,sCACE,KACE,aAAA,CAIA,UACE,MAAA,CAEF,OACE,gBAAA,CAIJ,UACE,iCAAA,CAEA,cACE,UAAA,CACA,qBAAA,CAAA,kBAAA,CAGF,2CAGE,eAAA,CACA,iBAAA,CAIJ,UACE,kBAAA,CAEA,aACE,eAAA,CAGF,iBACE,qBAAA,CACA,SAAA,CAEA,uBACE,gBAAA,CAKN,MACE,eAAA,CAEA,UACE,SAAA,CAGF,SACE,cAAA,CAKF,WACE,MAAA,CAAA,CAKN,qCAEI,iBACE,UAAA,CAAA","file":"style.min.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.scss b/089-one color UI/styles/style.scss
index ecfdfb1..331af9a 100644
--- a/089-one color UI/styles/style.scss	
+++ b/089-one color UI/styles/style.scss	
@@ -1,134 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
-
-:root {
-  --primary-color: #f54538;
-  --black: #070707;
-  --gradient: radial-gradient(#525252, #131313);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  color: white;
-  font-family: "Montserrat", sans-serif;
-}
-
-h1 {
-  font-size: 2.5rem;
-  font-family: "Lobster", cursive;
-  font-weight: lighter;
-}
-
-h2 {
-  font-size: 8rem;
-  font-family: "Lobster", cursive;
-  font-weight: lighter;
-}
-
-h3 {
-  font-size: 3.5rem;
-}
-
-h4 {
-  font-size: 3rem;
-}
-
-p {
-  font-size: 2.5rem;
-}
-
-li {
-  font-size: 2rem;
-}
-
-a {
-  color: white;
-  text-decoration: none;
-}
-
-@import "home";
-@import "features";
-@import "soon";
-@import "footer";
-
-@media screen and (max-width: 1200px) {
-  html {
-    font-size: 50%;
-  }
-
-  nav {
-    #logo {
-      flex: 1;
-    }
-    ul {
-      margin-left: 5rem;
-    }
-  }
-
-  .showcase {
-    grid-template-columns: 10% 1fr 10%;
-
-    img {
-      width: 100%;
-      object-fit: contain;
-    }
-
-    img,
-    h2,
-    .info {
-      grid-column: 2/3;
-      text-align: center;
-    }
-  }
-
-  .features {
-    align-items: center;
-
-    h2 {
-      margin-top: 5rem;
-    }
-
-    .cards {
-      flex-direction: column;
-      width: 60%;
-
-      .card {
-        margin: 5rem 0rem;
-      }
-    }
-  }
-
-  .soon {
-    overflow: hidden;
-
-    img {
-      width: 60%;
-    }
-
-    h2 {
-      font-size: 5rem;
-    }
-  }
-
-  .footer {
-    h1 {
-      flex: 1;
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .features {
-    .cards {
-      width: 100%;
-    }
-  }
-}
+@use "global";
+@use "home";
+@use "features";
+@use "soon";
+@use "footer";
+@use "media-queries";

From 25bb3cb57ffb6a70c40bdc868cade73ab672d662 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 29 Jul 2025 18:49:55 +0200
Subject: [PATCH 21/40] fix: social icons

---
 092-music streaming service/style.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/092-music streaming service/style.css b/092-music streaming service/style.css
index aa8985f..b9e2464 100644
--- a/092-music streaming service/style.css	
+++ b/092-music streaming service/style.css	
@@ -65,14 +65,21 @@ body {
   font-weight: bold;
 }
 
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
 .social-link svg {
   width: 1em;
-  margin-right: 0.25rem;
 }
 
 .main-footer .container {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 /* layout */

From 93ffff29fc610a791cfd30be9677880ef6822ff7 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 07:23:30 +0200
Subject: [PATCH 22/40] fix: link color

---
 101-cascade layers/styles/content.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/101-cascade layers/styles/content.css b/101-cascade layers/styles/content.css
index 74171c8..a0c0586 100644
--- a/101-cascade layers/styles/content.css	
+++ b/101-cascade layers/styles/content.css	
@@ -1,3 +1,4 @@
+a,
 h1,
 h2,
 h3,
@@ -23,4 +24,4 @@ article footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
\ No newline at end of file
+}

From b1825eb876827013d2b8a82f8d09341e55f4a5d5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:10:14 +0200
Subject: [PATCH 23/40] chore: update to gsap3

---
 093-creative portfolio/index.html |  11 +--
 093-creative portfolio/script.js  | 110 ++++++++++++++++--------------
 2 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/093-creative portfolio/index.html b/093-creative portfolio/index.html
index 3664d16..a506690 100644
--- a/093-creative portfolio/index.html	
+++ b/093-creative portfolio/index.html	
@@ -197,16 +197,7 @@ <h3>03</h3>
         </aside>
       </main>
     </div>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
-      integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U="
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"
-      integrity="sha256-fIkQKQryItPqpaWZbtwG25Jp2p5ujqo/NwJrfqAB+Qk="
-      crossorigin="anonymous"
-    ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/093-creative portfolio/script.js b/093-creative portfolio/script.js
index f36983c..e973e3f 100644
--- a/093-creative portfolio/script.js	
+++ b/093-creative portfolio/script.js	
@@ -9,21 +9,26 @@ function init() {
   ];
   let current = 0;
   let scrollSlide = 0;
+  let isAnimating = false;
+
+  function updateActiveDot(index) {
+    slides.forEach((slide) => slide.classList.remove("active"));
+    slides[index].classList.add("active");
+  }
 
   slides.forEach((slide, index) => {
     slide.addEventListener("click", function () {
-      changeDots(this);
+      if (isAnimating) return;
+      updateActiveDot(index);
       nextSlide(index);
       scrollSlide = index;
     });
   });
 
-  function changeDots(dot) {
-    slides.forEach((slide) => slide.classList.remove("active"));
-    dot.classList.add("active");
-  }
+  async function nextSlide(pageNumber) {
+    if (isAnimating || pageNumber === current) return;
+    isAnimating = true;
 
-  function nextSlide(pageNumber) {
     const nextPage = pages[pageNumber];
     const currentPage = pages[current];
     const nextLeft = nextPage.querySelector(".hero .model-left");
@@ -33,81 +38,84 @@ function init() {
     const nextText = nextPage.querySelector(".details");
     const portfolio = document.querySelector(".portfolio");
 
-    const tl = new TimelineMax({
-      // disable clicks during animations
-      onStart: function () {
-        slides.forEach((slide) => (slide.style.pointerEvents = "none"));
-      },
-      onComplete: function () {
-        slides.forEach((slide) => (slide.style.pointerEvents = "all"));
-      },
-    });
-
-    tl.fromTo(currentLeft, 0.3, { y: "-10%" }, { y: "-100%" })
-      .fromTo(currentRight, 0.3, { y: "10%" }, { y: "-100%" }, "-=0.2")
-      .to(portfolio, 0.3, { backgroundImage: backgrounds[pageNumber] })
+    const tl = gsap.timeline({});
+    tl.fromTo(currentLeft, { y: "-10%" }, { duration: 0.3, y: "-100%" })
+      .fromTo(
+        currentRight,
+        { y: "10%" },
+        { duration: 0.3, y: "-100%" },
+        "-=0.2"
+      )
+      .to(portfolio, {
+        duration: 0.3,
+        backgroundImage: backgrounds[pageNumber],
+      })
       .fromTo(
         currentPage,
-        0.3,
-        { opacity: 1, pointerEvents: "all" },
-        { opacity: 0, pointerEvents: "none" }
+        { opacity: 1 },
+        { duration: 0.3, opacity: 0, pointerEvents: "none" }
       )
       .fromTo(
         nextPage,
-        0.3,
         { opacity: 0, pointerEvents: "none" },
-        { opacity: 1, pointerEvents: "all" },
+        { duration: 0.3, opacity: 1, pointerEvents: "all" },
         "-=0.6"
       )
-      .fromTo(nextLeft, 0.3, { y: "-100%" }, { y: "-10%" }, "-=0.6")
-      .fromTo(nextRight, 0.3, { y: "-100%" }, { y: "10%" }, "-=0.8")
-      .fromTo(nextText, 0.3, { opacity: 0, y: 0 }, { opacity: 1, y: 0 })
+      .fromTo(nextLeft, { y: "-100%" }, { duration: 0.3, y: "-10%" }, "-=0.6")
+      .fromTo(nextRight, { y: "-100%" }, { duration: 0.3, y: "10%" }, "-=0.8")
+      .fromTo(nextText, { opacity: 0, y: 0 }, { duration: 0.3, opacity: 1 })
       .set(nextLeft, { clearProps: "all" })
       .set(nextRight, { clearProps: "all" });
+
+    await tl;
+
     current = pageNumber;
+    isAnimating = false;
   }
   document.addEventListener("wheel", throttle(scrollChange, 1500));
-  document.addEventListener("touchmove", throttle(scrollChange, 1500));
-
-  function swithDots(dotNumber) {
-    const activeDot = document.querySelectorAll(".slide")[dotNumber];
-    slides.forEach((slide) => slide.classList.remove("active"));
-    activeDot.classList.add("active");
-  }
 
   function scrollChange(e) {
+    if (isAnimating) return;
     e.deltaY > 0 ? (scrollSlide += 1) : (scrollSlide -= 1);
-    // reset
     if (scrollSlide > 2) scrollSlide = 0;
     if (scrollSlide < 0) scrollSlide = 2;
-    swithDots(scrollSlide);
+    updateActiveDot(scrollSlide);
     nextSlide(scrollSlide);
   }
 
   //   menu
   const hamburger = document.querySelector(".menu");
-  const hamburgerLines = document.querySelectorAll(".menu line");
-  const navOpen = document.querySelector(".nav-open");
-  const contact = document.querySelector(".contact");
-  const social = document.querySelector(".social");
-  const logo = document.querySelector(".logo");
-
-  const tl = new TimelineMax({ paused: true, reversed: true });
 
-  tl.to(navOpen, 0.5, { y: 0 })
-    .fromTo(contact, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.1")
-    .fromTo(social, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.5")
-    .fromTo(logo, 0.2, { color: "var(--white)" }, { color: "black" }, "-=1")
+  const menuTl = gsap.timeline({ paused: true, reversed: true });
+  menuTl
+    .to(".nav-open", { duration: 0.5, y: 0 })
+    .fromTo(
+      ".contact",
+      { opacity: 0, y: 10 },
+      { duration: 0.5, opacity: 1, y: 0 },
+      "-=0.1"
+    )
+    .fromTo(
+      ".social",
+      { opacity: 0, y: 10 },
+      { duration: 0.5, opacity: 1, y: 0 },
+      "-=0.5"
+    )
+    .fromTo(
+      ".logo",
+      { color: "var(--white)" },
+      { duration: 0.2, color: "black" },
+      "-=1"
+    )
     .fromTo(
-      hamburgerLines,
-      0.2,
+      ".menu line",
       { stroke: "var(--white)" },
-      { stroke: "black" },
+      { duration: 0.2, stroke: "black" },
       "-=1"
     );
 
   hamburger.addEventListener("click", () => {
-    tl.reversed() ? tl.play() : tl.reverse();
+    menuTl.reversed() ? menuTl.play() : menuTl.reverse();
   });
 }
 

From 9b33caabda4160a6919f6055fb49c4d818341cd4 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:28:11 +0200
Subject: [PATCH 24/40] fix: remove throttle

---
 093-creative portfolio/script.js | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/093-creative portfolio/script.js b/093-creative portfolio/script.js
index e973e3f..81165ee 100644
--- a/093-creative portfolio/script.js	
+++ b/093-creative portfolio/script.js	
@@ -72,7 +72,7 @@ function init() {
     current = pageNumber;
     isAnimating = false;
   }
-  document.addEventListener("wheel", throttle(scrollChange, 1500));
+  document.addEventListener("wheel", scrollChange);
 
   function scrollChange(e) {
     if (isAnimating) return;
@@ -119,18 +119,4 @@ function init() {
   });
 }
 
-// avoid multiple firing
-function throttle(func, limit) {
-  let inThrottle;
-  return function () {
-    const args = arguments;
-    const context = this;
-    if (!inThrottle) {
-      func.apply(context, args);
-      inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
-    }
-  };
-}
-
 init();

From f2546301849f9f5429495f87ef979bd7821bec9c Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 18:05:16 +0200
Subject: [PATCH 25/40] refacto: gsap3 syntax

---
 099-parallax website/script.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/099-parallax website/script.js b/099-parallax website/script.js
index a95d704..2defb35 100644
--- a/099-parallax website/script.js	
+++ b/099-parallax website/script.js	
@@ -1,19 +1,18 @@
-let controller = new ScrollMagic.Controller();
-let timeline = new TimelineMax();
+const controller = new ScrollMagic.Controller();
+const tl = gsap.timeline();
 
-timeline
-  .to(".rock", 10, { y: -300 })
-  .to(".girl", 10, { y: -200 }, "-=10")
-  .fromTo(".background", { y: -50 }, { y: 0, duration: 10 }, "-=10")
-  .to(".content", 10, { top: "0%" }, "-=10")
-  .fromTo(".content-images", { opacity: 0 }, { opacity: 1, duration: 3 })
-  .fromTo(".text", { opacity: 0 }, { opacity: 1, duration: 3 });
+tl.to(".rock", { duration: 10, y: -300 })
+  .to(".girl", { duration: 10, y: -200 }, "-=10")
+  .fromTo(".background", { y: -50 }, { duration: 10, y: 0 }, "-=10")
+  .to(".content", { duration: 10, top: "0%" }, "-=10")
+  .fromTo(".content-images", { opacity: 0 }, { duration: 3, opacity: 1 })
+  .fromTo(".text", { opacity: 0 }, { duration: 3, opacity: 1 });
 
 let scene = new ScrollMagic.Scene({
   triggerElement: "section",
   duration: "300%",
   triggerHook: 0,
 })
-  .setTween(timeline)
+  .setTween(tl)
   .setPin("section")
   .addTo(controller);

From aadbc9d69199d8ee0c7156556476dc14dfe8ae20 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 30 Jul 2025 23:05:49 +0200
Subject: [PATCH 26/40] fix: image width

---
 099-parallax website/style.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index 48a6b8c..fe8848b 100644
--- a/099-parallax website/style.css	
+++ b/099-parallax website/style.css	
@@ -50,10 +50,19 @@ nav {
   align-items: center;
   min-height: 60vh;
   text-align: center;
+  gap: 1rem;
+}
+
+.content-images img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
 }
 
 .text {
-  padding: 2rem 20rem;
+  max-width: 800px;
+  margin: 2rem auto;
   font-size: 1.1rem;
 }
 

From 3609e2891ee1f33de1ef48724268ad7a03772a2e Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 31 Jul 2025 06:13:19 +0200
Subject: [PATCH 27/40] fix: mb images

---
 099-parallax website/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index fe8848b..34f5381 100644
--- a/099-parallax website/style.css	
+++ b/099-parallax website/style.css	
@@ -57,7 +57,7 @@ nav {
   max-width: 100%;
   height: auto;
   display: block;
-  margin: 0 auto;
+  margin: 0 auto 1rem;
 }
 
 .text {

From 831d8945e96feea93b59d98b33079918a7408d12 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 9 Aug 2025 11:21:42 +0200
Subject: [PATCH 28/40] style: mobile view

---
 001-expanding cards/style.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css
index 03f7979..d2568ea 100644
--- a/001-expanding cards/style.css	
+++ b/001-expanding cards/style.css	
@@ -57,8 +57,13 @@ body {
     width: 100vw;
   }
 
-  .panel:nth-of-type(4),
-  .panel:nth-of-type(5) {
-    display: none;
+  .panel {
+    flex: 1;
+    margin: 5px;
+    height: 40vh;
+  }
+
+  .panel.active {
+    flex: 3;
   }
 }

From 7287aeac977402795247bc5575ae0c6bd0572e67 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 10 Aug 2025 14:30:07 +0200
Subject: [PATCH 29/40] refactor: semantic class names

---
 002-progress steps/index.html |  8 ++++----
 002-progress steps/script.js  | 14 +++++++-------
 002-progress steps/style.css  |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/002-progress steps/index.html b/002-progress steps/index.html
index 07e7c79..b6c0e27 100644
--- a/002-progress steps/index.html	
+++ b/002-progress steps/index.html	
@@ -10,10 +10,10 @@
     <div class="container">
       <div class="progress-container">
         <div class="progress" id="progress"></div>
-        <div class="circle active">1</div>
-        <div class="circle">2</div>
-        <div class="circle">3</div>
-        <div class="circle">4</div>
+        <div class="step active">1</div>
+        <div class="step">2</div>
+        <div class="step">3</div>
+        <div class="step">4</div>
       </div>
       <button class="btn" id="prev" disabled>Prev</button>
       <button class="btn" id="next">Next</button>
diff --git a/002-progress steps/script.js b/002-progress steps/script.js
index 024a72d..2bd502f 100644
--- a/002-progress steps/script.js	
+++ b/002-progress steps/script.js	
@@ -1,13 +1,13 @@
 const progress = document.getElementById("progress");
 const prev = document.getElementById("prev");
 const next = document.getElementById("next");
-const circles = document.querySelectorAll(".circle");
+const steps = document.querySelectorAll(".step");
 
 let currentActive = 1;
 
 next.addEventListener("click", () => {
   currentActive++;
-  if (currentActive > circles.length) currentActive = circles.length;
+  if (currentActive > steps.length) currentActive = steps.length;
   update();
 });
 
@@ -18,15 +18,15 @@ prev.addEventListener("click", () => {
 });
 
 const update = () => {
-  circles.forEach((circle, index) => {
-    if (index < currentActive) circle.classList.add("active");
-    else circle.classList.remove("active");
+  steps.forEach((step, index) => {
+    if (index < currentActive) step.classList.add("active");
+    else step.classList.remove("active");
   });
   const actives = document.querySelectorAll(".active");
   progress.style.width =
-    ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
+    ((actives.length - 1) / (steps.length - 1)) * 100 + "%";
   if (currentActive === 1) prev.disabled = true;
-  else if (currentActive === circles.length) next.disabled = true;
+  else if (currentActive === steps.length) next.disabled = true;
   else {
     prev.disabled = false;
     next.disabled = false;
diff --git a/002-progress steps/style.css b/002-progress steps/style.css
index b4dfe95..78c4f1c 100644
--- a/002-progress steps/style.css	
+++ b/002-progress steps/style.css	
@@ -57,7 +57,7 @@ body {
   transition: 0.4s ease;
 }
 
-.circle {
+.step {
   background-color: #fff;
   color: #999;
   border-radius: 50%;
@@ -70,7 +70,7 @@ body {
   transition: 0.4s ease;
 }
 
-.circle.active {
+.step.active {
   border-color: var(--line-border-fill);
 }
 

From debc5455177fcebc550a0b29c3e1b69775b7648d Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 11 Aug 2025 11:41:46 +0200
Subject: [PATCH 30/40] fix: remove blur in css

---
 005-blurry loading/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/005-blurry loading/style.css b/005-blurry loading/style.css
index 86f6405..99ac86a 100644
--- a/005-blurry loading/style.css	
+++ b/005-blurry loading/style.css	
@@ -23,7 +23,6 @@ body {
   width: calc(100vw + 60px);
   height: calc(100vh + 60px);
   z-index: -1;
-  filter: blur(0px);
 }
 
 .loading-text {

From 2e95cbabe4b3c72c147989e671505bf5ae8c0fef Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 11 Aug 2025 15:26:23 +0200
Subject: [PATCH 31/40] refactor: createWaveLabel function

---
 008-form wave animation/script.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/008-form wave animation/script.js b/008-form wave animation/script.js
index f13a433..0b28a83 100644
--- a/008-form wave animation/script.js	
+++ b/008-form wave animation/script.js	
@@ -1,11 +1,15 @@
 const labels = document.querySelectorAll(".form-control label");
 
-labels.forEach((label) => {
-  label.innerHTML = label.innerText
+function createWaveLabel(text) {
+  return text
     .split("")
     .map(
       (letter, idx) =>
         `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
     )
     .join("");
+}
+
+labels.forEach((label) => {
+  label.innerHTML = createWaveLabel(label.innerText);
 });

From 8d5dc7eff8a9eec0cca271fa0430c7d939e837db Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:37:53 +0200
Subject: [PATCH 32/40] refactor: scoped dom query

---
 012-FAQ collapse/script.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/012-FAQ collapse/script.js b/012-FAQ collapse/script.js
index f2274a5..a630e75 100644
--- a/012-FAQ collapse/script.js	
+++ b/012-FAQ collapse/script.js	
@@ -1,4 +1,5 @@
-const toggles = document.querySelectorAll(".faq-toggle");
+const faqContainer = document.querySelector(".faq-container");
+const toggles = faqContainer.querySelectorAll(".faq-toggle");
 
 toggles.forEach((toggle) => {
   toggle.addEventListener("click", () => {

From 06cd579d9276e94245d8c5281092264758b8fab0 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 12 Aug 2025 12:26:12 +0200
Subject: [PATCH 33/40] refactor: cache tags

---
 013-random choice picker/script.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/013-random choice picker/script.js b/013-random choice picker/script.js
index b4bbb2e..0717b9a 100644
--- a/013-random choice picker/script.js	
+++ b/013-random choice picker/script.js	
@@ -15,8 +15,7 @@ const createTags = (input) => {
   });
 };
 
-const pickRandomTag = () => {
-  const tags = document.querySelectorAll(".tag");
+const pickRandomTag = (tags) => {
   return tags[Math.floor(Math.random() * tags.length)];
 };
 
@@ -25,9 +24,10 @@ const highlightTag = (tag) => tag.classList.add("highlight");
 const unHighlightTag = (tag) => tag.classList.remove("highlight");
 
 const randomSelect = () => {
+  const tags = document.querySelectorAll(".tag");
   const times = 30;
   const interval = setInterval(() => {
-    const randomTag = pickRandomTag();
+    const randomTag = pickRandomTag(tags);
     highlightTag(randomTag);
     setTimeout(() => {
       unHighlightTag(randomTag);
@@ -37,7 +37,7 @@ const randomSelect = () => {
   setTimeout(() => {
     clearInterval(interval);
     setTimeout(() => {
-      const randomTag = pickRandomTag();
+      const randomTag = pickRandomTag(tags);
       highlightTag(randomTag);
     }, 100);
   }, times * 100);

From a47d79bbec7c002b1623b48628ade307e38232e0 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 12 Aug 2025 12:35:00 +0200
Subject: [PATCH 34/40] refactor: scoped dom query

---
 013-random choice picker/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/013-random choice picker/script.js b/013-random choice picker/script.js
index 0717b9a..a3244e2 100644
--- a/013-random choice picker/script.js	
+++ b/013-random choice picker/script.js	
@@ -24,7 +24,7 @@ const highlightTag = (tag) => tag.classList.add("highlight");
 const unHighlightTag = (tag) => tag.classList.remove("highlight");
 
 const randomSelect = () => {
-  const tags = document.querySelectorAll(".tag");
+  const tags = tagsElements.querySelectorAll(".tag");
   const times = 30;
   const interval = setInterval(() => {
     const randomTag = pickRandomTag(tags);

From 786429032c1a1113b5028f1b2192af63896b8caa Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 12 Aug 2025 14:49:20 +0200
Subject: [PATCH 35/40] fix: wrap under 350px

---
 014-animated navigation/style.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/014-animated navigation/style.css b/014-animated navigation/style.css
index 1d0b987..babc091 100644
--- a/014-animated navigation/style.css	
+++ b/014-animated navigation/style.css	
@@ -31,6 +31,7 @@ nav {
   border-radius: 3px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: width 0.6s linear;
+  overflow-x: hidden;
 }
 
 nav.active {
@@ -44,7 +45,7 @@ nav ul {
   margin: 0;
   width: 0;
   transition: width 0.6s linear;
-  overflow-x: hidden;
+  gap: 20px;
 }
 
 nav.active ul {
@@ -66,7 +67,6 @@ nav ul a {
   position: relative;
   color: #000;
   text-decoration: none;
-  margin: 0 10px;
 }
 
 .icon {
@@ -105,3 +105,15 @@ nav.active .icon .line1 {
 nav.active .icon .line2 {
   transform: rotate(765deg) translateY(-5.5px);
 }
+
+@media (max-width: 350px) {
+  nav.active {
+    width: 100%;
+    height: 150px;
+  }
+
+  nav.active ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

From 1dd8d4cc4e76ab28696adcc13a96986750a4742f Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 14 Aug 2025 12:13:53 +0200
Subject: [PATCH 36/40] fix: remove z-index

---
 018-background slider/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/018-background slider/style.css b/018-background slider/style.css
index 00dd61b..dfd243e 100644
--- a/018-background slider/style.css	
+++ b/018-background slider/style.css	
@@ -26,7 +26,6 @@ body::before {
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
-  z-index: -1;
 }
 
 .slider-container {

From cb1d0b3a158213ee246a0c31cd3cd7dbd8b2fd4d Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 14 Aug 2025 14:12:10 +0200
Subject: [PATCH 37/40] reafctor: semantic html

---
 019-theme clock/index.html | 18 +++++++++---------
 019-theme clock/script.js  |  2 +-
 019-theme clock/style.css  |  3 ---
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/019-theme clock/index.html b/019-theme clock/index.html
index e3333dc..285fee1 100644
--- a/019-theme clock/index.html	
+++ b/019-theme clock/index.html	
@@ -8,16 +8,16 @@
   </head>
   <body>
     <button class="toggle">Dark mode</button>
-    <div class="clock-container">
-      <div class="clock">
-        <div class="needle hour"></div>
-        <div class="needle minute"></div>
-        <div class="needle second"></div>
-        <div class="center-point"></div>
-      </div>
-      <div class="time"></div>
+    <section class="clock-container">
+      <figure class="clock" aria-label="Analog clock">
+        <span class="needle hour"></span>
+        <span class="needle minute"></span>
+        <span class="needle second"></span>
+        <span class="center-point"></span>
+      </figure>
+      <time class="time" aria-live="polite"></time>
       <div class="date"></div>
-    </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/019-theme clock/script.js b/019-theme clock/script.js
index e4b0f84..2af40a4 100644
--- a/019-theme clock/script.js	
+++ b/019-theme clock/script.js	
@@ -4,6 +4,7 @@ const secondElement = document.querySelector(".second");
 const timeElement = document.querySelector(".time");
 const dateElement = document.querySelector(".date");
 const toggle = document.querySelector(".toggle");
+const html = document.querySelector("html");
 
 const days = [
   "Sunday",
@@ -30,7 +31,6 @@ const months = [
 ];
 
 toggle.addEventListener("click", (e) => {
-  const html = document.querySelector("html");
   if (html.classList.contains("dark")) {
     html.classList.remove("dark");
     e.target.innerHTML = "Dark mode";
diff --git a/019-theme clock/style.css b/019-theme clock/style.css
index 3ab6945..9292fc1 100644
--- a/019-theme clock/style.css	
+++ b/019-theme clock/style.css	
@@ -16,9 +16,6 @@ html {
 html.dark {
   --primary-color: #fff;
   --secondary-color: #333;
-}
-
-html.dark {
   background-color: #111;
   color: var(--primary-color);
 }

From b9739841e36404e0071a9da577acf3abaf390636 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 14 Aug 2025 17:12:50 +0200
Subject: [PATCH 38/40] refactor: getClickPosition

---
 020-button ripple effect/script.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/020-button ripple effect/script.js b/020-button ripple effect/script.js
index eb16e14..b339c64 100644
--- a/020-button ripple effect/script.js	
+++ b/020-button ripple effect/script.js	
@@ -1,13 +1,19 @@
 const buttons = document.querySelectorAll(".ripple");
 
+function getClickPosition(e, element) {
+  const x = e.clientX;
+  const y = e.clientY;
+  const buttonTop = element.offsetTop;
+  const buttonLeft = element.offsetLeft;
+  return {
+    xInside: x - buttonLeft,
+    yInside: y - buttonTop,
+  };
+}
+
 buttons.forEach((button) => {
   button.addEventListener("click", function (e) {
-    const x = e.clientX;
-    const y = e.clientY;
-    const buttonTop = e.target.offsetTop;
-    const buttonLeft = e.target.offsetLeft;
-    const xInside = x - buttonLeft;
-    const yInside = y - buttonTop;
+    const { xInside, yInside } = getClickPosition(e, this);
     const circle = document.createElement("span");
     circle.classList.add("circle");
     circle.style.top = yInside + "px";

From 13902bacc493403c8c4f8f534ea8d52d48f69011 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 15 Aug 2025 07:50:21 +0200
Subject: [PATCH 39/40] refactor: add article

---
 015-incrementing counter/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/015-incrementing counter/index.html b/015-incrementing counter/index.html
index 3e79cf0..8197666 100644
--- a/015-incrementing counter/index.html	
+++ b/015-incrementing counter/index.html	
@@ -13,21 +13,21 @@
     <title>Increment Counter</title>
   </head>
   <body>
-    <div class="counter-container">
+    <article class="counter-container">
       <i class="fab fa-instagram fa-3x"></i>
       <div class="counter" data-target="12000"></div>
       <span>Instagram Followers</span>
-    </div>
-    <div class="counter-container">
+    </article>
+    <article class="counter-container">
       <i class="fab fa-youtube fa-3x"></i>
       <div class="counter" data-target="5000"></div>
       <span>YouTube Subscribers</span>
-    </div>
-    <div class="counter-container">
+    </article>
+    <article class="counter-container">
       <i class="fab fa-facebook fa-3x"></i>
       <div class="counter" data-target="7500"></div>
       <span>Facebook Fans</span>
-    </div>
+    </article>
     <script src="script.js"></script>
   </body>
 </html>

From 37fd8871c6a644c273e4659d180ec3d63b668ef0 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 15 Aug 2025 09:22:28 +0200
Subject: [PATCH 40/40] fix: counter min-width

---
 015-incrementing counter/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/015-incrementing counter/style.css b/015-incrementing counter/style.css
index 4b017ef..2651aeb 100644
--- a/015-incrementing counter/style.css	
+++ b/015-incrementing counter/style.css	
@@ -27,6 +27,7 @@ body {
 .counter {
   font-size: 60px;
   margin-top: 10px;
+  min-width: 5ch;
 }
 
 @media (max-width: 580px) {
