From ceddb1c2c3fce7610dda682c333f4f8f764dfda1 Mon Sep 17 00:00:00 2001 From: Nodari-0 Date: Mon, 9 Jun 2025 22:21:14 +0200 Subject: [PATCH 1/2] created spotify web clone --- index.html | 83 +++++++++++++++++++++----- styles/style.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..e7c749bc8 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,69 @@ - - - - - Spotify Clone - - - - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the - right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music - Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer - It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the - latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your - own personal playlist. Or sit back and enjoy Radio. - - + + + + + + Spotify Clone + + + + + + +
+ + +
+ +
+

Music for everyone.

+

Spotify is now free on mobile, tablet and computer. Listen to the right music, wherever you are.

+
+ +
+

What’s on Spotify?

+
+
+ Millions of Songs +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ Stream Everywhere +

HD Music

+

Listen to music as if you were listening live

+
+
+ HD Music +

Stream Everywhere

+

Stream music on your smartphone, tablet or computer

+
+
+
+ +
+ +
+

It’s as yeezy as Kanye West.

+

Search
Know what you want to listen to? Just search and hit play.

+

Browse
Check out the latest charts, brand new releases and great playlists for right now. +

+

Discover
Enjoy new music every Monday with your own personal playlist. Or sit back and + enjoy Radio.

+
+
+ Kanye West Player +
+
+ + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32c6..2d122309c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,153 @@ Green: #00B172 White: #FFF */ + +:root { + --green: #00b172; + --text: #1a1a1a; + --white: #fff; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} + +body { + line-height: 1.6; + color: var(--text); + background-color: var(--white); +} + +header { + background: var(--white); + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 40px; + border-bottom: 1px solid #ddd; +} + +.logo img { + height: 40px; +} + +nav a { + margin-left: 30px; + text-decoration: none; + color: var(--text); + font-weight: 500; +} + +.hero { + background: url("../images/landing.jpg") center/cover no-repeat; + color: var(--white); + text-align: center; + padding: 100px 20px; + height: 500px; +} + +.hero h1 { + font-size: 48px; + margin-bottom: 20px; +} + +.hero p { + font-size: 20px; + font-weight: 300; +} + +.features { + background: var(--white); + text-align: center; + padding: 60px 20px; +} + +.features h2 { + font-size: 28px; + margin-bottom: 40px; + color: var(--text); +} + +.feature-grid { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 30px; +} + +.feature { + width: 250px; + padding: 20px; +} + +.feature img { + width: 50px; + height: 50px; +} + +.feature h3 { + color: var(--green); + margin: 10px 0; + font-weight: 700; +} + +.feature p { + color: #ccc; + font-weight: 300; +} + +.yeezy-section { + background: var(--green); + color: var(--white); + display: flex; + justify-content: space-between; + padding: 60px 40px; + flex-wrap: wrap; + position: relative; +} + +.yeezy-text { + flex: 1; + max-width: 500px; + position: relative; + z-index: 1; +} + +.yeezy-text h2 { + margin-bottom: 20px; + font-weight: 700; +} + +.yeezy-text p { + margin-bottom: 10px; + color: #dcdcdc; + font-weight: 300; +} + +.yeezy-text strong { + color: var(--white); + font-weight: 700; +} + +.kanye-img { + flex: 1; + max-width: 300px; + z-index: 1; +} + +.kanye-img img { + width: 100%; + border-radius: 10px; +} + +.center-logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + /* opacity: 0.1; */ + width: 80px; +} From ee6e45be489759ab698f54a77e93788bd8ce45ee Mon Sep 17 00:00:00 2001 From: Nodari-0 Date: Mon, 9 Jun 2025 22:22:28 +0200 Subject: [PATCH 2/2] added missing parts --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e7c749bc8..bb659cbbc 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

It’s as yeezy as Kanye West.

Search
Know what you want to listen to? Just search and hit play.

Browse
Check out the latest charts, brand new releases and great playlists for right now.

-

Discover
Enjoy new music every Monday with your own personal playlist. Or sit back and +

Discover
Enjoy new music evry Monday with your own personal playlist. Or sit back and enjoy Radio.