diff --git a/index.html b/index.html index 0697f92..16b1546 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,86 @@ 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?

+
+ +
+
+
+
+

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

+
+
+
+ spoty-app +
diff --git a/styles/style.css b/styles/style.css index 55efb32..a1ae0f3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,161 @@ -/* -Colors: +*, +html, +body { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style-type: none; + font-family: "Times New Roman", Times, serif; +} -Text: 1A1A1A -Green: #00B172 -White: #FFF +.nav-bar { + position: fixed; + width: 100vw; +} +.container { + display: flex; + background-color: white; + justify-content: space-around; + align-items: center; +} +.gap-5 { + gap: 20px; +} +.spoty-img { + width: 200px; +} +.section1 { + padding: 100px; +} +.background { + background-image: url(/landing.jpg); + background-size: cover; + background-position: 0 0; + color: white; + height: 1000px; + padding-top: 80px; + margin-left: 90px; + margin-right: 90px; +} +.container-v { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 40px; +} +h2 { + margin-top: 20px; + font-size: 25px; + font-weight: normal; +} +.t-center { + text-align: center; +} +.container3 { + display: flex; + flex-direction: column; + font-size: 2em; + align-items: center; + padding: 50px; +} +.container4 { + display: flex; + margin-bottom: 40px; + justify-content: space-evenly; + margin-left: 90px; + margin-right: 90px; +} +.box { + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + line-height: 20px; + font-size: 1.25em; + width: 200px; + height: 200px; +} +.text2 { + display: flex; + text-align: center; +} +h4 { + display: flex; + margin-bottom: 10px; + color: green; +} +.logo-music { + display: flex; + width: 100px; + height: 80px; +} +.quality-icon { + display: flex; + width: 100px; + height: 80px; +} +.device-icon { + display: flex; + width: 100px; + height: 80px; +} +.container5 { + display: flex; + background-color: rgb(76, 146, 76); + margin-left: 100px; + margin-right: 100px; + color: white; + justify-content: space-evenly; +} +.app-img { + display: flex; + margin-top: 50px; + margin-bottom: 50px; + width: 420px; + height: 800px; +} +.text3 { + display: flex; + font-size: 2em; + text-decoration: underline; + margin-top: 40px; + margin-bottom: 20px; +} +.container6 { + display: flex; + flex-direction: column; + justify-content: space-between; +} +.box2 { + display: flex; + flex-direction: column; + align-content: center; + justify-content: space-between; + flex-wrap: nowrap; + line-height: 20px; + font-size: 1.25em; + width: 200px; + height: 500px; +} -*/ +.background2 { + background-image: url(/spotify-icon-white.png); + background-repeat: no-repeat; + background-size: 100px; + background-position: center; +} + +.container6 div h5 { + font-size: 2em; + margin-bottom: 20px; + margin-top: 50px; + letter-spacing: 1px; + line-height: 1.4; +} + +.container div p { + font-size: 1em; +}