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

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); } }); diff --git a/077-sortable list/script.js b/077-sortable list/script.js index ff72df4..243913c 100644 --- a/077-sortable list/script.js +++ b/077-sortable list/script.js @@ -2,16 +2,16 @@ const draggableList = document.getElementById("draggable-list"); const check = document.getElementById("check"); const richestPeople = [ + "Elon Musk", + "Larry Ellison", + "Mark Zuckerberg", "Jeff Bezos", - "Bill Gates", + "Larry Page", + "Sergey Brin", "Bernard Arnault", + "Jensen Huang", "Warren Buffett", - "Larry Ellison", - "Amancio Ortega", - "Mark Zuckerberg", - "Jim Walton", - "Alice Walton", - "S. Robson Walton", + "Steve Ballmer", ]; const listItems = []; diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js index 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); + }); +} diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css index 7817c55..2b4b12c 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 { @@ -91,8 +91,10 @@ ul { } .section-stream { + margin-top: -1px; 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 { @@ -102,7 +104,7 @@ ul { .section-stream .play { width: 50%; display: block; - margin: 30px auto; + margin: 0 auto 30px; opacity: 0.5; } 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

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