From ef405eada491929b6fc05e412a7b782326828792 Mon Sep 17 00:00:00 2001 From: Juan Benito Torres moreno Date: Wed, 3 Apr 2024 06:31:37 +0200 Subject: [PATCH] index html --- index.html | 81 ++++++++++++++++++++++++++++--- styles/style.css | 123 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 190 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 0697f92..59c813e 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,79 @@ 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

+
+
+ +

Millions os Songs

+

There are milions 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

+
+ + +
- 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. - + + diff --git a/styles/style.css b/styles/style.css index 55efb32..1b8358f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,119 @@ -/* -Colors: +*{ + padding:0; + margin: 0; -Text: 1A1A1A -Green: #00B172 -White: #FFF +} +span{ + position: relative; + display: flex; + justify-content:space-between; + align-items:flex-start; + top: 0; + left: 0; + right: 0; +} +.container{ + background-image: url("/images/landing.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 800px; + width: 1298px; + position: relative; + top: 30px; +} +.h1{ + position: relative; + top: 200px; + color: white; + left: 450px; + font-size: 50px; -*/ +} +.main{ + padding: 40px; +} +.text-img{ + position: relative; + top: 400px; + color: white; + left: 90px; + font-size: 30px; +} +.h3{ + position: relative; + left: 500px; + top: 10px; + font-size: 40px; + border-bottom: solid 3px green ; +} + +.Millions{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: green; + .text1{ + color: black; + } + .text2{ + color: black; + } + .text3{ + color: black; + } + +} +footer{ + display: flex; + justify-content: space-between; + gap: 30px; + background-color: rgb(4, 148, 4); +} +.footer1{ + width: 66,6% ; + display: flex; + flex-direction: column; + justify-content: space-between; + +} +.fotos1{ + padding: 90px; + width: 33,3%; +} +.titulo{ + padding: 10px 0 0 30px ; + color: white; + font-size: 2em; + border-bottom: solid 2px white; +} +.search{ + font-size: 2em; +} +.browse{ + font-size: 2em; + +} +.discover{ + font-size: 2em; + +} +.section1{ + color: white; + padding: 10px 0 0 30px ; +} +.section2{ + color: white; + padding: 10px 0 0 30px ; +} +.section3{ + padding: 0px 0px 30px 30px ; + color: white; +} + +.spoti{ + position: relative; + right: 200px; + bottom: 200px; +} \ No newline at end of file