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/index.html b/001-expanding cards/index.html
index a8ff5d0..ee308b0 100644
--- a/001-expanding cards/index.html	
+++ b/001-expanding cards/index.html	
@@ -17,7 +17,7 @@
       <div
         class="panel active"
         style="
-          background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+          background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?auto=format&fit=crop&w=1350&q=80');
         "
       >
         <h3>Explore the world</h3>
@@ -25,7 +25,7 @@ <h3>Explore the world</h3>
       <div
         class="panel"
         style="
-          background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
+          background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?auto=format&fit=crop&w=1350&q=80');
         "
       >
         <h3>Explore the world</h3>
@@ -33,7 +33,7 @@ <h3>Explore the world</h3>
       <div
         class="panel"
         style="
-          background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80');
+          background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?auto=format&fit=crop&w=1778&q=80');
         "
       >
         <h3>Explore the world</h3>
@@ -41,7 +41,7 @@ <h3>Explore the world</h3>
       <div
         class="panel"
         style="
-          background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+          background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?auto=format&fit=crop&w=1350&q=80');
         "
       >
         <h3>Explore the world</h3>
@@ -49,7 +49,7 @@ <h3>Explore the world</h3>
       <div
         class="panel"
         style="
-          background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+          background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?auto=format&fit=crop&w=1350&q=80');
         "
       >
         <h3>Explore the world</h3>
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/003-rotating navigation/index.html b/003-rotating navigation/index.html
index b695be1..d8c8c33 100644
--- a/003-rotating navigation/index.html	
+++ b/003-rotating navigation/index.html	
@@ -43,7 +43,7 @@ <h1>Amazing Article</h1>
         </p>
         <h2>My Subtitle</h2>
         <img
-          src="https://images.unsplash.com/photo-1610308354580-0108c064a578?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80"
+          src="https://images.unsplash.com/photo-1610308354580-0108c064a578?auto=format&fit=crop&w=2100&q=80"
         />
         <p>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti
