.github/FUNDING.yml

@@ -0,0 +1 @@
+github: solygambas

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;

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;

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>

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"
           />

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

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>

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,15 +53,15 @@
   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;
   cursor: pointer;
 }
 
 .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;

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>

061-custom video player/index.html

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

078-speak number guessing game/script.js

@@ -5,6 +5,7 @@ const randomNumber = getRandomNumber();
 window.SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition = new window.SpeechRecognition();
+recognition.lang = "en-US";
 recognition.start();
 
 function getRandomNumber() {

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/cover;
 }
 
 .section-top .content {
@@ -79,6 +79,8 @@ ul {
 
 .section-top .content h1 {
   font-size: 45px;
+  text-shadow: -1px -1px 0 var(--primary-color), 1px -1px 0 var(--primary-color),
+    -1px 1px 0 var(--primary-color), 1px 1px 0 var(--primary-color);
 }
 
 .section-top .content,
@@ -90,8 +92,7 @@ ul {
 
 .section-stream {
   min-height: 400px;
-  background: url("https://i.ibb.co/bsX6RV0/bg2.png") no-repeat center
-    center/cover;
+  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top/cover;
 }
 
 .section-stream h2 {
@@ -107,7 +108,7 @@ ul {
 
 .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;

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 {

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>

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

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>