From 222aaa039a9cc8083077ba5bd8aad80f43447c28 Mon Sep 17 00:00:00 2001 From: afminguela Date: Mon, 16 Jun 2025 17:15:57 +0200 Subject: [PATCH 1/3] half way --- index.html | 61 +++++++++++++++++++++++++--- styles/style.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..90268ff14 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,63 @@ 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 +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ hd music +

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. +
diff --git a/styles/style.css b/styles/style.css index 55efb32c6..160bf1a48 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,105 @@ Green: #00B172 White: #FFF */ +:root{ + --text: #1A1A1A; + --green: #00B172; + --white: #FFF; +} + *{ + margin:0; + padding:0; + box-sizing: border-box; + } + + body{ +font-family:"regencie" + } + +.navbar{ + display:flex; + flex-direction: row; + justify-content: space-between; + position: sticky; + margin:10px; + padding-left:20px; + padding-right:20px; + align-items: center; + +} +.spotify-logo{ + width:145px; + +} +.navbar ul{ + display:flex; + flex-direction: row; + list-style: none; + gap:20px; + justify-content: space-around; + +} +a{ + color:var(--text); + text-decoration: none; + text-decoration-color: black; + +} +.hero{ + + background-image: url("../images/landing.jpg"); + height: 505px; + background-position: center; + background-size: cover; + align-content: center; + text-align: center; + color:white; + padding-left: 90px; + padding-right: 90px; + +} +.hero h1{ + font-size: 3rem; + margin-bottom: 20px; +} +.hero p{ + font-size: 17px; + margin-left: 200px; + margin-right: 200px; + +} +.features{ +display: flex; +flex-direction: column; +justify-content: center; +} +.features h2{ + margin-top: 20px; +text-align: center; +text-decoration: underline 3px var(--green); +text-underline-position: below; +text-underline-offset: 10px; + + +} +.features-container{ + display:flex; + flex-direction: row; + +} +.feature-div{ +display:flex; +flex-direction: column; +justify-content: center; +width: 300px; +height: 300px; + +} + +.feature-img{ + height: 100px; + width: 100px; +} + + + From 86ca5fabd0aebfce3f43a7a6879239220f42f9c0 Mon Sep 17 00:00:00 2001 From: afminguela Date: Mon, 16 Jun 2025 19:45:16 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Almost=20Done,=20me=20falta=20acabar=20de?= =?UTF-8?q?=20colocar=20la=20F%$%=C2=B7$&=20foto=20del=20memo=20de=20KAnye?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 159 +++++++++++++++++++++++---------------- styles/style.css | 191 +++++++++++++++++++++++++++++++++++------------ 2 files changed, 238 insertions(+), 112 deletions(-) diff --git a/index.html b/index.html index 90268ff14..34bcb8a2e 100644 --- a/index.html +++ b/index.html @@ -1,67 +1,98 @@ - - - - - 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?

- -
-
- music -

Millions of Songs

-

There are millions of songs on Spotify

-
-
- hd music -

HD Music

-

Listen to music as if you were listening live

-
-
- Devices -

Stream Everywhere

-

Stream music on your smartphone, tablet or computer

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

+ +
+
+ music +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ hd music +

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

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.

