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
diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css
index d3741bc..d2568ea 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;
@@ -57,8 +57,13 @@ body {
     width: 100vw;
   }
 
-  .panel:nth-of-type(4),
-  .panel:nth-of-type(5) {
-    display: none;
+  .panel {
+    flex: 1;
+    margin: 5px;
+    height: 40vh;
+  }
+
+  .panel.active {
+    flex: 3;
   }
 }
diff --git a/002-progress steps/index.html b/002-progress steps/index.html
index 07e7c79..b6c0e27 100644
--- a/002-progress steps/index.html	
+++ b/002-progress steps/index.html	
@@ -10,10 +10,10 @@
     <div class="container">
       <div class="progress-container">
         <div class="progress" id="progress"></div>
-        <div class="circle active">1</div>
-        <div class="circle">2</div>
-        <div class="circle">3</div>
-        <div class="circle">4</div>
+        <div class="step active">1</div>
+        <div class="step">2</div>
+        <div class="step">3</div>
+        <div class="step">4</div>
       </div>
       <button class="btn" id="prev" disabled>Prev</button>
       <button class="btn" id="next">Next</button>
diff --git a/002-progress steps/script.js b/002-progress steps/script.js
index 024a72d..2bd502f 100644
--- a/002-progress steps/script.js	
+++ b/002-progress steps/script.js	
@@ -1,13 +1,13 @@
 const progress = document.getElementById("progress");
 const prev = document.getElementById("prev");
 const next = document.getElementById("next");
-const circles = document.querySelectorAll(".circle");
+const steps = document.querySelectorAll(".step");
 
 let currentActive = 1;
 
 next.addEventListener("click", () => {
   currentActive++;
-  if (currentActive > circles.length) currentActive = circles.length;
+  if (currentActive > steps.length) currentActive = steps.length;
   update();
 });
 