diff --git a/005-blurry loading/style.css b/005-blurry loading/style.css
index 86f6405..29f0b37 100644
--- a/005-blurry loading/style.css	
+++ b/005-blurry loading/style.css	
@@ -15,7 +15,7 @@ body {
 }
 
 .bg {
-  background: url("https://images.unsplash.com/photo-1610217053402-b187336e9443?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80")
+  background: url("https://images.unsplash.com/photo-1610217053402-b187336e9443?auto=format&fit=crop&w=2100&q=80")
     no-repeat center center / cover;
   position: absolute;
   top: -30px;
@@ -23,7 +23,6 @@ body {
   width: calc(100vw + 60px);
   height: calc(100vh + 60px);
   z-index: -1;
-  filter: blur(0px);
 }
 
 .loading-text {
diff --git a/007-split landing page/index.html b/007-split landing page/index.html
index b783e39..eead15c 100644
--- a/007-split landing page/index.html	
+++ b/007-split landing page/index.html	
@@ -7,16 +7,16 @@
     <title>Split Landing Page</title>
   </head>
   <body>
-    <div class="container">
-      <div class="split left">
+    <main class="container">
+      <section class="split left">
         <h1>PlayStation 5</h1>
         <a href="#" class="btn">Buy Now</a>
-      </div>
-      <div class="split right">
+      </section>
+      <section class="split right">
         <h1>Xbox Series X</h1>
         <a href="#" class="btn">Buy Now</a>
-      </div>
-    </div>
+      </section>
+    </main>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/007-split landing page/style.css b/007-split landing page/style.css
index 074a8ee..90871fc 100644
--- a/007-split landing page/style.css	
+++ b/007-split landing page/style.css	
@@ -75,7 +75,7 @@ h1 {
 
 .split.left {
   left: 0;
-  background: url("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+  background: url("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?auto=format&fit=crop&w=1350&q=80")
     no-repeat center / cover;
 }
 
@@ -89,7 +89,7 @@ h1 {
 
 .split.right {
   right: 0;
-  background: url("https://images.unsplash.com/photo-1607853827120-6847830b38b0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1762&q=80")
+  background: url("https://images.unsplash.com/photo-1607853827120-6847830b38b0?auto=format&fit=crop&w=1762&q=80")
     no-repeat center / cover;
 }
 
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/015-incrementing counter/index.html b/015-incrementing counter/index.html
index 3e79cf0..8197666 100644
--- a/015-incrementing counter/index.html	
+++ b/015-incrementing counter/index.html	
@@ -13,21 +13,21 @@
     <title>Increment Counter</title>
   </head>
   <body>
-    <div class="counter-container">
+    <article class="counter-container">
       <i class="fab fa-instagram fa-3x"></i>
       <div class="counter" data-target="12000"></div>
       <span>Instagram Followers</span>
-    </div>
-    <div class="counter-container">
+    </article>
+    <article class="counter-container">
       <i class="fab fa-youtube fa-3x"></i>
       <div class="counter" data-target="5000"></div>
       <span>YouTube Subscribers</span>
-    </div>
-    <div class="counter-container">
+    </article>
+    <article class="counter-container">
       <i class="fab fa-facebook fa-3x"></i>
       <div class="counter" data-target="7500"></div>
       <span>Facebook Fans</span>
-    </div>
+    </article>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/015-incrementing counter/style.css b/015-incrementing counter/style.css
index 4b017ef..2651aeb 100644
--- a/015-incrementing counter/style.css	
+++ b/015-incrementing counter/style.css	
@@ -27,6 +27,7 @@ body {
 .counter {
   font-size: 60px;
   margin-top: 10px;
+  min-width: 5ch;
 }
 
 @media (max-width: 580px) {
diff --git a/018-background slider/index.html b/018-background slider/index.html
index d290c17..5f339b5 100644
--- a/018-background slider/index.html	
+++ b/018-background slider/index.html	
@@ -17,31 +17,31 @@
       <div
         class="slide active"
         style="
-          background-image: url('https://images.unsplash.com/photo-1610620746460-de78cf3d1705?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
+          background-image: url('https://images.unsplash.com/photo-1610620746460-de78cf3d1705?auto=format&fit=crop&w=2100&q=80');
         "
       ></div>
       <div
         class="slide"
         style="
-          background-image: url('https://images.unsplash.com/photo-1609589079958-8192b9cdab91?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2100&q=80');
+          background-image: url('https://images.unsplash.com/photo-1609589079958-8192b9cdab91?auto=format&fit=crop&w=2100&q=80');
         "
       ></div>
       <div
         class="slide"
         style="
-          background-image: url('https://images.unsplash.com/photo-1605718665998-85fbd49c5eff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2100&q=80');
+          background-image: url('https://images.unsplash.com/photo-1605718665998-85fbd49c5eff?auto=format&fit=crop&w=2100&q=80');
         "
       ></div>
       <div
         class="slide"
         style="
-          background-image: url('https://images.unsplash.com/photo-1609589079852-0b1c745a71ec?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
+          background-image: url('https://images.unsplash.com/photo-1609589079852-0b1c745a71ec?auto=format&fit=crop&w=2100&q=80');
         "
       ></div>
       <div
         class="slide"
         style="
-          background-image: url('https://images.unsplash.com/photo-1604916010805-18ea15fa6d32?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
+          background-image: url('https://images.unsplash.com/photo-1604916010805-18ea15fa6d32?auto=format&fit=crop&w=2100&q=80');
         "
       ></div>
       <button class="arrow left-arrow" id="left">
diff --git a/018-background slider/style.css b/018-background slider/style.css
index 00dd61b..dfd243e 100644
--- a/018-background slider/style.css	
+++ b/018-background slider/style.css	
@@ -26,7 +26,6 @@ body::before {
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
-  z-index: -1;
 }
 
 .slider-container {
diff --git a/019-theme clock/index.html b/019-theme clock/index.html
index e3333dc..285fee1 100644
--- a/019-theme clock/index.html	
+++ b/019-theme clock/index.html	
@@ -8,16 +8,16 @@
   </head>
   <body>
     <button class="toggle">Dark mode</button>
-    <div class="clock-container">
-      <div class="clock">
-        <div class="needle hour"></div>
-        <div class="needle minute"></div>
-        <div class="needle second"></div>
-        <div class="center-point"></div>
-      </div>
-      <div class="time"></div>
+    <section class="clock-container">
+      <figure class="clock" aria-label="Analog clock">
+        <span class="needle hour"></span>
+        <span class="needle minute"></span>
+        <span class="needle second"></span>
+        <span class="center-point"></span>
+      </figure>
+      <time class="time" aria-live="polite"></time>
       <div class="date"></div>
-    </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/019-theme clock/script.js b/019-theme clock/script.js
index e4b0f84..2af40a4 100644
--- a/019-theme clock/script.js	
+++ b/019-theme clock/script.js	
@@ -4,6 +4,7 @@ const secondElement = document.querySelector(".second");
 const timeElement = document.querySelector(".time");
 const dateElement = document.querySelector(".date");
 const toggle = document.querySelector(".toggle");
+const html = document.querySelector("html");
 
 const days = [
   "Sunday",
@@ -30,7 +31,6 @@ const months = [
 ];
 
 toggle.addEventListener("click", (e) => {
-  const html = document.querySelector("html");
   if (html.classList.contains("dark")) {
     html.classList.remove("dark");
     e.target.innerHTML = "Dark mode";
diff --git a/019-theme clock/style.css b/019-theme clock/style.css
index 3ab6945..9292fc1 100644
--- a/019-theme clock/style.css	
+++ b/019-theme clock/style.css	
@@ -16,9 +16,6 @@ html {
 html.dark {
   --primary-color: #fff;
   --secondary-color: #333;
-}
-
-html.dark {
   background-color: #111;
   color: var(--primary-color);
 }
diff --git a/020-button ripple effect/script.js b/020-button ripple effect/script.js
index eb16e14..b339c64 100644
--- a/020-button ripple effect/script.js	
+++ b/020-button ripple effect/script.js	
@@ -1,13 +1,19 @@
 const buttons = document.querySelectorAll(".ripple");
 
+function getClickPosition(e, element) {
+  const x = e.clientX;
+  const y = e.clientY;
+  const buttonTop = element.offsetTop;
+  const buttonLeft = element.offsetLeft;
+  return {
+    xInside: x - buttonLeft,
+    yInside: y - buttonTop,
+  };
+}
+
 buttons.forEach((button) => {
   button.addEventListener("click", function (e) {
-    const x = e.clientX;
-    const y = e.clientY;
-    const buttonTop = e.target.offsetTop;
-    const buttonLeft = e.target.offsetLeft;
-    const xInside = x - buttonLeft;
-    const yInside = y - buttonTop;
+    const { xInside, yInside } = getClickPosition(e, this);
     const circle = document.createElement("span");
     circle.classList.add("circle");
     circle.style.top = yInside + "px";
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/024-content placeholder/script.js b/024-content placeholder/script.js
index 1af040b..7183c07 100644
--- a/024-content placeholder/script.js	
+++ b/024-content placeholder/script.js	
@@ -25,7 +25,7 @@ const animated_bg_texts = document.querySelectorAll(".animated-bg-text");
 
 const getData = () => {
   header.innerHTML =
-    '<img src="https://images.unsplash.com/photo-1610751399547-46ad575447cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />';
+    '<img src="https://images.unsplash.com/photo-1610751399547-46ad575447cf?auto=format&fit=crop&w=750&q=80" alt="" />';
   title.innerHTML = "Lorem ipsum dolor sit amet";
   excerpt.innerHTML =
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis";
diff --git a/025-sticky navigation/style.css b/025-sticky navigation/style.css
index 1e3eae3..366a702 100644
--- a/025-sticky navigation/style.css	
+++ b/025-sticky navigation/style.css	
@@ -68,7 +68,7 @@ body {
 }
 
 .hero {
-  background-image: url("https://images.unsplash.com/photo-1554744512-d6c603f27c54?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80");
+  background-image: url("https://images.unsplash.com/photo-1554744512-d6c603f27c54?auto=format&fit=crop&w=1200&q=80");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom center;
diff --git a/026-double vertical slider/index.html b/026-double vertical slider/index.html
index 1372898..ae8e03d 100644
--- a/026-double vertical slider/index.html	
+++ b/026-double vertical slider/index.html	
@@ -35,22 +35,22 @@ <h1>Accessories</h1>
       <div class="right-slide">
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+            background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
+            background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?auto=format&fit=crop&w=1050&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
+            background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
+            background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
       </div>
diff --git a/029-double click heart/style.css b/029-double click heart/style.css
index c10dd0e..248e453 100644
--- a/029-double click heart/style.css	
+++ b/029-double click heart/style.css	
@@ -29,7 +29,7 @@ small {
 .loveMe {
   height: 440px;
   width: 300px;
-  background: url("https://images.unsplash.com/photo-1597540103960-2a6528f09ae9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=321&q=80")
+  background: url("https://images.unsplash.com/photo-1597540103960-2a6528f09ae9?auto=format&fit=crop&w=321&q=80")
     no-repeat center center/cover;
   margin: auto;
   cursor: pointer;
diff --git a/035-image carousel/index.html b/035-image carousel/index.html
index 2f50bdb..d1708ed 100644
--- a/035-image carousel/index.html	
+++ b/035-image carousel/index.html	
@@ -10,19 +10,19 @@
     <div class="carousel">
       <div class="image-container" id="images">
         <img
-          src="https://images.unsplash.com/photo-1611072566310-7b7bfeca4582?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
+          src="https://images.unsplash.com/photo-1611072566310-7b7bfeca4582?auto=format&fit=crop&w=752&q=80"
           alt="first-image"
         />
         <img
-          src="https://images.unsplash.com/photo-1611072488486-0cae417b73e4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
+          src="https://images.unsplash.com/photo-1611072488486-0cae417b73e4?auto=format&fit=crop&w=752&q=80"
           alt="second-image"
         />
         <img
-          src="https://images.unsplash.com/photo-1611072652569-bffa64d83763?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
+          src="https://images.unsplash.com/photo-1611072652569-bffa64d83763?auto=format&fit=crop&w=752&q=80"
           alt="third-image"
         />
         <img
-          src="https://images.unsplash.com/photo-1611072652955-5705ec8f91eb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
+          src="https://images.unsplash.com/photo-1611072652955-5705ec8f91eb?auto=format&fit=crop&w=752&q=80"
           alt="fourth-image"
         />
       </div>
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/037-pokedex/style.css b/037-pokedex/style.css
index 7095eda..5a2f263 100644
--- a/037-pokedex/style.css
+++ b/037-pokedex/style.css
@@ -22,8 +22,8 @@ h1 {
 .poke-container {
   display: flex;
   flex-wrap: wrap;
-  align-items: space-between;
-  justify-content: center;
+  align-items: center;
+  justify-content: space-evenly;
   margin: 0 auto;
   max-width: 1200px;
 }
diff --git a/038-mobile tab navigation/index.html b/038-mobile tab navigation/index.html
index 00bb528..50e9b47 100644
--- a/038-mobile tab navigation/index.html	
+++ b/038-mobile tab navigation/index.html	
@@ -15,22 +15,22 @@
   <body>
     <div class="phone">
       <img
-        src="https://images.unsplash.com/photo-1610652492500-ded49ceeb378?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+        src="https://images.unsplash.com/photo-1610652492500-ded49ceeb378?auto=format&fit=crop&w=634&q=80"
         alt="home"
         class="content show"
       />
       <img
-        src="https://images.unsplash.com/photo-1611038917003-9227e16e0d9f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+        src="https://images.unsplash.com/photo-1611038917003-9227e16e0d9f?auto=format&fit=crop&w=634&q=80"
         alt="work"
         class="content"
       />
       <img
-        src="https://images.unsplash.com/photo-1611038916975-f6b3ded00212?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=554&q=80"
+        src="https://images.unsplash.com/photo-1611038916975-f6b3ded00212?auto=format&fit=crop&w=554&q=80"
         alt="blog"
         class="content"
       />
       <img
-        src="https://images.unsplash.com/photo-1611038917094-02aea0f65649?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+        src="https://images.unsplash.com/photo-1611038917094-02aea0f65649?auto=format&fit=crop&w=634&q=80"
         alt="about"
         class="content"
       />
diff --git a/038-mobile tab navigation/style.css b/038-mobile tab navigation/style.css
index c45b13f..46d2021 100644
--- a/038-mobile tab navigation/style.css	
+++ b/038-mobile tab navigation/style.css	
@@ -42,7 +42,6 @@ nav {
   position: absolute;
   bottom: 0;
   left: 0;
-  margin-top: -5px;
   width: 100%;
 }
 
diff --git a/039-password strength background/index.html b/039-password strength background/index.html
index 0af1d31..57473f8 100644
--- a/039-password strength background/index.html	
+++ b/039-password strength background/index.html	
@@ -13,7 +13,7 @@
     <title>Password Strength Background</title>
   </head>
   <body>
-    <div class="background" id="background"></div>
+    <div class="blurred-background" id="background"></div>
     <div class="bg-white rounded p-10 text-center shadow-md">
       <h1 class="text-3xl">Image Password Strength</h1>
       <p class="text-sm pt-1 text-gray-700">
diff --git a/039-password strength background/style.css b/039-password strength background/style.css
index e77a4db..a14dc29 100644
--- a/039-password strength background/style.css	
+++ b/039-password strength background/style.css	
@@ -12,7 +12,7 @@ body {
   margin: 0;
 }
 
-.background {
+.blurred-background {
   background: url("https://images.unsplash.com/photo-1556745757-8d76bdb6984b")
     no-repeat center center/cover;
   position: absolute;
diff --git a/040-3d boxes background/style.css b/040-3d boxes background/style.css
index 3551eed..6b8690a 100644
--- a/040-3d boxes background/style.css	
+++ b/040-3d boxes background/style.css	
@@ -42,9 +42,8 @@ body {
 }
 
 .boxes {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   height: 500px;
   width: 500px;
   position: relative;
diff --git a/041-verify account UI/index.html b/041-verify account UI/index.html
index b52c626..57e3146 100644
--- a/041-verify account UI/index.html	
+++ b/041-verify account UI/index.html	
@@ -63,7 +63,7 @@ <h2>Verify Your Account</h2>
           required
         />
       </div>
-      <small class="info">
+      <small class="helper-text">
         This is design only. We didn't actually send you an email as we don't
         have your email, right?
       </small>
diff --git a/041-verify account UI/script.js b/041-verify account UI/script.js
index 0ed3eb3..25ef7fc 100644
--- a/041-verify account UI/script.js	
+++ b/041-verify account UI/script.js	
@@ -4,7 +4,7 @@ codes[0].focus();
 
 codes.forEach((code, index) => {
   code.addEventListener("keydown", (e) => {
-    if (e.key >= 0 && e.key < 9) {
+    if (e.key >= 0 && e.key <= 9) {
       codes[index].value = "";
       setTimeout(() => {
         codes[index + 1].focus();
diff --git a/041-verify account UI/style.css b/041-verify account UI/style.css
index f3f8cb4..c8c4319 100644
--- a/041-verify account UI/style.css	
+++ b/041-verify account UI/style.css	
@@ -41,6 +41,7 @@ body {
   text-align: center;
   font-weight: 300;
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 .code::-webkit-inner-spin-button,
@@ -54,7 +55,7 @@ body {
   box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
 }
 
-.info {
+.helper-text {
   background-color: #eaeaea;
   display: inline-block;
   padding: 10px;
diff --git a/042-live user filter/script.js b/042-live user filter/script.js
index ff5d3ad..b7cde6a 100644
--- a/042-live user filter/script.js	
+++ b/042-live user filter/script.js	
@@ -18,7 +18,6 @@ const getData = async () => {
   result.innerHTML = "";
   results.forEach((user) => {
     const li = document.createElement("li");
-    listItems.push(li);
     li.innerHTML = `
       <img
             src="${user.picture.large}"
@@ -29,6 +28,7 @@ const getData = async () => {
             <p>${user.location.city}, ${user.location.country}</p>
       </div>
       `;
+    listItems.push(li);
     result.appendChild(li);
   });
 };
diff --git a/042-live user filter/style.css b/042-live user filter/style.css
index 44d54ac..a83142c 100644
--- a/042-live user filter/style.css	
+++ b/042-live user filter/style.css	
@@ -8,10 +8,11 @@ body {
   background-color: #f8f9fd;
   font-family: "Roboto", sans-serif;
   display: flex;
-  align-items: center;
+  align-items: start;
   justify-content: center;
   height: 100vh;
   overflow: hidden;
+  padding: 20px 10px;
   margin: 0;
 }
 
@@ -19,7 +20,7 @@ body {
   border-radius: 5px;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
   overflow: hidden;
-  width: 300px;
+  max-width: 300px;
 }
 
 .title {
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/047-testimonial box switcher/index.html b/047-testimonial box switcher/index.html
index c4f6d74..50f2e9c 100644
--- a/047-testimonial box switcher/index.html	
+++ b/047-testimonial box switcher/index.html	
@@ -27,7 +27,7 @@
       </p>
       <div class="user">
         <img
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max"
           alt="user"
           class="user-image"
         />
diff --git a/047-testimonial box switcher/script.js b/047-testimonial box switcher/script.js
index 666bd29..95b85d8 100644
--- a/047-testimonial box switcher/script.js	
+++ b/047-testimonial box switcher/script.js	
@@ -9,52 +9,45 @@ const testimonials = [
     name: "Miyah Myles",
     position: "Marketing",
     photo:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6",
-    text:
-      "I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.",
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max",
+    text: "I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.",
   },
   {
     name: "June Cha",
     position: "Software Engineer",
     photo: "https://randomuser.me/api/portraits/women/44.jpg",
-    text:
-      "This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!",
+    text: "This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!",
   },
   {
     name: "Iida Niskanen",
     position: "Data Entry",
     photo: "https://randomuser.me/api/portraits/women/68.jpg",
-    text:
-      "This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.",
+    text: "This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.",
   },
   {
     name: "Renee Sims",
     position: "Receptionist",
     photo: "https://randomuser.me/api/portraits/women/65.jpg",
-    text:
-      "This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.",
+    text: "This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.",
   },
   {
     name: "Jonathan Nunfiez",
     position: "Graphic Designer",
     photo: "https://randomuser.me/api/portraits/men/43.jpg",
-    text:
-      "I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!",
+    text: "I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!",
   },
   {
     name: "Sasha Ho",
     position: "Accountant",
     photo:
       "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb",
-    text:
-      "This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!",
+    text: "This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!",
   },
   {
     name: "Veeti Seppanen",
     position: "Director",
     photo: "https://randomuser.me/api/portraits/men/97.jpg",
-    text:
-      "This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.",
+    text: "This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.",
   },
 ];
 
diff --git a/048-random image generator/index.html b/048-random image generator/index.html
index ef0ca36..c964d1c 100644
--- a/048-random image generator/index.html	
+++ b/048-random image generator/index.html	
@@ -7,7 +7,7 @@
     <title>Random Image Feed</title>
   </head>
   <body>
-    <h1>Random Image Feed</h1>
+    <h1 class="title">Random Image Feed</h1>
     <div class="container"></div>
     <script src="script.js"></script>
   </body>
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/050-insect catch game/script.js b/050-insect catch game/script.js
index 9ff4eb2..ee03122 100644
--- a/050-insect catch game/script.js	
+++ b/050-insect catch game/script.js	
@@ -23,6 +23,7 @@ const addInsects = () => {
 };
 
 const catchInsect = function () {
+  if (this.classList.contains("caught")) return;
   increaseScore();
   this.classList.add("caught");
   setTimeout(() => this.remove, 2000);
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/055-glass dashboard/index.html b/055-glass dashboard/index.html
index 014e8dd..9d94ad8 100644
--- a/055-glass dashboard/index.html	
+++ b/055-glass dashboard/index.html	
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-        <main class="content">
+    <main class="content">
       <section class="container">
         <div class="dashboard">
           <div class="user">
@@ -28,25 +28,40 @@ <h3>Dagny Taggart</h3>
           </div>
           <div class="links">
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/twitch.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/twitch.png?raw=true"
+                alt=""
+              />
               <h2>Streams</h2>
             </div>
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/steam.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/steam.png?raw=true"
+                alt=""
+              />
               <h2>Games</h2>
             </div>
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/upcoming.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/upcoming.png?raw=true"
+                alt=""
+              />
               <h2>New</h2>
             </div>
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/library.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/library.png?raw=true"
+                alt=""
+              />
               <h2>Library</h2>
             </div>
           </div>
           <div class="pro">
             <h2>Join pro for more games.</h2>
-            <img src="https://github.com/developedbyed/glass-website/blob/master/images/controller.png?raw=true" alt="" />
+            <img
+              src="https://github.com/developedbyed/glass-website/blob/master/images/controller.png?raw=true"
+              alt=""
+            />
           </div>
         </div>
         <div class="games">
@@ -56,7 +71,10 @@ <h1>Active Games</h1>
           </div>
           <div class="cards">
             <div class="card">
-              <img src="https://images.unsplash.com/photo-1610987630265-35804332a182?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="" />
+              <img
+                src="https://images.unsplash.com/photo-1610987630265-35804332a182?auto=format&fit=crop&w=334&q=80"
+                alt=""
+              />
               <div class="card-info">
                 <h2>Assassin's Creed Valhalla</h2>
                 <p>PS5 Version</p>
@@ -65,7 +83,10 @@ <h2>Assassin's Creed Valhalla</h2>
               <h2 class="percentage">60%</h2>
             </div>
             <div class="card">
-              <img src="https://images.unsplash.com/photo-1572936947445-4f3f519289cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />
+              <img
+                src="https://images.unsplash.com/photo-1572936947445-4f3f519289cf?auto=format&fit=crop&w=750&q=80"
+                alt=""
+              />
               <div class="card-info">
                 <h2>Sackboy: A Big Adventure</h2>
                 <p>PS5 Version</p>
@@ -74,7 +95,10 @@ <h2>Sackboy: A Big Adventure</h2>
               <h2 class="percentage">60%</h2>
             </div>
             <div class="card">
-              <img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />
+              <img
+                src="https://images.unsplash.com/photo-1505925456693-124134d66749?auto=format&fit=crop&w=750&q=80"
+                alt=""
+              />
               <div class="card-info">
                 <h2>Marvel's Spider-Man: Miles Morales</h2>
                 <p>PS5 Version</p>
diff --git a/056-image comparison slider/index.html b/056-image comparison slider/index.html
index e8e3439..640f4b9 100644
--- a/056-image comparison slider/index.html	
+++ b/056-image comparison slider/index.html	
@@ -13,14 +13,14 @@
     <div class="container">
       <div class="img-container-after">
         <img
-          src="https://images.unsplash.com/photo-1605405748429-cc26b762fa16?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1336&q=80"
+          src="https://images.unsplash.com/photo-1605405748429-cc26b762fa16?auto=format&fit=crop&w=1336&q=80"
           alt=""
           class="after"
         />
       </div>
       <div class="img-container-before">
         <img
-          src="https://images.unsplash.com/photo-1605405747924-2709f6783d0a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1336&q=80"
+          src="https://images.unsplash.com/photo-1605405747924-2709f6783d0a?auto=format&fit=crop&w=1336&q=80"
           alt=""
           class="before"
         />
diff --git a/061-custom video player/index.html b/061-custom video player/index.html
index 3a480f0..c917ffb 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"
     ></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/064-menu slider modal/index.html b/064-menu slider modal/index.html
index 6701697..549633c 100644
--- a/064-menu slider modal/index.html	
+++ b/064-menu slider modal/index.html	
@@ -41,7 +41,7 @@ <h1>My Landing Page</h1>
 
     <div class="container">
       <img
-        src="https://images.unsplash.com/photo-1593642634367-d91a135587b5?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
+        src="https://images.unsplash.com/photo-1593642634367-d91a135587b5?auto=format&fit=crop&w=1350&q=80"
       />
       <h2>What is this landing page about?</h2>
       <p>
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/073-lyrics search app/style.css b/073-lyrics search app/style.css
index ab807bd..ae3c60d 100644
--- a/073-lyrics search app/style.css	
+++ b/073-lyrics search app/style.css	
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
 
 :root {
-  --main-color: #3B9B76;
-  --secondary-color: #5AB193;
-  --text-color: rgba(255,255,255,0.87);
+  --main-color: #3b9b76;
+  --secondary-color: #5ab193;
+  --text-color: rgba(255, 255, 255, 0.87);
 }
 
 * {
@@ -16,8 +16,10 @@ body {
 }
 
 header {
-  background: #040404 url('https://images.unsplash.com/photo-1495305379050-64540d6ee95d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
-  color: rgba(255,255,255,0.95);
+  background: #040404
+    url("https://images.unsplash.com/photo-1495305379050-64540d6ee95d?auto=format&fit=crop&w=1350&q=80")
+    no-repeat center center/cover;
+  color: rgba(255, 255, 255, 0.95);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,13 +29,13 @@ header {
 }
 
 header::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,0.8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 header * {
@@ -60,7 +62,7 @@ form input {
 
 form button {
   background-color: var(--main-color);
-  color: rgba(255,255,255,0.95);
+  color: rgba(255, 255, 255, 0.95);
   position: absolute;
   top: 0.125rem;
   right: 0.125rem;
@@ -82,7 +84,8 @@ button:active {
   transform: scale(0.95);
 }
 
-input:focus, button:focus {
+input:focus,
+button:focus {
   outline: none;
 }
 
@@ -144,4 +147,4 @@ ul.songs li {
   font-size: 1rem;
   padding: 0.875rem 2rem;
   margin: 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/074-relaxer app/style.css b/074-relaxer app/style.css
index c1528e9..abc8243 100644
--- a/074-relaxer app/style.css	
+++ b/074-relaxer app/style.css	
@@ -15,7 +15,9 @@
 }
 
 body {
-  background: var(--background-color) url('https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
+  background: var(--background-color)
+    url("https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?auto=format&fit=crop&w=1920&q=80")
+    no-repeat center center/cover;
   color: var(--light-color);
   font-family: "Montserrat", sans-serif;
   display: flex;
@@ -125,4 +127,4 @@ h1 {
   to {
     transform: scale(1);
   }
-}
\ No newline at end of file
+}
diff --git a/076-new year countdown/style.css b/076-new year countdown/style.css
index 9549d83..7e94e23 100644
--- a/076-new year countdown/style.css	
+++ b/076-new year countdown/style.css	
@@ -1,12 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap");
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  background: #0b3747 url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
-  color: rgba(255,255,255,0.87);
+  background: #0b3747
+    url("https://images.unsplash.com/photo-1513279922550-250c2129b13a?auto=format&fit=crop&w=1350&q=80")
+    no-repeat center center/cover;
+  color: rgba(255, 255, 255, 0.87);
   font-family: "PT Sans Narrow", sans-serif;
   display: flex;
   flex-direction: column;
@@ -19,8 +21,8 @@ body {
 }
 
 body::after {
-  content: '';
-  background-color: rgba(0,0,0,0.5);
+  content: "";
+  background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 0;
   left: 0;
@@ -85,4 +87,4 @@ h1 {
   .time p {
     font-size: 1rem;
   }
-}
\ No newline at end of file
+}
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/078-speak number guessing game/style.css b/078-speak number guessing game/style.css
index 70ae87a..b2f1469 100644
--- a/078-speak number guessing game/style.css	
+++ b/078-speak number guessing game/style.css	
@@ -6,7 +6,7 @@
 
 body {
   background: #27273d
-    url("https://images.unsplash.com/photo-1552749412-091909ed9f82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+    url("https://images.unsplash.com/photo-1552749412-091909ed9f82?auto=format&fit=crop&w=1350&q=80")
     no-repeat center center/cover;
   color: rgba(255, 255, 255, 0.87);
   font-family: "Recursive", sans-serif;
diff --git a/079-creative agency website/index.html b/079-creative agency website/index.html
index 44b8856..0459053 100644
--- a/079-creative agency website/index.html	
+++ b/079-creative agency website/index.html	
@@ -62,7 +62,7 @@
     <!-- home -->
     <section class="home" id="home">
       <img
-        src="https://images.unsplash.com/photo-1507206130118-b5907f817163?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80"
+        src="https://images.unsplash.com/photo-1507206130118-b5907f817163?auto=format&fit=crop&w=768&q=80"
         class="home-img"
         alt=""
       />
diff --git a/080-health dashboard/style.css b/080-health dashboard/style.css
index a38f358..91ae3e9 100644
--- a/080-health dashboard/style.css	
+++ b/080-health dashboard/style.css	
@@ -58,12 +58,13 @@ p {
 }
 
 .bg1 {
-  background-image: url("https://images.unsplash.com/photo-1599447333424-272c8fa5466f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
+  background-image: url("https://images.unsplash.com/photo-1599447333424-272c8fa5466f?auto=format&fit=crop&w=1350&q=80");
   text-shadow: 1px 1px 2px var(--main-color);
 }
 
 .bg2 {
-  background: var(--text-color) url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80");
+  background: var(--text-color)
+    url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?auto=format&fit=crop&w=1350&q=80");
   color: var(--dark-text-color);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 }
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/098-magazine layout/index.html b/098-magazine layout/index.html
index ae9b81b..c9ee880 100644
--- a/098-magazine layout/index.html	
+++ b/098-magazine layout/index.html	
@@ -13,7 +13,7 @@
     <main>
       <article>
         <img
-          src="https://images.unsplash.com/photo-1611824204322-24963b44d68b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=80"
+          src="https://images.unsplash.com/photo-1611824204322-24963b44d68b?auto=format&fit=crop&w=650&q=80"
           alt="woman wearing sunglasses"
           class="article-main-image"
         />
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/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..a0c0586
--- /dev/null
+++ b/101-cascade layers/styles/content.css	
@@ -0,0 +1,27 @@
+a,
+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;
+}
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/102-container queries/index.html b/102-container queries/index.html
new file mode 100644
index 0000000..4081f36
--- /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>Desert Oasis: Exploring Nature's Tranquility</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>Tranquil Desert Haven</h2>
+            <img
+              src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&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>Serenity Oasis Retreat</h2>
+            <img
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&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>Mirage Haven Cottage</h2>
+            <img
+              src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&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>Sand Dune Hideaway</h2>
+            <img
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&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..bf3267e
--- /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;
+    min-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 4704ded..f702806 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,36 @@
 # 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=item_created_at)
+## 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-projects-in-100-days.pdf)
+
+> **Want the full guide?**  
+> Continue your journey with [**_Volume 1: Essentials (Days 1–50)_ on Amazon**](https://amzn.to/4g01whb) — unlock 40 more hands-on projects to sharpen your skills and build your portfolio.
+>
+> **Coming soon:** _Volume 2: Advanced (Days 51–100)_ and an _All-in-One Edition_.  
+> [**Join the notification list**](https://mailchi.mp/36e4c32d7df0/get-the-full-guide-first) to be the first to know when they're available!
+
+## 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                                                |
 | :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -106,13 +134,41 @@
 | 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)  |
+| 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-projects-in-100-days.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)
@@ -121,3 +177,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!