From 9eadb4e403b881ce7fd220f5907df837c7aadf12 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Sat, 22 Mar 2025 14:26:39 +0100 Subject: [PATCH 01/11] updates --- index.html | 42 ++++++++++++++++++++++++++++------ styles/style.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0697f92..373fa24 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,42 @@ 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

+ +

+ + +
+ +
+
+
diff --git a/styles/style.css b/styles/style.css index 55efb32..b3e9874 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,62 @@ Green: #00B172 White: #FFF */ +ul { + list-style-type: none; +} + +.navbar { + display: flex; + padding: 50px; + top: 0; + flex-wrap: wrap; + flex-direction: row; + align-content: center; + justify-content: space-between; + align-items: center; +} + +.spotify-logo { + width: 500px; + height: 350px; +} + +.nav-links { + display: flex; + align-items: flex-end; + align-content: space-around; + flex-direction: row; + gap: 10px; +} + +.img-back { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + background-image: url("../images/landing.jpg"); + width: 100vw; + height: 600px; +} + +h1 { +display: flex; +padding:200px; +margin-bottom: 0px; + color: white; + align-items: center; + align-content: center; + text-align: center; + justify-content: center; +} + +h2 { + display: flex; + margin-top: 0px; + color: white; + align-items: center; + text-align: center; + justify-content: flex-end; + flex-direction: column; + + } From 1ab4281ba57d02e9ed3ef029c1c75535de83151b Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Sat, 22 Mar 2025 15:57:42 +0100 Subject: [PATCH 02/11] LASTUPDATE --- index.html | 51 +++++++++++++++++++++++------- styles/style.css | 81 +++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 108 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 373fa24..4fbfc72 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,8 @@
-
-

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?

+
+
+ +

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
    • +
  • Browse
    • +
  • Discover
    • +
