From fdd392b6273a75a99acaf66bc8b6f70b65742816 Mon Sep 17 00:00:00 2001 From: Miriam Collado Date: Wed, 25 Sep 2024 22:39:44 +0200 Subject: [PATCH 1/3] added heading --- index.html | 27 +++++++++++++++++++++++++-- styles/style.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..d8fbe01a5 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,37 @@ 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 +
+ +
+
+

Music for everyone

+

Spotify is now free on mobile, tablet and computer.

+

Listen to the right music, wherever you are.

+
+ landing +
+
+ 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. + + + + diff --git a/styles/style.css b/styles/style.css index 55efb32c6..aa9d33555 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,47 @@ Green: #00B172 White: #FFF */ +nav { + position: fixed; + background-color: blueviolet; + padding: 0cap; +} +.spotify-logo { + max-width: 100px; + float: left; +} +.top-links { + float: inline-end; + display: flex; + flex-direction: row; +} +.landing { + max-width: 100%; +} +.container { + background-color: blue; +} +.p1 { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #FFF; +} + + + + + + + + + + + + + + + + + From 934c13fe79dd880a1330680ca3713f44935752ae Mon Sep 17 00:00:00 2001 From: Miriam Collado Date: Fri, 27 Sep 2024 19:34:10 +0200 Subject: [PATCH 2/3] done --- index.html | 59 +++++++++++++++++++--- styles/style.css | 127 +++++++++++++++++++++++++++++++++++++---------- 2 files changed, 154 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index d8fbe01a5..56a94e8e0 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,12 @@
+
+
+ +
+
+
+
+

Music for everyone

@@ -27,15 +34,53 @@

Music for everyone

landing
- - 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 milliongs 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

+
+
+
+
+
+

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-icon-white +
+
+ spotify-app +
+
+ + + diff --git a/styles/style.css b/styles/style.css index aa9d33555..f2b8857c9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,47 +6,124 @@ Green: #00B172 White: #FFF */ -nav { - position: fixed; - background-color: blueviolet; - padding: 0cap; +body { + font-family: Arial, Helvetica, sans-serif; +} +header > div { + height: 80px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 25px; + background-color: aqua; } .spotify-logo { - max-width: 100px; - float: left; + height: 80px; +} +nav { + background-color: blueviolet; + width: 600px; + height: 80px; } -.top-links { - float: inline-end; +nav ul { display: flex; - flex-direction: row; + align-items: center; + justify-content: space-between; + list-style: none; + background-color: azure; } .landing { max-width: 100%; } .container { background-color: blue; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; } -.p1 { +.text-container { position: absolute; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF; + text-align: center; + background-color: aqua; +} +.title { + font-size: 50px; +} +.section1 { + background-color: blueviolet; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: 600px; +} +.sectiontext { +display: flex; +flex-direction: row; +justify-content: space-around; +align-items: center; +background-color: green; +text-align: center; +width: 80%; +} +.music-icon { + height: 120px; +} +.section1 h1 { + text-decoration: underline; + text-decoration-color: #00B172; + font-size: 250%; +} +.sectiontext h2 { + color: #00B172; +} +.sectiontext p { + color: #FFF; +} +.section2 { + display: flex; + flex-direction: row; + justify-content: space-around; + background-color: #00B172; + height: 750px; + align-content: center; + align-items: center; + color: #FFF; + position: relative; + margin: 20px; +} +.spotify-icon-white { + height: 150px; + position: absolute; + top: 50%; + bottom: 50%; + transform: translate(-50%, -50%); +} +.spotify-app { + height: 600px; +} +.section2 h1 { + text-decoration: underline; + font-stretch: expanded; +} +.section2 p { + max-width: 310px; +} +.kanye-text { + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: 130%; } - - - - - - - - - - - - - - - From 5c49a10e8b8721f10e1c8e61e3d17ab5f9195dde Mon Sep 17 00:00:00 2001 From: Miriam Collado Date: Fri, 27 Sep 2024 19:40:56 +0200 Subject: [PATCH 3/3] fixed --- styles/style.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/styles/style.css b/styles/style.css index f2b8857c9..97efe4813 100644 --- a/styles/style.css +++ b/styles/style.css @@ -16,13 +16,11 @@ header > div { align-items: center; justify-content: space-between; padding: 25px; - background-color: aqua; } .spotify-logo { height: 80px; } nav { - background-color: blueviolet; width: 600px; height: 80px; } @@ -30,9 +28,7 @@ nav ul { display: flex; align-items: center; justify-content: space-between; - list-style: none; - background-color: azure; -} + list-style: none;} .landing { max-width: 100%; } @@ -54,13 +50,11 @@ nav ul { transform: translate(-50%, -50%); color: #FFF; text-align: center; - background-color: aqua; } .title { font-size: 50px; } .section1 { - background-color: blueviolet; display: flex; flex-direction: column; align-items: center; @@ -72,7 +66,6 @@ display: flex; flex-direction: row; justify-content: space-around; align-items: center; -background-color: green; text-align: center; width: 80%; }