+
+ +
+
+ imgen de la app de spotify +
+ + +
+ + + + +
+ + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 160bf1a48..f2a3bf459 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,105 +6,200 @@ Green: #00B172 White: #FFF */ -:root{ +:root { --text: #1A1A1A; --green: #00B172; --white: #FFF; } - *{ - margin:0; - padding:0; + +* { + margin: 0; + padding: 0; box-sizing: border-box; - } +} - body{ -font-family:"regencie" - } +body { + font-family: "regencie" +} -.navbar{ - display:flex; +.navbar { + display: flex; flex-direction: row; justify-content: space-between; position: sticky; - margin:10px; - padding-left:20px; - padding-right:20px; + margin: 10px; + padding-left: 20px; + padding-right: 20px; align-items: center; } -.spotify-logo{ - width:145px; - + +.spotify-logo { + width: 145px; + } -.navbar ul{ - display:flex; + +.navbar ul { + display: flex; flex-direction: row; list-style: none; - gap:20px; + gap: 20px; justify-content: space-around; - + } -a{ - color:var(--text); + +a { + color: var(--text); text-decoration: none; text-decoration-color: black; - + } -.hero{ - + +.hero { + background-image: url("../images/landing.jpg"); height: 505px; background-position: center; background-size: cover; align-content: center; text-align: center; - color:white; + color: white; padding-left: 90px; padding-right: 90px; } -.hero h1{ + +.hero h1 { font-size: 3rem; margin-bottom: 20px; } -.hero p{ + +.hero p { font-size: 17px; margin-left: 200px; margin-right: 200px; } -.features{ -display: flex; -flex-direction: column; -justify-content: center; + +.features { + display: flex; + flex-direction: column; + justify-content: center; } -.features h2{ + +.features h2 { margin-top: 20px; -text-align: center; -text-decoration: underline 3px var(--green); -text-underline-position: below; -text-underline-offset: 10px; + text-align: center; + text-decoration: underline 3px var(--green); + text-underline-position: below; + text-underline-offset: 10px; } -.features-container{ - display:flex; + +.features-container { + display: flex; flex-direction: row; + justify-content: center; +} + +.feature-div { + display: flex; + flex-direction: column; + width: 280px; + justify-content: space-around; + +} + +.feature__img { + transform: scale(35%); + object-fit:scale-down; + +} + +.feature-div > h3 { + color: var(--green); + font-family: Arial, Helvetica, sans-serif; + text-align: center; + transform:translateY(-90px); + +} + +.feature-div:nth-child(even)>h3 { + margin-top: 40px; +} + +.feature-div:last-child >h3{ + margin-top: 30px; } -.feature-div{ -display:flex; -flex-direction: column; -justify-content: center; -width: 300px; -height: 300px; +.feature-div:last-child p { + transform:translateY(-70px); } -.feature-img{ - height: 100px; - width: 100px; +.feature-div p { + transform:translateY(-80px); + padding-left: 50px; + padding-right: 50px; + text-align: center; + } +.greener{ + background-color: var(--green); + background-image: url(../images/spotify-icon-white.png); + background-repeat: no-repeat; + background-position: center; + background-size: 75px 75px; + display: grid; +; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + justify-content: space-around; + padding: 60px; + align-items: center; + flex-wrap: nowrap; + gap: 120px; + +} +.greener-text{ + display: flex; + flex-direction: column; + justify-content: right; + color:var(--white); + gap:20px; + + +} +.greener-text > h2{ + text-decoration: underline 3px var(--white); + text-underline-position: below; + text-underline-offset: 10px; + font-size: 30px; +} +.greener__article{ +display:flex; +flex-direction: column; +row-gap: 20px; + +} + +.greener__article h3{ +font-family: Arial, Helvetica, sans-serif; + +} +.greener__article p{ +width: 63%; +font-size: small; +} +.greener__div{ + justify-content: right; + +} +.greener-img{ + width: 70% + + +} \ No newline at end of file From e66df56f654eb547e99157703556b915249278a2 Mon Sep 17 00:00:00 2001 From: afminguela Date: Mon, 16 Jun 2025 19:57:42 +0200 Subject: [PATCH 3/3] Hecho and Done --- styles/style.css | 260 ++++++++++++++++++++++------------------------- 1 file changed, 119 insertions(+), 141 deletions(-) diff --git a/styles/style.css b/styles/style.css index f2a3bf459..914fb7fd9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,199 +7,177 @@ White: #FFF */ :root { - --text: #1A1A1A; - --green: #00B172; - --white: #FFF; + --text: #1a1a1a; + --green: #00b172; + --white: #fff; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: "regencie" + font-family: "regencie"; } .navbar { - display: flex; - flex-direction: row; - justify-content: space-between; - position: sticky; - margin: 10px; - padding-left: 20px; - padding-right: 20px; - align-items: center; - + display: flex; + flex-direction: row; + justify-content: space-between; + position: sticky; + margin: 10px; + padding-left: 20px; + padding-right: 20px; + align-items: center; } .spotify-logo { - width: 145px; - + width: 145px; } .navbar ul { - display: flex; - flex-direction: row; - list-style: none; - gap: 20px; - justify-content: space-around; - + display: flex; + flex-direction: row; + list-style: none; + gap: 20px; + justify-content: space-around; } a { - color: var(--text); - text-decoration: none; - text-decoration-color: black; - + color: var(--text); + text-decoration: none; + text-decoration-color: black; } .hero { - - background-image: url("../images/landing.jpg"); - height: 505px; - background-position: center; - background-size: cover; - align-content: center; - text-align: center; - color: white; - padding-left: 90px; - padding-right: 90px; - + background-image: url("../images/landing.jpg"); + height: 505px; + background-position: center; + background-size: cover; + align-content: center; + text-align: center; + color: white; + padding-left: 90px; + padding-right: 90px; } .hero h1 { - font-size: 3rem; - margin-bottom: 20px; + font-size: 3rem; + margin-bottom: 20px; } .hero p { - font-size: 17px; - margin-left: 200px; - margin-right: 200px; - + font-size: 17px; + margin-left: 200px; + margin-right: 200px; } .features { - display: flex; - flex-direction: column; - justify-content: center; + display: flex; + flex-direction: column; + justify-content: center; } .features h2 { - margin-top: 20px; - text-align: center; - text-decoration: underline 3px var(--green); - text-underline-position: below; - text-underline-offset: 10px; - - + margin-top: 20px; + text-align: center; + text-decoration: underline 3px var(--green); + text-underline-position: below; + text-underline-offset: 10px; } .features-container { - display: flex; - flex-direction: row; - justify-content: center; + display: flex; + flex-direction: row; + justify-content: center; } .feature-div { - display: flex; - flex-direction: column; - width: 280px; - justify-content: space-around; - + display: flex; + flex-direction: column; + width: 280px; + justify-content: space-around; } .feature__img { - transform: scale(35%); - object-fit:scale-down; - + transform: scale(35%); + object-fit: scale-down; } .feature-div > h3 { - color: var(--green); - font-family: Arial, Helvetica, sans-serif; - text-align: center; - transform:translateY(-90px); - - + color: var(--green); + font-family: Arial, Helvetica, sans-serif; + text-align: center; + transform: translateY(-90px); } -.feature-div:nth-child(even)>h3 { - margin-top: 40px; +.feature-div:nth-child(even) > h3 { + margin-top: 40px; } -.feature-div:last-child >h3{ - margin-top: 30px; +.feature-div:last-child > h3 { + margin-top: 30px; } .feature-div:last-child p { - transform:translateY(-70px); + transform: translateY(-70px); } .feature-div p { - transform:translateY(-80px); - padding-left: 50px; - padding-right: 50px; - text-align: center; - -} - -.greener{ - background-color: var(--green); - background-image: url(../images/spotify-icon-white.png); - background-repeat: no-repeat; - background-position: center; - background-size: 75px 75px; - display: grid; -; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - - justify-content: space-around; - padding: 60px; - align-items: center; - flex-wrap: nowrap; - gap: 120px; - -} -.greener-text{ - display: flex; - flex-direction: column; - justify-content: right; - color:var(--white); - gap:20px; - - - -} -.greener-text > h2{ - text-decoration: underline 3px var(--white); - text-underline-position: below; - text-underline-offset: 10px; - font-size: 30px; -} -.greener__article{ -display:flex; -flex-direction: column; -row-gap: 20px; - -} - -.greener__article h3{ -font-family: Arial, Helvetica, sans-serif; - -} -.greener__article p{ -width: 63%; -font-size: small; -} -.greener__div{ - justify-content: right; - -} -.greener-img{ - width: 70% - - -} \ No newline at end of file + transform: translateY(-80px); + padding-left: 50px; + padding-right: 50px; + text-align: center; +} + +.greener { + background-color: var(--green); + background-image: url(../images/spotify-icon-white.png); + background-repeat: no-repeat; + background-position: center; + background-size: 75px 75px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + justify-content: space-around; + padding: 50px 50px; + align-items: center; + flex-wrap: nowrap; +} +.greener-text { + display: flex; + flex-direction: column; + justify-content: right; + color: var(--white); + gap: 30px; +} +.greener-text > h2 { + text-decoration: underline 3px var(--white); + text-underline-position: below; + text-underline-offset: 10px; + font-size: 25px; + margin-bottom: 20px; +} +.greener__article { + display: flex; + flex-direction: column; + row-gap: 20px; + gap:30px; +} + +.greener__article h3 { + font-family: Arial, Helvetica, sans-serif; +} +.greener__article p { + width: 63%; + font-size: small; +} +.greener__div { + justify-content: right; + margin-left: 130px; + padding-top: 30px; +} +.greener-img { + width: 90%; +}