From ed6d816dd2b7919bac33a9d5ebfe5a89eafdac5b Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:27:40 +0100
Subject: [PATCH 01/62] docs: update collection link

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

diff --git a/README.md b/README.md
index 4704ded..cc3b1a3 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 100+ mini web projects using HTML, CSS and JavaScript.
 
-[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
+[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
 
 |  #  | Project                                                                | Live Demo                                                |
 | :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |

From f8575cd1c287a9fe0b909d81a10e964103a44417 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 31 Jan 2024 08:21:00 +0100
Subject: [PATCH 02/62] feat: add cascade layers

---
 101-cascade layers/index.html            | 88 ++++++++++++++++++++++++
 101-cascade layers/styles/components.css | 14 ++++
 101-cascade layers/styles/content.css    | 26 +++++++
 101-cascade layers/styles/layout.css     | 24 +++++++
 101-cascade layers/styles/main.css       | 10 +++
 101-cascade layers/styles/reset.css      | 15 ++++
 101-cascade layers/styles/theme.css      |  5 ++
 101-cascade layers/styles/utility.css    | 12 ++++
 README.md                                |  1 +
 9 files changed, 195 insertions(+)
 create mode 100644 101-cascade layers/index.html
 create mode 100644 101-cascade layers/styles/components.css
 create mode 100644 101-cascade layers/styles/content.css
 create mode 100644 101-cascade layers/styles/layout.css
 create mode 100644 101-cascade layers/styles/main.css
 create mode 100644 101-cascade layers/styles/reset.css
 create mode 100644 101-cascade layers/styles/theme.css
 create mode 100644 101-cascade layers/styles/utility.css

diff --git a/101-cascade layers/index.html b/101-cascade layers/index.html
new file mode 100644
index 0000000..bd4b61f
--- /dev/null
+++ b/101-cascade layers/index.html	
@@ -0,0 +1,88 @@
+<!-- Based on CSS Cascade Layers Tutorial by Shaun Pelling - Net Ninja (2023)
+see: https://www.youtube.com/playlist?list=PL4cUxeGkcC9jS4SctqK83Ag58a0_UEcE_ -->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cascade Layers</title>
+    <link rel="stylesheet" href="styles/main.css" />
+  </head>
+  <body>
+    <nav class="main-nav container">
+      <h1>Cascade Layers 101</h1>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/login" class="btn">Login</a>
+    </nav>
+
+    <main>
+      <section class="main-content container">
+        <article>
+          <h2>Selector Specificity</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis <a href="/">distinctio</a> enim esse
+            voluptatibus debitis omnis blanditiis totam laudantium, hic a optio
+            consequatur repudiandae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis distinctio enim esse voluptatibus
+            debitis omnis blanditiis totam laudantium, hic a optio consequatur
+            repudiandae? Hic, at? Lorem ipsum dolor sit amet consectetur,
+            adipisicing elit. Dicta dolorum architecto quaerat ut ex temporibus
+            reiciendis laboriosam ea exercitationem praesentium fugit, accusamus
+            aliquam deleniti sit porro, aliquid laborum culpa officia! Lorem
+            ipsum dolor sit amet consectetur, adipisicing elit. Inventore animi
+            itaque nam cumque molestiae temporibus rerum enim autem repudiandae
+            accusamus, harum, aut dolores iste voluptate id aperiam. Voluptatum,
+            maiores cumque!
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis distinctio
+            <a href="/about">enim</a> esse voluptatibus debitis omnis blanditiis
+            totam laudantium, hic a optio consequatur repudiandae? Hic, at?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis distinctio enim esse voluptatibus
+            debitis omnis blanditiis totam laudantium, hic a optio consequatur
+            repudiandae? Hic, at?
+          </p>
+          <footer>
+            <p>Written by Mario 2 hours ago.</p>
+            <a href="/articles" class="btn">Read More</a>
+          </footer>
+        </article>
+
+        <div class="grid m-top">
+          <div class="card">
+            <h3>CSS Rules!</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
+              necessitatibus...
+            </p>
+            <a href="/" class="btn">More...</a>
+          </div>
+          <div class="card">
+            <h3>Specificty Headaches</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
+              necessitatibus...
+            </p>
+            <a href="/" class="btn">More...</a>
+          </div>
+          <div class="card">
+            <h3>Layers to the Rescue!</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
+              necessitatibus...
+            </p>
+            <a href="/" class="btn">More...</a>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/101-cascade layers/styles/components.css b/101-cascade layers/styles/components.css
new file mode 100644
index 0000000..9de1f85
--- /dev/null
+++ b/101-cascade layers/styles/components.css	
@@ -0,0 +1,14 @@
+.card {
+    background: white;
+    border-radius: 8px;
+    padding: 15px;
+  }
+
+  .btn {
+    background: #1c9f6d;
+    color: #fff;
+    padding: 8px 12px;
+    border-radius: 8px;
+    text-decoration: none;
+    display: inline-block;
+  }
\ No newline at end of file
diff --git a/101-cascade layers/styles/content.css b/101-cascade layers/styles/content.css
new file mode 100644
index 0000000..74171c8
--- /dev/null
+++ b/101-cascade layers/styles/content.css	
@@ -0,0 +1,26 @@
+h1,
+h2,
+h3,
+p {
+  color: var(--default);
+}
+.main-content article a {
+  color: var(--primary);
+  background: transparent;
+  text-decoration: underline;
+}
+.main-content article p {
+  line-height: 1.5em;
+  color: #777;
+  margin-top: 20px;
+}
+.main-content article h2 {
+  margin-bottom: 20px;
+}
+article footer {
+  border-top: 1px dashed var(--secondary);
+  margin: 30px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/101-cascade layers/styles/layout.css b/101-cascade layers/styles/layout.css
new file mode 100644
index 0000000..9f5a6d7
--- /dev/null
+++ b/101-cascade layers/styles/layout.css	
@@ -0,0 +1,24 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.main-nav {
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border-bottom: 1px solid var(--secondary);
+}
+.main-nav a:last-child {
+  margin-left: auto;
+}
+article {
+  margin-top: 40px;
+  padding: 20px;
+  background: #fff;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
diff --git a/101-cascade layers/styles/main.css b/101-cascade layers/styles/main.css
new file mode 100644
index 0000000..6407a16
--- /dev/null
+++ b/101-cascade layers/styles/main.css	
@@ -0,0 +1,10 @@
+@layer reset, theme, bulma, layout, content, components, utility;
+
+@import "reset.css" layer(reset);
+@import "theme.css" layer(theme);
+@import "layout.css" layer(layout);
+@import "content.css" layer(content);
+@import "components.css" layer(components);
+@import "utility.css" layer(utility);
+/* @import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
+  layer(bulma); */
diff --git a/101-cascade layers/styles/reset.css b/101-cascade layers/styles/reset.css
new file mode 100644
index 0000000..dddb4cf
--- /dev/null
+++ b/101-cascade layers/styles/reset.css	
@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap");
+
+body {
+  font-family: "Rubik";
+  margin: 20px;
+  background: var(--secondary);
+}
+p,
+h1,
+h2,
+h3,
+section {
+  margin: 0 0 10px 0;
+  padding: 0;
+}
diff --git a/101-cascade layers/styles/theme.css b/101-cascade layers/styles/theme.css
new file mode 100644
index 0000000..ff079de
--- /dev/null
+++ b/101-cascade layers/styles/theme.css	
@@ -0,0 +1,5 @@
+:root {
+  --primary: #1c9f6d;
+  --secondary: #f4f4f4;
+  --default: #333;
+}
diff --git a/101-cascade layers/styles/utility.css b/101-cascade layers/styles/utility.css
new file mode 100644
index 0000000..7cb2add
--- /dev/null
+++ b/101-cascade layers/styles/utility.css	
@@ -0,0 +1,12 @@
+.rounded {
+  border-radius: 8px;
+}
+.underlined {
+  text-decoration: underline;
+}
+.m-top {
+  margin-top: 40px;
+}
+.center {
+  text-align: center;
+}
diff --git a/README.md b/README.md
index cc3b1a3..8103efb 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,7 @@
 | 098 | [Magazine Layout](098-magazine%20layout)                               | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj)  |
 | 099 | [Parallax Website](099-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
 | 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone)                       | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy)  |
+| 101 | [Cascade Layers](101-cascade%20layers)                                 | [Live Demo](https://codepen.io/solygambas/full/poYaZmv)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):
 

From 20161c588b500f9c8fbd974e8d2641deee21ba58 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 31 Jan 2024 12:04:06 +0100
Subject: [PATCH 03/62] feat: add container queries

---
 102-container queries/index.html |  79 ++++++++++++++++++++
 102-container queries/style.css  | 124 +++++++++++++++++++++++++++++++
 README.md                        |   1 +
 3 files changed, 204 insertions(+)
 create mode 100644 102-container queries/index.html
 create mode 100644 102-container queries/style.css

diff --git a/102-container queries/index.html b/102-container queries/index.html
new file mode 100644
index 0000000..d3e3edb
--- /dev/null
+++ b/102-container queries/index.html	
@@ -0,0 +1,79 @@
+<!-- Based on Learn how to use Media queries & Container queries by Kevin Powell (2024)
+see: https://www.youtube.com/watch?v=2rlWBZ17Wes -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Container Queries</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <main>
+        <section class="primary-content" style="--theme: dark">
+          <h1>Media queries and container queries</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Exercitationem neque tenetur numquam officiis officia, eos eligendi
+            animi architecto aliquam dignissimos, at minus, aperiam expedita.
+            Officia ad nostrum harum deleniti quasi!
+          </p>
+          <p>
+            Consectetur sunt, in sit iure dolor ratione odit necessitatibus
+            velit animi tempore, tenetur alias accusantium impedit ad vitae,
+            quis totam! Minus provident exercitationem sapiente ut ex repellat
+            vel odio doloremque?
+          </p>
+          <article class="card">
+            <h2>Card in .primary-content</h2>
+            <img
+              src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDMyMzR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
+              reiciendis non eaque consectetur. Unde, delectus!
+            </p>
+          </article>
+        </section>
+
+        <section class="cards">
+          <article class="card">
+            <h2>Card 1</h2>
+            <img
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
+              reiciendis non eaque consectetur. Unde, delectus!
+            </p>
+          </article>
+          <article class="card">
+            <h2>Card 2</h2>
+            <img
+              src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Molestias similique quasi expedita doloribus odit consectetur
+              harum placeat qui! Alias commodi soluta possimus veritatis.
+            </p>
+          </article>
+          <article class="card">
+            <h2>Card 3</h2>
+            <img
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Cupiditate voluptate, provident cum aut tempore, voluptatem,
+              repellendus nisi ratione ex laudantium nulla! Repellat, nemo?
+            </p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/102-container queries/style.css b/102-container queries/style.css
new file mode 100644
index 0000000..15fc093
--- /dev/null
+++ b/102-container queries/style.css	
@@ -0,0 +1,124 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-color: rebeccapurple;
+}
+
+/* https://caniuse.com/css-media-range-syntax */
+@media screen and (width >= 600px) {
+  :root {
+    --bg-color: orangered;
+  }
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  margin: 0;
+  padding-block: 2rem;
+  /* background-color: rebeccapurple; */
+  background-color: var(--bg-color);
+}
+
+/* @media screen and (min-width: 600px) {
+  body {
+    background-color: orangered;
+  }
+} */
+
+/* https://caniuse.com/css-container-queries-style */
+@container style(--theme: dark) {
+  .card {
+    background: black;
+    color: white;
+  }
+
+  .card > * {
+    color: white;
+  }
+}
+
+.primary-content,
+.cards {
+  container-type: inline-size;
+}
+
+main {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 760px) {
+  main {
+    grid-template-columns: 1fr 300px;
+  }
+}
+
+.cards {
+  /* container-type: inline-size;
+  container-name: card-grid; */
+  container: card-grid / inline-size;
+}
+
+.card {
+  display: grid;
+  gap: 1rem;
+}
+
+.card h2 {
+  font-size: clamp(1.5rem, 10cqi, 3rem);
+  /* cqi = 10% of a query container's inline size */
+  /* cqb is based on the block size */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries */
+  /* https://caniuse.com/css-container-queries */
+}
+
+@container card-grid (min-width: 45ch) {
+  .card {
+    /*     background: yellow; */
+    grid-template-columns: auto minmax(25ch, 1fr);
+  }
+
+  .card h2 {
+    grid-column: 1 / -1;
+  }
+}
+
+@layer demo {
+  h1,
+  p {
+    color: white;
+  }
+
+  img {
+    max-width: 100%;
+    border-radius: 0.25rem;
+  }
+
+  .wrapper {
+    width: min(100% - 3rem, 1200px);
+    margin-inline: auto;
+  }
+
+  .cards {
+    display: grid;
+    gap: 1.5rem;
+    height: 100vh;
+    align-content: start;
+  }
+
+  .card {
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 15px 15px rgb(0 0 0 / 0.25);
+    padding: 0.75rem;
+  }
+
+  .card > * {
+    margin: 0;
+    color: #000;
+  }
+}
diff --git a/README.md b/README.md
index 8103efb..71c76b3 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,7 @@
 | 099 | [Parallax Website](099-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
 | 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone)                       | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy)  |
 | 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)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):
 