+
diff --git a/styles/style.css b/styles/style.css index b3e9874..8386521 100644 --- a/styles/style.css +++ b/styles/style.css @@ -44,10 +44,14 @@ ul { height: 600px; } +header { + justify-content: center; +} + h1 { -display: flex; -padding:200px; -margin-bottom: 0px; + display: flex; + padding: 200px; + margin-bottom: 0px; color: white; align-items: center; align-content: center; @@ -56,12 +60,65 @@ margin-bottom: 0px; } h2 { - display: flex; - margin-top: 0px; - color: white; - align-items: center; - text-align: center; - justify-content: flex-end; - flex-direction: column; - - } + display: flex; + margin-top: 0px; + color: white; + align-items: center; + text-align: center; + justify-content: flex-end; + flex-direction: column; +} + +h3{ + + align-items: center; + text-align: center; + font-family: 'Times New Roman', Times, serif; + font-size:30px; + +} + +.box-container { + display: flex; /* Usar flex para alinear las cajas en fila */ + gap: 20px; /* Espacio entre las cajas */ + align-content: space-around; + flex-wrap: nowrap; + flex-direction: row; + align-items: baseline; + justify-content: center; +} + +.box { + background-color: #ffffff; /* Color de fondo de cada caja */ + border: 1px solid yellow; /* Borde suave alrededor de cada caja */ + padding: 20px; /* Espacio interno alrededor del contenido de cada caja */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */ + width: 200px; /* Ancho fijo de cada caja */ + text-align: center; /* Centrar el texto dentro de cada caja */ + border-radius: 8px; /* Bordes redondeados */ +} + +h4 { + color: green; +} + +.logo { + width: 80px; /* Ajusta el tamaño del logo según sea necesario */ + height: auto; /* Mantiene la proporción del logo */ + margin-bottom: 15px; /* Espacio debajo del logo */ +} + +.search-browse-discover { +margin-top: 350px; +font-size: 30px; + +} +h5 { + align-items: stretch; + justify-content: center; + align-content: space-around; + flex-direction: column; + font-size: 30px; + color:green; + +} From 8d20a1d1a69f12d88e623f78878412a42b046c48 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Sat, 22 Mar 2025 16:51:17 +0100 Subject: [PATCH 03/11] UPDATED --- index.html | 15 ++++++++++++--- styles/style.css | 29 ++++++++++++++++++++++++----- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 4fbfc72..f106b87 100644 --- a/index.html +++ b/index.html @@ -30,12 +30,13 @@
-

Music for everyone. -

+

Music for everyone.

Spotify is now free on mobile, tablet and computer.

-

Listen to the right music, wherever you are

+

Listen to the right music, wherever you are

+ +

What's on Spotify?

@@ -64,8 +65,16 @@

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 realeses and great playlists for right now.

  • Discover
    • +

    Enjoy new music every Monday with your own personal playlist.

    +

    Or sit back and enjoy Radio

    + +spotify-logo alone +
diff --git a/styles/style.css b/styles/style.css index 8386521..4b985f8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -22,8 +22,8 @@ ul { } .spotify-logo { - width: 500px; - height: 350px; + width: 170px; + height: 100px; } .nav-links { @@ -75,6 +75,7 @@ h3{ text-align: center; font-family: 'Times New Roman', Times, serif; font-size:30px; + margin: 50px; } @@ -91,7 +92,7 @@ h3{ .box { background-color: #ffffff; /* Color de fondo de cada caja */ border: 1px solid yellow; /* Borde suave alrededor de cada caja */ - padding: 20px; /* Espacio interno alrededor del contenido de cada caja */ + padding: 1px;; /* Espacio interno alrededor del contenido de cada caja */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */ width: 200px; /* Ancho fijo de cada caja */ text-align: center; /* Centrar el texto dentro de cada caja */ @@ -111,14 +112,32 @@ h4 { .search-browse-discover { margin-top: 350px; font-size: 30px; +background-color:green } + h5 { align-items: stretch; justify-content: center; align-content: space-around; flex-direction: column; font-size: 30px; - color:green; - + color:white; + +} + +p{ + font-size: 20px; } + +.spotify-logo-alone{ + display: flex; + flex-wrap: row; + width: 100px; + height: 100px; + max-width: 50px; /* Ajusta el tamaño del logo */ + height: auto; + display: inline-block; + margin-left: 700px; + +} \ No newline at end of file From ac272dcda2d010c57bb45783b9ca6e400cfd82c6 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Sat, 22 Mar 2025 19:41:55 +0100 Subject: [PATCH 04/11] updated --- .DS_Store | Bin 0 -> 8196 bytes index.html | 5 +++-- styles/style.css | 17 ++++++++++++----- 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..87848fedb72686f5574b0af523fc335f1c661e10 GIT binary patch literal 8196 zcmeI1&yUhT6vyAN2*r(tgC<-|ns_A$VvHLvU1Sd)yljmg)F8EFY3#NeT0}!gde%S2 ztAC0Aizofg4@eo@?9C{?m&|p-Pa0B9A>%5bb+{h_XGfO9SYTd}Ij1pp&4jXTKH`qWXUlg_=xoi&VsjmA5(+`)Blgjha*&EGMsoL+_fUgQ>4c7H zNY9`hM1)qv4=bWZ8Akp@@$L##m0#_3_&@L^R|DRm` z{r~EL*nIt's as yeezy as Kanye West.

Enjoy new music every Monday with your own personal playlist.

Or sit back and enjoy Radio

-spotify-logo alone - +spotify-logo-alone +spotify-app +
diff --git a/styles/style.css b/styles/style.css index 4b985f8..8a743e3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -85,7 +85,7 @@ h3{ align-content: space-around; flex-wrap: nowrap; flex-direction: row; - align-items: baseline; + justify-content: center; } @@ -132,12 +132,19 @@ p{ .spotify-logo-alone{ display: flex; - flex-wrap: row; width: 100px; height: 100px; - max-width: 50px; /* Ajusta el tamaño del logo */ - height: auto; - display: inline-block; +height: auto; margin-left: 700px; +} + +.spotify-app +{ + display: flex; + justify-content: right; /* Puede ser 'center', 'flex-start', 'flex-end' etc. para horizontal */ + align-items: right; /* Puede ser 'center', 'flex-start', 'flex-end' etc. para vertical */ + height: 100vh; /* Asegura que el contenedor tiene suficiente altura si quieres centrar verticalmente */ + + } \ No newline at end of file From 3d7475df96ba7c133d2d861c50681a8eff195161 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Mon, 24 Mar 2025 15:37:38 +0100 Subject: [PATCH 05/11] updated. --- index.html | 2 +- styles/style.css | 67 ++++++++++++++++++++++-------------------------- 2 files changed, 31 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index deb50b9..4d5c133 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@
It's as yeezy as Kanye West.

Or sit back and enjoy Radio

spotify-logo-alone -spotify-app +spotify-app diff --git a/styles/style.css b/styles/style.css index 8a743e3..325c128 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,6 +6,7 @@ Green: #00B172 White: #FFF */ + ul { list-style-type: none; } @@ -22,7 +23,7 @@ ul { } .spotify-logo { - width: 170px; + width: 250px; height: 100px; } @@ -50,7 +51,7 @@ header { h1 { display: flex; - padding: 200px; + padding: 10px; margin-bottom: 0px; color: white; align-items: center; @@ -69,14 +70,12 @@ h2 { flex-direction: column; } -h3{ - - align-items: center; - text-align: center; - font-family: 'Times New Roman', Times, serif; - font-size:30px; - margin: 50px; - +h3 { + align-items: center; + text-align: center; + font-family: "Times New Roman", Times, serif; + font-size: 30px; + margin: 50px; } .box-container { @@ -85,14 +84,14 @@ h3{ align-content: space-around; flex-wrap: nowrap; flex-direction: row; - + justify-content: center; } .box { background-color: #ffffff; /* Color de fondo de cada caja */ border: 1px solid yellow; /* Borde suave alrededor de cada caja */ - padding: 1px;; /* Espacio interno alrededor del contenido de cada caja */ + padding: 1px; /* Espacio interno alrededor del contenido de cada caja */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */ width: 200px; /* Ancho fijo de cada caja */ text-align: center; /* Centrar el texto dentro de cada caja */ @@ -110,41 +109,35 @@ h4 { } .search-browse-discover { -margin-top: 350px; -font-size: 30px; -background-color:green - + margin-top: none; + font-size: 30px; + background-color: green; } h5 { - align-items: stretch; - justify-content: center; - align-content: space-around; - flex-direction: column; - font-size: 30px; - color:white; - + align-items: stretch; + gap: none; + justify-content: center; + align-content: space-around; + flex-direction: column; + font-size: 30px; + color: white; } -p{ +p { font-size: 20px; } -.spotify-logo-alone{ +.spotify-logo-alone { display: flex; - width: 100px; - height: 100px; -height: auto; - margin-left: 700px; - + width: 100px; + height: 100px; + height: auto; + margin-left: 700px; } -.spotify-app -{ +.spotify-app { display: flex; - justify-content: right; /* Puede ser 'center', 'flex-start', 'flex-end' etc. para horizontal */ - align-items: right; /* Puede ser 'center', 'flex-start', 'flex-end' etc. para vertical */ - height: 100vh; /* Asegura que el contenedor tiene suficiente altura si quieres centrar verticalmente */ - - + position: relative; + margin-left:1000px; } \ No newline at end of file From e2c108d86030fe3e216afcde4f11f30b7bc11d0e Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Mon, 24 Mar 2025 18:47:22 +0100 Subject: [PATCH 06/11] updated --- index.html | 16 ++++++++++------ styles/style.css | 28 +++++++++++++++++++++------- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 4d5c133..96ac8e5 100644 --- a/index.html +++ b/index.html @@ -32,15 +32,18 @@

Music for everyone.

-

+

Spotify is now free on mobile, tablet and computer.

Listen to the right music, wherever you are

+ -

What's on Spotify?

+
+

What's on Spotify?

+

Millions of Songs

@@ -60,24 +63,25 @@

Stream everywhere

-
+
It's as yeezy as Kanye West.
  • Search

    • Know what you want to listen to?

    Just search and hit play.

    -
  • Browse
    • +
  • Browser

    • Check out the latest charts, brand new realeses and great playlists for right now.

  • Discover

    • Enjoy new music every Monday with your own personal playlist.

    -

    Or sit back and enjoy Radio

    +

    Or sit back and enjoy Radio.

    spotify-logo-alone spotify-app
-
+ + diff --git a/styles/style.css b/styles/style.css index 325c128..8a96f22 100644 --- a/styles/style.css +++ b/styles/style.css @@ -32,7 +32,11 @@ ul { align-items: flex-end; align-content: space-around; flex-direction: row; - gap: 10px; + gap: 15px; + border: 2px solid black; /* Define el tamaño, estilo y color del borde */ + padding: 5px; /* Añade espacio interno alrededor de la frase */ /* Asegura que el span se comporte como un bloque */ + border-radius: 4px; + border-color:rgb(134, 195, 43); } .img-back { @@ -51,6 +55,8 @@ header { h1 { display: flex; + font-size:75px; + font-family: font-family: system-ui, sans-serif; padding: 10px; margin-bottom: 0px; color: white; @@ -60,9 +66,15 @@ h1 { justify-content: center; } +.h2 { +font-size: 100px; +font-family: system-ui, sans-serif; +} + h2 { display: flex; margin-top: 0px; + font-size:200px; color: white; align-items: center; text-align: center; @@ -74,17 +86,17 @@ h3 { align-items: center; text-align: center; font-family: "Times New Roman", Times, serif; - font-size: 30px; + font-size: 30px; + text-decoration-color: green; margin: 50px; } .box-container { - display: flex; /* Usar flex para alinear las cajas en fila */ - gap: 20px; /* Espacio entre las cajas */ + display: flex; + gap: 20px; align-content: space-around; flex-wrap: nowrap; flex-direction: row; - justify-content: center; } @@ -108,10 +120,11 @@ h4 { margin-bottom: 15px; /* Espacio debajo del logo */ } -.search-browse-discover { +.container { margin-top: none; font-size: 30px; background-color: green; + } h5 { @@ -139,5 +152,6 @@ p { .spotify-app { display: flex; position: relative; - margin-left:1000px; + margin-left:900px; + } \ No newline at end of file From 4e4056e70c1e624845fbe4da766ebbb00fa9f434 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Mon, 24 Mar 2025 19:45:41 +0100 Subject: [PATCH 07/11] updated --- index.html | 6 +++--- styles/style.css | 54 ++++++++++++++++++++++++++++++------------------ 2 files changed, 37 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 96ac8e5..5dbf214 100644 --- a/index.html +++ b/index.html @@ -39,10 +39,10 @@

-
+

What's on Spotify?

- -
+ +
diff --git a/styles/style.css b/styles/style.css index 8a96f22..f9e7eb3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -33,10 +33,8 @@ ul { align-content: space-around; flex-direction: row; gap: 15px; - border: 2px solid black; /* Define el tamaño, estilo y color del borde */ - padding: 5px; /* Añade espacio interno alrededor de la frase */ /* Asegura que el span se comporte como un bloque */ - border-radius: 4px; - border-color:rgb(134, 195, 43); + /* Añade espacio interno alrededor de la frase */ /* Asegura que el span se comporte como un bloque */ + } .img-back { @@ -56,9 +54,10 @@ header { h1 { display: flex; font-size:75px; - font-family: font-family: system-ui, sans-serif; + font-family: system-ui, sans-serif; padding: 10px; margin-bottom: 0px; + word-spacing: 15px; color: white; align-items: center; align-content: center; @@ -66,29 +65,34 @@ h1 { justify-content: center; } -.h2 { -font-size: 100px; -font-family: system-ui, sans-serif; +h2{ + + font-family: system-ui, sans-serif; + } h2 { display: flex; margin-top: 0px; font-size:200px; - color: white; + color:white; align-items: center; text-align: center; justify-content: flex-end; flex-direction: column; + } h3 { align-items: center; text-align: center; - font-family: "Times New Roman", Times, serif; - font-size: 30px; + font-size: 30px; + text-decoration: black; + color: black; + text-decoration: underline; /* Aplica el subrayado al texto */ text-decoration-color: green; margin: 50px; + font-family: system-ui, sans-serif; } .box-container { @@ -98,20 +102,24 @@ h3 { flex-wrap: nowrap; flex-direction: row; justify-content: center; + + } + .box { background-color: #ffffff; /* Color de fondo de cada caja */ - border: 1px solid yellow; /* Borde suave alrededor de cada caja */ + border: 2px solid yellow; /* Borde suave alrededor de cada caja */ padding: 1px; /* Espacio interno alrededor del contenido de cada caja */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */ - width: 200px; /* Ancho fijo de cada caja */ - text-align: center; /* Centrar el texto dentro de cada caja */ - border-radius: 8px; /* Bordes redondeados */ + width: 200px; + text-align: center; + border-radius: 10px; } h4 { color: green; + font-family: system-ui, sans-serif; } .logo { @@ -124,6 +132,7 @@ h4 { margin-top: none; font-size: 30px; background-color: green; + color:white } @@ -135,23 +144,28 @@ h5 { flex-direction: column; font-size: 30px; color: white; + font-family: system-ui, sans-serif; } p { font-size: 20px; + color:white + font-family: system-ui, sans-serif; + } .spotify-logo-alone { display: flex; - width: 100px; - height: 100px; - height: auto; - margin-left: 700px; + width: 140px; + width: 140px; + margin-left: 1200px; } .spotify-app { display: flex; position: relative; - margin-left:900px; + margin-left:1600px; + + } \ No newline at end of file From d6035f6f63d465a732212397231349a56e563fe4 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Mon, 24 Mar 2025 20:10:50 +0100 Subject: [PATCH 08/11] updated --- index.html | 5 +++-- styles/style.css | 20 +++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 5dbf214..7668435 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

What's on Spotify?

- +
@@ -77,9 +77,10 @@
It's as yeezy as Kanye West.

Or sit back and enjoy Radio.

spotify-logo-alone -spotify-app + +spotify-app
diff --git a/styles/style.css b/styles/style.css index f9e7eb3..77746b6 100644 --- a/styles/style.css +++ b/styles/style.css @@ -108,11 +108,11 @@ h3 { .box { - background-color: #ffffff; /* Color de fondo de cada caja */ border: 2px solid yellow; /* Borde suave alrededor de cada caja */ padding: 1px; /* Espacio interno alrededor del contenido de cada caja */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */ - width: 200px; + width: 300px; + height:300px; text-align: center; border-radius: 10px; } @@ -130,7 +130,7 @@ h4 { .container { margin-top: none; - font-size: 30px; + font-size: 60px; background-color: green; color:white @@ -142,13 +142,13 @@ h5 { justify-content: center; align-content: space-around; flex-direction: column; - font-size: 30px; + font-size: 60px; color: white; font-family: system-ui, sans-serif; } p { - font-size: 20px; + font-size: 30px; color:white font-family: system-ui, sans-serif; @@ -156,16 +156,18 @@ p { .spotify-logo-alone { display: flex; - width: 140px; - width: 140px; + width: 150px; + width: 150px; margin-left: 1200px; } .spotify-app { display: flex; position: relative; - margin-left:1600px; - + margin-left: 1800px; + width: 800px; + height: auto; +top:-900px; } \ No newline at end of file From 3e3264e86143bbdcaa918d3ec9a84befd6c06ded Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Tue, 25 Mar 2025 13:34:20 +0100 Subject: [PATCH 09/11] updated --- styles/style.css | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/styles/style.css b/styles/style.css index 77746b6..dbf30ba 100644 --- a/styles/style.css +++ b/styles/style.css @@ -43,8 +43,8 @@ ul { background-repeat: no-repeat; background-attachment: fixed; background-image: url("../images/landing.jpg"); - width: 100vw; - height: 600px; + width:auto; + height: 1500px; } header { @@ -86,8 +86,7 @@ h2 { h3 { align-items: center; text-align: center; - font-size: 30px; - text-decoration: black; + font-size: 50px; color: black; text-decoration: underline; /* Aplica el subrayado al texto */ text-decoration-color: green; @@ -102,19 +101,19 @@ h3 { flex-wrap: nowrap; flex-direction: row; justify-content: center; + height: 500px; } .box { - border: 2px solid yellow; /* Borde suave alrededor de cada caja */ - padding: 1px; /* Espacio interno alrededor del contenido de cada caja */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */ + + padding: 120px; /* Espacio interno alrededor del contenido de cada caja */ width: 300px; - height:300px; + height:600px; text-align: center; - border-radius: 10px; + } h4 { @@ -134,6 +133,7 @@ h4 { background-color: green; color:white + } h5 { @@ -145,6 +145,9 @@ h5 { font-size: 60px; color: white; font-family: system-ui, sans-serif; +padding:100px; + + } p { @@ -156,18 +159,19 @@ p { .spotify-logo-alone { display: flex; - width: 150px; - width: 150px; - margin-left: 1200px; + width: 250px; + margin-left: 2000px; + } .spotify-app { display: flex; position: relative; margin-left: 1800px; - width: 800px; + width: 1000px; height: auto; -top:-900px; - + top:-1100px; + margin-right: 3000px; + margin-left:3000px } \ No newline at end of file From 137b295a54b628f083cf824038e6dabdec612529 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Tue, 25 Mar 2025 16:33:59 +0100 Subject: [PATCH 10/11] updated --- index.html | 2 +- styles/style.css | 55 ++++++++++++++++++++++++++++-------------------- 2 files changed, 33 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 7668435..18420ca 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,7 @@

-

What's on Spotify?

+

What's on Spotify?

diff --git a/styles/style.css b/styles/style.css index dbf30ba..4628027 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,8 +23,10 @@ ul { } .spotify-logo { - width: 250px; - height: 100px; + width: 400px; + height: 150px; + color: rgb(67, 151, 67); + } .nav-links { @@ -32,9 +34,8 @@ ul { align-items: flex-end; align-content: space-around; flex-direction: row; - gap: 15px; - /* Añade espacio interno alrededor de la frase */ /* Asegura que el span se comporte como un bloque */ - + gap: 40px; + font-size: 40px; } .img-back { @@ -45,6 +46,8 @@ ul { background-image: url("../images/landing.jpg"); width:auto; height: 1500px; + align-content:center + } header { @@ -53,7 +56,7 @@ header { h1 { display: flex; - font-size:75px; + font-size:100px; font-family: system-ui, sans-serif; padding: 10px; margin-bottom: 0px; @@ -65,16 +68,12 @@ h1 { justify-content: center; } -h2{ - - font-family: system-ui, sans-serif; - -} h2 { display: flex; - margin-top: 0px; - font-size:200px; + margin-top:5px; + font-size:700px; + font-family: system-ui, sans-serif; color:white; align-items: center; text-align: center; @@ -110,17 +109,21 @@ h3 { .box { padding: 120px; /* Espacio interno alrededor del contenido de cada caja */ - width: 300px; - height:600px; + width: 400px; + height:1000px; text-align: center; + font-size: 30px; } h4 { color: green; font-family: system-ui, sans-serif; +font-size: 30px; + } + .logo { width: 80px; /* Ajusta el tamaño del logo según sea necesario */ height: auto; /* Mantiene la proporción del logo */ @@ -129,11 +132,14 @@ h4 { .container { margin-top: none; - font-size: 60px; - background-color: green; - color:white - + font-size: 80px; + background-color: rgb(67, 151, 67); + color:white; + margin-right:50px; + margin-left:50px + + } h5 { @@ -145,16 +151,19 @@ h5 { font-size: 60px; color: white; font-family: system-ui, sans-serif; -padding:100px; - +margin-left:40px; +padding:70px; } p { + gap:700px: + padding:15px; font-size: 30px; color:white - font-family: system-ui, sans-serif; - + font-family: system-ui, sans-serif; + font-size: 40px; + margin-left:30px; } .spotify-logo-alone { From 2c4d3275cf42097bdf7ed3ed25e3a80866f0e353 Mon Sep 17 00:00:00 2001 From: lmaccaro-maker Date: Thu, 27 Mar 2025 17:01:37 +0100 Subject: [PATCH 11/11] updated --- index.html | 17 +++++++------- styles/style.css | 61 ++++++++++++++++++++++++++++++++++-------------- 2 files changed, 52 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 18420ca..0c1fe37 100644 --- a/index.html +++ b/index.html @@ -40,14 +40,14 @@

-

What's on Spotify?

+

What's on Spotify?

Millions of Songs

-

There are millions of songs on Spotify

+

There are millions of songs on Spotify

@@ -68,18 +68,17 @@

Stream everywhere

It's as yeezy as Kanye West.
  • Search
    • -

    Know what you want to listen to?

    -

    Just search and hit play.

    +
+

Know what you want to listen to?

+

Just search and hit play.

  • Browser
    • -

    Check out the latest charts, brand new realeses and great playlists for right now.

    +

    Check out the latest charts, brand new realeses and great playlists for right now.

  • Discover
    • -

    Enjoy new music every Monday with your own personal playlist.

    -

    Or sit back and enjoy Radio.

    +

    Enjoy new music every Monday with your own personal playlist.

    +

    Or sit back and enjoy Radio.

    spotify-logo-alone - - spotify-app
    diff --git a/styles/style.css b/styles/style.css index 4628027..c14efee 100644 --- a/styles/style.css +++ b/styles/style.css @@ -85,14 +85,21 @@ h2 { h3 { align-items: center; text-align: center; - font-size: 50px; - color: black; - text-decoration: underline; /* Aplica el subrayado al texto */ - text-decoration-color: green; + font-size: 50px; margin: 50px; font-family: system-ui, sans-serif; } +.h3 { + color: black; + text-decoration: underline; + text-decoration-color: green; + gap:15px; + margin:10px; + text-decoration-thickness: 10px; + text-decoration-style:solid; +} + .box-container { display: flex; gap: 20px; @@ -114,6 +121,7 @@ h3 { text-align: center; font-size: 30px; + } h4 { @@ -130,22 +138,32 @@ font-size: 30px; margin-bottom: 15px; /* Espacio debajo del logo */ } +ul{ + +text-align:left; + +} + .container { margin-top: none; - font-size: 80px; + margin-left:30px; + font-size: 120px; background-color: rgb(67, 151, 67); + text-align: left; color:white; - margin-right:50px; - margin-left:50px - - + padding:500px: + /* Tamaño máximo que no excederá */ + height: 100px; /* Ajusta la altura de acuerdo a tu diseño */ + margin: 0 auto; /* Centraliza horizontalmente si es menor que el contenedor padre */ + padding: 10px; + margin:60px 60px 60px 60px; } h5 { align-items: stretch; gap: none; - justify-content: center; + justify-content: left; align-content: space-around; flex-direction: column; font-size: 60px; @@ -159,17 +177,26 @@ padding:70px; p { gap:700px: padding:15px; - font-size: 30px; color:white font-family: system-ui, sans-serif; - font-size: 40px; + font-size: 35px; + text-align:center; margin-left:30px; } +.search-browse-discover { + + font-family: system-ui, sans-serif; + font-size: 60px; + text-align: left; + text-align: column; + padding:none; +} + .spotify-logo-alone { display: flex; width: 250px; - margin-left: 2000px; + margin-left: 1700px; } @@ -179,8 +206,8 @@ p { margin-left: 1800px; width: 1000px; height: auto; - top:-1100px; - margin-right: 3000px; - margin-left:3000px + top: -1800px; + margin-right: 2000px; + margin-left: 2500px; -} \ No newline at end of file +}