diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..6483e60e7 Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index 0697f92fe..055f62c53 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,83 @@ - - Spotify Clone - + Spotify - Music for everyone + + - 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. +
+ + +
+ +
+

What's on Spotify

+
+
+ music icon +

Millions of songs

+

There are millions of songs on Spotify

+
+
+ music icon +

HD Music

+

Listen to music as if you were listening live

+
+
+ music icon +

Stream everywhere

+

Stream music on your smartphone, tablet or computer

+
+
+
+ diff --git a/styles/style.css b/styles/style.css index 55efb32c6..d165a454f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,139 @@ Green: #00B172 White: #FFF */ + +body { + box-sizing: border-box; + font-family: "Poppins", sans-serif; + /* background-color: rgb(37, 151, 151); */ + margin: 0; + padding: 0; +} + +nav { + background-color: white; + position: fixed; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + top: 0; + width: 100%; + padding: 20px; + z-index: 99999; +} + + + + +.links { + display: flex; + justify-content: flex-end; + list-style: none; +} + +.links li { + margin-right: 20px; +} + +nav img { + width: 150px; + height: auto; +} + +#banner-image { + height: 700px; + margin: 96px auto; + background-image: url(/images/landing.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + color: white; + text-align: center; +} + +.intro-content { + position: relative; + top:30vh; + margin: 0 auto; + max-width: 700px; +} + +.intro-content h1 { + margin: 20px; + font-size: 60px; +} + +.intro-content p { + font-size: 24px; + font-weight: 200; +} + +.features { + text-align: center; +} + +.features-container { + display: flex; + /* height: 300px; */ + justify-content: space-around; + align-items: stretch; + flex-wrap: wrap; +} + +.features h2 { + margin-bottom: 80px; + font-size: 36px; + text-decoration: underline; + text-decoration-color: #00B172; + text-decoration-thickness: 5px; + text-underline-offset: 5px +} + +.single-feature { + padding: 30px; + border-radius: 20px; + border: 1px solid gray; + background-color: rgb(255, 255, 255); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + width: 250px; + box-shadow: 10px 10px 1px #00B172; +} + +.icons { + width: 100px; +} + +footer { + background-color: #00B172; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + padding: 85px; +} + +footer article { + max-width: 400px; +} + +.spotify-logo { + height: 100px; + width: 100px; + position: absolute; + top:47%; + left: 47%; +} + +.spotify-image { + height: 415px; +} + +.article-wrapper { + color: white; +}