diff --git a/index.html b/index.html index 0697f92..63fae23 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,96 @@ 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. +
+ Spotify-logo + + +
+
+
+

Music for everyone.

+

+ Spotify is now free on mobile, tablet and computer.
Listen to + the right music, wherever you are. +

+
+
+
+

What’s on Spotify?

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

+
+
+
+ diff --git a/styles/style.css b/styles/style.css index 55efb32..bdae12f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,158 @@ Green: #00B172 White: #FFF */ + +@import url("https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap") * { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Flow Circular", system-ui; +} + +a { + color: inherit; + text-decoration: none; +} +.header { + display: flex; + justify-content: space-between; + margin: 10px 40px; + background-color: white; + + .logo-img { + height: 40px; + width: 132px; + } + .navbar ul { + height: 100%; + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + gap: 20px; + align-items: center; + } +} + +.background-img { + background-image: url(/lab-css-spotify-clone-es/images/landing.jpg); + background-color: #fff; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 110vh; + width: 100vw; + align-items: center; + + .centered-text { + color: #fff; + font-size: 2.3em; + text-align: center; + } + .maintitle { + margin-top: 0; + } +} + +.whatson { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 1.5em; + + .secondtitle { + border-bottom: 2px solid #00b172; + padding-bottom: 5px; + margin-bottom: 50px; + } + + .container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + height: 200px; + margin: 50px; + + .streaming { + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 85px; + } + + h3 { + color: #00b172; + margin-bottom: 0px; + } + + .p-section { + color: #1a1a1a; + font-weight: 100; + } + } + + .container img { + align-self: center; + width: 30%; + } +} + +.footer { + display: flex; + flex-direction: row; + background-color: #00b172; + justify-content: center; + /* gap: 100px; */ + align-items: center; + margin: 30px; + height: 800px; + + h2{ + display: inline; + border-bottom: 2px solid #fff; + font-size: 2em; + + } + + .white-logo { + position: absolute; + width: 9%; + + } + + .footer-text { + height: 60vh; + text-align: left; + padding: 30px 70px; + color: #fff; + letter-spacing: 0.5px; + margin-top: 30px; + } + + aside { + display: flex; + justify-content: center; + padding: 50px; + } + .app-img { + width: 60%; + height: auto; + max-height: 100vh; + } + + .footerdivs{ + text-align: left; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 10px 400px 10px 0px; + } +}