diff --git a/index.html b/index.html index 4a81684..b3409b7 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,75 @@ 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. +
+ logo de la pagina + +
+ +
+

Music for everyone.

+

Spotify is now free on mobile, tablet and computer.
+ Listen to theright music, wherever you are.

+
+ +
+

What’s on Spotify?

+
+
+
+ logo de sonido +
Millions of Songs
+

There are millions of songs on Spotify

+
+
+ logo de calidad de audio +
HD Music
+

Listen to music as if you were listening live

+
+
+ logo de dispositivos +
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.

+
+
+ + logo de spotify + imagen de muestra de la app +
+ + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 68b1e59..eaf6f8b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,194 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ + +* { + box-sizing: border-box; + list-style: none; + text-decoration: none; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100vw; +} + +header { + background-color: #ffffff; + display: flex; + height: 12vh; + width: 100%; + justify-content: space-between; + padding: 12px 50px; + position: fixed; + top: 0; + width: 100%; + z-index: 1; +} + +nav ul { + color: #1A1A1A; + display: flex; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.5rem; + +} + +nav ul li{ + margin-right: 30px; +} + +main { + background: url("../images/landing.jpg"); + background-position-y: 100%; + background-size: cover; + height: 100vh; + width: 100%; +} + +main h2, main p { + color: #ffffff; + font-family: 'Montserrat', sans-serif; + position: relative; + text-align: center; + top: 50%; + transform: translateY(-50%); +} + +main h2 { + font-size: 5rem; + font-weight: 500; + margin-bottom: 0; +} + +main p { + font-size: 1.8rem; + font-weight: 200; +} + +#whatsOn { + height: 100vh; + width: 100%; +} + +#whatsOn h3 { + color: #1A1A1A; + font-size: 2.3rem; + font-family: 'Montserrat', sans-serif; + margin-bottom: 0; + text-align: center; +} + +#whatsOn hr { + color: #00B172; + background-color: #00B172; + height: 5px; + width: 344px; +} + +.whatsOn__group { + display: flex; + justify-content: space-around; + margin-top: 100px; + +} + +.whatsOn__group div { + position: relative; + left: -2%; + +} + +.whatsOn__group div img { + position: relative; + left: 50%; + transform: translateX(-50%); + height: 120px; + width: 150px; +} + +.whatsOn__group div p { + font-family: 'Montserrat', sans-serif; + font-size: 1.6rem; + text-align: center; + margin: 10%; +} + +h6 { + color: #00B172; + font-size: 1.8rem; + font-family: 'Montserrat', sans-serif; + margin-top: 6%; + text-align: center; +} + +.green-section { + background-color: #00B172; + height: 90vh; + left: 50%; + position: relative; + transform: translateX(-50%); + width: 90%; + padding: 30px 100px; +} + +.green-section div { + width: 60%; +} + +.green-section div h3, .green-section div div p { + color: white; +} + +.green__h3 { + font-size: 2.3rem; + font-family: 'Montserrat', sans-serif; + font-weight: 500; + margin-bottom: 0; +} + +.green__h3 + hr { + color: #fff; + background-color: #fff; + height: 5px; + margin-top: 5px; + margin-left: 0; + width: 505px; +} + +.green-section div div h3:first-child { + font-size: 1.8rem; + font-family: 'Montserrat', sans-serif; + font-weight: 600; +} + +.green-section div div { + padding: 30px 0; + margin: 0 0; + height: 160px; +} + +.green-section div div p { + font-size: 1.3rem; + font-family: 'Montserrat', sans-serif; + font-weight: 200; +} + +.spotify-ico { + width: 130px; + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); +} + +.spotify-ico-app { + height: 80%; + position: absolute; + top: 55%; + right: 8%; + transform: translateY(-50%) +} \ No newline at end of file