From 7dad3b6782418b4977ccdc58e596411c598b3f57 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Sat, 11 Jan 2025 15:17:00 -0300 Subject: [PATCH 1/6] Order the html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 0697f92..c2d2aab 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,6 @@ 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. + own personal playlist. Or sit back and enjoy Radio. From 9552cf2aa38ec639d32397be17e44dd423f5497d Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Sat, 11 Jan 2025 15:17:51 -0300 Subject: [PATCH 2/6] Order index.html --- index.html | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index c2d2aab..5f416f2 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,27 @@ - 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. + 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. From 52bee98ac713d60c0d4bea71f137b1339065a7a0 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Sun, 12 Jan 2025 21:22:18 -0300 Subject: [PATCH 3/6] =?UTF-8?q?Lista=20la=20barra=20de=20navegaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 27 +++++++++++++++++++----- styles/style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 5f416f2..35b8cc9 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,31 @@ 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.

+
+
+ + + - Music for everyone. - Spotify is now free on mobile, tablet and computer. - Listen to the right music, wherever you are. What’s on Spotify? diff --git a/styles/style.css b/styles/style.css index 55efb32..1b36fe1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,57 @@ Green: #00B172 White: #FFF */ + +/* NavBar */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + color: #1A1A1A; +} + +nav { + position: fixed; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; + background-color: #FFF; + width: 100vw; +} + +#logo { + width: 170px; +} + +#logo:hover { + cursor: pointer; +} + +nav a { + text-decoration: none; + list-style: none; + padding: 5px 10px; + margin: 5px; +} + +nav a:hover { + color: #00B172; +} + +/* Main section */ + +.section1 { + background-image: url('../images/landing.jpg'); + background-size: cover; + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: #FFF; +} \ No newline at end of file From 7f18203e8e4e5a2c1d2a96fc0529e02a0f792102 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Sun, 12 Jan 2025 21:55:45 -0300 Subject: [PATCH 4/6] Section 1 finished --- index.html | 6 +++--- styles/style.css | 13 +++++++++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 35b8cc9..bd581b0 100644 --- a/index.html +++ b/index.html @@ -21,9 +21,9 @@
-

Music for everyone.

-

Spotify is now free on mobile, tablet and computer.

-

Listen to the right music, wherever you are.

+

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 1b36fe1..a58553f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -58,5 +58,18 @@ nav a:hover { justify-content: center; align-items: center; text-align: center; +} + +.section1-title { + color: #FFF; + font-size: 75px; + font-weight: 100; + margin-bottom: 25px; +} + +.section1-text { color: #FFF; + font-size: 23px; + font-weight: 100; + margin-bottom: 5px; } \ No newline at end of file From cbf797613f9c42653a0c2ffe8679ddd82257fef8 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Sun, 12 Jan 2025 22:00:55 -0300 Subject: [PATCH 5/6] fixed background image size --- styles/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index a58553f..ba21f92 100644 --- a/styles/style.css +++ b/styles/style.css @@ -50,7 +50,7 @@ nav a:hover { .section1 { background-image: url('../images/landing.jpg'); - background-size: cover; + background-size: contain; height: 100vh; width: 100vw; display: flex; From 9a3edaf60c78770f44d2fdb8c15d81e06c7cb32c Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Mon, 13 Jan 2025 17:04:10 -0300 Subject: [PATCH 6/6] Done! --- index.html | 59 +++++++++++++++++++----------- styles/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 130 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index bd581b0..63e7c1d 100644 --- a/index.html +++ b/index.html @@ -26,26 +26,43 @@

Music for everyone.

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. +
+

What’s on Spotify?

+
+
+ music icon +
Millions of Songs
+

There are millions of songs on Spotify

+
+
+ high quality icon +
HD Music
+

Listen to music as if you were listening live

+
+
+ Devices +
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 app +
diff --git a/styles/style.css b/styles/style.css index ba21f92..daecbce 100644 --- a/styles/style.css +++ b/styles/style.css @@ -13,10 +13,15 @@ White: #FFF margin: 0; padding: 0; box-sizing: border-box; - font-family: Arial, Helvetica, sans-serif; + font-family: Arial, sans-serif; color: #1A1A1A; } +body { + margin: 0; + overflow-x: hidden; +} + nav { position: fixed; display: flex; @@ -62,14 +67,98 @@ nav a:hover { .section1-title { color: #FFF; - font-size: 75px; + font-size: 65px; font-weight: 100; margin-bottom: 25px; } .section1-text { color: #FFF; - font-size: 23px; + font-size: 20px; font-weight: 100; margin-bottom: 5px; +} + +/* Section 2 */ + +.section2-title { + text-align: center; + margin: 30px; + font-size: 30px; +} + +.spotify-info-container { + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + margin: 0 80px; +} + +.spotify-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin-bottom: 50px; + max-width: 250px; +} + +.spotify-info h6 { + color: #00B172; + font-size: 25px; + margin-bottom: 10px; +} + +.spotify-info p { + text-align: center; + font-size: 20px; +} + +.icon { + width: 120px; +} + +/* Section 3 */ + +#section3 { + background-color: #00B172; + display: flex; + justify-content: space-between; + align-items: center; + margin: 40px; + padding: 80px; + background-image: url('../images/spotify-icon-white.png'); + background-repeat: no-repeat; + background-size: 130px; + background-position: center; +} + +#section3 img { + width: 23vw; +} + +.section3-title { + color: #FFF; + font-size: 40px; + border-bottom: #FFF 4px solid; + max-width: fit-content; + padding: 8px; +} + +.section3-info { + max-width: 25vw; +} + +.section3-info h6 { + color: #FFF; + font-size: 30px; + font-weight: bold; + margin: 40px 0; +} + +.section3-info p { + color: #FFF; + font-size: 18px; + } \ No newline at end of file