diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/README.md b/Front-end-Projects/Intermediate/Spotify-Clone/README.md new file mode 100644 index 00000000..94158c35 --- /dev/null +++ b/Front-end-Projects/Intermediate/Spotify-Clone/README.md @@ -0,0 +1,69 @@ +

๐Ÿ’ฅ Spotify Clone๐Ÿ’ฅ

+ + + +

Tech Stack Used ๐ŸŽฎ

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description ๐Ÿ“ƒ + +
+

This Project is a simple HTML and CSS implementation of the Spotify UI Clone. This project aims to showcase the UI design of spotify. This project is powered by HTML and CSS

+
+ + + +## :zap: How to run it? ๐Ÿ•น๏ธ + +
+

To run this project locally, follow these steps: + +1. Fork the repository. + +2. Clone the repository to your local machine: + git clone https://github.com/your-username/Product-Landing-Page.git + +3. Open the project folder in your preferred code editor, now you can view website in live. + +

+
+ + + +## :zap: Screenshots ๐Ÿ“ธ + + + + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Chaanakyaa Milkuri

+

+ + + + + + +

+ +

Happy Coding ๐Ÿง‘โ€๐Ÿ’ป

+ +

Show some  โค๏ธ  by  ๐ŸŒŸ  this repository!

diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/alpha.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/alpha.png new file mode 100644 index 00000000..8e13564b Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/alpha.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/cover-image.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/cover-image.png new file mode 100644 index 00000000..143a450f Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/cover-image.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/disc.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/disc.png new file mode 100644 index 00000000..576aa1be Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/disc.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/for-you.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/for-you.png new file mode 100644 index 00000000..d54d9908 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/for-you.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/gutar-gu.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/gutar-gu.png new file mode 100644 index 00000000..5f3abff5 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/gutar-gu.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/indigo.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/indigo.png new file mode 100644 index 00000000..88b33940 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/indigo.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/interstellar.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/interstellar.png new file mode 100644 index 00000000..1194289d Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/interstellar.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/like.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/like.png new file mode 100644 index 00000000..2917d378 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/like.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/memories.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/memories.png new file mode 100644 index 00000000..eb7f24c9 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/memories.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/naina.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/naina.png new file mode 100644 index 00000000..a6275fab Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/naina.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/on-repeat.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/on-repeat.png new file mode 100644 index 00000000..27d86446 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/on-repeat.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/pain.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/pain.png new file mode 100644 index 00000000..8b64f1ca Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/pain.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/play-hover-icon.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/play-hover-icon.png new file mode 100644 index 00000000..6a6a11b4 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/play-hover-icon.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/poker-face.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/poker-face.png new file mode 100644 index 00000000..0857288d Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/poker-face.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/project-baby.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/project-baby.png new file mode 100644 index 00000000..627e4896 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/project-baby.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/she-said-disco.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/she-said-disco.png new file mode 100644 index 00000000..dc1b06ee Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/she-said-disco.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/song-name.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/song-name.png new file mode 100644 index 00000000..cc7b72e0 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/song-name.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/star-boy.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/star-boy.png new file mode 100644 index 00000000..2e7271f5 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/star-boy.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/the-escape.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/the-escape.png new file mode 100644 index 00000000..2b0a1967 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/the-escape.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/true-love.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/true-love.png new file mode 100644 index 00000000..2d76c0a1 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/true-love.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/assets/xxx.png b/Front-end-Projects/Intermediate/Spotify-Clone/assets/xxx.png new file mode 100644 index 00000000..c2799112 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/assets/xxx.png differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/index.html b/Front-end-Projects/Intermediate/Spotify-Clone/index.html new file mode 100644 index 00000000..cf68a6ef --- /dev/null +++ b/Front-end-Projects/Intermediate/Spotify-Clone/index.html @@ -0,0 +1,532 @@ + + + + + + + Spotify - Web Player: Music for everyone + + + + + + +
+
+ +
+
Kaise ab kahein
+

From webseries "Gutar gu"