From bfa3b861733c7537db83671d4a8f99fed08a3ddc Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 31 Jan 2024 13:24:51 +0100
Subject: [PATCH 04/62] fix: titles and card height

---
 102-container queries/index.html | 10 +++++-----
 102-container queries/style.css  |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/102-container queries/index.html b/102-container queries/index.html
index d3e3edb..8bedbe1 100644
--- a/102-container queries/index.html	
+++ b/102-container queries/index.html	
@@ -12,7 +12,7 @@
     <div class="wrapper">
       <main>
         <section class="primary-content" style="--theme: dark">
-          <h1>Media queries and container queries</h1>
+          <h1>Desert Oasis: Exploring Nature's Tranquility</h1>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit.
             Exercitationem neque tenetur numquam officiis officia, eos eligendi
@@ -26,7 +26,7 @@ <h1>Media queries and container queries</h1>
             vel odio doloremque?
           </p>
           <article class="card">
-            <h2>Card in .primary-content</h2>
+            <h2>Tranquil Desert Haven</h2>
             <img
               src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDMyMzR8&ixlib=rb-4.0.3&q=80&w=400"
               alt=""
@@ -40,7 +40,7 @@ <h2>Card in .primary-content</h2>
 
         <section class="cards">
           <article class="card">
-            <h2>Card 1</h2>
+            <h2>Serenity Oasis Retreat</h2>
             <img
               src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
               alt=""
