From 7b0f075a28f53ba30b96d1caf5a4cef880e8d689 Mon Sep 17 00:00:00 2001 From: daniorta <148881254+daniorta@users.noreply.github.com> Date: Thu, 4 Apr 2024 20:10:11 +0200 Subject: [PATCH] first spotify --- index.html | 153 ++++++++++++++++++++++++++++++++++++++++++----- styles/style.css | 145 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 282 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 0697f92..229fa97 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,139 @@ - - - - - - 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. - + + + + + + + Spotify Clone + + + + +
+ +
+ +
+ + + + +
+ +
+

Music for everyone.

+ +

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

+
+
+
+ +
+ +

+ What's on Spotify? +

+ +
+ +
+ Icono de musica. + +

+ Millions of Songs +

+ +

+ There are millions of
+ song on Spotify +

+
+ +
+ Icono equalizador de sonido. + +

+ HD Music +

+ +

+ Listem to music as if you
+ were listering live +

+
+ +
+ Imagen dispositivos mobiles. +

+ Stream Everywhere +

+ +

+ Stream music on your
smartphone, tablet or
computer +

+
+ +
+
+ + + + diff --git a/styles/style.css b/styles/style.css index 55efb32..58bac5f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,148 @@ Green: #00B172 White: #FFF */ +*{ + margin: 0; + padding: 0; +} + +body{ + font-family: 'Arial'; + +} + +.header-top{ + display: flex; + justify-content: space-between; + margin: 10px 20px; +} + +.logo{ + height: 50px; +} + +.list-nav{ + position: fixed; + right: 0; + margin: 15px 25px; + display: flex; + gap: 25px; + +} + +.list-nav li{ + float: left; +} + +.list-nav li,a{ + text-decoration: none; + list-style: none; +} + +.background{ + color: white; + height: 100vh; + background-image: url(/images/landing.jpg); + background-position: center; + background-size: cover; + display: flex; + align-items: center; + justify-content: center; + +} + +.background-title{ + letter-spacing: 3px; + font-size:3.8em; + letter-spacing: 4px; + margin-bottom: 60px; + position: relative; + bottom:50px ; + +} + +.background-paragraph{ + position: absolute; + font-size: 1.2em; + letter-spacing: 2.5px; + text-align:center ; + color: #ffffffc9; +} + + +.main{ + text-align: center; + margin-bottom: 40px; +} + +.title-main{ + display: inline-flex; + border-bottom: 3px solid #00B172; + margin: 40px 0 60px 0; +} + +.section-main{ + display: flex; + justify-content: space-around; + align-items: center; +} + +.link-section{ + height: 200px; + width: 250px; +} + +.link-section .img1, .img2, .img3 { + width: 100px; + margin-bottom: 20px; +} + +.link-section .img2{ + margin-bottom: 32px; +} + +.title-links{ + color: #00B172; + text-align: center; + margin-bottom: 20px; + margin: 0; +} + +p{ + opacity:60%; +} + +.footer{ + display: flex; + align-items: center; + justify-content: space-around; + gap: 50pxpx; + letter-spacing: 2px; + padding:60px; + background:#00B172 ; + color: #fff; +} + +.title-footer{ + + display: inline-flex; + border-bottom: 2px solid #fff; + margin-bottom: 40px; + font-size: 2em; +} + +.subtitle-footer{ + margin:40px 0px 30px 0; +} + +.logo-footer{ + position: absolute; + width: 100px; + height: 100px; + +} + +.captura{ + height:80vh; + +}