From 1da0a6d52ba23cde178be2e923f0fc5873f60d47 Mon Sep 17 00:00:00 2001 From: jopen Date: Wed, 30 Jul 2025 09:46:23 +0200 Subject: [PATCH] spoty casi terminado --- index.html | 87 +++++++++++++++++++++++--- styles/style.css | 156 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 236 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..655bcc3a2 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,88 @@ + 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?

+ +
+
+ altavoz +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ frecuency +

HD Music

+

Listen to music as if you were listening live

+
+
+ devices +

Stream Everywhere

+

Stream Everywhere Stream music on your smartphone, tablet or computer

+
+
+
+ +
+
+

It’s as yeezy as Kanye West.

+

Search

+

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.

+
+
+ logo-im + Kanye +
+
+ +
+ + + + + + - + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32c6..e5fc5e8c9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,159 @@ Green: #00B172 White: #FFF */ + +body { + padding-top: 60px; + + +} +.navbar { + position: fixed; + padding: 10px 10px; + top: 0; + left: 0; + width: 100%; + height: 60px; +} + +.container { + width: 100%; + box-sizing: border-box; + max-width: 1200px; /* o 1020px, lo que prefieras */ + margin: 0 auto; + padding-left: 32px; + padding-right: 32px; +} + +.navbar-content { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.log-img { + width: 120px; + height: auto; +} + +.nav-links { + + list-style: none; + display: flex; + gap: 20px; + font-size: 12px; + margin: 0; + padding: 0; +} + +.encabezado { + height: 400px; + +} + + +.container2 { + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + width: 100%; + background-image: url('../images/landing.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + min-height: 400px; +} + +.section1 { + background: #fff; /* O el color de fondo que quieras */ + padding-top: 20px; + padding-bottom: 80px; + min-height: 1000px; +} + +.section1 h2 { + text-align: center; + padding-bottom: 20px; + margin: 0 auto; +} + +.container3 { + display: flex; + justify-content: space-between; /* o 'center' + 'gap' si prefieres */ + align-items: center; /* o 'center' si quieres alinear verticalmente */ + width: 100%; +} + +.container3 > div { + flex: 1; /* Cada bloque ocupa el mismo espacio posible */ + text-align: center; /* Centra el contenido de cada bloque */ +} + +.container > h3 { + color: green; + font-weight: bold; +} + +.speaker, +.frecuency, +.device { + width: 100px; + height: auto; +} + +.container3 p { + font-size: 12px; +} + +.section2 { + background-color: green; + display: flex; + text-align: left; + justify-content: center; + align-items: center; + width: 100%; + padding-left: 60px; + padding-top: 60px; + padding-bottom: 60px; +} + + +.container4 { + display: flex; + flex-direction: column; + align-items: left; + text-align: left; +} + +.container4 h2 { + font-size: 30px; +} + +.container4 h2, +.container h3, +.container4 p { + margin-left: 0; + text-align: left; +} + + +.container5 { + display: flex; + justify-content: space-evenly; + align-items: center; + + + +} + +.logo-im { + width: 13%; +} + +.Kanye { + width: 30%; +} \ No newline at end of file