From 375bc410f9ac4d2b135440ff01fa4d91dc74427b Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 1 May 2022 06:10:03 +0200
Subject: [PATCH 001/114] fix links

---
 README.md | 204 +++++++++++++++++++++++++++---------------------------
 1 file changed, 102 insertions(+), 102 deletions(-)

diff --git a/README.md b/README.md
index 0238a30..4704ded 100644
--- a/README.md
+++ b/README.md
@@ -4,108 +4,108 @@
 
 [See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
 
-|  #  | Project                                                                                                                                  | Live Demo                                                |
-| :-: | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
-| 001 | [Expanding Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/001-expanding%20cards)                               | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE)  |
-| 002 | [Progress Steps](https://github.com/solygambas/html-css-fifty-projects/tree/master/002-progress%20steps)                                 | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg)  |
-| 003 | [Rotating Navigation Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/003-rotating%20navigation)             | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY)  |
-| 004 | [Hidden Search Widget](https://github.com/solygambas/html-css-fifty-projects/tree/master/004-hidden%20search%20widget)                   | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB)  |
-| 005 | [Blurry Loading](https://github.com/solygambas/html-css-fifty-projects/tree/master/005-blurry%20loading)                                 | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB)  |
-| 006 | [Scroll Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/006-scroll%20animation)                             | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL)  |
-| 007 | [Split Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/007-split%20landing%20page)                       | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY)  |
-| 008 | [Form Wave](https://github.com/solygambas/html-css-fifty-projects/tree/master/008-form%20wave%20animation)                               | [Live Demo](https://codepen.io/solygambas/full/Exgdegm)  |
-| 009 | [Sound Board](https://github.com/solygambas/html-css-fifty-projects/tree/master/009-sound%20board)                                       | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa)  |
-| 010 | [Dad Jokes](https://github.com/solygambas/html-css-fifty-projects/tree/master/010-dad%20jokes)                                           | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK)  |
-| 011 | [Event Keycodes](https://github.com/solygambas/html-css-fifty-projects/tree/master/011-event%20KeyCodes)                                 | [Live Demo](https://codepen.io/solygambas/full/zYKmypd)  |
-| 012 | [FAQ Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/012-FAQ%20collapse)                                     | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm)  |
-| 013 | [Random Choice Picker](https://github.com/solygambas/html-css-fifty-projects/tree/master/013-random%20choice%20picker)                   | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN)  |
-| 014 | [Animated Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/014-animated%20navigation)                       | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz)  |
-| 015 | [Incrementing Counter](https://github.com/solygambas/html-css-fifty-projects/tree/master/015-incrementing%20counter)                     | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW)  |
-| 016 | [Drink Water](https://github.com/solygambas/html-css-fifty-projects/tree/master/016-drink%20water)                                       | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy)  |
-| 017 | [Movie App](https://github.com/solygambas/html-css-fifty-projects/tree/master/017-movie%20app)                                           | [Live Demo](https://codepen.io/solygambas/full/mdrabXd)  |
-| 018 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/018-background%20slider)                           | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ)  |
-| 019 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/019-theme%20clock)                                       | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy)  |
-| 020 | [Button Ripple Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/020-button%20ripple%20effect)                   | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw)  |
-| 021 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/021-drag%20n%20drop)                                     | [Live Demo](https://codepen.io/solygambas/full/RwGEyme)  |
-| 022 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/022-drawing%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvzREMx)  |
-| 023 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/023-kinetic%20loader)                                 | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW)  |
-| 024 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/024-content%20placeholder)                       | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX)  |
-| 025 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/025-sticky%20navigation)                               | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) |
-| 026 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/026-double%20vertical%20slider)               | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB)  |
-| 027 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/027-toast%20notification)                         | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW)  |
-| 028 | [GitHub Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/028-github%20profiles)                               | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR)  |
-| 029 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/029-double%20click%20heart)                       | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK)  |
-| 030 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/030-auto%20text%20effect)                           | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM)  |
-| 031 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/031-password%20generator)                         | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb)  |
-| 032 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/032-good%20cheap%20fast)                             | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP)  |
-| 033 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/033-notes%20app)                                           | [Live Demo](https://codepen.io/solygambas/full/qBavQog)  |
-| 034 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/034-animated%20countdown)                         | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW)  |
-| 035 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/035-image%20carousel)                                 | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK)  |
-| 036 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/036-hoverboard)                                           | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK)  |
-| 037 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/037-pokedex)                                                 | [Live Demo](https://codepen.io/solygambas/full/gOwygyP)  |
-| 038 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/038-mobile%20tab%20navigation)                 | [Live Demo](https://codepen.io/solygambas/full/eYdoexM)  |
-| 039 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/039-password%20strength%20background)   | [Live Demo](https://codepen.io/solygambas/full/YzGMYzz)  |
-| 040 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/040-3d%20boxes%20background)                     | [Live Demo](https://codepen.io/solygambas/full/zYKXpBe)  |
-| 041 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/041-verify%20account%20UI)                         | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR)  |
-| 042 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/042-live%20user%20filter)                           | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg)  |
-| 043 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/043-feedback%20UI%20design)                       | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm)  |
-| 044 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/044-custom%20range%20slider)                     | [Live Demo](https://codepen.io/solygambas/full/WNGBrjZ)  |
-| 045 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/045-netflix%20mobile%20navigation)         | [Live Demo](https://codepen.io/solygambas/full/NWRVxgv)  |
-| 046 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/046-quiz%20app)                                             | [Live Demo](https://codepen.io/solygambas/full/PoGvZEW)  |
-| 047 | [Testimonial Box Switcher](https://github.com/solygambas/html-css-fifty-projects/tree/master/047-testimonial%20box%20switcher)           | [Live Demo](https://codepen.io/solygambas/full/ExgzPRz)  |
-| 048 | [Random Image Feed](https://github.com/solygambas/html-css-fifty-projects/tree/master/048-random%20image%20generator)                    | [Live Demo](https://codepen.io/solygambas/full/eYdaJQx)  |
-| 049 | [Todo List](https://github.com/solygambas/html-css-fifty-projects/tree/master/049-todo%20list)                                           | [Live Demo](https://codepen.io/solygambas/full/eYdaJoo)  |
-| 050 | [Insect Catch Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/050-insect%20catch%20game)                         | [Live Demo](https://codepen.io/solygambas/full/oNzRbKx)  |
-| 051 | [Video Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/051-video%20background)                             | [Live Demo](https://codepen.io/solygambas/full/oNYNLwL)  |
-| 052 | [Portfolio with CSS Grid](https://github.com/solygambas/html-css-fifty-projects/tree/master/052-portfolio%20grid)                        | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO)  |
-| 053 | [Touch Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/053-touch%20slider)                                     | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK)  |
-| 054 | [CSS Loaders](https://github.com/solygambas/html-css-fifty-projects/tree/master/054-css%20loaders)                                       | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ)  |
-| 055 | [Glass Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/055-glass%20dashboard)                               | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo)  |
-| 056 | [Image Comparison Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/056-image%20comparison%20slider)             | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW)  |
-| 057 | [Parallax Background with SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/057-parallax%20background%20svg)        | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz)  |
-| 058 | [3D Product Card](https://github.com/solygambas/html-css-fifty-projects/tree/master/058-3D%20product%20card)                             | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq)  |
-| 059 | [Form Validator](https://github.com/solygambas/html-css-fifty-projects/tree/master/059-form%20validator)                                 | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb)  |
-| 060 | [Movie Seat Booking](https://github.com/solygambas/html-css-fifty-projects/tree/master/060-movie%20seat%20booking)                       | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy)  |
-| 061 | [Custom Video Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/061-custom%20video%20player)                     | [Live Demo](https://codepen.io/solygambas/full/mdOQadY)  |
-| 062 | [Exchange Rate Calculator](https://github.com/solygambas/html-css-fifty-projects/tree/master/062-exchange%20rate%20calculator)           | [Live Demo](https://codepen.io/solygambas/full/abBPJBG)  |
-| 063 | [DOM Array Methods](https://github.com/solygambas/html-css-fifty-projects/tree/master/063-DOM%20array%20methods)                         | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR)  |
-| 064 | [Menu Slider & Modal](https://github.com/solygambas/html-css-fifty-projects/tree/master/064-menu%20slider%20modal)                       | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd)  |
-| 065 | [Hangman Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/065-hangman%20game)                                     | [Live Demo](https://codepen.io/solygambas/full/MWbLEYr)  |
-| 066 | [Meal Finder](https://github.com/solygambas/html-css-fifty-projects/tree/master/066-meal%20finder)                                       | [Live Demo](https://codepen.io/solygambas/full/dyOagYE)  |
-| 067 | [Expense Tracker](https://github.com/solygambas/html-css-fifty-projects/tree/master/067-expense%20tracker)                               | [Live Demo](https://codepen.io/solygambas/full/OJbqyro)  |
-| 068 | [Music Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/068-music%20player)                                     | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG)  |
-| 069 | [Infinite Scroll Posts](https://github.com/solygambas/html-css-fifty-projects/tree/master/069-infinite%20scroll%20posts)                 | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB)  |
-| 070 | [Typing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/070-typing%20game)                                       | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq)  |
-| 071 | [Speech Text Reader](https://github.com/solygambas/html-css-fifty-projects/tree/master/071-speech%20text%20reader)                       | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM)  |
-| 072 | [Memory Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/072-memory%20cards)                                     | [Live Demo](https://codepen.io/solygambas/full/oNYOqjv)  |
-| 073 | [Lyrics Search App](https://github.com/solygambas/html-css-fifty-projects/tree/master/073-lyrics%20search%20app)                         | [Live Demo](https://codepen.io/solygambas/full/ExNzPKV)  |
-| 074 | [Relaxer App](https://github.com/solygambas/html-css-fifty-projects/tree/master/074-relaxer%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvobMzE)  |
-| 075 | [Breakout Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/075-breakout%20game)                                   | [Live Demo](https://codepen.io/solygambas/full/oNYrNKj)  |
-| 076 | [New Year Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/076-new%20year%20countdown)                       | [Live Demo](https://codepen.io/solygambas/full/rNWEaBb)  |
-| 077 | [Sortable List](https://github.com/solygambas/html-css-fifty-projects/tree/master/077-sortable%20list)                                   | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO)  |
-| 078 | [Speak Number Guessing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/078-speak%20number%20guessing%20game)     | [Live Demo](https://codepen.io/solygambas/full/jOVjEre)  |
-| 079 | [Creative Agency Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/079-creative%20agency%20website)             | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj)  |
-| 080 | [Health Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/080-health%20dashboard)                             | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz)  |
-| 081 | [Animated SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/081-animated%20SVG)                                     | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR)  |
-| 082 | [Parallax Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/082-parallax%20landing%20page)                 | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo)  |
-| 083 | [Full-Screen Image Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/083-full%20screen%20image%20slider)         | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb)  |
-| 084 | [Fluid Image Lightbox](https://github.com/solygambas/html-css-fifty-projects/tree/master/084-fluid%20image%20lightbox)                   | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg)  |
-| 085 | [Sneaker Shop](https://github.com/solygambas/html-css-fifty-projects/tree/master/085-sneaker%20shop)                                     | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ)  |
-| 086 | [Coming Soon Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/086-coming%20soon%20page)                           | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM)  |
-| 087 | [Sliding Sign In & Sign Up Form](https://github.com/solygambas/html-css-fifty-projects/tree/master/087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm)  |
-| 088 | [Promo Code](https://github.com/solygambas/html-css-fifty-projects/tree/master/088-promo%20code)                                         | [Live Demo](https://codepen.io/solygambas/full/wvggBXe)  |
-| 089 | [One Color UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/089-one%20color%20UI)                                   | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx)  |
-| 090 | [Tooltip](https://github.com/solygambas/html-css-fifty-projects/tree/master/090-tooltip)                                                 | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb)  |
-| 091 | [Chat Interface](https://github.com/solygambas/html-css-fifty-projects/tree/master/091-chat%20interface)                                 | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ)  |
-| 092 | [Music Streaming Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/092-music%20streaming%20service)             | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg)  |
-| 093 | [Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/093-creative%20portfolio)                         | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR)  |
-| 094 | [Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/094-laptop%20UI)                                           | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo)  |
-| 095 | [Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/095-headphones%20product%20page)             | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr)  |
-| 096 | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/096-cloud%20hosting%20service)                 | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr)  |
-| 097 | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/097-terminal%20style%20landing%20page)   | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG)  |
-| 098 | [Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/098-magazine%20layout)                               | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj)  |
-| 099 | [Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/099-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
-| 100 | [Hulu Webpage Clone](https://github.com/solygambas/html-css-fifty-projects/tree/master/100-hulu%20webpage%20clone)                       | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy)  |
+|  #  | Project                                                                | Live Demo                                                |
+| :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
+| 001 | [Expanding Cards](001-expanding%20cards)                               | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE)  |
+| 002 | [Progress Steps](002-progress%20steps)                                 | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg)  |
+| 003 | [Rotating Navigation Animation](003-rotating%20navigation)             | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY)  |
+| 004 | [Hidden Search Widget](004-hidden%20search%20widget)                   | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB)  |
+| 005 | [Blurry Loading](005-blurry%20loading)                                 | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB)  |
+| 006 | [Scroll Animation](006-scroll%20animation)                             | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL)  |
+| 007 | [Split Landing Page](007-split%20landing%20page)                       | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY)  |
+| 008 | [Form Wave](008-form%20wave%20animation)                               | [Live Demo](https://codepen.io/solygambas/full/Exgdegm)  |
+| 009 | [Sound Board](009-sound%20board)                                       | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa)  |
+| 010 | [Dad Jokes](010-dad%20jokes)                                           | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK)  |
+| 011 | [Event Keycodes](011-event%20KeyCodes)                                 | [Live Demo](https://codepen.io/solygambas/full/zYKmypd)  |
+| 012 | [FAQ Collapse](012-FAQ%20collapse)                                     | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm)  |
+| 013 | [Random Choice Picker](013-random%20choice%20picker)                   | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN)  |
+| 014 | [Animated Navigation](014-animated%20navigation)                       | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz)  |
+| 015 | [Incrementing Counter](015-incrementing%20counter)                     | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW)  |
+| 016 | [Drink Water](016-drink%20water)                                       | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy)  |
+| 017 | [Movie App](017-movie%20app)                                           | [Live Demo](https://codepen.io/solygambas/full/mdrabXd)  |
+| 018 | [Background Slider](018-background%20slider)                           | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ)  |
+| 019 | [Theme Clock](019-theme%20clock)                                       | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy)  |
+| 020 | [Button Ripple Effect](020-button%20ripple%20effect)                   | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw)  |
+| 021 | [Drag N Drop](021-drag%20n%20drop)                                     | [Live Demo](https://codepen.io/solygambas/full/RwGEyme)  |
+| 022 | [Drawing App](022-drawing%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvzREMx)  |
+| 023 | [Kinetic Loader](023-kinetic%20loader)                                 | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW)  |
+| 024 | [Content Placeholder](024-content%20placeholder)                       | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX)  |
+| 025 | [Sticky Navbar](025-sticky%20navigation)                               | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) |
+| 026 | [Double Vertical Slider](026-double%20vertical%20slider)               | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB)  |
+| 027 | [Toast Notification](027-toast%20notification)                         | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW)  |
+| 028 | [GitHub Profiles](028-github%20profiles)                               | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR)  |
+| 029 | [Double Click Heart](029-double%20click%20heart)                       | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK)  |
+| 030 | [Auto Text Effect](030-auto%20text%20effect)                           | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM)  |
+| 031 | [Password Generator](031-password%20generator)                         | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb)  |
+| 032 | [Good Cheap Fast](032-good%20cheap%20fast)                             | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP)  |
+| 033 | [Notes App](033-notes%20app)                                           | [Live Demo](https://codepen.io/solygambas/full/qBavQog)  |
+| 034 | [Animated Countdown](034-animated%20countdown)                         | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW)  |
+| 035 | [Image Carousel](035-image%20carousel)                                 | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK)  |
+| 036 | [Hoverboard](036-hoverboard)                                           | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK)  |
+| 037 | [Pokedex](037-pokedex)                                                 | [Live Demo](https://codepen.io/solygambas/full/gOwygyP)  |
+| 038 | [Mobile Tab Navigation](038-mobile%20tab%20navigation)                 | [Live Demo](https://codepen.io/solygambas/full/eYdoexM)  |
+| 039 | [Password Strength Background](039-password%20strength%20background)   | [Live Demo](https://codepen.io/solygambas/full/YzGMYzz)  |
+| 040 | [3D Background Boxes](040-3d%20boxes%20background)                     | [Live Demo](https://codepen.io/solygambas/full/zYKXpBe)  |
+| 041 | [Verify Account UI](041-verify%20account%20UI)                         | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR)  |
+| 042 | [Live User Filter](042-live%20user%20filter)                           | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg)  |
+| 043 | [Feedback UI Design](043-feedback%20UI%20design)                       | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm)  |
+| 044 | [Custom Range Slider](044-custom%20range%20slider)                     | [Live Demo](https://codepen.io/solygambas/full/WNGBrjZ)  |
+| 045 | [Netflix Mobile Navigation](045-netflix%20mobile%20navigation)         | [Live Demo](https://codepen.io/solygambas/full/NWRVxgv)  |
+| 046 | [Quiz App](046-quiz%20app)                                             | [Live Demo](https://codepen.io/solygambas/full/PoGvZEW)  |
+| 047 | [Testimonial Box Switcher](047-testimonial%20box%20switcher)           | [Live Demo](https://codepen.io/solygambas/full/ExgzPRz)  |
+| 048 | [Random Image Feed](048-random%20image%20generator)                    | [Live Demo](https://codepen.io/solygambas/full/eYdaJQx)  |
+| 049 | [Todo List](049-todo%20list)                                           | [Live Demo](https://codepen.io/solygambas/full/eYdaJoo)  |
+| 050 | [Insect Catch Game](050-insect%20catch%20game)                         | [Live Demo](https://codepen.io/solygambas/full/oNzRbKx)  |
+| 051 | [Video Background](051-video%20background)                             | [Live Demo](https://codepen.io/solygambas/full/oNYNLwL)  |
+| 052 | [Portfolio with CSS Grid](052-portfolio%20grid)                        | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO)  |
+| 053 | [Touch Slider](053-touch%20slider)                                     | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK)  |
+| 054 | [CSS Loaders](054-css%20loaders)                                       | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ)  |
+| 055 | [Glass Dashboard](055-glass%20dashboard)                               | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo)  |
+| 056 | [Image Comparison Slider](056-image%20comparison%20slider)             | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW)  |
+| 057 | [Parallax Background with SVG](057-parallax%20background%20svg)        | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz)  |
+| 058 | [3D Product Card](058-3D%20product%20card)                             | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq)  |
+| 059 | [Form Validator](059-form%20validator)                                 | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb)  |
+| 060 | [Movie Seat Booking](060-movie%20seat%20booking)                       | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy)  |
+| 061 | [Custom Video Player](061-custom%20video%20player)                     | [Live Demo](https://codepen.io/solygambas/full/mdOQadY)  |
+| 062 | [Exchange Rate Calculator](062-exchange%20rate%20calculator)           | [Live Demo](https://codepen.io/solygambas/full/abBPJBG)  |
+| 063 | [DOM Array Methods](063-DOM%20array%20methods)                         | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR)  |
+| 064 | [Menu Slider & Modal](064-menu%20slider%20modal)                       | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd)  |
+| 065 | [Hangman Game](065-hangman%20game)                                     | [Live Demo](https://codepen.io/solygambas/full/MWbLEYr)  |
+| 066 | [Meal Finder](066-meal%20finder)                                       | [Live Demo](https://codepen.io/solygambas/full/dyOagYE)  |
+| 067 | [Expense Tracker](067-expense%20tracker)                               | [Live Demo](https://codepen.io/solygambas/full/OJbqyro)  |
+| 068 | [Music Player](068-music%20player)                                     | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG)  |
+| 069 | [Infinite Scroll Posts](069-infinite%20scroll%20posts)                 | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB)  |
+| 070 | [Typing Game](070-typing%20game)                                       | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq)  |
+| 071 | [Speech Text Reader](071-speech%20text%20reader)                       | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM)  |
+| 072 | [Memory Cards](072-memory%20cards)                                     | [Live Demo](https://codepen.io/solygambas/full/oNYOqjv)  |
+| 073 | [Lyrics Search App](073-lyrics%20search%20app)                         | [Live Demo](https://codepen.io/solygambas/full/ExNzPKV)  |
+| 074 | [Relaxer App](074-relaxer%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvobMzE)  |
+| 075 | [Breakout Game](075-breakout%20game)                                   | [Live Demo](https://codepen.io/solygambas/full/oNYrNKj)  |
+| 076 | [New Year Countdown](076-new%20year%20countdown)                       | [Live Demo](https://codepen.io/solygambas/full/rNWEaBb)  |
+| 077 | [Sortable List](077-sortable%20list)                                   | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO)  |
+| 078 | [Speak Number Guessing Game](078-speak%20number%20guessing%20game)     | [Live Demo](https://codepen.io/solygambas/full/jOVjEre)  |
+| 079 | [Creative Agency Website](079-creative%20agency%20website)             | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj)  |
+| 080 | [Health Dashboard](080-health%20dashboard)                             | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz)  |
+| 081 | [Animated SVG](081-animated%20SVG)                                     | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR)  |
+| 082 | [Parallax Landing Page](082-parallax%20landing%20page)                 | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo)  |
+| 083 | [Full-Screen Image Slider](083-full%20screen%20image%20slider)         | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb)  |
+| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox)                   | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg)  |
+| 085 | [Sneaker Shop](085-sneaker%20shop)                                     | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ)  |
+| 086 | [Coming Soon Page](086-coming%20soon%20page)                           | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM)  |
+| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm)  |
+| 088 | [Promo Code](088-promo%20code)                                         | [Live Demo](https://codepen.io/solygambas/full/wvggBXe)  |
+| 089 | [One Color UI](089-one%20color%20UI)                                   | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx)  |
+| 090 | [Tooltip](090-tooltip)                                                 | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb)  |
+| 091 | [Chat Interface](091-chat%20interface)                                 | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ)  |
+| 092 | [Music Streaming Service](092-music%20streaming%20service)             | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg)  |
+| 093 | [Creative Portfolio](093-creative%20portfolio)                         | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR)  |
+| 094 | [Laptop UI](094-laptop%20UI)                                           | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo)  |
+| 095 | [Headphones Product Page](095-headphones%20product%20page)             | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr)  |
+| 096 | [Cloud Hosting Service](096-cloud%20hosting%20service)                 | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr)  |
+| 097 | [Terminal Style Landing Page](097-terminal%20style%20landing%20page)   | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG)  |
+| 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)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/README.md b/README.md
index 71c76b3..012e80d 100644
--- a/README.md
+++ b/README.md
@@ -109,6 +109,12 @@
 | 101 | [Cascade Layers](101-cascade%20layers)                                 | [Live Demo](https://codepen.io/solygambas/full/poYaZmv)  |
 | 102 | [Container queries](102-container%20queries)                           | [Live Demo](https://codepen.io/solygambas/full/abMqPNy)  |
 
+---
+
+Get inspired and motivated with our [collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey!
+
+---
+
 This repository is mostly based on 2 courses by Brad Traversy (2020):
 
 - [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)

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

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

diff --git a/README.md b/README.md
index 012e80d..1fe4bc2 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,12 @@
 # 100 Projects In 100 Days - HTML, CSS & JavaScript
 
-100+ mini web projects using HTML, CSS and JavaScript.
+Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself.
 
-[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
+[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
+
+## Project Showcase
+
+Explore each project individually and view live demos to see them in action:
 
 |  #  | Project                                                                | Live Demo                                                |
 | :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -109,18 +113,36 @@
 | 101 | [Cascade Layers](101-cascade%20layers)                                 | [Live Demo](https://codepen.io/solygambas/full/poYaZmv)  |
 | 102 | [Container queries](102-container%20queries)                           | [Live Demo](https://codepen.io/solygambas/full/abMqPNy)  |
 
----
+## Get Inspired
+
+Check out our [collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
+
+## Setup Instructions
+
+To get started with these projects, follow these simple steps:
+
+1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.
+
+2. **Clone the Repository**: Clone the forked repository to your local machine using the following command in your terminal:
+
+   ```bash
+   git clone https://github.com/Your-Username/html-css-javascript-projects.git
+   ```
+
+3. **Open with VS Code**: Open the cloned repository in [Visual Studio Code](https://code.visualstudio.com/) (VS Code) or your preferred code editor.
+
+4. **Install Live Server Extension**: If you haven't already, install the Live Server extension for VS Code. This extension allows you to launch a local development server and automatically refresh your browser whenever you make changes to your HTML, CSS, or JavaScript files. You can install it from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
 
-Get inspired and motivated with our [collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey!
+5. **Start Coding**: Start exploring the projects, make changes, experiment with different ideas, and unleash your creativity! Use Live Server to preview your changes in real-time and see how they affect the project.
 
----
+## Acknowledgments
 
-This repository is mostly based on 2 courses by Brad Traversy (2020):
+This repository is mostly based on two courses by Brad Traversy (2020):
 
 - [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)
 - [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/)
 
-The other projects are adapted from various YouTube channels:
+In addition, other projects are adapted from various YouTube channels:
 
 - Brad Traversy - [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)
 - Shaun Pelling - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)

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

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

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

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

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

diff --git a/README.md b/README.md
index 4b12e81..73911e7 100644
--- a/README.md
+++ b/README.md
@@ -115,7 +115,7 @@ Explore each project individually and view live demos to see them in action:
 
 ## Get Inspired
 
-Check out our [collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
+Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
 
 ## Setup Instructions
 

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

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

diff --git a/README.md b/README.md
index 73911e7..2ebce66 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,10 @@ Explore each project individually and view live demos to see them in action:
 
 Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
 
+## Share Your Insights
+
+We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76).
+
 ## Setup Instructions
 
 To get started with these projects, follow these simple steps:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/README.md b/README.md
index 6c4a163..a522c56 100644
--- a/README.md
+++ b/README.md
@@ -117,10 +117,6 @@ Explore each project individually and view live demos to see them in action:
 
 Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
 
-## Share Your Insights
-
-We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76).
-
 ## Setup Instructions
 
 To get started with these projects, follow these simple steps:

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

	modified:   README.md

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

diff --git a/README.md b/README.md
index a522c56..cb77c6f 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,21 @@ Explore each project individually and view live demos to see them in action:
 
 Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
 
+## The Ultimate Companion Guide
+
+Enhance your learning journey with **"100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide."** This comprehensive guide is designed to help you maximize your experience with this project collection.
+
+Inside the PDF, you'll find:
+
+- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions.
+- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives.
+- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites.
+- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later.
+
+This guide isn't just about completing projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
+
+[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)
+
 ## Setup Instructions
 
 To get started with these projects, follow these simple steps:

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

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

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

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

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

diff --git a/README.md b/README.md
index 967b360..49659cd 100644
--- a/README.md
+++ b/README.md
@@ -117,18 +117,19 @@ Explore each project individually and view live demos to see them in action:
 
 Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.
 
-## The Ultimate Companion Guide
+## Companion Guide
 
-Enhance your learning journey with **"100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide."** This comprehensive guide is designed to help you maximize your experience with this project collection.
+Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection.
 
 Inside the PDF, you'll find:
 
-- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions.
-- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives.
-- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites.
-- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later.
+- **Day 0: Before Starting Up**: Quick-start setup instructions, and boilerplate walkthrough.
+- **Days 1–102: Challenges & Enhancements**
+  - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
+  - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.
+  - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand.
 
-This guide isn't just about completing projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
+This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
 
 [**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)
 

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

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

diff --git a/README.md b/README.md
index 49659cd..8e780c1 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,8 @@ Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & J
 
 Inside the PDF, you'll find:
 
-- **Day 0: Before Starting Up**: Quick-start setup instructions, and boilerplate walkthrough.
+- **Day 0: Before Starting Up**<br>
+  Quick-start setup instructions and a boilerplate walkthrough.
 - **Days 1–102: Challenges & Enhancements**
   - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
   - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.

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

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

diff --git a/README.md b/README.md
index 8e780c1..06bc346 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 
 ## Setup Instructions
 
-To get started with these projects, follow these simple steps:
+To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps:
 
 1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.
 

From 49a4807701d27c133377a6114bc069551ea9bb75 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:46:08 +0200
Subject: [PATCH 035/114] docs: add solution branch

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

diff --git a/README.md b/README.md
index 06bc346..39c8068 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,7 @@ Inside the PDF, you'll find:
   - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
   - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.
   - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand.
+  - **Solutions**: Available in the [`challenge-solutions` branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository.
 
 This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
 

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

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

diff --git a/README.md b/README.md
index 39c8068..dcf6e2b 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Inside the PDF, you'll find:
   - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
   - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.
   - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand.
-  - **Solutions**: Available in the [`challenge-solutions` branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository.
+  - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository.
 
 This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/089-one color UI/styles/_global.scss b/089-one color UI/styles/_global.scss
new file mode 100644
index 0000000..d51dc1c
--- /dev/null
+++ b/089-one color UI/styles/_global.scss	
@@ -0,0 +1,55 @@
+@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
+
+:root {
+  --primary-color: #f54538;
+  --black: #070707;
+  --gradient: radial-gradient(#525252, #131313);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  color: white;
+  font-family: "Montserrat", sans-serif;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-family: "Lobster", cursive;
+  font-weight: lighter;
+}
+
+h2 {
+  font-size: 8rem;
+  font-family: "Lobster", cursive;
+  font-weight: lighter;
+}
+
+h3 {
+  font-size: 3.5rem;
+}
+
+h4 {
+  font-size: 3rem;
+}
+
+p {
+  font-size: 2.5rem;
+}
+
+li {
+  font-size: 2rem;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
diff --git a/089-one color UI/styles/_media-queries.scss b/089-one color UI/styles/_media-queries.scss
new file mode 100644
index 0000000..9c09e18
--- /dev/null
+++ b/089-one color UI/styles/_media-queries.scss	
@@ -0,0 +1,73 @@
+@media screen and (max-width: 1200px) {
+  html {
+    font-size: 50%;
+  }
+
+  nav {
+    #logo {
+      flex: 1;
+    }
+    ul {
+      margin-left: 5rem;
+    }
+  }
+
+  .showcase {
+    grid-template-columns: 10% 1fr 10%;
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+
+    img,
+    h2,
+    .info {
+      grid-column: 2/3;
+      text-align: center;
+    }
+  }
+
+  .features {
+    align-items: center;
+
+    h2 {
+      margin-top: 5rem;
+    }
+
+    .cards {
+      flex-direction: column;
+      width: 60%;
+
+      .card {
+        margin: 5rem 0rem;
+      }
+    }
+  }
+
+  .soon {
+    overflow: hidden;
+
+    img {
+      width: 60%;
+    }
+
+    h2 {
+      font-size: 5rem;
+    }
+  }
+
+  .footer {
+    h1 {
+      flex: 1;
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .features {
+    .cards {
+      width: 100%;
+    }
+  }
+}
diff --git a/089-one color UI/styles/style.css b/089-one color UI/styles/style.css
index ec60ad7..a12343e 100644
--- a/089-one color UI/styles/style.css	
+++ b/089-one color UI/styles/style.css	
@@ -6,8 +6,7 @@
 }
 
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
@@ -60,7 +59,6 @@ a {
 
 .nav-container {
   background: var(--black);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -71,37 +69,20 @@ nav {
   margin: auto;
   min-height: 10vh;
   padding: 3rem 0rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  justify-content: space-between;
+  align-items: center;
 }
-
 nav ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   list-style: none;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
-
 nav #logo {
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
+  flex: 3;
   position: relative;
 }
-
 nav #logo::after {
   content: "";
   position: absolute;
@@ -111,11 +92,9 @@ nav #logo::after {
   height: 6rem;
   background: var(--primary-color);
   border-radius: 50%;
-  -webkit-transform: translate(-10%, -20%);
-          transform: translate(-10%, -20%);
+  transform: translate(-10%, -20%);
   mix-blend-mode: screen;
 }
-
 nav .order {
   background: var(--primary-color);
   padding: 1rem 2rem;
@@ -123,53 +102,31 @@ nav .order {
 }
 
 .showcase {
-  display: -ms-grid;
   display: grid;
   min-height: 90vh;
-  -ms-grid-columns: 10% (minmax(5rem, 1fr))[3] 10%;
-      grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
-  -ms-grid-rows: 1fr 2fr 1fr;
-      grid-template-rows: 1fr 2fr 1fr;
+  grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
+  grid-template-rows: 1fr 2fr 1fr;
 }
-
 .showcase h2 {
-  -ms-grid-column: 2;
-  -ms-grid-column-span: 1;
   grid-column: 2/3;
-  -ms-flex-item-align: end;
-      align-self: flex-end;
+  align-self: flex-end;
 }
-
 .showcase img {
-  -ms-grid-row: 2;
-  -ms-grid-row-span: 1;
   grid-row: 2/3;
-  -ms-grid-column: 3;
-  -ms-grid-column-span: 1;
   grid-column: 3/4;
   height: 110%;
   -o-object-fit: cover;
      object-fit: cover;
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
-  -ms-grid-column-align: center;
-      justify-self: center;
+  align-self: center;
+  justify-self: center;
 }
-
 .showcase .info {
-  -ms-grid-row: 3;
-  -ms-grid-row-span: 1;
   grid-row: 3/4;
-  -ms-grid-column: 4;
-  -ms-grid-column-span: 1;
   grid-column: 4/5;
 }
-
 .showcase .info h3 {
   padding-bottom: 3rem;
 }
-
 .showcase .info p {
   color: #c4c4c4;
 }
@@ -180,7 +137,6 @@ nav .order {
   z-index: 0;
   overflow: hidden;
 }
-
 .features-container .wave {
   position: absolute;
   left: 0;
@@ -193,51 +149,31 @@ nav .order {
   min-height: 90vh;
   width: 80%;
   margin: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
+  flex-direction: column;
+  justify-content: space-around;
 }
-
 .features .cards {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   color: var(--black);
 }
-
 .features .cards .card {
   background: white;
   margin: 0rem 5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   text-align: center;
   border-radius: 0.625rem;
   overflow: hidden;
 }
-
 .features .cards .card h4 {
   margin: 2rem 0rem 1rem;
 }
-
 .features .cards .card p {
   padding: 2rem;
   color: #686868;
 }
-
 .features .cards .card img {
   -o-object-fit: cover;
      object-fit: cover;
@@ -249,21 +185,17 @@ nav .order {
   position: relative;
   z-index: 0;
 }
-
 .soon img,
 .soon .circle,
 .soon h2 {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
-
 .soon .circle {
   z-index: -1;
 }
-
 .soon h2 {
   top: 25%;
 }
@@ -273,34 +205,18 @@ footer {
   background: var(--black);
   padding-left: 10%;
   padding-right: 10%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
-
 footer ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   list-style: none;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
-
 footer h1 {
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
+  flex: 3;
 }
 
 @media screen and (max-width: 1200px) {
@@ -308,16 +224,13 @@ footer h1 {
     font-size: 50%;
   }
   nav #logo {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
   nav ul {
     margin-left: 5rem;
   }
   .showcase {
-    -ms-grid-columns: 10% 1fr 10%;
-        grid-template-columns: 10% 1fr 10%;
+    grid-template-columns: 10% 1fr 10%;
   }
   .showcase img {
     width: 100%;
@@ -327,24 +240,17 @@ footer h1 {
   .showcase img,
   .showcase h2,
   .showcase .info {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 1;
     grid-column: 2/3;
     text-align: center;
   }
   .features {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+    align-items: center;
   }
   .features h2 {
     margin-top: 5rem;
   }
   .features .cards {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     width: 60%;
   }
   .features .cards .card {
@@ -360,15 +266,11 @@ footer h1 {
     font-size: 5rem;
   }
   .footer h1 {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    flex: 1;
   }
 }
-
 @media screen and (max-width: 640px) {
   .features .cards {
     width: 100%;
   }
-}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.css.map b/089-one color UI/styles/style.css.map
index 9630141..fb3b054 100644
--- a/089-one color UI/styles/style.css.map	
+++ b/089-one color UI/styles/style.css.map	
@@ -1,13 +1 @@
-{
-    "version": 3,
-    "mappings": "AAAA,OAAO,CAAC,mGAAI;AAEZ,AAAA,KAAK,CAAC;EACJ,eAAe,CAAA,QAAC;EAChB,OAAO,CAAA,QAAC;EACR,UAAU,CAAA,kCAAC;CACZ;;AAED,AAAA,CAAC,CAAC;EACA,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACX;;AAED,AAAA,IAAI,CAAC;EACH,SAAS,EAAE,KAAK;CACjB;;AAED,AAAA,IAAI,CAAC;EACH,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,wBAAwB;CACtC;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,kBAAkB;EAC/B,WAAW,EAAE,OAAO;CACrB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,kBAAkB;EAC/B,WAAW,EAAE,OAAO;CACrB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,MAAM;CAClB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,IAAI;CAChB;;AAED,AAAA,CAAC,CAAC;EACA,SAAS,EAAE,MAAM;CAClB;;AAED,AAAA,EAAE,CAAC;EACD,SAAS,EAAE,IAAI;CAChB;;AAED,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;CACtB;;ACtDD,AAAA,KAAK,CAAC;EACJ,UAAU,EAAE,eAAe;CAC5B;;AAED,AAAA,cAAc,CAAC;EACb,UAAU,EAAE,YAAY;EACxB,QAAQ,EAAE,MAAM;EAChB,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,CAAC;CACX;;AAED,AAAA,GAAG,CAAC;EACF,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,SAAS;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,WAAW,EAAE,MAAM;CA8BpB;;AArCD,AASE,GATC,CASD,EAAE,CAAC;EACD,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,IAAI;EAChB,IAAI,EAAE,CAAC;CACR;;AAdH,AAgBE,GAhBC,CAgBD,KAAK,CAAC;EACJ,IAAI,EAAE,CAAC;EACP,QAAQ,EAAE,QAAQ;CAanB;;AA/BH,AAmBI,GAnBD,CAgBD,KAAK,AAGF,OAAO,CAAC;EACP,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,oBAAoB;EAChC,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,qBAAqB;EAChC,cAAc,EAAE,MAAM;CACvB;;AA9BL,AAgCE,GAhCC,CAgCD,MAAM,CAAC;EACL,UAAU,EAAE,oBAAoB;EAChC,OAAO,EAAE,SAAS;EAClB,aAAa,EAAE,QAAQ;CACxB;;AAGH,AAAA,SAAS,CAAC;EACR,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,IAAI;EAChB,qBAAqB,EAAE,GAAG,CAAC,4BAA4B,CAAC,GAAG;EAC3D,kBAAkB,EAAE,WAAW;CA4BhC;;AAhCD,AAME,SANO,CAMP,EAAE,CAAC;EACD,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,QAAQ;CACrB;;AATH,AAWE,SAXO,CAWP,GAAG,CAAC;EACF,QAAQ,EAAE,GAAG;EACb,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,KAAK;EACjB,UAAU,EAAE,MAAM;EAClB,YAAY,EAAE,MAAM;CACrB;;AAlBH,AAoBE,SApBO,CAoBP,KAAK,CAAC;EACJ,QAAQ,EAAE,GAAG;EACb,WAAW,EAAE,GAAG;CASjB;;AA/BH,AAwBI,SAxBK,CAoBP,KAAK,CAIH,EAAE,CAAC;EACD,cAAc,EAAE,IAAI;CACrB;;AA1BL,AA4BI,SA5BK,CAoBP,KAAK,CAQH,CAAC,CAAC;EACA,KAAK,EAAE,OAAO;CACf;;AChFL,AAAA,mBAAmB,CAAC;EAClB,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,MAAM;CASjB;;AAbD,AAME,mBANiB,CAMjB,KAAK,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,EAAE;CACZ;;AAGH,AAAA,SAAS,CAAC;EACR,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,YAAY;CA8B9B;;AApCD,AAQE,SARO,CAQP,MAAM,CAAC;EACL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,KAAK,EAAE,YAAY;CAwBpB;;AAnCH,AAaI,SAbK,CAQP,MAAM,CAKJ,KAAK,CAAC;EACJ,UAAU,EAAE,KAAK;EACjB,MAAM,EAAE,SAAS;EACjB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,QAAQ;EACvB,QAAQ,EAAE,MAAM;CAcjB;;AAlCL,AAsBM,SAtBG,CAQP,MAAM,CAKJ,KAAK,CASH,EAAE,CAAC;EACD,MAAM,EAAE,cAAc;CACvB;;AAxBP,AA0BM,SA1BG,CAQP,MAAM,CAKJ,KAAK,CAaH,CAAC,CAAC;EACA,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,OAAO;CACf;;AA7BP,AA+BM,SA/BG,CAQP,MAAM,CAKJ,KAAK,CAkBH,GAAG,CAAC;EACF,UAAU,EAAE,KAAK;CAClB;;AChDP,AAAA,KAAK,CAAC;EACJ,UAAU,EAAE,eAAe;EAC3B,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;CAkBX;;AAtBD,AAME,KANG,CAMH,GAAG;AANL,KAAK,CAOH,OAAO;AAPT,KAAK,CAQH,EAAE,CAAC;EACD,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,qBAAqB;CACjC;;AAbH,AAeE,KAfG,CAeH,OAAO,CAAC;EACN,OAAO,EAAE,EAAE;CACZ;;AAjBH,AAmBE,KAnBG,CAmBH,EAAE,CAAC;EACD,GAAG,EAAE,GAAG;CACT;;ACrBH,AAAA,MAAM,CAAC;EACL,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,YAAY;EACxB,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;CAY/B;;AAnBD,AASE,MATI,CASJ,EAAE,CAAC;EACD,OAAO,EAAE,IAAI;EACb,IAAI,EAAE,CAAC;EACP,UAAU,EAAE,IAAI;EAChB,eAAe,EAAE,aAAa;CAC/B;;AAdH,AAgBE,MAhBI,CAgBJ,EAAE,CAAC;EACD,IAAI,EAAE,CAAC;CACR;;AJ2CH,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,MAAM;EAClC,AAAA,IAAI,CAAC;IACH,SAAS,EAAE,GAAG;GACf;EAED,AACE,GADC,CACD,KAAK,CAAC;IACJ,IAAI,EAAE,CAAC;GACR;EAHH,AAIE,GAJC,CAID,EAAE,CAAC;IACD,WAAW,EAAE,IAAI;GAClB;EAGH,AAAA,SAAS,CAAC;IACR,qBAAqB,EAAE,WAAW;GAanC;EAdD,AAGE,SAHO,CAGP,GAAG,CAAC;IACF,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,OAAO;GACpB;EANH,AAQE,SARO,CAQP,GAAG;EARL,SAAS,CASP,EAAE;EATJ,SAAS,CAUP,KAAK,CAAC;IACJ,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,MAAM;GACnB;EAGH,AAAA,SAAS,CAAC;IACR,WAAW,EAAE,MAAM;GAcpB;EAfD,AAGE,SAHO,CAGP,EAAE,CAAC;IACD,UAAU,EAAE,IAAI;GACjB;EALH,AAOE,SAPO,CAOP,MAAM,CAAC;IACL,cAAc,EAAE,MAAM;IACtB,KAAK,EAAE,GAAG;GAKX;EAdH,AAWI,SAXK,CAOP,MAAM,CAIJ,KAAK,CAAC;IACJ,MAAM,EAAE,SAAS;GAClB;EAIL,AAAA,KAAK,CAAC;IACJ,QAAQ,EAAE,MAAM;GASjB;EAVD,AAGE,KAHG,CAGH,GAAG,CAAC;IACF,KAAK,EAAE,GAAG;GACX;EALH,AAOE,KAPG,CAOH,EAAE,CAAC;IACD,SAAS,EAAE,IAAI;GAChB;EAGH,AACE,OADK,CACL,EAAE,CAAC;IACD,IAAI,EAAE,CAAC;GACR;;;AAIL,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EACjC,AACE,SADO,CACP,MAAM,CAAC;IACL,KAAK,EAAE,IAAI;GACZ",
-    "sources": [
-        "style.scss",
-        "_home.scss",
-        "_features.scss",
-        "_soon.scss",
-        "_footer.scss"
-    ],
-    "names": [],
-    "file": "style.css"
-}
\ No newline at end of file
+{"version":3,"sources":["_global.scss","style.css","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css b/089-one color UI/styles/style.min.css
new file mode 100644
index 0000000..4a765cd
--- /dev/null
+++ b/089-one color UI/styles/style.min.css	
@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap";:root{--primary-color: #f54538;--black: #070707;--gradient: radial-gradient(#525252, #131313)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{color:#fff;font-family:"Montserrat",sans-serif}h1{font-size:2.5rem;font-family:"Lobster",cursive;font-weight:lighter}h2{font-size:8rem;font-family:"Lobster",cursive;font-weight:lighter}h3{font-size:3.5rem}h4{font-size:3rem}p{font-size:2.5rem}li{font-size:2rem}a{color:#fff;text-decoration:none}.home{background:var(--gradient)}.nav-container{background:var(--black);position:sticky;top:0;z-index:2}nav{width:80%;margin:auto;min-height:10vh;padding:3rem 0rem;display:flex;justify-content:space-between;align-items:center}nav ul{display:flex;justify-content:space-between;list-style:none;flex:1}nav #logo{flex:3;position:relative}nav #logo::after{content:"";position:absolute;top:0;left:0;width:6rem;height:6rem;background:var(--primary-color);border-radius:50%;transform:translate(-10%, -20%);mix-blend-mode:screen}nav .order{background:var(--primary-color);padding:1rem 2rem;border-radius:.625rem}.showcase{display:grid;min-height:90vh;grid-template-columns:10% repeat(3, minmax(5rem, 1fr)) 10%;grid-template-rows:1fr 2fr 1fr}.showcase h2{grid-column:2/3;align-self:flex-end}.showcase img{grid-row:2/3;grid-column:3/4;height:110%;-o-object-fit:cover;object-fit:cover;align-self:center;justify-self:center}.showcase .info{grid-row:3/4;grid-column:4/5}.showcase .info h3{padding-bottom:3rem}.showcase .info p{color:#c4c4c4}.features-container{background:#323232;position:relative;z-index:0;overflow:hidden}.features-container .wave{position:absolute;left:0;bottom:-25%;width:100%;z-index:-1}.features{min-height:90vh;width:80%;margin:auto;display:flex;flex-direction:column;justify-content:space-around}.features .cards{display:flex;justify-content:space-between;color:var(--black)}.features .cards .card{background:#fff;margin:0rem 5rem;display:flex;flex-direction:column;text-align:center;border-radius:.625rem;overflow:hidden}.features .cards .card h4{margin:2rem 0rem 1rem}.features .cards .card p{padding:2rem;color:#686868}.features .cards .card img{-o-object-fit:cover;object-fit:cover}.soon{background:var(--gradient);min-height:80vh;position:relative;z-index:0}.soon img,.soon .circle,.soon h2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.soon .circle{z-index:-1}.soon h2{top:25%}footer{min-height:10vh;background:var(--black);padding-left:10%;padding-right:10%;display:flex;align-items:center;justify-content:space-between}footer ul{display:flex;flex:1;list-style:none;justify-content:space-between}footer h1{flex:3}@media screen and (max-width: 1200px){html{font-size:50%}nav #logo{flex:1}nav ul{margin-left:5rem}.showcase{grid-template-columns:10% 1fr 10%}.showcase img{width:100%;-o-object-fit:contain;object-fit:contain}.showcase img,.showcase h2,.showcase .info{grid-column:2/3;text-align:center}.features{align-items:center}.features h2{margin-top:5rem}.features .cards{flex-direction:column;width:60%}.features .cards .card{margin:5rem 0rem}.soon{overflow:hidden}.soon img{width:60%}.soon h2{font-size:5rem}.footer h1{flex:1}}@media screen and (max-width: 640px){.features .cards{width:100%}}/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css.map b/089-one color UI/styles/style.min.css.map
new file mode 100644
index 0000000..728443a
--- /dev/null
+++ b/089-one color UI/styles/style.min.css.map	
@@ -0,0 +1 @@
+{"version":3,"sources":["_global.scss","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,qGAAA,CAER,MACE,wBAAA,CACA,gBAAA,CACA,6CAAA,CAGF,EACE,qBAAA,CACA,QAAA,CACA,SAAA,CAGF,KACE,eAAA,CAGF,KACE,UAAA,CACA,mCAAA,CAGF,GACE,gBAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,cAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,UAAA,CACA,oBAAA,CCrDF,MACE,0BAAA,CAGF,eACE,uBAAA,CACA,eAAA,CACA,KAAA,CACA,SAAA,CAGF,IACE,SAAA,CACA,WAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,OACE,YAAA,CACA,6BAAA,CACA,eAAA,CACA,MAAA,CAGF,UACE,MAAA,CACA,iBAAA,CACA,iBACE,UAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,WAAA,CACA,+BAAA,CACA,iBAAA,CACA,+BAAA,CACA,qBAAA,CAGJ,WACE,+BAAA,CACA,iBAAA,CACA,qBAAA,CAIJ,UACE,YAAA,CACA,eAAA,CACA,0DAAA,CACA,8BAAA,CAEA,aACE,eAAA,CACA,mBAAA,CAGF,cACE,YAAA,CACA,eAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CACA,iBAAA,CACA,mBAAA,CAGF,gBACE,YAAA,CACA,eAAA,CAEA,mBACE,mBAAA,CAGF,kBACE,aAAA,CC/EN,oBACE,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,eAAA,CAEA,0BACE,iBAAA,CACA,MAAA,CACA,WAAA,CACA,UAAA,CACA,UAAA,CAIJ,UACE,eAAA,CACA,SAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,4BAAA,CAEA,iBACE,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,uBACE,eAAA,CACA,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,qBAAA,CACA,eAAA,CAEA,0BACE,qBAAA,CAGF,yBACE,YAAA,CACA,aAAA,CAGF,2BACE,mBAAA,CAAA,gBAAA,CC/CR,MACE,0BAAA,CACA,eAAA,CACA,iBAAA,CACA,SAAA,CAEA,iCAGE,iBAAA,CACA,OAAA,CACA,QAAA,CACA,+BAAA,CAGF,cACE,UAAA,CAGF,SACE,OAAA,CCpBJ,OACE,eAAA,CACA,uBAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CAEA,UACE,YAAA,CACA,MAAA,CACA,eAAA,CACA,6BAAA,CAGF,UACE,MAAA,CCjBJ,sCACE,KACE,aAAA,CAIA,UACE,MAAA,CAEF,OACE,gBAAA,CAIJ,UACE,iCAAA,CAEA,cACE,UAAA,CACA,qBAAA,CAAA,kBAAA,CAGF,2CAGE,eAAA,CACA,iBAAA,CAIJ,UACE,kBAAA,CAEA,aACE,eAAA,CAGF,iBACE,qBAAA,CACA,SAAA,CAEA,uBACE,gBAAA,CAKN,MACE,eAAA,CAEA,UACE,SAAA,CAGF,SACE,cAAA,CAKF,WACE,MAAA,CAAA,CAKN,qCAEI,iBACE,UAAA,CAAA","file":"style.min.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.scss b/089-one color UI/styles/style.scss
index ecfdfb1..331af9a 100644
--- a/089-one color UI/styles/style.scss	
+++ b/089-one color UI/styles/style.scss	
@@ -1,134 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
-
-:root {
-  --primary-color: #f54538;
-  --black: #070707;
-  --gradient: radial-gradient(#525252, #131313);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  color: white;
-  font-family: "Montserrat", sans-serif;
-}
-
-h1 {
-  font-size: 2.5rem;
-  font-family: "Lobster", cursive;
-  font-weight: lighter;
-}
-
-h2 {
-  font-size: 8rem;
-  font-family: "Lobster", cursive;
-  font-weight: lighter;
-}
-
-h3 {
-  font-size: 3.5rem;
-}
-
-h4 {
-  font-size: 3rem;
-}
-
-p {
-  font-size: 2.5rem;
-}
-
-li {
-  font-size: 2rem;
-}
-
-a {
-  color: white;
-  text-decoration: none;
-}
-
-@import "home";
-@import "features";
-@import "soon";
-@import "footer";
-
-@media screen and (max-width: 1200px) {
-  html {
-    font-size: 50%;
-  }
-
-  nav {
-    #logo {
-      flex: 1;
-    }
-    ul {
-      margin-left: 5rem;
-    }
-  }
-
-  .showcase {
-    grid-template-columns: 10% 1fr 10%;
-
-    img {
-      width: 100%;
-      object-fit: contain;
-    }
-
-    img,
-    h2,
-    .info {
-      grid-column: 2/3;
-      text-align: center;
-    }
-  }
-
-  .features {
-    align-items: center;
-
-    h2 {
-      margin-top: 5rem;
-    }
-
-    .cards {
-      flex-direction: column;
-      width: 60%;
-
-      .card {
-        margin: 5rem 0rem;
-      }
-    }
-  }
-
-  .soon {
-    overflow: hidden;
-
-    img {
-      width: 60%;
-    }
-
-    h2 {
-      font-size: 5rem;
-    }
-  }
-
-  .footer {
-    h1 {
-      flex: 1;
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .features {
-    .cards {
-      width: 100%;
-    }
-  }
-}
+@use "global";
+@use "home";
+@use "features";
+@use "soon";
+@use "footer";
+@use "media-queries";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

From d201037d880a6848b4c1d08c952c1191df682ea7 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 15 Aug 2025 09:29:55 +0200
Subject: [PATCH 077/114] refactor: add sections

---
 007-split landing page/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

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>

From 330603c26288d1efe6ef01335c1ffe83de27d2a1 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 22 Aug 2025 12:20:48 +0200
Subject: [PATCH 078/114] fix: align items

---
 037-pokedex/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

From 5fd94c42ed83bea932cbdcdf4ce18189bfa374c2 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 22 Aug 2025 14:35:34 +0200
Subject: [PATCH 079/114] fix: remove margin-top

---
 038-mobile tab navigation/style.css | 1 -
 1 file changed, 1 deletion(-)

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

From 8b5da45092fed1e37d34e560fe950ca92ba89133 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 22 Aug 2025 15:56:21 +0200
Subject: [PATCH 080/114] fix: semantic class

---
 039-password strength background/index.html | 2 +-
 039-password strength background/style.css  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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;

From 08113ade280dd11a3d5c49302a166adb40d9408e Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 22 Aug 2025 18:51:58 +0200
Subject: [PATCH 081/114] refactor: grid

---
 040-3d boxes background/style.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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;

From e4540c330ea1890289bd1ed3a11269ab8075b0d8 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 23 Aug 2025 09:29:39 +0200
Subject: [PATCH 082/114] fix: handle 9

---
 041-verify account UI/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From d4e8178e0a6057ae76cfa8833a97a7cd028bcf23 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 23 Aug 2025 09:37:52 +0200
Subject: [PATCH 083/114] fix: semantic class

---
 041-verify account UI/index.html | 2 +-
 041-verify account UI/style.css  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

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

From f431ed74188f2989c9a40880911c11c3519dbdd3 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 23 Aug 2025 12:06:50 +0200
Subject: [PATCH 084/114] fix: push li

---
 042-live user filter/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 7c26ba372385184b5d3a53a2530f85436e22b360 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 23 Aug 2025 12:20:15 +0200
Subject: [PATCH 085/114] style: fix alignment

---
 042-live user filter/style.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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 {

From 70a1f82725dc69dc337062e490c6ca8b2df1bd8c Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 28 Aug 2025 07:45:36 +0200
Subject: [PATCH 086/114] fix: title class

---
 048-random image generator/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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>

From 7110521ba884a8fffa9e350d673e00288b5f0e45 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 28 Aug 2025 11:15:40 +0200
Subject: [PATCH 087/114] refactor: event delegation

---
 049-todo list/script.js | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/049-todo list/script.js b/049-todo list/script.js
index b065147..c004648 100644
--- a/049-todo list/script.js	
+++ b/049-todo list/script.js	
@@ -24,15 +24,6 @@ const addTodo = (todo) => {
       todoElement.classList.add("completed");
     }
     todoElement.innerText = todoText;
-    todoElement.addEventListener("click", () => {
-      todoElement.classList.toggle("completed");
-      updateLocalStorage();
-    });
-    todoElement.addEventListener("contextmenu", (e) => {
-      e.preventDefault();
-      todoElement.remove();
-      updateLocalStorage();
-    });
     todosList.appendChild(todoElement);
     input.value = "";
     updateLocalStorage();
@@ -47,3 +38,18 @@ form.addEventListener("submit", (e) => {
   e.preventDefault();
   addTodo();
 });
+
+todosList.addEventListener("click", (e) => {
+  if (e.target.tagName === "LI") {
+    e.target.classList.toggle("completed");
+    updateLocalStorage();
+  }
+});
+
+todosList.addEventListener("contextmenu", (e) => {
+  if (e.target.tagName === "LI") {
+    e.preventDefault();
+    e.target.remove();
+    updateLocalStorage();
+  }
+});

From b47afe009b98e5e87518593945c1c2fe38915dec Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 28 Aug 2025 11:24:31 +0200
Subject: [PATCH 088/114] revert: listener

---
 049-todo list/script.js | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/049-todo list/script.js b/049-todo list/script.js
index c004648..b065147 100644
--- a/049-todo list/script.js	
+++ b/049-todo list/script.js	
@@ -24,6 +24,15 @@ const addTodo = (todo) => {
       todoElement.classList.add("completed");
     }
     todoElement.innerText = todoText;
+    todoElement.addEventListener("click", () => {
+      todoElement.classList.toggle("completed");
+      updateLocalStorage();
+    });
+    todoElement.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      todoElement.remove();
+      updateLocalStorage();
+    });
     todosList.appendChild(todoElement);
     input.value = "";
     updateLocalStorage();
@@ -38,18 +47,3 @@ form.addEventListener("submit", (e) => {
   e.preventDefault();
   addTodo();
 });
-
-todosList.addEventListener("click", (e) => {
-  if (e.target.tagName === "LI") {
-    e.target.classList.toggle("completed");
-    updateLocalStorage();
-  }
-});
-
-todosList.addEventListener("contextmenu", (e) => {
-  if (e.target.tagName === "LI") {
-    e.preventDefault();
-    e.target.remove();
-    updateLocalStorage();
-  }
-});

From 0e2c78d80372837b91b61c40b4a4d601289fd07d Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 28 Aug 2025 14:15:33 +0200
Subject: [PATCH 089/114] refactor: add debouncing

---
 050-insect catch game/script.js | 1 +
 1 file changed, 1 insertion(+)

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

From b6fb36a007fa1d136e6822fd011d39cca44770d9 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 31 Aug 2025 10:35:34 +0200
Subject: [PATCH 090/114] fix: remove ixid

---
 001-expanding cards/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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>

From 0d116bd7ef1bd4915dba4e14740021216448f020 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 31 Aug 2025 11:09:21 +0200
Subject: [PATCH 091/114] refactor: clean unsplash urls

---
 003-rotating navigation/index.html       |  2 +-
 005-blurry loading/style.css             |  2 +-
 007-split landing page/style.css         |  4 +--
 018-background slider/index.html         | 10 +++---
 024-content placeholder/script.js        |  2 +-
 025-sticky navigation/style.css          |  2 +-
 026-double vertical slider/index.html    |  8 ++---
 029-double click heart/style.css         |  2 +-
 035-image carousel/index.html            |  8 ++---
 038-mobile tab navigation/index.html     |  8 ++---
 047-testimonial box switcher/index.html  |  2 +-
 047-testimonial box switcher/script.js   | 23 +++++--------
 055-glass dashboard/index.html           | 42 +++++++++++++++++++-----
 056-image comparison slider/index.html   |  4 +--
 061-custom video player/index.html       |  2 +-
 064-menu slider modal/index.html         |  2 +-
 073-lyrics search app/style.css          | 25 +++++++-------
 074-relaxer app/style.css                |  6 ++--
 076-new year countdown/style.css         | 14 ++++----
 078-speak number guessing game/style.css |  2 +-
 079-creative agency website/index.html   |  2 +-
 080-health dashboard/style.css           |  5 +--
 098-magazine layout/index.html           |  2 +-
 102-container queries/index.html         |  8 ++---
 24 files changed, 106 insertions(+), 81 deletions(-)

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 99ac86a..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;
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/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/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/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/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/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 6132e1d..c917ffb 100644
--- a/061-custom video player/index.html	
+++ b/061-custom video player/index.html	
@@ -18,7 +18,7 @@ <h1>Custom Video Player</h1>
       src="https://www.w3schools.com/html/mov_bbb.mp4"
       id="video"
       class="screen"
-      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"
+      poster="https://plus.unsplash.com/premium_photo-1683140811960-956e5bbf858e?q=80&w=1489&auto=format&fit=crop"
     ></video>
     <!-- Sample Video provided by w3schools -->
     <div class="controls">
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/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/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/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/102-container queries/index.html b/102-container queries/index.html
index 8bedbe1..4081f36 100644
--- a/102-container queries/index.html	
+++ b/102-container queries/index.html	
@@ -28,7 +28,7 @@ <h1>Desert Oasis: Exploring Nature's Tranquility</h1>
           <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&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDMyMzR8&ixlib=rb-4.0.3&q=80&w=400"
+              src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400"
               alt=""
             />
             <p>
@@ -42,7 +42,7 @@ <h2>Tranquil Desert Haven</h2>
           <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&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400"
               alt=""
             />
             <p>
@@ -53,7 +53,7 @@ <h2>Serenity Oasis Retreat</h2>
           <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&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400"
               alt=""
             />
             <p>
@@ -64,7 +64,7 @@ <h2>Mirage Haven Cottage</h2>
           <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&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400"
               alt=""
             />
             <p>

From df1666d9720e99c6308a236db68ff8e4b9b56de5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 31 Aug 2025 12:53:12 +0200
Subject: [PATCH 092/114] docs: add vol1 link

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

diff --git a/README.md b/README.md
index a0c99fc..ef8fa2a 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,12 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 
 [**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.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)

From a500b63ca14fa5eb8c8d0c8534746b6c2c01e059 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 31 Aug 2025 13:12:54 +0200
Subject: [PATCH 093/114] docs: update pdf preview link

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

diff --git a/README.md b/README.md
index ef8fa2a..f702806 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Inside the PDF, you'll find:
 
 This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
 
-[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)
+[**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.
@@ -137,7 +137,7 @@ Explore each project individually and view live demos to see them in action:
 | 101 | [Cascade Layers](101-cascade%20layers)                                 | [Live Demo](https://codepen.io/solygambas/full/poYaZmv)  |
 | 102 | [Container Queries](102-container%20queries)                           | [Live Demo](https://codepen.io/solygambas/full/abMqPNy)  |
 
-> **Ready to master all 102 projects?** Don't just build them—transform them into portfolio showpieces with our [**Ultimate Companion Guide**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)!
+> **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
 

From 5bb8a437c4815f9c27102f4e61cd17f3a54887d7 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 16 Sep 2025 10:49:42 +0200
Subject: [PATCH 094/114] fix: remove redundant width

---
 091-chat interface/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/091-chat interface/style.css b/091-chat interface/style.css
index a1deba8..49a17ab 100644
--- a/091-chat interface/style.css	
+++ b/091-chat interface/style.css	
@@ -95,5 +95,4 @@ h2 {
   left: 0;
   right: 0;
   padding: 10px 15px;
-  width: 100%;
 }

From e71443a2ed8bc66e1f6f1535136a52ee968e17c9 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 16 Sep 2025 13:17:05 +0200
Subject: [PATCH 095/114] fix: remove duplicate width

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

diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index 34f5381..fdbd13a 100644
--- a/099-parallax website/style.css	
+++ b/099-parallax website/style.css	
@@ -83,7 +83,6 @@ nav {
   }
 
   .content-images img {
-    max-width: 100%;
     padding: 2rem 0 0.25rem;
   }
 }

From 3eb8a2ad6a0fdb29a1db71358ae7fcf5ae1cb502 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 16 Sep 2025 13:40:34 +0200
Subject: [PATCH 096/114] fix: add body bg

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

diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index fdbd13a..18417e2 100644
--- a/099-parallax website/style.css	
+++ b/099-parallax website/style.css	
@@ -8,6 +8,10 @@
   font-family: "Poppins", sans-serif;
 }
 
+body {
+  background-color: rgb(24, 24, 24);
+}
+
 nav {
   position: absolute;
   width: 100%;

From f4039f27f8bf31ceef53be5c873d77ae764ef057 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 17 Sep 2025 11:03:03 +0200
Subject: [PATCH 097/114] fix: remove unused class

---
 097-terminal style landing page/style.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/097-terminal style landing page/style.css b/097-terminal style landing page/style.css
index 5dd1dc3..c3c26a4 100644
--- a/097-terminal style landing page/style.css	
+++ b/097-terminal style landing page/style.css	
@@ -71,11 +71,6 @@ a {
   display: none;
 }
 
-.wb-body {
-  background-color: #111;
-  padding: 20px;
-}
-
 p {
   margin: 20px 0;
 }

From c45c382770952ea15aed6bae4b72023d322d928f Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 17 Sep 2025 11:17:00 +0200
Subject: [PATCH 098/114] fix: add custom winbox class

---
 097-terminal style landing page/style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/097-terminal style landing page/style.css b/097-terminal style landing page/style.css
index c3c26a4..de68f8a 100644
--- a/097-terminal style landing page/style.css	
+++ b/097-terminal style landing page/style.css	
@@ -75,6 +75,12 @@ p {
   margin: 20px 0;
 }
 
+/* Customize WinBox */
+.wb-body {
+  background-color: #111;
+  padding: 20px;
+}
+
 .cursor {
   font-weight: 700;
   animation: 1s blink step-end infinite;

From 32d4b1dba08ada8f7a9da3bc3776031594c0a4d5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 24 Sep 2025 08:18:10 +0200
Subject: [PATCH 099/114] fix: keydown

---
 065-hangman game/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/065-hangman game/script.js b/065-hangman game/script.js
index 68dfb0f..80f5d1a 100644
--- a/065-hangman game/script.js	
+++ b/065-hangman game/script.js	
@@ -88,7 +88,7 @@ function showNotification() {
   }, 2000);
 }
 
-window.addEventListener("keypress", (e) => {
+window.addEventListener("keydown", (e) => {
   if (playable) {
     const letter = e.key.toLowerCase();
     if (letter >= "a" && letter <= "z") {

From 9c15c483a7459e224607f2aaa31ec3161d4b5c27 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:02:20 +0200
Subject: [PATCH 100/114] fix: check number

---
 067-expense tracker/script.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/067-expense tracker/script.js b/067-expense tracker/script.js
index 02f96d5..d1e9e3a 100644
--- a/067-expense tracker/script.js	
+++ b/067-expense tracker/script.js	
@@ -39,13 +39,19 @@ function generateID() {
 
 function addTransaction(e) {
   e.preventDefault();
-  if (text.value.trim() === "" || amount.value.trim() === "") {
+  const amountValue = Number(amount.value);
+  if (
+    text.value.trim() === "" ||
+    isNaN(amountValue) ||
+    amount.value.trim() === ""
+  ) {
     showNotification();
+    return;
   } else {
     const transaction = {
       id: generateID(),
       text: text.value,
-      amount: +amount.value,
+      amount: amountValue,
     };
     transactions.push(transaction);
     addTransactionDOM(transaction);

From 9d78bae197da31af30d9b07ee82a98a375ed0e27 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 25 Sep 2025 08:15:17 +0200
Subject: [PATCH 101/114] fix: remove unused class

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

diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 2b4b12c..fa6e69a 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -53,10 +53,6 @@ ul {
   transform: scale(0.98);
 }
 
-.primary-text {
-  color: var(--primary-color);
-}
-
 .secondary-text {
   color: var(--secondary--color);
 }

From 3c663165d1b0fba7b9baca4738325e82809ff1d6 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 25 Sep 2025 16:41:19 +0200
Subject: [PATCH 102/114] docs: fix project titles

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

diff --git a/README.md b/README.md
index f702806..aeab75e 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ Explore each project individually and view live demos to see them in action:
 | 018 | [Background Slider](018-background%20slider)                           | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ)  |
 | 019 | [Theme Clock](019-theme%20clock)                                       | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy)  |
 | 020 | [Button Ripple Effect](020-button%20ripple%20effect)                   | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw)  |
-| 021 | [Drag N Drop](021-drag%20n%20drop)                                     | [Live Demo](https://codepen.io/solygambas/full/RwGEyme)  |
+| 021 | [Drag 'N Drop](021-drag%20n%20drop)                                    | [Live Demo](https://codepen.io/solygambas/full/RwGEyme)  |
 | 022 | [Drawing App](022-drawing%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvzREMx)  |
 | 023 | [Kinetic Loader](023-kinetic%20loader)                                 | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW)  |
 | 024 | [Content Placeholder](024-content%20placeholder)                       | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX)  |
@@ -120,7 +120,7 @@ Explore each project individually and view live demos to see them in action:
 | 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox)                   | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg)  |
 | 085 | [Sneaker Shop](085-sneaker%20shop)                                     | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ)  |
 | 086 | [Coming Soon Page](086-coming%20soon%20page)                           | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM)  |
-| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm)  |
+| 087 | [Sliding Sign-In & Sign-Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm)  |
 | 088 | [Promo Code](088-promo%20code)                                         | [Live Demo](https://codepen.io/solygambas/full/wvggBXe)  |
 | 089 | [One Color UI](089-one%20color%20UI)                                   | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx)  |
 | 090 | [Tooltip](090-tooltip)                                                 | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb)  |

From ea010541624eb5823da2d66dc96231fa35d22817 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 25 Sep 2025 16:43:06 +0200
Subject: [PATCH 103/114] docs: fix titles

---
 021-drag n drop/index.html                | 2 +-
 083-full screen image slider/index.html   | 2 +-
 087-sliding signin signup form/index.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/021-drag n drop/index.html b/021-drag n drop/index.html
index 9a8f110..da57b41 100644
--- a/021-drag n drop/index.html	
+++ b/021-drag n drop/index.html	
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Drag N Drop</title>
+    <title>Drag 'N Drop</title>
   </head>
   <body>
     <div class="empty">
diff --git a/083-full screen image slider/index.html b/083-full screen image slider/index.html
index 89a3d10..fc209d0 100644
--- a/083-full screen image slider/index.html	
+++ b/083-full screen image slider/index.html	
@@ -13,7 +13,7 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
-    <title>Full Screen Image Slider</title>
+    <title>Full-Screen Image Slider</title>
   </head>
   <body>
     <div class="slider">
diff --git a/087-sliding signin signup form/index.html b/087-sliding signin signup form/index.html
index 3ea0785..1a7ec51 100644
--- a/087-sliding signin signup form/index.html	
+++ b/087-sliding signin signup form/index.html	
@@ -13,7 +13,7 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
-    <title>Sliding Sign In & Sign Up Form</title>
+    <title>Sliding Sign-In & Sign-Up Form</title>
   </head>
   <body>
     <div class="container" id="container">

From d0140ff2ea5945d6828a648bdb2317247d6da37a Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 26 Sep 2025 13:22:21 +0200
Subject: [PATCH 104/114] fix: lady-image media query

---
 092-music streaming service/style.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/092-music streaming service/style.css b/092-music streaming service/style.css
index b9e2464..e8ef0b5 100644
--- a/092-music streaming service/style.css	
+++ b/092-music streaming service/style.css	
@@ -378,12 +378,6 @@ body {
     text-align: center;
   }
 
-  @media (max-height: 500px) {
-    .hero-section .lady-image {
-      display: none;
-    }
-  }
-
   .discover-section {
     flex-direction: column;
     justify-content: center;
@@ -414,3 +408,9 @@ body {
     margin: 2rem 0;
   }
 }
+
+@media (max-width: 992px) and (max-height: 500px) {
+  .hero-section .lady-image {
+    display: none;
+  }
+}

From feefa1b45cc7cb57ea4db5b44e582cc96ab2d55b Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Fri, 26 Sep 2025 13:24:45 +0200
Subject: [PATCH 105/114] fix: media-query lady-image

---
 092-music streaming service/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/092-music streaming service/style.css b/092-music streaming service/style.css
index e8ef0b5..a9883ab 100644
--- a/092-music streaming service/style.css	
+++ b/092-music streaming service/style.css	
@@ -409,7 +409,7 @@ body {
   }
 }
 
-@media (max-width: 992px) and (max-height: 500px) {
+@media (max-height: 500px) {
   .hero-section .lady-image {
     display: none;
   }

From a92814b5802dfcb40d33619ea3dfa537b3370b1b Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Tue, 30 Sep 2025 14:06:16 +0200
Subject: [PATCH 106/114] fix: getElementById

---
 071-speech text reader/script.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/071-speech text reader/script.js b/071-speech text reader/script.js
index dcbd76b..6a87f12 100644
--- a/071-speech text reader/script.js	
+++ b/071-speech text reader/script.js	
@@ -4,6 +4,7 @@ const textarea = document.getElementById("text");
 const readButton = document.getElementById("read");
 const toggleButton = document.getElementById("toggle");
 const closeButton = document.getElementById("close");
+const textBox = document.getElementById("text-box");
 
 const data = [
   {
@@ -105,10 +106,10 @@ function setVoice(e) {
 
 // Event Listeners
 toggleButton.addEventListener("click", () => {
-  document.getElementById("text-box").classList.toggle("show");
+  textBox.classList.toggle("show");
 });
 closeButton.addEventListener("click", () => {
-  document.getElementById("text-box").classList.remove("show");
+  textBox.classList.remove("show");
 });
 speechSynthesis.addEventListener("voiceschanged", getVoices);
 voicesSelect.addEventListener("change", setVoice);

From 8928b7e41ea601b0c65778c08cb1ab708a4e87cc Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 1 Oct 2025 06:50:54 +0200
Subject: [PATCH 107/114] fix: remove unused class

---
 073-lyrics search app/style.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/073-lyrics search app/style.css b/073-lyrics search app/style.css
index ae3c60d..ac4425f 100644
--- a/073-lyrics search app/style.css	
+++ b/073-lyrics search app/style.css	
@@ -127,16 +127,6 @@ ul.songs li {
   text-align: center;
 }
 
-.centered {
-  display: flex;
-  justify-content: center;
-}
-
-.centered button {
-  transform: scale(1.3);
-  margin: 15px;
-}
-
 .toast {
   position: fixed;
   bottom: 10px;

From 67d5bc55529f2c8b3e0debb5ca099b2492856080 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 1 Oct 2025 12:55:28 +0200
Subject: [PATCH 108/114] refactor: add formatTime helper

---
 076-new year countdown/script.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/076-new year countdown/script.js b/076-new year countdown/script.js
index 43b9146..ccff5a3 100644
--- a/076-new year countdown/script.js	
+++ b/076-new year countdown/script.js	
@@ -9,6 +9,10 @@ const loading = document.getElementById("loading");
 const nextYear = new Date().getFullYear() + 1;
 const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
 
+function formatTime(unit) {
+  return unit < 10 ? "0" + unit : unit;
+}
+
 function updateCountdown() {
   const currentTime = new Date();
   const difference = newYearTime - currentTime;
@@ -17,11 +21,9 @@ function updateCountdown() {
   const currentMinutes = Math.floor(difference / 1000 / 60) % 60;
   const currentSeconds = Math.floor(difference / 1000) % 60;
   days.innerText = currentDays;
-  hours.innerText = currentHours < 10 ? "0" + currentHours : currentHours;
-  minutes.innerText =
-    currentMinutes < 10 ? "0" + currentMinutes : currentMinutes;
-  seconds.innerText =
-    currentSeconds < 10 ? "0" + currentSeconds : currentSeconds;
+  hours.innerText = formatTime(currentHours);
+  minutes.innerText = formatTime(currentMinutes);
+  seconds.innerText = formatTime(currentSeconds);
 }
 
 setTimeout(() => {

From af6d8d2a3d8842c0ee192d829f68d9ac8bf39242 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 2 Oct 2025 14:49:41 +0200
Subject: [PATCH 109/114] docs: add vol 2 link

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

diff --git a/README.md b/README.md
index aeab75e..458ee36 100644
--- a/README.md
+++ b/README.md
@@ -20,11 +20,13 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 
 [**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.
+> **Ready for the full challenge?**  
+> Unlock all the hands-on projects and step-by-step challenges with our companion books:
 >
-> **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!
+> - [**_Volume 1: Essentials (Days 1–50)_ on Amazon**](https://amzn.to/4g01whb)
+> - [**_Volume 2: Advanced (Days 51–100)_ on Amazon**](https://amzn.to/4pSqAeq)
+>
+> [**Join the notification list**](https://mailchi.mp/36e4c32d7df0/get-the-full-guide-first) for future updates and new resources!
 
 ## Project Showcase
 

From c2b3ff066e2e07699ab1ee58347f99b36e4e56e9 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 2 Oct 2025 15:23:01 +0200
Subject: [PATCH 110/114] docs: update companion guide

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

diff --git a/README.md b/README.md
index 458ee36..baff95b 100644
--- a/README.md
+++ b/README.md
@@ -21,10 +21,9 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 [**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100-projects-in-100-days.pdf)
 
 > **Ready for the full challenge?**  
-> Unlock all the hands-on projects and step-by-step challenges with our companion books:
+> 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.
 >
-> - [**_Volume 1: Essentials (Days 1–50)_ on Amazon**](https://amzn.to/4g01whb)
-> - [**_Volume 2: Advanced (Days 51–100)_ on Amazon**](https://amzn.to/4pSqAeq)
+> Then, push your limits with [**Volume 2: Advanced (Days 51–100)**](https://amzn.to/4pSqAeq) to tackle complex challenges and become an advanced front-end > developer.
 >
 > [**Join the notification list**](https://mailchi.mp/36e4c32d7df0/get-the-full-guide-first) for future updates and new resources!
 

From f7f2c99ba41e1bcdc7aab1c079613801e44be128 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 2 Oct 2025 15:25:11 +0200
Subject: [PATCH 111/114] docs: fix vol 1 link

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

diff --git a/README.md b/README.md
index baff95b..10f402e 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 [**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100-projects-in-100-days.pdf)
 
 > **Ready for the full challenge?**  
-> 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.
+> Continue your journey with [**Volume 1: Essentials (Days 1–50)**](https://amzn.to/4g01whb) — unlock 40 more hands-on projects to sharpen your skills > and build your portfolio.
 >
 > Then, push your limits with [**Volume 2: Advanced (Days 51–100)**](https://amzn.to/4pSqAeq) to tackle complex challenges and become an advanced front-end > developer.
 >

From ba80816520fc602746e8d067e6ebdb4138ef00c5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 2 Oct 2025 15:28:46 +0200
Subject: [PATCH 112/114] docs: fix typo

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

diff --git a/README.md b/README.md
index 10f402e..9da4920 100644
--- a/README.md
+++ b/README.md
@@ -21,9 +21,9 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 [**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100-projects-in-100-days.pdf)
 
 > **Ready for the full challenge?**  
-> Continue your journey with [**Volume 1: Essentials (Days 1–50)**](https://amzn.to/4g01whb) — unlock 40 more hands-on projects to sharpen your skills > and build your portfolio.
+> Continue your journey with [**Volume 1: Essentials (Days 1–50)**](https://amzn.to/4g01whb) — unlock 40 more hands-on projects to sharpen your skills and build your portfolio.
 >
-> Then, push your limits with [**Volume 2: Advanced (Days 51–100)**](https://amzn.to/4pSqAeq) to tackle complex challenges and become an advanced front-end > developer.
+> Then, push your limits with [**Volume 2: Advanced (Days 51–100)**](https://amzn.to/4pSqAeq) to tackle complex challenges and become an advanced front-end developer.
 >
 > [**Join the notification list**](https://mailchi.mp/36e4c32d7df0/get-the-full-guide-first) for future updates and new resources!
 

From 8e9723191e204bd1c877c2b653081c2d802cdb55 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 4 Oct 2025 07:32:00 +0200
Subject: [PATCH 113/114] docs: clarify ref to the companion guide

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

diff --git a/README.md b/README.md
index 9da4920..9f33753 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaSc
 
 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:
+Inside the companion guide, you'll find:
 
 - **Day 0: Before Starting Up**<br>
   Quick-start setup instructions and a boilerplate walkthrough.

From 04d53721e186a16c95015a8e9f997ccd10757f91 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sun, 19 Oct 2025 11:18:09 +0200
Subject: [PATCH 114/114] docs: add youtube playlist

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

diff --git a/README.md b/README.md
index 9f33753..d135feb 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,20 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
 >
 > [**Join the notification list**](https://mailchi.mp/36e4c32d7df0/get-the-full-guide-first) for future updates and new resources!
 
+## Video Walkthroughs & Slides
+
+Follow along with the official [**100 Projects in 100 Days YouTube playlist**](https://www.youtube.com/watch?v=GlKnIym2xnk&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c). This series includes setup guides and milestone recaps with downloadable slides.
+
+| Milestone   | Video Walkthrough                                                                                    | Slides                                                                                    |
+| :---------- | :--------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
+| **Day 0**   | [Setup](https://www.youtube.com/watch?v=GlKnIym2xnk&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c)         | —                                                                                         |
+| **Day 0**   | [Code](https://www.youtube.com/watch?v=HEqNsk7AQas&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=2)  | —                                                                                         |
+| **Day 10**  | [Recap](https://www.youtube.com/watch?v=-tgcx210Jac&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=3) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2010%20-%20Recap.pdf)  |
+| **Day 25**  | [Recap](https://www.youtube.com/watch?v=Ma-hxnb5bv0&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=4) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2025%20-%20Recap.pdf)  |
+| **Day 50**  | [Recap](https://www.youtube.com/watch?v=WMsurim2ARE&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=5) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2050%20-%20Recap.pdf)  |
+| **Day 75**  | [Recap](https://www.youtube.com/watch?v=tx2uN1l1UU4&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=6) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2075%20-%20Recap.pdf)  |
+| **Day 100** | [Recap](https://www.youtube.com/watch?v=RejEP-slnW8&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=7) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%20100%20-%20Recap.pdf) |
+
 ## Project Showcase
 
 [View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)