From 43f56c3a4cba1d7ec4d95c3b4305f63ffc9af0f8 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Tue, 19 Aug 2025 16:24:31 +0100 Subject: [PATCH 01/22] link styles.css --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 0697f92..fa0cb65 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Spotify Clone + Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the From 14e3a50ca0e04752e6b603cc3262498cf85159be Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Tue, 19 Aug 2025 16:38:00 +0100 Subject: [PATCH 02/22] add spotify log and 4 links --- index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/index.html b/index.html index fa0cb65..76bc006 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,26 @@ + +
+ +
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 From 204825acc8b0c5fc7a4b8010bbacf0a4bf997208 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Tue, 19 Aug 2025 17:00:19 +0100 Subject: [PATCH 03/22] justify-content spotify logo and the 4 links --- index.html | 18 +++++++++++------- styles/style.css | 22 ++++++++++++++++++++++ 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 76bc006..ec42adf 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ -
- +
- 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 + + + + + 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 diff --git a/styles/style.css b/styles/style.css index 55efb32..e7ecc99 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,25 @@ Green: #00B172 White: #FFF */ + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #FFF; + padding: 10px 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.nav-links { + display: flex; + justify-content: flex-end; + gap: 15px; +} + +.logo { + display: flex; + justify-content: flex-start; + width: 150px; + height: 50px; +} From 970197dfcb4fc20ff0dd95d8f862866427871f7e Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Tue, 19 Aug 2025 17:11:54 +0100 Subject: [PATCH 04/22] add background image on header section --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index ec42adf..5e3c615 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,10 @@
+
+ Spotify Background +
+

Music for everyone.

Spotify is now free on mobile, tablet and computer.

Listen to the right music, wherever you are.

From a9c14bf4daaa9347bd97c44791d84598f6952a30 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Tue, 19 Aug 2025 17:49:26 +0100 Subject: [PATCH 05/22] add background pictue for header --- index.html | 5 +++-- styles/style.css | 8 ++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5e3c615..5f041f5 100644 --- a/index.html +++ b/index.html @@ -24,13 +24,14 @@
-
+
Spotify Background
-
+

Music for everyone.

Spotify is now free on mobile, tablet and computer.

Listen to the right music, wherever you are.

+
diff --git a/styles/style.css b/styles/style.css index e7ecc99..b97607e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -28,3 +28,11 @@ White: #FFF width: 150px; height: 50px; } + +.header1-img { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} From aaa6f9e4a05577eba6ff67a1bdf711cbc474b0fe Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Wed, 20 Aug 2025 16:07:28 +0100 Subject: [PATCH 06/22] add the on spotify section of webpage --- index.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/index.html b/index.html index 5f041f5..093e9af 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,38 @@

Music for everyone.

+
+
+

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 +

+
+ +
+
+ What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music From e8d99ca94849fee6985c549caa684438fe47fe7a Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Wed, 20 Aug 2025 16:41:43 +0100 Subject: [PATCH 07/22] add last paragraph on webpage --- index.html | 62 +++++++++++++++++++++++------------------------- styles/style.css | 11 ++++----- 2 files changed, 35 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 093e9af..70250e1 100644 --- a/index.html +++ b/index.html @@ -23,11 +23,11 @@ -
-
+
+
Spotify Background
-
+

Music for everyone.

Spotify is now free on mobile, tablet and computer.

Listen to the right music, wherever you are.

@@ -36,42 +36,40 @@

Music for everyone.

-
+

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 -

-
- +
+
+
+
+

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 +

+
- 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. diff --git a/styles/style.css b/styles/style.css index b97607e..0260500 100644 --- a/styles/style.css +++ b/styles/style.css @@ -29,10 +29,9 @@ White: #FFF height: 50px; } -.header1-img { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; +.body1-img { + display: flex; + justify-content: center; + align-items: center; + } From bd89dc103cb0a325df07bc6aadb60f7ea5e902d9 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Thu, 21 Aug 2025 16:17:27 +0100 Subject: [PATCH 08/22] add last paragraph and images --- index.html | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 70250e1..fde7b82 100644 --- a/index.html +++ b/index.html @@ -68,10 +68,21 @@

Stream Everywhere

- +
+
+

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-icon-white picture +
+
+ spotify-app picture - 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. From 5c1d6c4190a032e4f5ef9e516e586baf04d6e209 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Thu, 21 Aug 2025 17:19:42 +0100 Subject: [PATCH 09/22] change size of body1-img --- index.html | 2 ++ styles/style.css | 40 ++++------------------------------------ 2 files changed, 6 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index fde7b82..03f5610 100644 --- a/index.html +++ b/index.html @@ -81,8 +81,10 @@

Discover

spotify-icon-white picture
+
spotify-app picture +
diff --git a/styles/style.css b/styles/style.css index 0260500..95e2bdc 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,37 +1,5 @@ -/* -Colors: - -Text: 1A1A1A -Green: #00B172 -White: #FFF - -*/ - -.navbar { - display: flex; - justify-content: space-between; - align-items: center; - background-color: #FFF; - padding: 10px 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.nav-links { - display: flex; - justify-content: flex-end; - gap: 15px; -} - -.logo { - display: flex; - justify-content: flex-start; - width: 150px; - height: 50px; -} - -.body1-img { - display: flex; - justify-content: center; - align-items: center; - +.body1-img img { + max-width: 500px; + width: 100%; + border-radius: 10px; } From 55fa9b5f8f44afc45ffc478799a8bc7142250694 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Fri, 22 Aug 2025 16:31:36 +0100 Subject: [PATCH 10/22] correct size of background image --- index.html | 7 +++---- styles/style.css | 44 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 03f5610..c294e3e 100644 --- a/index.html +++ b/index.html @@ -24,10 +24,9 @@
-
- Spotify Background -
-
+