diff --git a/index.html b/index.html index 4a81684..dc2ac56 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,94 @@ 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? +

+
+
+
    +
  • +

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

+
+
+ +
+
+
+ \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 68b1e59..8c73d51 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,100 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ +body, html, main { + margin: 0; + padding: 0; +} + +#navbar { + color: white; + position: fixed; + padding: 10px; + background-color: black; + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-family: Gotham Medium; +} + +#spotify_logo { + max-width: 10em; +} + +.list { + list-style: none; +} + +.nav-link { + display: inline-block; + padding: 0px 20px; +} + +#welcome { + background-image: url(/images/landing.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + background-color: black; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: Gotham Medium; + font-size: 1.5em; +} + +#welcome>h1, h5 { + color: white; +} + +#description { + color: white; + background-color: black; + padding-top: 100px; + padding-bottom: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: Gotham Medium; +} + +.desc-link { + border-style: solid; + border-radius: 2em; + max-width: 12em; + display: inline-block; + padding: 0px 20px 20px; + text-align: center; +} + +#features { + padding: 100px; + background-color: #1D8954; + background-image: url(/images/spotify-icon-white.png); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: center; + background-size: 4em; + color: white; + font-family: Gotham Medium; +} + +#features_container { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +#features_img_container>img { + max-height: 550px; +} + +#features_text_container { + width: 400px; +} \ No newline at end of file