From fe58e66c2be463c09a003a13fb6f858cfc16c399 Mon Sep 17 00:00:00 2001 From: marcardus Date: Sat, 29 Mar 2025 15:49:37 +0100 Subject: [PATCH] =?UTF-8?q?WD-PT-SEPT24-ES-=20Mar=20Card=C3=BAs=20Solved?= =?UTF-8?q?=20lab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 110 ++++++++++++++++++++++++++++++++--- styles/style.css | 147 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 249 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..668c32edb 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,111 @@ + + + + + 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?

+ +
+
+ volume symbol +

Millions of Songs

+

There are millions of songs on Spotify

+
+ +
+ sound waves symbol +

HD Music

+

Listen to music as if you were listening live

+
+ +
+ devices symbol +

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

+
+
+ +
+ white Spotify logo +
+ +
+ spotify app running in mobile phone +
+
+
+
- + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32c6..f6d7e8720 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,5 +4,150 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF - */ + +.main { + margin-top: 60px; + } + + body { + color: #1a1a1a; + font-family: "Montserrat", Arial, sans-serif; + margin: 0; + box-sizing: border-box; + } + + header { + position: fixed; + top: 0; + width: calc(100vw - 80px); + display: flex; + justify-content: space-between; + align-items: center; + /* margin: 0 40px; */ + padding: 15px 40px; + background-color: #fff; + } + + header img { + width: 10%; + height: auto; + } + + header nav { + display: inline; + } + + header ul { + list-style: none; + padding: 0; + margin: 0; + display: inline; + } + + header ul li { + display: inline; + padding: 0 9px; + } + + header ul li > a { + text-decoration: none; + color: #1a1a1a; + } + + .hero-section { + background-image: url("../images/landing.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + width: 100vw; + max-width: 100%; + height: calc(100vh - 60px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #fff; + } + + .hero-section h1 { + font-size: 65px; + } + + .hero-section p { + font-size: 1.5em; + width: 550px; + font-weight: normal; + text-align: center; + } + + .whats-on-spotify { + text-align: center; + margin: 25px; + } + + .spotify-features { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #00b172; + color: #fff; + padding: 90px; + } + + .feature-blocks { + width: 220px; + font-size: 1.1em; + line-height: 1.6; + } + + .feature-blocks:first-of-type { + padding-top: 30px; + } + + .spotify-white-icon { + width: 120px; + height: auto; + } + + .spotify-app { + width: 250px; + height: auto; + } + + .section-title { + padding-bottom: 5px; + border-bottom: 3px solid #00b172; + display: inline; + } + + .section-title--white { + border-color: #fff; + font-size: 26px; + letter-spacing: 1.5px; + } + + .row { + display: flex; + justify-content: space-evenly; + margin-top: 25px; + } + + .row .column { + text-align: center; + width: 200px; + } + + .row .column img { + width: auto; + height: 60px; + } + + .row .column h3 { + color: #00b172; + font-size: 1.5em; + } + + .container { + margin: 0 35px; + } \ No newline at end of file