From 90ebefa67a03979f8e0943d2c423ae1ea22eb84e Mon Sep 17 00:00:00 2001 From: Ana Molina Date: Sat, 21 Sep 2024 15:07:56 +0200 Subject: [PATCH 1/4] html ready --- index.html | 61 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 54 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..317762529 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,61 @@ 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. + +
+
+

Music for everyone.

+

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

+
+
+

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

+
+
+ music-icon +

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-icon-white + spotify-app +
From ddbbb628b97e27dd8f225096eeabd73f5e7916e4 Mon Sep 17 00:00:00 2001 From: Ana Molina Date: Fri, 27 Sep 2024 23:42:03 +0200 Subject: [PATCH 2/4] header ready --- index.html | 5 ++-- styles/style.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 317762529..88d4e1afd 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,11 @@ Spotify Clone + -
+

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 55efb32c6..d264c212c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,74 @@ Green: #00B172 White: #FFF */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; /* Asegura que el padding y border no agranden los elementos */ + } + +body { + background-color:#fff; + font-family: 'Montserrat', sans-serif; + font-size: 14px; +} + +h1 { + font-size: 82px; + color: #fff; + text-align: center; + margin-bottom: 20px; +} + +h2 { + font-size: 24px; + font-weight: 300; + color: #fff; + text-align: center; +} + +nav { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + padding: 20px; + background-color: #FFF; +} + + nav img { + max-width: 150px; + height: auto; +} + + nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 25px; +} + + nav ul li { + color: #1A1A1A; + cursor: pointer; + font-size: 16px; +} + +@media (max-width: 768px) { + nav { + flex-direction: column; + align-items: flex-start; + } +} + +.header { + background-image: url('../images/landing.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + height: 90vh; + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file From 0f514c6d468ecd80711e2cb0444b258845a1c810 Mon Sep 17 00:00:00 2001 From: Ana Molina Date: Sat, 28 Sep 2024 00:09:17 +0200 Subject: [PATCH 3/4] section 2 with divs ready --- index.html | 20 ++++++++--------- styles/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 60 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 88d4e1afd..bf5fb07e9 100644 --- a/index.html +++ b/index.html @@ -25,24 +25,24 @@

Spotify is now free on mobile, tablet and computer.
Listen to the right

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

-
-
+ +
music-icon

Stream Everywhere

Stream music on your smartphone, tablet or computer

-
-
-
+ + +

It’s as yeezy as Kanye West.

@@ -61,6 +61,6 @@

Discover

spotify-icon-white spotify-app -
+ diff --git a/styles/style.css b/styles/style.css index d264c212c..3d1d249b7 100644 --- a/styles/style.css +++ b/styles/style.css @@ -9,7 +9,6 @@ White: #FFF * { margin: 0; padding: 0; - box-sizing: border-box; /* Asegura que el padding y border no agranden los elementos */ } body { @@ -19,10 +18,10 @@ body { } h1 { - font-size: 82px; + font-size: 72px; color: #fff; text-align: center; - margin-bottom: 20px; + margin-bottom: 30px; } h2 { @@ -32,6 +31,27 @@ h2 { text-align: center; } +h3 { + font-size: 32px; + text-align: center; + text-decoration: solid underline #00B172 4px; + text-underline-offset: 10px; + padding: 5%; +} + +h4 { + font-size: 24px; + text-align: center; + color: #00B172; +} + +p { + font-size: 20px; + text-align: center; + color: #1A1A1A; + font-weight: 300; +} + nav { display: flex; align-items: center; @@ -41,12 +61,12 @@ nav { background-color: #FFF; } - nav img { +nav img { max-width: 150px; height: auto; } - nav ul { +nav ul { list-style: none; margin: 0; padding: 0; @@ -54,7 +74,7 @@ nav { gap: 25px; } - nav ul li { +nav ul li { color: #1A1A1A; cursor: pointer; font-size: 16px; @@ -76,4 +96,27 @@ nav { display: flex; align-items: center; justify-content: center; -} \ No newline at end of file +} + +.boxes { + display: flex; + align-items: stretch; + padding: 5%; + gap: 5%; +} + +.box { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + align-content: space-between; + flex-direction: column; + gap: 20px; +} + +.box img { + max-width: 120px; + height: auto; +} + From 7daf1a0d16616e4b63bfcc605ba748b8efd742ea Mon Sep 17 00:00:00 2001 From: Ana Molina Date: Sat, 28 Sep 2024 01:05:15 +0200 Subject: [PATCH 4/4] all ready --- index.html | 35 +++++++------- styles/style.css | 122 ++++++++++++++++++++++++++++++++++++----------- 2 files changed, 112 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index bf5fb07e9..0ef0da8dc 100644 --- a/index.html +++ b/index.html @@ -42,25 +42,28 @@

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.