@@ -51,7 +51,7 @@ <h2>Card 1</h2>
             </p>
           </article>
           <article class="card">
-            <h2>Card 2</h2>
+            <h2>Mirage Haven Cottage</h2>
             <img
               src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
               alt=""
@@ -62,7 +62,7 @@ <h2>Card 2</h2>
             </p>
           </article>
           <article class="card">
-            <h2>Card 3</h2>
+            <h2>Sand Dune Hideaway</h2>
             <img
               src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
               alt=""
diff --git a/102-container queries/style.css b/102-container queries/style.css
index 15fc093..bf3267e 100644
--- a/102-container queries/style.css	
+++ b/102-container queries/style.css	
@@ -106,7 +106,7 @@ main {
   .cards {
     display: grid;
     gap: 1.5rem;
-    height: 100vh;
+    min-height: 100vh;
     align-content: start;
   }
 

From e7859820994cd718e86ffd00bf7beb394d0fff85 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 18 Mar 2024 18:49:18 +0100
Subject: [PATCH 05/62] docs: add blog link

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 71c76b3..012e80d 100644
--- a/README.md
+++ b/README.md
@@ -109,6 +109,12 @@
 | 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)  |
 
+---
+
+Get inspired and motivated with our [collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey!
+
+---
+
 This repository is mostly based on 2 courses by Brad Traversy (2020):
 
 - [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)

From 6f207411cda97c7fa4fef94aef661c51b633a121 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 22 Mar 2024 09:41:58 +0100
Subject: [PATCH 06/62] docs: add setup instructions

---
 README.md | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 012e80d..1fe4bc2 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,12 @@
 # 100 Projects In 100 Days - HTML, CSS & JavaScript
 
-100+ mini web projects using HTML, CSS and JavaScript.
+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.
 
-[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
+[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
+
+## Project Showcase
+
+Explore each project individually and view live demos to see them in action:
 
 |  #  | Project                                                                | Live Demo                                                |
 | :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -109,18 +113,36 @@
 | 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)  |
 
----
+## 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.
+
+## Setup Instructions
+
+To get started with these projects, 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.
+
+2. **Clone the Repository**: Clone the forked repository to your local machine using the following command in your terminal:
+
+   ```bash
+   git clone https://github.com/Your-Username/html-css-javascript-projects.git
+   ```
+
+3. **Open with VS Code**: Open the cloned repository in [Visual Studio Code](https://code.visualstudio.com/) (VS Code) or your preferred code editor.
+
+4. **Install Live Server Extension**: If you haven't already, install the Live Server extension for VS Code. This extension allows you to launch a local development server and automatically refresh your browser whenever you make changes to your HTML, CSS, or JavaScript files. You can install it from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
 
-Get inspired and motivated with our [collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey!
+5. **Start Coding**: Start exploring the projects, make changes, experiment with different ideas, and unleash your creativity! Use Live Server to preview your changes in real-time and see how they affect the project.
 
----
+## Acknowledgments
 
-This repository is mostly based on 2 courses by Brad Traversy (2020):
+This repository is mostly based on two courses by Brad Traversy (2020):
 
 - [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)
 - [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/)
 
-The other projects are adapted from various YouTube channels:
+In addition, other projects are adapted from various YouTube channels:
 
 - Brad Traversy - [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)
 - Shaun Pelling - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)

From 677ab59a207527a587b00ba33f4636201a2f0a02 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 22 Mar 2024 09:45:16 +0100
Subject: [PATCH 07/62] docs: add show support

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

diff --git a/README.md b/README.md
index 1fe4bc2..4b12e81 100644
--- a/README.md
+++ b/README.md
@@ -151,3 +151,7 @@ In addition, other projects are adapted from various YouTube channels:
 - Kyle Cook - [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw)
 - [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw)
 - [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA)
+
+## Show Your Support
+
+If you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Thank you!

From 34924201819c83aa0dfa02fb747ca13fa60b749f Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 22 Jun 2024 13:51:11 +0200
Subject: [PATCH 08/62] docs: bold link

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

diff --git a/README.md b/README.md
index 4b12e81..73911e7 100644
--- a/README.md
+++ b/README.md
@@ -115,7 +115,7 @@ Explore each project individually and view live demos to see them in action:
 
 ## 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.
+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.
 
 ## Setup Instructions
 

From 6deee173d9273df0ff6ea740beb3f8d6562288f2 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 28 Jun 2024 12:45:46 +0200
Subject: [PATCH 09/62] docs: add survey

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

diff --git a/README.md b/README.md
index 73911e7..2ebce66 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,10 @@ Explore each project individually and view live demos to see them in action:
 
 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.
 
+## Share Your Insights
+
+We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76).
+
 ## Setup Instructions
 
 To get started with these projects, follow these simple steps:

From 182aeeae2b9aa66fa7fbf64700131c300501f7ad Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:49:34 +0200
Subject: [PATCH 10/62] docs: add sponsors

---
 .github/FUNDING.yml | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .github/FUNDING.yml

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..ffc7522
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: solygambas

From 1c11fd5e77d3c0e3aedbcc475fbb1098e31e8769 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:54:06 +0200
Subject: [PATCH 11/62] docs: add sponsors link

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

diff --git a/README.md b/README.md
index 2ebce66..6c4a163 100644
--- a/README.md
+++ b/README.md
@@ -158,4 +158,4 @@ In addition, other projects are adapted from various YouTube channels:
 
 ## Show Your Support
 
-If you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Thank you!
+If you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Additionally, if you'd like to support my work further, you can [**become a sponsor**](https://github.com/sponsors/solygambas). Your support is greatly appreciated. Thank you!

From 2e9b1fda2586afcab31f71cb1af9b1f9097f23a9 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 17 Dec 2024 17:10:57 +0100
Subject: [PATCH 12/62] fix: bg size cover

---
 001-expanding cards/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css
index d3741bc..03f7979 100644
--- a/001-expanding cards/style.css	
+++ b/001-expanding cards/style.css	
@@ -20,7 +20,7 @@ body {
 }
 
 .panel {
-  background-size: auto 100%;
+  background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;

From 7f5da62e680f58108bd4568423451f23b0e84954 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:35:49 +0100
Subject: [PATCH 13/62] fix: pokedex img url

---
 037-pokedex/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/037-pokedex/script.js b/037-pokedex/script.js
index b73f52d..eebc611 100644
--- a/037-pokedex/script.js
+++ b/037-pokedex/script.js
@@ -30,7 +30,7 @@ const createPokemonCard = (pokemon) => {
   const pokemonInnerHTML = `
     <div class="img-container">
         <img
-            src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png"
+            src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png"
             alt=""
         />
     </div>

From e2fcad1690f0805c1d4008011723a44511bfd580 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:40:29 +0100
Subject: [PATCH 14/62] fix: netflix logo

---
 045-netflix mobile navigation/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/045-netflix mobile navigation/index.html b/045-netflix mobile navigation/index.html
index 121fb11..11f47e4 100644
--- a/045-netflix mobile navigation/index.html	
+++ b/045-netflix mobile navigation/index.html	
@@ -18,7 +18,7 @@
     </button>
 
     <img
-      src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png"
+      src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
       alt="Logo"
       class="logo"
     />
@@ -33,7 +33,7 @@
           </button>
 
           <img
-            src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png"
+            src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
             alt="Logo"
             class="logo"
           />

From 64dac76a46920cd6877d44fdd8eb087604e3a5b9 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:51:29 +0100
Subject: [PATCH 15/62] fix: feed url

---
 048-random image generator/script.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/048-random image generator/script.js b/048-random image generator/script.js
index fd687fa..3062c32 100644
--- a/048-random image generator/script.js	
+++ b/048-random image generator/script.js	
@@ -1,12 +1,11 @@
 const container = document.querySelector(".container");
-const unsplashURL = "https://source.unsplash.com/random/";
+const randomfoxURL = "https://randomfox.ca/images/";
 const rows = 5;
 
-const getRandomNumber = () => Math.floor(Math.random() * 10) + 300;
-const getRandomSize = () => `${getRandomNumber()}x${getRandomNumber()}`;
+const getRandomNumber = () => Math.floor(Math.random() * 123);
 
 for (let i = 0; i < rows * 3; i++) {
   const image = document.createElement("img");
-  image.src = `${unsplashURL}${getRandomSize()}`;
+  image.src = `${randomfoxURL}${getRandomNumber()}.jpg`;
   container.appendChild(image);
 }

From 34f194a1970c1428a00809c468f89ed3e3b8eb7b Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 10:11:33 +0100
Subject: [PATCH 16/62] fix: bg img url

---
 021-drag n drop/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/021-drag n drop/style.css b/021-drag n drop/style.css
index c0a43c1..7ba918c 100644
--- a/021-drag n drop/style.css	
+++ b/021-drag n drop/style.css	
@@ -21,7 +21,7 @@ body {
 }
 
 .fill {
-  background-image: url("https://source.unsplash.com/random/150x150");
+  background-image: url("https://picsum.photos/150/150");
   height: 145px;
   width: 145px;
   cursor: pointer;

From c5b37870414f6796e864a347e877b6055c8e02f5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 10:35:04 +0100
Subject: [PATCH 17/62] fix: img bg

---
 083-full screen image slider/style.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/083-full screen image slider/style.css b/083-full screen image slider/style.css
index 1a92356..e89faac 100644
--- a/083-full screen image slider/style.css	
+++ b/083-full screen image slider/style.css	
@@ -58,33 +58,33 @@ body {
 }
 
 .slide:first-child {
-  background: url("https://source.unsplash.com/vTL_qy03D1I/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(2) {
-  background: url("https://source.unsplash.com/n19qtMX3nNY/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1471565661762-b9dfae862dbe?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(3) {
-  background: url("https://source.unsplash.com/_7LbC5J-jw4/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?q=80&w=2071")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(4) {
-  background: url("https://source.unsplash.com/_KaMTEmJnxY/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(5) {
-  background: url("https://source.unsplash.com/3mGnYRUNIck/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(6) {
-  background: url("https://source.unsplash.com/cxnkcRnwS7M/1600x900") no-repeat
-    center center/cover;
+  background: url("https://images.unsplash.com/photo-1463453091185-61582044d556?q=80&w=2070")
+    no-repeat center center/cover;
 }
 
 .buttons button#prev {

From 807df6bc8ad656a89560394115564cff0d1423e6 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:03:50 +0100
Subject: [PATCH 18/62] fix: img source

---
 084-fluid image lightbox/index.html | 16 ++++++++--------
 084-fluid image lightbox/script.js  |  4 +++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/084-fluid image lightbox/index.html b/084-fluid image lightbox/index.html
index 2bd9978..1714a6c 100644
--- a/084-fluid image lightbox/index.html	
+++ b/084-fluid image lightbox/index.html	
@@ -13,30 +13,30 @@
     <div class="gallery">
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/tzSLATuyZzM/640x853"
+          src="https://images.unsplash.com/photo-1690790427878-ecf29d8b686b?q=80&w=640"
           alt="No elegance is possible without perfume"
-          data-original="tzSLATuyZzM/1920x2560"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/GWQ2KmCXrQA/640x1137"
+          src="https://images.unsplash.com/photo-1696218614256-b74c0bcde0d5?q=80&w=640"
           alt="It is the unseen, unforgettable, ultimate accessory"
-          data-original="GWQ2KmCXrQA/1920x3413"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/nkWnc-W_GP8/640x853"
+          src="https://images.unsplash.com/photo-1696218359361-b088f32f86b8?q=80&w=640"
           alt="A perfume is like a piece of clothing, a message"
-          data-original="nkWnc-W_GP8/1920x2560"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/Ou00pmFFPKA/640x853"
+          src="https://images.unsplash.com/photo-1690790591188-3503c1a4dcb6?q=80&w=640"
           alt="Perfume is like a parenthesis, a moment of freedom"
-          data-original="Ou00pmFFPKA/1920x2560"
+          data-original="1887"
         />
       </div>
     </div>
diff --git a/084-fluid image lightbox/script.js b/084-fluid image lightbox/script.js
index 3cef7a8..ebb5a0a 100644
--- a/084-fluid image lightbox/script.js	
+++ b/084-fluid image lightbox/script.js	
@@ -7,8 +7,10 @@ previews.forEach((preview) => {
   preview.addEventListener("click", () => {
     modal.classList.add("open");
     original.classList.add("open");
+    const originalUrl = new URL(preview.src);
     const originalSize = preview.getAttribute("data-original");
-    original.src = `https://source.unsplash.com/${originalSize}`;
+    originalUrl.searchParams.set("w", originalSize);
+    original.src = originalUrl.toString();
     caption.textContent = preview.alt;
     // Reference: https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext
   });

From 441232e46cd66939beb71e3474f70ddc983a88ef Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:25:52 +0100
Subject: [PATCH 19/62] fix: video src

---
 061-custom video player/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/061-custom video player/index.html b/061-custom video player/index.html
index 3a480f0..6132e1d 100644
--- a/061-custom video player/index.html	
+++ b/061-custom video player/index.html	
@@ -15,12 +15,12 @@
   <body>
     <h1>Custom Video Player</h1>
     <video
-      src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4"
+      src="https://www.w3schools.com/html/mov_bbb.mp4"
       id="video"
       class="screen"
-      poster="https://images.unsplash.com/photo-1472148439583-1f4cf81b80e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80"
+      poster="https://plus.unsplash.com/premium_photo-1683140811960-956e5bbf858e?q=80&w=1489&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     ></video>
-    <!-- Sample Video provided by DesignSupply https://codepen.io/designsupply/pen/zmEWBm -->
+    <!-- Sample Video provided by w3schools -->
     <div class="controls">
       <button class="btn" id="play">
         <i class="fa fa-play-circle fa-2x"></i>

From 648419e0db38cd9880cdf86e2b93cef54d0ee2ad Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:43:56 +0100
Subject: [PATCH 20/62] fix: icons and video src

---
 051-video background/index.html | 41 +++++++++++++++++++++++++++++----
 051-video background/style.css  |  6 +++--
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/051-video background/index.html b/051-video background/index.html
index 561e5da..da4e500 100644
--- a/051-video background/index.html	
+++ b/051-video background/index.html	
@@ -16,7 +16,7 @@ <h2 class="logo">Travel</h2>
         <div class="toggle"></div>
       </header>
       <video
-        src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4"
+        src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"
         muted
         loop
         autoplay
@@ -35,13 +35,46 @@ <h3>Exploring The World</h3>
       </div>
       <ul class="social">
         <li>
-          <a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png" /></a>
+          <a href="#">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"
+              />
+            </svg>
+          </a>
         </li>
         <li>
-          <a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png" /></a>
+          <a href="#">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </a>
         </li>
         <li>
-          <a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png" /></a>
+          <a href="#">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+              />
+            </svg>
+          </a>
         </li>
       </ul>
     </section>
diff --git a/051-video background/style.css b/051-video background/style.css
index 4f02f03..a9b54bd 100644
--- a/051-video background/style.css	
+++ b/051-video background/style.css	
@@ -2,6 +2,8 @@
 
 :root {
   --overlay-color: #31385c;
+  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
 }
 
 * {
@@ -51,7 +53,7 @@
   position: relative;
   width: 60px;
   height: 60px;
-  background: url(https://i.ibb.co/HrfVRcx/menu.png);
+  background: var(--menu-icon);
   background-repeat: no-repeat;
   background-size: 30px;
   background-position: center;
@@ -59,7 +61,7 @@
 }
 
 .toggle.active {
-  background: url(https://i.ibb.co/rt3HybH/close.png);
+  background: var(--close-icon);
   background-repeat: no-repeat;
   background-size: 25px;
   background-position: center;

From 3843362848ed2be3b9e5ad770c46370d34bfd9fe Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 12:08:24 +0100
Subject: [PATCH 21/62] fix: slider imgs

---
 053-touch slider/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/053-touch slider/index.html b/053-touch slider/index.html
index 06d6a9b..dd11c1f 100644
--- a/053-touch slider/index.html	
+++ b/053-touch slider/index.html	
@@ -15,19 +15,19 @@
       <div class="slide">
         <h2>AirPods</h2>
         <h4>$199</h4>
-        <img src="https://i.ibb.co/y08W0Jx/image1.png" alt="" />
+        <img src="https://i.ibb.co/ydLkyqw/airpods.png" alt="" />
         <a href="#" class="btn">Buy Now</a>
       </div>
       <div class="slide">
         <h2>iPhone 12</h2>
         <h4>$799</h4>
-        <img src="https://i.ibb.co/NYdGg2q/image2.png" alt="" />
+        <img src="https://i.ibb.co/C7VYPFh/iphone12.png" alt="" />
         <a href="#" class="btn">Buy Now</a>
       </div>
       <div class="slide">
         <h2>iPad</h2>
         <h4>$599</h4>
-        <img src="https://i.ibb.co/Jd3t4hQ/image3.png" alt="" />
+        <img src="https://i.ibb.co/NmgpvVX/ipad.png" alt="" />
         <a href="#" class="btn">Buy Now</a>
       </div>
     </div>

From 6716703bb2f45225cfc4814cc7af81e4904a6731 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 12:34:26 +0100
Subject: [PATCH 22/62] fix: bg imgs

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

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 1084073..f9aed56 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/PhVR2Vh/bg1.png") no-repeat center
-    center/cover;
+  background: url("https://i.ibb.co/QP92Bzb/bg1.png") no-repeat center
+    bottom/cover;
 }
 
 .section-top .content {
@@ -79,6 +79,8 @@ ul {
 
 .section-top .content h1 {
   font-size: 45px;
+  text-shadow: -1px -1px 0 var(--primary-color), 1px -1px 0 var(--primary-color),
+    -1px 1px 0 var(--primary-color), 1px 1px 0 var(--primary-color);
 }
 
 .section-top .content,
@@ -90,8 +92,7 @@ ul {
 
 .section-stream {
   min-height: 400px;
-  background: url("https://i.ibb.co/bsX6RV0/bg2.png") no-repeat center
-    center/cover;
+  background: url("https://i.ibb.co/r4B4MtV/bg2.png") no-repeat center top/cover;
 }
 
 .section-stream h2 {

From 874eb9c54103de8883a55580cd68be8ab7e4614d Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 12:40:35 +0100
Subject: [PATCH 23/62] style: improve readability

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

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index f9aed56..c3b47f7 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -108,7 +108,7 @@ ul {
 
 .section-stream .content > div,
 .section-grid > div {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(18, 13, 33, 0.3);
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;

From 97d50523e5dc846db22d47ddfbd500bdd58ec3b0 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 13:04:17 +0100
Subject: [PATCH 24/62] fix: imgs

---
 095-headphones product page/index.html | 38 +++++++++++++++++++++-----
 095-headphones product page/style.css  |  4 +--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/095-headphones product page/index.html b/095-headphones product page/index.html
index 0b7b609..f0dabc6 100644
--- a/095-headphones product page/index.html	
+++ b/095-headphones product page/index.html	
@@ -39,7 +39,7 @@ <h1>The headphones of the future.</h1>
           </p>
           <a href="#about" class="btn">Read More</a>
         </div>
-        <img src="https://i.ibb.co/37Y74kv/showcase.jpg" alt="" />
+        <img src="https://i.ibb.co/ydpFGg6/showcase.png" alt="" />
       </div>
     </section>
 
@@ -61,12 +61,36 @@ <h2>People Aren't Hearing All the Music</h2>
     <!-- Gallery -->
     <section class="section-gallery">
       <div class="gallery">
-        <img src="https://i.ibb.co/CHLBZnp/gal2323.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/4pBbhfY/gal39834.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/xSnHP7g/gal43884.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/QN6Bnrb/gal4958.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/dGZvj75/gal4545.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/S6FVFNt/gal74744.jpg" alt="" class="big" />
+        <img
+          src="https://images.unsplash.com/photo-1619113026857-7aa017691b1f?q=80&w=1887"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1509098681029-b45e9c845022?q=80&w=2070"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1620578077783-33e254311182?w=500"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1545127398-14699f92334b?q=80&w=1935"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1545127398-5aae47194b22?q=80&w=1935"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1491927570842-0261e477d937?q=80&w=1887"
+          alt=""
+          class="big"
+        />
       </div>
     </section>
 
diff --git a/095-headphones product page/style.css b/095-headphones product page/style.css
index d67467f..219f436 100644
--- a/095-headphones product page/style.css	
+++ b/095-headphones product page/style.css	
@@ -120,8 +120,8 @@ img {
 
 .section-large-text {
   position: relative;
-  background: url("https://i.ibb.co/1RS1dqC/section-b.jpg") bottom center/cover
-    no-repeat;
+  background: url("https://images.unsplash.com/photo-1593121925328-369cc8459c08?q=80&w=2070")
+    bottom center/cover no-repeat;
   height: 600px;
 }
 

From 49ae3a77640724155f8a6fc6fa0982a00404f8ef Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:01:26 +0100
Subject: [PATCH 25/62] fix: recognition lang

---
 078-speak number guessing game/script.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js
index f80a749..8c0f07c 100644
--- a/078-speak number guessing game/script.js	
+++ b/078-speak number guessing game/script.js	
@@ -5,6 +5,7 @@ const randomNumber = getRandomNumber();
 window.SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition = new window.SpeechRecognition();
+recognition.lang = "en-US";
 recognition.start();
 
 function getRandomNumber() {

From 5abd530ec52b24f49a6064101fdcf97f364e4e44 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 18:00:56 +0100
Subject: [PATCH 26/62] style: add transparent bg

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

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index c3b47f7..008ab79 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Nixie+One&display=swap");
 
 :root {
-  --primary-color: #2d2254;
+  --primary-color: #0c030f;
   --secondary--color: #f5c42f;
   --text-color: #c5bbec;
 }
@@ -69,7 +69,7 @@ ul {
 .section-top {
   min-height: 200px;
   padding-top: 20px;
-  background: url("https://i.ibb.co/QP92Bzb/bg1.png") no-repeat center
+  background: url("https://i.ibb.co/kGKSxTd/bg1.png") no-repeat center
     bottom/cover;
 }
 
@@ -92,7 +92,7 @@ ul {
 
 .section-stream {
   min-height: 400px;
-  background: url("https://i.ibb.co/r4B4MtV/bg2.png") no-repeat center top/cover;
+  background: url("https://i.ibb.co/p2JjTkj/bg2.png") no-repeat center top/cover;
 }
 
 .section-stream h2 {

From 502938768e7a2afd0a17de63e4af8f76540f0c1e Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 24 Jan 2025 18:19:32 +0100
Subject: [PATCH 27/62] fix: bg width

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

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 008ab79..7817c55 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -69,7 +69,7 @@ ul {
 .section-top {
   min-height: 200px;
   padding-top: 20px;
-  background: url("https://i.ibb.co/kGKSxTd/bg1.png") no-repeat center
+  background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center
     bottom/cover;
 }
 
@@ -92,7 +92,7 @@ ul {
 
 .section-stream {
   min-height: 400px;
-  background: url("https://i.ibb.co/p2JjTkj/bg2.png") no-repeat center top/cover;
+  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top/cover;
 }
 
 .section-stream h2 {
@@ -108,7 +108,7 @@ ul {
 
 .section-stream .content > div,
 .section-grid > div {
-  background: rgba(18, 13, 33, 0.3);
+  background: rgba(18, 13, 33, 0.9);
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;

From 55c6ded10ea1720cc405a5063ec491ca59139a6e Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 24 Mar 2025 08:14:23 +0100
Subject: [PATCH 28/62] docs: remove survey

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

diff --git a/README.md b/README.md
index 6c4a163..a522c56 100644
--- a/README.md
+++ b/README.md
@@ -117,10 +117,6 @@ Explore each project individually and view live demos to see them in action:
 
 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.
 
-## Share Your Insights
-
-We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76).
-
 ## Setup Instructions
 
 To get started with these projects, follow these simple steps:

From de6b7c9c5770cdc309ddb3fa4b66aae461e8e5db Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 4 Jun 2025 13:26:30 +0200
Subject: [PATCH 29/62] docs: add companion guide

	modified:   README.md

 Changes to be committed:
	modified:   README.md
---
 README.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/README.md b/README.md
index a522c56..cb77c6f 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,21 @@ Explore each project individually and view live demos to see them in action:
 
 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.
 
+## The Ultimate 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:
+
+- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions.
+- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives.
+- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites.
+- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later.
+
+This guide isn't just about completing 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, follow these simple steps:

From f21865232f696190ad9008495370f009944d2faf Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:19:39 +0200
Subject: [PATCH 30/62] docs: container queries title

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

diff --git a/README.md b/README.md
index cb77c6f..967b360 100644
--- a/README.md
+++ b/README.md
@@ -111,7 +111,7 @@ Explore each project individually and view live demos to see them in action:
 | 099 | [Parallax Website](099-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
 | 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone)                       | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy)  |
 | 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)  |
+| 102 | [Container Queries](102-container%20queries)                           | [Live Demo](https://codepen.io/solygambas/full/abMqPNy)  |
 
 ## Get Inspired
 

From 9eb410ee6f2662028868b384bcbcaa21132d6822 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 12 Jun 2025 11:45:49 +0200
Subject: [PATCH 31/62] docs: update companion guide presentation

---
 README.md | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 967b360..49659cd 100644
--- a/README.md
+++ b/README.md
@@ -117,18 +117,19 @@ Explore each project individually and view live demos to see them in action:
 
 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.
 
-## The Ultimate Companion Guide
+## 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.
+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:
 
-- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions.
-- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives.
-- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites.
-- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later.
+- **Day 0: Before Starting Up**: Quick-start setup instructions, and 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.
 
-This guide isn't just about completing projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
+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)
 

From 984638aedbce682a277772542044ee4fe5b4a9a7 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 12 Jun 2025 11:48:49 +0200
Subject: [PATCH 32/62] docs: fix indentation

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

diff --git a/README.md b/README.md
index 49659cd..8e780c1 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,8 @@ Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & J
 
 Inside the PDF, you'll find:
 
-- **Day 0: Before Starting Up**: Quick-start setup instructions, and boilerplate walkthrough.
+- **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.

From 6158625779816f5c1cc50bad0ff6e39e139c5be5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 14 Jun 2025 13:52:23 +0200
Subject: [PATCH 33/62] docs: add youtube setup tutorial

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

diff --git a/README.md b/README.md
index 8e780c1..06bc346 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 
 ## Setup Instructions
 
-To get started with these projects, follow these simple steps:
+To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) 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 49a4807701d27c133377a6114bc069551ea9bb75 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:46:08 +0200
Subject: [PATCH 34/62] docs: add solution branch

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

diff --git a/README.md b/README.md
index 06bc346..39c8068 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,7 @@ Inside the PDF, you'll find:
   - **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.
 

From 9eafd1b0931937bbfd42bef4fc76bf2e90dcfa36 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:49:02 +0200
Subject: [PATCH 35/62] docs: remove code block

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

diff --git a/README.md b/README.md
index 39c8068..dcf6e2b 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Inside the PDF, you'll find:
   - **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.
+  - **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.
 

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 36/62] 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 37/62] 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 38/62] 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 39/62] 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 40/62] 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 41/62] 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 42/62] 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 43/62] 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 44/62] 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 45/62] 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 46/62] 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 47/62] 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 48/62] 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 49/62] 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 50/62] 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 51/62] 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 52/62] 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 53/62] 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 54/62] 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 55/62] 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 56/62] 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 57/62] 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 58/62] 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 59/62] 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 60/62] 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 61/62] 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 62/62] 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 {
