From 6eaa3f9ad1133afd11be1455f95f24d634edfd07 Mon Sep 17 00:00:00 2001 From: Jorge Mario Rodriguez Salas Date: Wed, 27 Nov 2019 04:22:12 +0100 Subject: [PATCH] incomplete --- starter-code/css/main.css | 87 ++++++++++++++++++++++++- starter-code/index.html | 134 ++++++++++++++++++++++++++++---------- 2 files changed, 187 insertions(+), 34 deletions(-) diff --git a/starter-code/css/main.css b/starter-code/css/main.css index 55efb32c6..619d16fe2 100644 --- a/starter-code/css/main.css +++ b/starter-code/css/main.css @@ -1,8 +1,93 @@ /* Colors: -Text: 1A1A1A +Text: #1A1A1A Green: #00B172 White: #FFF */ +@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700'); + +body { + font-family: "Roboto"; + color: #1A1A1A; +} + +.navbar { + position: fixed; + width: 100%; + background-color: white; + padding: 10px 30px; +} + +.navbar figure, ul { + margin: 0; +} + +.flex-container { + width: 40%; + display: flex; + justify-content: space-evenly; + list-style: none; +} + +.spotifyLogo { + width: 150px; +} + +header { + background-image: url('../images/landing.jpg'); + background-position: center; + background-size: cover; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + color: white; +} + +header h1 { + font-size: 5em; + text-align: center; +} + +header p { + text-align: center; + font-size: 1.5em; + font-weight: 100; + width: 550px; + margin: 0 auto; +} + +/* What's on Spotify section */ + +.container { + margin-top: 100px; +} + +#info h2 { + margin: 0 auto; + width: 260px; + text-align: center; + border-bottom: 5px solid #00B172; +} +#info figure { + display: flex; + justify-content: center; + align-items: center; +} + +#info img { + width: 100px; +} + +#info h3 { + text-align: center; + color: #00B172; +} + +#info p { + padding: 0 60px; + text-align: center; + +} diff --git a/starter-code/index.html b/starter-code/index.html index c9cb2b725..2e2d272b6 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -4,41 +4,109 @@ + + + Spotify - 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?

+
+
+
+
+
+ speaker-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

+
+
+
+
+
+
+

What’s on Spotify?

+
+
+ speaker-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-icon-white +
+
+ spotify-app +
+
\ No newline at end of file