@@ -18,15 +18,15 @@ prev.addEventListener("click", () => {
 });
 
 const update = () => {
-  circles.forEach((circle, index) => {
-    if (index < currentActive) circle.classList.add("active");
-    else circle.classList.remove("active");
+  steps.forEach((step, index) => {
+    if (index < currentActive) step.classList.add("active");
+    else step.classList.remove("active");
   });
   const actives = document.querySelectorAll(".active");
   progress.style.width =
-    ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
+    ((actives.length - 1) / (steps.length - 1)) * 100 + "%";
   if (currentActive === 1) prev.disabled = true;
-  else if (currentActive === circles.length) next.disabled = true;
+  else if (currentActive === steps.length) next.disabled = true;
   else {
     prev.disabled = false;
     next.disabled = false;
diff --git a/002-progress steps/style.css b/002-progress steps/style.css
index b4dfe95..78c4f1c 100644
--- a/002-progress steps/style.css	
+++ b/002-progress steps/style.css	
@@ -57,7 +57,7 @@ body {
   transition: 0.4s ease;
 }
 
-.circle {
+.step {
   background-color: #fff;
   color: #999;
   border-radius: 50%;
@@ -70,7 +70,7 @@ body {
   transition: 0.4s ease;
 }
 
-.circle.active {
+.step.active {
   border-color: var(--line-border-fill);
 }
 
diff --git a/005-blurry loading/style.css b/005-blurry loading/style.css
index 86f6405..99ac86a 100644
--- a/005-blurry loading/style.css	
+++ b/005-blurry loading/style.css	
@@ -23,7 +23,6 @@ body {
   width: calc(100vw + 60px);
   height: calc(100vh + 60px);
   z-index: -1;
-  filter: blur(0px);
 }
 
 .loading-text {
diff --git a/008-form wave animation/script.js b/008-form wave animation/script.js
index f13a433..0b28a83 100644
--- a/008-form wave animation/script.js	
+++ b/008-form wave animation/script.js	
@@ -1,11 +1,15 @@
 const labels = document.querySelectorAll(".form-control label");
 
-labels.forEach((label) => {
-  label.innerHTML = label.innerText
+function createWaveLabel(text) {
+  return text
     .split("")
     .map(
       (letter, idx) =>
         `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
     )
     .join("");
+}
+
+labels.forEach((label) => {
+  label.innerHTML = createWaveLabel(label.innerText);
 });
diff --git a/012-FAQ collapse/script.js b/012-FAQ collapse/script.js
index f2274a5..a630e75 100644
--- a/012-FAQ collapse/script.js	
+++ b/012-FAQ collapse/script.js	
@@ -1,4 +1,5 @@
-const toggles = document.querySelectorAll(".faq-toggle");
+const faqContainer = document.querySelector(".faq-container");
+const toggles = faqContainer.querySelectorAll(".faq-toggle");
 
 toggles.forEach((toggle) => {
   toggle.addEventListener("click", () => {
diff --git a/013-random choice picker/script.js b/013-random choice picker/script.js
index b4bbb2e..a3244e2 100644
--- a/013-random choice picker/script.js	
+++ b/013-random choice picker/script.js	
@@ -15,8 +15,7 @@ const createTags = (input) => {
   });
 };
 
-const pickRandomTag = () => {
-  const tags = document.querySelectorAll(".tag");
+const pickRandomTag = (tags) => {
   return tags[Math.floor(Math.random() * tags.length)];
 };
 
@@ -25,9 +24,10 @@ const highlightTag = (tag) => tag.classList.add("highlight");
 const unHighlightTag = (tag) => tag.classList.remove("highlight");
 
 const randomSelect = () => {
+  const tags = tagsElements.querySelectorAll(".tag");
   const times = 30;
   const interval = setInterval(() => {
-    const randomTag = pickRandomTag();
+    const randomTag = pickRandomTag(tags);
     highlightTag(randomTag);
     setTimeout(() => {
       unHighlightTag(randomTag);
@@ -37,7 +37,7 @@ const randomSelect = () => {
   setTimeout(() => {
     clearInterval(interval);
     setTimeout(() => {
-      const randomTag = pickRandomTag();
+      const randomTag = pickRandomTag(tags);
       highlightTag(randomTag);
     }, 100);
   }, times * 100);
diff --git a/014-animated navigation/style.css b/014-animated navigation/style.css
index 1d0b987..babc091 100644
--- a/014-animated navigation/style.css	
+++ b/014-animated navigation/style.css	
@@ -31,6 +31,7 @@ nav {
   border-radius: 3px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: width 0.6s linear;
+  overflow-x: hidden;
 }
 
 nav.active {
@@ -44,7 +45,7 @@ nav ul {
   margin: 0;
   width: 0;
   transition: width 0.6s linear;
-  overflow-x: hidden;
+  gap: 20px;
 }
 
 nav.active ul {
@@ -66,7 +67,6 @@ nav ul a {
   position: relative;
   color: #000;
   text-decoration: none;
-  margin: 0 10px;
 }
 
 .icon {
@@ -105,3 +105,15 @@ nav.active .icon .line1 {
 nav.active .icon .line2 {
   transform: rotate(765deg) translateY(-5.5px);
 }
+
+@media (max-width: 350px) {
+  nav.active {
+    width: 100%;
+    height: 150px;
+  }
+
+  nav.active ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
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;
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>
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"
           />
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);
 }
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;
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>
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>
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;
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 {
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);
   }
 });
 
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 = [];
diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js
index f80a749..db2f562 100644
--- a/078-speak number guessing game/script.js	
+++ b/078-speak number guessing game/script.js	
@@ -1,56 +1,63 @@
-const messageElement = document.getElementById("msg");
-
-const randomNumber = getRandomNumber();
-
-window.SpeechRecognition =
+const SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
-let recognition = new window.SpeechRecognition();
-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);
+  });
+}
diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 1084073..2b4b12c 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,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/NTFtY8q/bg1.png") no-repeat center bottom /
+    100vw auto;
 }
 
 .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,
@@ -89,9 +91,10 @@ ul {
 }
 
 .section-stream {
+  margin-top: -1px;
   min-height: 400px;
-  background: url("https://i.ibb.co/bsX6RV0/bg2.png") no-repeat center
-    center/cover;
+  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top /
+    100vw auto;
 }
 
 .section-stream h2 {
@@ -101,13 +104,13 @@ ul {
 .section-stream .play {
   width: 50%;
   display: block;
-  margin: 30px auto;
+  margin: 0 auto 30px;
   opacity: 0.5;
 }
 
 .section-stream .content > div,
 .section-grid > div {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(18, 13, 33, 0.9);
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;
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 {
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
   });
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>
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";
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 */
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..81165ee 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,96 +38,85 @@ 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" });
-    current = pageNumber;
-  }
-  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");
+    await tl;
+
+    current = pageNumber;
+    isAnimating = false;
   }
+  document.addEventListener("wheel", scrollChange);
 
   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(
-      hamburgerLines,
-      0.2,
+      ".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(
+      ".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();
   });
 }
 
-// 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();
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;
 }
 
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);
diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index 48a6b8c..34f5381 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 1rem;
 }
 
 .text {
-  padding: 2rem 20rem;
+  max-width: 800px;
+  margin: 2rem auto;
   font-size: 1.1rem;
 }
 
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
+}
diff --git a/README.md b/README.md
index 71c76b3..a0c99fc 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,30 @@
 # 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)
+## 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
+
+[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                                                |
 | :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -107,14 +129,40 @@
 | 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)  |
+
+> **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.
 
-This repository is mostly based on 2 courses by Brad Traversy (2020):
+## Setup Instructions
+
+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.
+
+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).
+
+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 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)
@@ -123,3 +171,7 @@ The 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. 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!