+
+
+
+

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
- spotify-icon-white - spotify-app + spotify-app
diff --git a/styles/style.css b/styles/style.css index 3d1d249b7..3b4743427 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,89 +1,86 @@ /* Colors: - -Text: 1A1A1A +Text: #1A1A1A Green: #00B172 White: #FFF - */ + * { margin: 0; padding: 0; - } +} body { - background-color:#fff; + background-color: #FFF; font-family: 'Montserrat', sans-serif; font-size: 14px; } - + +/* Títulos principales */ h1 { font-size: 72px; - color: #fff; + color: #FFF; text-align: center; margin-bottom: 30px; } - + h2 { font-size: 24px; font-weight: 300; - color: #fff; + color: #FFF; text-align: center; } h3 { font-size: 32px; text-align: center; - text-decoration: solid underline #00B172 4px; - text-underline-offset: 10px; + text-decoration: solid underline #00B172 3px; + text-underline-offset: 15px; padding: 5%; } h4 { font-size: 24px; - text-align: center; - color: #00B172; } p { font-size: 20px; - text-align: center; - color: #1A1A1A; font-weight: 300; } nav { display: flex; align-items: center; - justify-content: space-between; + justify-content: space-between; flex-direction: row; padding: 20px; - background-color: #FFF; + background-color: #FFF; } nav img { - max-width: 150px; - height: auto; + max-width: 150px; + height: auto; } - + nav ul { list-style: none; margin: 0; padding: 0; - display: flex; + display: flex; gap: 25px; } - + nav ul li { color: #1A1A1A; cursor: pointer; - font-size: 16px; + font-size: 16px; } +/* Adaptaciones responsive para móviles */ @media (max-width: 768px) { nav { - flex-direction: column; - align-items: flex-start; + flex-direction: column; + align-items: flex-start; } } @@ -106,17 +103,84 @@ nav ul li { } .box { - flex: 1; + flex: 1; display: flex; align-items: center; justify-content: center; - align-content: space-between; flex-direction: column; + text-align: center; gap: 20px; + color: #00B172; } .box img { - max-width: 120px; - height: auto; + max-width: 120px; + height: auto; +} + +.box p { + color: #1A1A1A; +} + +.green { + background-color: #00B172; + color: #FFF; + display: flex; + flex-direction: row; + padding: 80px; + margin-left: 20px; + margin-right: 20px; + align-items: center; + gap: 60px; +} + +.green img.app { + max-width: 300px; + height: auto; } +.green img.logo-white { + max-width: 120px; + height: 120px; +} + +.green h3 { + text-decoration: solid underline #fff 3px; + text-align: left; + padding: 0; +} + +.green p { + font-size: 18px; + font-weight: 300; + line-height: 32px; +} + +.content { + display: flex; + flex-direction: column; + gap: 60px; +} + +.content-text { + display: flex; + flex-direction: row; + align-items: center; + gap: 150px; +} + +.greenboxes { + display: flex; + flex-direction: column; + gap: 40px; +} + +.greenbox { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + text-align: left; + font-size: 16px; + color: #FFF; +}