diff --git a/index.html b/index.html index 0697f92..2a14f1a 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,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. +
+
+ +
+
    +
  • Premium
    • +
  • Discover
    • +
  • Help
    • +
  • Download
    • +
+
+
+ + +
+
+ +

what's on spotify?

+ +
+
+ +
+

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 chartes,
+ brand new release 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/images/devices-icon.png b/styles/images/devices-icon.png new file mode 100644 index 0000000..4ca91e5 Binary files /dev/null and b/styles/images/devices-icon.png differ diff --git a/styles/images/high-quality-icon.png b/styles/images/high-quality-icon.png new file mode 100644 index 0000000..409a55f Binary files /dev/null and b/styles/images/high-quality-icon.png differ diff --git a/styles/images/landing.jpg b/styles/images/landing.jpg new file mode 100644 index 0000000..e2ba9fe Binary files /dev/null and b/styles/images/landing.jpg differ diff --git a/styles/images/music-icon.png b/styles/images/music-icon.png new file mode 100644 index 0000000..84ea7d8 Binary files /dev/null and b/styles/images/music-icon.png differ diff --git a/styles/images/spotify-app.jpg b/styles/images/spotify-app.jpg new file mode 100644 index 0000000..be0116a Binary files /dev/null and b/styles/images/spotify-app.jpg differ diff --git a/styles/images/spotify-icon-white.png b/styles/images/spotify-icon-white.png new file mode 100644 index 0000000..2ff95de Binary files /dev/null and b/styles/images/spotify-icon-white.png differ diff --git a/styles/images/spotify-logo.png b/styles/images/spotify-logo.png new file mode 100644 index 0000000..1a0d451 Binary files /dev/null and b/styles/images/spotify-logo.png differ diff --git a/styles/style.css b/styles/style.css index 55efb32..4ea3989 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,139 @@ -/* -Colors: +body{ + font-size: larger; + margin: 100px; +} +.allheader{ + border: 5px solid palevioletred; + height: 60em; +} +.head{ + border: 5px solid lightgreen; + +} +.logo{ + width: 20em; + height: 6em; + position: relative; + float: left; +} +.headlist { + display: inline-flex; + gap: 10px; + float: right; + margin-right: 100px; + border: 5px solid green; +} +.headlist li{ + list-style: none; + font-size: 50px; + margin: 10px; -Text: 1A1A1A -Green: #00B172 -White: #FFF +} +.secondpage{ + text-align: center; + background-image: url("images/landing.jpg"); + height: 50em; + width: 100%; + background-size: contain; + justify-content: center; + position: relative; + top:200px; + +} +.textcontainer{ + color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + gap: 50em; + font-size: 50px; +} +.thirdpagefull{ + text-align: center; + position: relative; + top: 200px; + border: 10px solid red; +} +.thirdhead{ + display: inline; + margin-top: 60px; + font-size: 60px; + border-bottom: 5px solid green; +} +.thirdpage{ + display: inline-flex; + gap: 200px; + border:5px solid orangered ; + margin: 30px 30px 30px 30px; +} +.millions{ + border: 10px solid yellow; + margin: 50px; + padding: 30px; + font-size: 40px; +} +.milimg{ + background-size: contain; + height: 300px; + width: 500px; +} +.HD{ + border: 10px solid yellow; + margin: 50px; + padding: 30px; + font-size: 40px; -*/ +} +.HDimg{ + background-size: contain; + height: 300px; + width: 500px; +} +.Stream{ + border: 10px solid yellow; + margin: 50px; + padding: 30px; + font-size: 40px; +} +.stimg{ + background-size: contain; + height: 300px; + width: 500px; +} +.thirdtext{ + color: green; +} +.lastpage{ + border: 10px solid purple; + height: 70em; + position: relative; + top: 300px; + background: green; + +} +.lastcontainer{ + margin: 200px; + float: left; + font-size: 40px; + color: white; + height: 500px; +} +.lastimg{ + float: right; + height: 45em; + margin-top: 300px ; + margin-right: 200px; +} +.lastimgcenter{ + text-align: center; + height: 300px; + background-size: contain; + position: relative; + top: 50%; + + +} +.lasthead{ + border-bottom: 4px solid white; +} \ No newline at end of file