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 01/85] 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 02/85] 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 03/85] 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 04/85] 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**
+ 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 05/85] 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 06/85] 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 07/85] 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 08/85] 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**
+ 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**
- 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 09/85] 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 10/85] 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 11/85] 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 12/85] 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 13/85] 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 @@

Lyrics Search

Results will be displayed here

-
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, "
"); - - result.innerHTML = ` -

${artist} - ${songTitle}

- ${lyrics} - `; +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 = ` +

${song.artistName} - ${song.trackName}

+ ${lyrics.replace(/(\r\n|\r|\n)/g, "
")} + `; } function showData(data) { result.innerHTML = ` `; - // Pagination - if (data.prev || data.next) { - more.innerHTML = ` - ${ - data.prev - ? `` - : "" - } - ${ - data.next - ? `` - : "" - } - `; - } 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 14/85] 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 15/85] 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 = ` +

Sorry, your browser does not support Speech Recognition.

+

Please use Chrome or Edge for the best experience.

+ `; +} 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 = `
You said:
${message} `; -} - -function checkNumber(message) { - const number = +message; - if (Number.isNaN(number)) { - messageElement.innerHTML += "
That is not a valid number
"; - return; - } - if (number > 100 || number < 1) { - messageElement.innerHTML += "
Number must be between 1 and 100
"; - return; } - if (number === randomNumber) { - document.body.innerHTML = ` + + function checkNumber(message) { + const number = +message; + if (Number.isNaN(number)) { + messageElement.innerHTML += "
That is not a valid number
"; + return; + } + if (number > 100 || number < 1) { + messageElement.innerHTML += "
Number must be between 1 and 100
"; + return; + } + if (number === randomNumber) { + document.body.innerHTML = `

Congrats! You have guessed the number!

It was ${number}

`; - } else if (number > randomNumber) { - messageElement.innerHTML += "
GO LOWER
"; - } else { - messageElement.innerHTML += "
GO HIGHER
"; + } else if (number > randomNumber) { + messageElement.innerHTML += "
GO LOWER
"; + } else { + messageElement.innerHTML += "
GO HIGHER
"; + } } -} -// 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 16/85] 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 17/85] 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 18/85] 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 @@

ILOVEYOU

- + 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 19/85] 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":"AAAQ,2GAAA;AAER;EACE,wBAAA;EACA,gBAAA;EACA,6CAAA;ACAF;;ADGA;EACE,sBAAA;EACA,SAAA;EACA,UAAA;ACAF;;ADGA;EACE,gBAAA;ACAF;;ADGA;EACE,YAAA;EACA,qCAAA;ACAF;;ADGA;EACE,iBAAA;EACA,+BAAA;EACA,oBAAA;ACAF;;ADGA;EACE,eAAA;EACA,+BAAA;EACA,oBAAA;ACAF;;ADGA;EACE,iBAAA;ACAF;;ADGA;EACE,eAAA;ACAF;;ADGA;EACE,iBAAA;ACAF;;ADGA;EACE,eAAA;ACAF;;ADGA;EACE,YAAA;EACA,qBAAA;ACAF;;ACrDA;EACE,2BAAA;ADwDF;;ACrDA;EACE,wBAAA;EACA,gBAAA;EACA,MAAA;EACA,UAAA;ADwDF;;ACrDA;EACE,UAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;ADwDF;ACtDE;EACE,aAAA;EACA,8BAAA;EACA,gBAAA;EACA,OAAA;ADwDJ;ACrDE;EACE,OAAA;EACA,kBAAA;ADuDJ;ACtDI;EACE,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,kBAAA;EACA,gCAAA;EACA,sBAAA;ADwDN;ACrDE;EACE,gCAAA;EACA,kBAAA;EACA,uBAAA;ADuDJ;;ACnDA;EACE,aAAA;EACA,gBAAA;EACA,2DAAA;EACA,+BAAA;ADsDF;ACpDE;EACE,gBAAA;EACA,oBAAA;ADsDJ;ACnDE;EACE,aAAA;EACA,gBAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,kBAAA;EACA,oBAAA;ADqDJ;AClDE;EACE,aAAA;EACA,gBAAA;ADoDJ;AClDI;EACE,oBAAA;ADoDN;ACjDI;EACE,cAAA;ADmDN;;AElIA;EACE,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,gBAAA;AFqIF;AEnIE;EACE,kBAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;AFqIJ;;AEjIA;EACE,gBAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,6BAAA;AFoIF;AElIE;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;AFoIJ;AElII;EACE,iBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,uBAAA;EACA,gBAAA;AFoIN;AElIM;EACE,sBAAA;AFoIR;AEjIM;EACE,aAAA;EACA,cAAA;AFmIR;AEhIM;EACE,oBAAA;KAAA,iBAAA;AFkIR;;AGjLA;EACE,2BAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;AHoLF;AGlLE;;;EAGE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AHoLJ;AGjLE;EACE,WAAA;AHmLJ;AGhLE;EACE,QAAA;AHkLJ;;AItMA;EACE,gBAAA;EACA,wBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;AJyMF;AIvME;EACE,aAAA;EACA,OAAA;EACA,gBAAA;EACA,8BAAA;AJyMJ;AItME;EACE,OAAA;AJwMJ;;AKzNA;EACE;IACE,cAAA;EL4NF;EKxNE;IACE,OAAA;EL0NJ;EKxNE;IACE,iBAAA;EL0NJ;EKtNA;IACE,kCAAA;ELwNF;EKtNE;IACE,WAAA;IACA,sBAAA;OAAA,mBAAA;ELwNJ;EKrNE;;;IAGE,gBAAA;IACA,kBAAA;ELuNJ;EKnNA;IACE,mBAAA;ELqNF;EKnNE;IACE,gBAAA;ELqNJ;EKlNE;IACE,sBAAA;IACA,UAAA;ELoNJ;EKlNI;IACE,iBAAA;ELoNN;EK/MA;IACE,gBAAA;ELiNF;EK/ME;IACE,UAAA;ELiNJ;EK9ME;IACE,eAAA;ELgNJ;EK3ME;IACE,OAAA;EL6MJ;AACF;AKzMA;EAEI;IACE,WAAA;EL0MJ;AACF","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 20/85] 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 21/85] 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 22/85] 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 @@

03

- - + 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 23/85] 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 24/85] 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 25/85] 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 26/85] 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 27/85] 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 28/85] 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 29/85] 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 30/85] 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 @@

03

- - + 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 31/85] 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 32/85] 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 33/85] 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 34/85] 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 35/85] 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 36/85] 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 @@
-
1
-
2
-
3
-
4
+
1
+
2
+
3
+
4
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 37/85] 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 38/85] 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) => `${letter}` ) .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 39/85] 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 40/85] 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 41/85] 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 42/85] 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 43/85] 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 44/85] 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 @@ -
-
-
-
-
-
-
-
+
+
+ + + + +
+
-
+ 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 45/85] 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 46/85] 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 @@ Increment Counter -
+
Instagram Followers -
-
+ +
YouTube Subscribers -
-
+ +
Facebook Fans -
+ 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 47/85] 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 48/85] 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 @@ Split Landing Page -
-
+
+

PlayStation 5

Buy Now -
-
+ +

Xbox Series X

Buy Now -
-
+ + 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 49/85] 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 50/85] 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 51/85] 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 @@ Password Strength Background -
+

Image Password Strength

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 52/85] 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 53/85] 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 54/85] 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 @@

Verify Your Account

required />
- + This is design only. We didn't actually send you an email as we don't have your email, right? 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 55/85] 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 = ` {

${user.location.city}, ${user.location.country}

`; + 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 56/85] 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 57/85] 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 @@ Random Image Feed -

Random Image Feed

+

Random Image Feed

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 58/85] 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 59/85] 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 60/85] 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 61/85] 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 @@

Explore the world

@@ -25,7 +25,7 @@

Explore the world

Explore the world

@@ -33,7 +33,7 @@

Explore the world

Explore the world

@@ -41,7 +41,7 @@

Explore the world

Explore the world

@@ -49,7 +49,7 @@

Explore the world

Explore the world

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 62/85] 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 @@

Amazing Article

My Subtitle

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 @@