From 736e8361894a13f839d30c6ecd69e2c4c8c0039e Mon Sep 17 00:00:00 2001 From: Montse Macias Date: Sat, 9 Nov 2024 21:33:36 +0100 Subject: [PATCH 1/2] =?UTF-8?q?[WD-PT-SEP24-ES]=20-=20Montse=20Mac=C3=ADas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes index.html | 100 +++++++++++++++++++++++++++++--- styles/style.css | 145 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 238 insertions(+), 7 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b5607e4741b1288936b688c238a41e0c36943366 GIT binary patch literal 6148 zcmeHKF-`+95FC?Jh@eS{s4Pkfq?B|=bUXm%0}z4|q?|5Nl7j9&0k5Fu2^4&T5AXzL zZ3ks@2_-_&u4IqTyKB#lblx)n*I$l$Ko>xVO)xuRx5dOStzidgMv|SZF&*~?_fa^#c)~;IVXp~>&wmimG+N*_0J}2XTzCi zDh^j`V}d1yYIkI(%?Qn*Zaqg18|#$SI+I;dicdKI(540@?x@8B=8BDfJ0~0E-@#=g zW-AjFqj>l)(WQ+!7I?z6!2`J5^lKjIBu&&BI}}kdibvE#xR~v)0<76$o#Tksn*yeQ zDe$9!oDZH&Fi%)V3`YmMa0MV{oDRmZ{8C7cPnajHBho{2F_jooUAkhpRC-)Yr$0~e zb;Ots7k1`4X=j&iC@$>Ic^|^z@`%=(0;YggpcNmxQva`a-~V-zJ(&Wgz+NffvSLv5 z`AVs_HeOC@t!KMs6O*_)Vn|_^%5fM-DL!EfMxU1fF;7@WRz&A+2 Bd)NQ~ literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 0697f92fe..2989439d3 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,100 @@ 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 +
+
+ devices-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-app + +
+ spotify-icon-white + + + +
diff --git a/styles/style.css b/styles/style.css index 55efb32c6..50ea6b51c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,148 @@ Green: #00B172 White: #FFF */ + +.logoSpotify { + width: 230px; +} + +body { + margin: 0; + font-family: "Montserrat", sans-serif; +} + +nav { + display: flex; + justify-content: space-between; + padding: 20px 40px 20px 30px; +} + +nav ul { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + width: 33%; +} +nav a { + text-decoration: none; + color: #1a1a1a; + font-size: 20px; + font-family: "Montserrat", sans-serif; +} + +.landing-section { + background-image: url("/images/landing.jpg"); + background-size: cover; + background-position: center; + color: white; + display: flex; + height: 800px; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px; /* Añade espacio alrededor del contenido */ +} +.landing-section p { + font-size: 25px; /* Tamaño de fuente adecuado para el texto descriptivo */ + margin: 5px; +} + +.landing-section h1 { + font-size: 80px; + font-weight: 500; /* Cambia el peso a 500 para un grosor intermedio */ + margin: 10px; +} + +.onSpotify { + display: grid; + align-items: center; + text-align: center; + margin: 30px 10px 50px 10px; +} + +.onSpotifyGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + justify-items: center; + margin: 0px 50px; +} + +.onSpotify h3 { + color: #00b172; +} +.onSpotify h2 { + text-decoration: underline; + text-decoration-thickness: 4px; + text-underline-offset: 10px; + text-decoration-color: #00b172; + font-size: 35px; +} + +.onSpotify-icons { + width: 130px; +} + +.itemsGrid { + padding: 40px; + font-size: 25px; +} + +.greenSection { + position: relative; + background-color: #00b172; + margin: 40px; + padding: 60px; + color: white; +} + +.greenSection h2 { + text-decoration: underline; + text-decoration-thickness: 4px; + text-underline-offset: 10px; + text-decoration-color: white; + font-size: 35px; + color: white; + font-weight: 500; + margin: 0; + line-height: 3; +} + +.greenSection h3 { + font-size: 20px; + margin: 5px; +} + +.greenSection h4 { + font-size: 17px; /* Hacer las descripciones más pequeñas */ + line-height: 2; + font-weight: 500; +} + +.greenSection-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.letra { + width: 40%; + display: grid; + flex-direction: column; +} + +.greenSection .spotify-icon-white { + width: 100px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; +} + +.spotify-app { + width: 300px; + height: 500px; + margin-left: 20px; +} From fd1bb0e8d29f7b1ac401256cb4b7f81d7e5c8d6d Mon Sep 17 00:00:00 2001 From: Montse Macias Date: Sat, 9 Nov 2024 22:31:42 +0100 Subject: [PATCH 2/2] changes --- styles/style.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/styles/style.css b/styles/style.css index 50ea6b51c..c31dfb8de 100644 --- a/styles/style.css +++ b/styles/style.css @@ -116,7 +116,7 @@ nav a { .greenSection h3 { font-size: 20px; - margin: 5px; + margin: 5px 0px; } .greenSection h4 { @@ -132,9 +132,8 @@ nav a { } .letra { - width: 40%; + width: 287px; display: grid; - flex-direction: column; } .greenSection .spotify-icon-white { @@ -147,7 +146,6 @@ nav a { } .spotify-app { - width: 300px; - height: 500px; - margin-left: 20px; + width: 350px; + height: 520px; }