+
+
+
+
+ + + + + +
+
+
1:11
+ +
3:39
+
+
+
+ + + + + + + +
+
+
+ + +
+
+ + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ Explore Premium + Install + + +
+
+
+ All + Music + Podcast +
+
+
+
+
+ Song-image +
Kaise ab kahein
+
+
+
+ Liked +
Liked
+
+
+
+ Onrepeat +
On Repeat
+
+
+
+ Interstellar +
Interstellar backtrack
+
+
+
+
+
+ Poker face +
Poker Face
+
+
+
+ Bollywood Mush +
Bollywood Mush
+
+
+
+ +
Naina Milanika
+
+
+
+ +
Right Round
+
+
+
+
+
+
+
Based on your recent listening
+ +
+
+
+ poster +
Happy Vibes
+
Bright, sunny, catchy tunes put a sime on your face.
+
+
+
+ +
Hangover Cure
+
Trust us, you need this!
+
+
+
+ poster +
POV: you're in love
+
ufff, you've fallen!
+
+
+
+ poster +
Bollywood & Chill
+
Bollywood is best for love and lofi songs...
+
+
+
+ poster +
English Mashup
+
Your escape to the world of chill.
+
+
+
+ poster +
I-Pop Chill
+
Let these songs be the background track of your love life.
+
+
+
+ poster +
Slowed & Reverb
+
Enjoy slowly and fully.
+
+
+
+
+
+
+
Recently played
+ +
+
+
+ poster +
Kaise Ab Kahein
+
Gaurav Chatterji, Aasa Singh, Hansika Pareek
+
+
+
+ poster +
Joel Sunny
+
Artist
+
+
+
+ poster +
On repeat
+
Songs you love right now
+
+
+
+ poster +
Bollywood & Chill
+
Bollywood is best for love and lofi songs...
+
+
+
+ poster +
Bear Metal
+
Your escape to the world of chill.
+
+
+
+ poster +
I-Pop Chill
+
Let these songs be the background track of your love life.
+
+
+
+ poster +
Slowed & Reverb
+
Enjoy slowly and fully.
+
+
+
+
+
+
+
Based on your recent listening
+
+ +
+
+
+ poster +
Happy Vibes
+
Bright, sunny, catchy tunes put a sime on your face.
+
+
+
+ poster +
Hangover Cure
+
Trust us, you need this!
+
+
+
+ poster +
POV: you're in love
+
ufff, you've fallen!
+
+
+
+ poster +
Bollywood & Chill
+
Bollywood is best for love and lofi songs...
+
+
+
+ poster +
English Mashup
+
Your escape to the world of chill.
+
+
+
+ poster +
I-Pop Chill
+
Let these songs be the background track of your love life.
+
+
+
+ poster +
Slowed & Reverb
+
Enjoy slowly and fully.
+
+
+
+
+
+
+
Based on your recent listening
+
+ +
+
+
+ poster +
Happy Vibes
+
Bright, sunny, catchy tunes put a sime on your face.
+
+
+
+ poster +
Hangover Cure
+
Trust us, you need this!
+
+
+
+ poster +
POV: you're in love
+
ufff, you've fallen!
+
+
+
+ poster +
Bollywood & Chill
+
Bollywood is best for love and lofi songs...
+
+
+
+ poster +
English Mashup
+
Your escape to the world of chill.
+
+
+
+ poster +
I-Pop Chill
+
Let these songs be the background track of your love life.
+
+
+
+ poster +
Slowed & Reverb
+
Enjoy slowly and fully.
+
+
+
+
+
+
+ Company + About + Jobs + For the Record +
+
+ Commnunities + For Artists + Developers + Advertising + Investors + Vendors +
+
+ Useful links + Support + Free Mobile App +
+
+
+ + + +
+
+
+
+ Legal + Safety & Privacy Center + Privacy Policy + Cookies + About Ads + Accessibility +
+
2024 Spotify AB
+
+
+ + + \ No newline at end of file diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/screenshot.webp b/Front-end-Projects/Intermediate/Spotify-Clone/screenshot.webp new file mode 100644 index 00000000..901101da Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/screenshot.webp differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/screenshot2.webp b/Front-end-Projects/Intermediate/Spotify-Clone/screenshot2.webp new file mode 100644 index 00000000..c59452e9 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/screenshot2.webp differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/screenshot3.webp b/Front-end-Projects/Intermediate/Spotify-Clone/screenshot3.webp new file mode 100644 index 00000000..d1548961 Binary files /dev/null and b/Front-end-Projects/Intermediate/Spotify-Clone/screenshot3.webp differ diff --git a/Front-end-Projects/Intermediate/Spotify-Clone/style.css b/Front-end-Projects/Intermediate/Spotify-Clone/style.css new file mode 100644 index 00000000..b483bfa7 --- /dev/null +++ b/Front-end-Projects/Intermediate/Spotify-Clone/style.css @@ -0,0 +1,728 @@ +* { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +body { + background-color: black; + margin: 0%; + margin-top: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + overflow-x: hidden; + color: white; + font-weight: 630; +} + +body::-webkit-scrollbar { + color: transparent; +} + +.basedbottom::-webkit-scrollbar { + background-color: transparent; +} + +.foot { + position: fixed; + width: 99%; + height: 200px; + top: 87%; + background-color: black; + z-index: 100; + display: flex; + flex-direction: row; + padding-left: 3%; + justify-content: space-between; + align-items: center; + column-gap: 180px; +} + +.imgone, +.imgtwo, +.imgthree { + margin-bottom: 50px; +} + +a { + position: relative; + text-decoration: none; + background: #121212; + font-size: 20px; + + border-radius: 10px; + height: 70px; + width: 70px; + display: flex; + justify-content: center; + align-items: center; + +} + +.home { + position: fixed; + margin-left: 1px; + border-radius: 10px; + margin-left: 15px; + height: 175px; + width: 100px; + background-color: #121212; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + +} + +.collections { + position: fixed; + top: 17%; + margin-top: 10px; + background-color: #121212; + height: 68%; + margin-left: 15px; + width: 100px; + border-radius: 10px; + overflow: hidden; + cursor: pointer; + +} + +.collections::-webkit-scrollbar { + background-color: transparent; + width: 20px; +} + +.collections::-webkit-scrollbar-thumb { + background-color: grey; +} + +.collections:hover { + overflow-y: auto; +} + +.collections>a { + font-size: 15px; + width: 70px; + height: 70px; + margin-left: 10px; + margin-top: 20px; + margin-bottom: 20px; + margin-right: 0px; + border-radius: 10px; +} + +.collections>a:nth-child(1) { + margin-top: 10px; + height: 80px; + width: 80px; + margin: 0px; + border-radius: 0px; + border-radius: 10px 0px 0px 0px; +} + +.collections>a:nth-child(2) { + margin-top: 90px; + +} + +.main { + position: absolute; + background-color: #121212; + width: 93.6%; + left: 135px; + height: 300vh; + margin-top: 10px; + padding-top: 210px; + border-radius: 40px; +} + +.header { + position: fixed; + background-color: #121212; + top: 10px; + height: 200px; + margin-top: 10px; + width: 93.5%; + border-radius: 10px 10px 0px 0px; + z-index: 99; +} + +.header::before { + + content: ""; + display: block; + background: black; + height: 20px; + position: relative; + width: 100%; + top: -20px; +} + +.first { + position: fixed; + z-index: 10; +} + +.collections:nth-child(2) { + padding-top: 90px; +} + +.collections>.rounded { + border-radius: 50%; +} + +.songsfirst { + background-color: #121212; + height: 270px; + width: 100%; + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + row-gap: 0; +} + +.sffirst, +.sfsecond { + background-color: #121212; + height: 100px; + width: 96%; + display: flex; + flex-direction: row; + column-gap: 25px; + justify-content: flex-start; + align-items: center; + +} + +.ch1, +.ch2, +.ch3, +.ch4 { + background-color: #282828; + height: 95%; + width: 100%; + border-radius: 7px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-size: large; + color: white; + column-gap: 20px; + cursor: pointer; + +} + +.ch1:hover, +.ch2:hover, +.ch3:hover, +.ch4:hover { + background-color: #323232; +} + +.songname { + font-size: 25px; + font-weight: 600; + margin-left: -10px; + +} + +.ch1>img, +.ch2>img, +.ch3>img, +.ch4>img { + height: 100%; + border-radius: 7px 0px 0px 7px; +} + +.basedtop { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: 25px; + margin-left: 2%; +} + +.basedonrecent { + margin-top: 15px; + margin-right: 20px; +} + +.basednext { + height: 40px; + width: 150px; + border-radius: 50px; + font-size: 22px; + background-color: #121212; + color: white; + border: none; + font-weight: 650; +} + +.basednext:hover { + text-decoration: underline; +} + +.basedbottom { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + background-color: #121212; + width: 99%; + margin-left: 1%; + column-gap: 20px; + margin-top: 10px; + margin-right: 10px; + overflow: auto; +} + +.songposter { + margin: 0px; + height: 400px; + width: 300px; + background-color: #121212; + border-radius: 10px 10px 10px 10px; + display: flex; + flex-direction: column; + align-items: center; + font-size: 20px; + row-gap: 10px; + transition-duration: 0.5s; + cursor: pointer; +} + +.songposter:hover { + background-color: #282828; +} + +.songposter>img { + height: 250px; + width: 250px; + background: #000; + border-radius: 10px; + margin-top: 20px; +} + +.songposter:nth-child(1) { + margin-left: 0px; +} + +.songposter:nth-child(7) { + margin-right: 0px; +} + +.songposter>.postername { + align-self: flex-start; + margin-left: 20px; +} + +.songposter>.posterdesc { + font-size: 15px; + align-self: flex-start; + margin-left: 20px; +} + +.icons { + width: 40px; + filter: invert(100%); +} + +.homeicon { + width: 50px; + filter: invert(100%); +} + +.liked { + width: 60px; + border-radius: 10px; +} + +.library { + width: 70px; + filter: invert(7%) +} + +.lisa, +.billi, +.selena, +.harry, +.dua { + width: 60px; + border-radius: 50%; +} + +.ab, +.inter, +.poker, +.right, +.naina { + width: 60px; + border-radius: 5%; +} + +.play { + height: 35px; + width: 35px; + position: relative; + scale: 1.4; + background-color: #0ad852; + border-radius: 50%; + top: -140px; + left: 80px; + box-shadow: inset 3px 5px 10px 1px rgba(0, 0, 0, 0.267), 7px 10px 10px rgba(0, 0, 0, 0.262); + visibility: hidden; + transition-duration: 0.1s; +} + +.playicon { + width: 30px; + position: relative; + top: 2.8px; + left: 2px; +} + +.songposter:hover .play { + top: -150px; + visibility: visible; + box-shadow: inset 3px 5px 10px 1px rgba(0, 0, 0, 0.267), 7px 10px 10px rgba(0, 0, 0, 0.262); +} + +.headori { + column-gap: 10px; + margin-right: 20px; + margin-left: 10px; +} + +.headerlineo, +.headori { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.installimg { + filter: invert(100%); + height: 50px; + rotate: 270deg; +} + +.butt { + height: 50px; + width: 150px; + text-align: center; + position: relative; + border-radius: 60px; + padding: 5px; + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: #282828; + color: white; + padding-right: 15px; + font-size: 22px; + margin-top: 10px; + transition-duration: 1s; +} + +.noti, +.account { + height: 50px; + width: 50px; + border-radius: 50%; + background: #323232; + border: none; + transition-duration: 1s; +} + +.footer { + display: flex; + flex-direction: row; + justify-content: flex-start; + margin-top: 50px; + column-gap: 350px; + flex-wrap: wrap; + margin-left: 30px; + row-gap: 10px +} + +.footone>a, +.foottwo>a, +.footthree>a { + color: rgba(116, 116, 116, 0.911); + display: flex; + flex-direction: column; + align-items: flex-start; + font-size: 25px; + width: 200px; +} + +.footone>.footerhead, +.foottwo>.footerhead, +.footthree>.footerhead { + font-size: 27px; + color: white; +} + +.footone>a:hover, +.foottwo>a:hover, +.footthree>a:hover { + text-decoration: underline; +} + +.explorepremium { + width: 300px; + height: 60px; + color: black; + background: white; + font-size: 23px; + border-radius: 70px; + margin-top: 10px; + transition-duration: 1s; +} + +.headerseco>a { + color: white; + background: #000; + border-radius: 50px; + height: 60px; + background: #323232; + font-size: 23px; +} + +.headerseco { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 15px; + margin-left: 40px; + margin-top: 30px; +} + +.all { + width: 70px; +} + +.music { + width: 120px; +} + +.podcast { + width: 180px; +} + +.socialicons { + display: flex; + flex-direction: row; + column-gap: 20px; + margin-left: 30px; + margin-top: 50px; +} + +.socialmedia { + height: 70px; + width: 70px; + border-radius: 50%; + background-color: #ffffff; + color: white; + filter: invert(100%); +} + +.socialmedia>img { + width: 35px; +} + +.socialmedia>.x { + width: 25px; +} + +.final { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.finallinks { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 20px; + margin-left: 30px; + margin-top: 20px; +} + +.finallinks>a { + color: white; + font-size: 23px; + width: auto; +} + +.finallinks>a:hover { + color: #b0b0b0; +} + +.finalfinal { + color: white; + width: 250px; + font-size: 22px; +} + +.headole { + display: flex; + column-gap: 20px; + margin-left: 30px; +} + +.headole>div>img { + width: 30px; + position: relative; + top: 15px; + left: 15px; + +} + +.toptop { + filter: invert(100%); +} + +.headole>div { + height: 60px; + width: 60px; + border-radius: 50%; + background: #323232 +} + +.topinverted { + rotate: 180deg; + left: 10px; + filter: invert(100%); + position: relative; +} + +.ch1:hover>.play-song, +.ch2:hover>.play-song, +.ch3:hover>.play-song, +.ch4:hover>.play-song { + height: 50px; + width: 50px; + border-radius: 50%; + background-color: #0ad852; + margin-right: 30px; +} + +.play-song { + margin-right: 30px; +} + +.ch1:hover>.play-song>img, +.ch2:hover>.play-song>img, +.ch3:hover>.play-song>img, +.ch4:hover>.play-song>img { + visibility: visible; +} + +.play-song>img { + height: 45px; + width: 45px; + position: relative; + left: 3px; + top: 2px; + visibility: hidden; + +} + +.explorepremium:hover, +.noti:hover, +.account:hover, +.butt:hover { + scale: 1.1; +} + +.footimage { + height: 100px; + border-radius: 5px; +} + +.besidefootimage { + width: 200px; +} + +.footright { + display: flex; + align-items: flex-start; + justify-content: space-around; + padding-bottom: 20px; + column-gap: 10px; + width: 300px; + font-size: 18px; + scale: 0.8; + margin-left: -3%; +} + +.footcenter { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-bottom: 20px; + scale: 0.8; +} + +.footcentertop { + width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.footcentertop>a { + background-color: transparent; +} + +.footcentertop>a>img { + width: 40px; + filter: invert(100%); +} + +.footplay { + scale: 1.2; +} + +.footplay>img { + scale: 1.3; +} + +.playleft { + rotate: 180deg; + +} + +.playleft>img, +.playright>img { + scale: 0.8; +} + +.footleft { + display: flex; + flex-direction: row; + padding-bottom: 20px; + padding-right: 30px; + margin-right: 20px; +} + +.footleft>a { + background-color: transparent; + width: 50px; +} + +.footleft>a>img { + filter: invert(100%); + scale: 0.4; +} \ No newline at end of file diff --git a/Front-end-Projects/README.md b/Front-end-Projects/README.md index fdd49c80..5a3833d6 100644 --- a/Front-end-Projects/README.md +++ b/Front-end-Projects/README.md @@ -32,7 +32,9 @@ | 5 | [Netflix Clone](./Intermediate/Netflix-Clone) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 6 | [Starbucks Landing Page Clone](./Basic/Starbucks-Landing-page) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 7 | [Product Landing Page](./Intermediate/Product-Landing-Page )| ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 8 | [Apple Clone](./Intermediate/Apple-Clone )| ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 8 | [Spotify Clone](./Intermediate/Spotify-Clone)| ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 9 | [Apple Clone](./Intermediate/Apple-Clone )| ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +