From 186fd0ea3d7442362ad1e95da830262967563089 Mon Sep 17 00:00:00 2001 From: Roni <153464839+RoniPG@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:29:11 +0200 Subject: [PATCH 1/5] Iteration 1: Navbar --- styles/style.css | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/styles/style.css b/styles/style.css index 55efb32c6..2d7e97bc0 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,43 @@ Green: #00B172 White: #FFF */ +*{ + margin: 0; + padding: 0; + font-size: 10px; +} +.navbar{ + position: fixed; + display: flex; + flex-direction: row; + justify-content: space-between; + height: 10%; + width: 100%; + background: #FFF; + /* border: 1px solid black; */ +} +.navbar img{ + padding-left: 3%; + width: 18%; + /* border: 1px solid red; */ +} +.navbar ul{ + /* border: 1px solid red; */ + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-evenly; + align-content: center; + width:35%; +} + +li{ + list-style: none; + margin-right: 4%; +} + +a{ + text-decoration: none; + font-size: 2.5em; + color: #1A1A1A; +} From 17cd28168522a7522b0536441a4a94ebcb5d51d9 Mon Sep 17 00:00:00 2001 From: Roni <153464839+RoniPG@users.noreply.github.com> Date: Thu, 19 Sep 2024 16:47:14 +0200 Subject: [PATCH 2/5] Iteration 2: Large image background with text --- styles/style.css | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/styles/style.css b/styles/style.css index 2d7e97bc0..5854f07bf 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,7 +6,7 @@ Green: #00B172 White: #FFF */ -*{ +body{ margin: 0; padding: 0; font-size: 10px; @@ -16,13 +16,13 @@ White: #FFF display: flex; flex-direction: row; justify-content: space-between; - height: 10%; + height: 14%; width: 100%; background: #FFF; /* border: 1px solid black; */ } .navbar img{ - padding-left: 3%; + padding: 1% 0 1% 3%; width: 18%; /* border: 1px solid red; */ } @@ -46,3 +46,27 @@ a{ font-size: 2.5em; color: #1A1A1A; } + +#first-section{ + display: flex; + flex-direction: column; + width: 100vw; + height: 150vh; + background-image: url(/images/landing.jpg); + background-size: contain; + background-repeat: no-repeat; +} +#first-section h1, #first-section p { + color: white; + text-align: center; +} +#first-section h1 { + margin-top: 25%; + margin-bottom: 3%; + font-size: 9em; +} +#first-section p { + margin: 0 25%; + font-size: 3em; + /* font-weight: 100; */ +} From 22523974117044deaf0160045341903b1ae91ce6 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Tue, 24 Sep 2024 14:22:59 +0200 Subject: [PATCH 3/5] Iteration 3: What is on Spotify section --- index.html | 39 ++++++++++++++++++++++++++++++++++++--- styles/style.css | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..9d6dd0128 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,44 @@ 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 +
+

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 +

Milions of Songs

+

There are millions of songs on Spotify

+
+
+ high quality +

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. diff --git a/styles/style.css b/styles/style.css index 5854f07bf..6af301a33 100644 --- a/styles/style.css +++ b/styles/style.css @@ -70,3 +70,43 @@ a{ font-size: 3em; /* font-weight: 100; */ } + +section h2{ + margin-top: -1.5em; + text-align: center; + font-size: 3em; +} +section hr{ + border-color: white; + background-color: #00B172; + height: 0.25em; + margin: 0 40%; +} +section .container2{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + /* border: #1A1A1A 1px solid; */ + margin: 5% 5%; + height: 25em; +} +.container2 div{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* border: #1A1A1A 1px solid; */ +} +.container2 img{ + max-width: 25% ; +} +.container2 h3{ + font-size: 3em; + text-align: center; + color: #00B172; +} +.container2 p{ + font-size: 1.8em; + text-align: center; + margin: 0 25%; +} \ No newline at end of file From cc287a228659f872b71eaac51918a8ac847192f3 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Tue, 24 Sep 2024 18:56:59 +0200 Subject: [PATCH 4/5] Iteration 4: The green section --- index.html | 17 +++++++-- styles/style.css | 97 +++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 94 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 9d6dd0128..964db0258 100644 --- a/index.html +++ b/index.html @@ -44,8 +44,19 @@

Stream Everywhere

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

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 6af301a33..4eeecd368 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,12 +6,13 @@ Green: #00B172 White: #FFF */ -body{ +body { margin: 0; padding: 0; font-size: 10px; } -.navbar{ + +.navbar { position: fixed; display: flex; flex-direction: row; @@ -21,33 +22,35 @@ body{ background: #FFF; /* border: 1px solid black; */ } -.navbar img{ + +.navbar img { padding: 1% 0 1% 3%; width: 18%; /* border: 1px solid red; */ } -.navbar ul{ + +.navbar ul { /* border: 1px solid red; */ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly; align-content: center; - width:35%; + width: 35%; } -li{ +li { list-style: none; margin-right: 4%; } -a{ +a { text-decoration: none; font-size: 2.5em; color: #1A1A1A; } -#first-section{ +#first-section { display: flex; flex-direction: column; width: 100vw; @@ -56,33 +59,39 @@ a{ background-size: contain; background-repeat: no-repeat; } -#first-section h1, #first-section p { + +#first-section h1, +#first-section p { color: white; text-align: center; } + #first-section h1 { margin-top: 25%; margin-bottom: 3%; font-size: 9em; } + #first-section p { margin: 0 25%; font-size: 3em; /* font-weight: 100; */ } -section h2{ +section h2 { margin-top: -1.5em; text-align: center; font-size: 3em; } -section hr{ + +section hr { border-color: white; background-color: #00B172; height: 0.25em; margin: 0 40%; } -section .container2{ + +section .container2 { display: flex; flex-direction: row; justify-content: space-evenly; @@ -90,23 +99,77 @@ section .container2{ margin: 5% 5%; height: 25em; } -.container2 div{ + +.container2 div { display: flex; flex-direction: column; justify-content: center; align-items: center; /* border: #1A1A1A 1px solid; */ } -.container2 img{ - max-width: 25% ; + +.container2 img { + max-width: 25%; } -.container2 h3{ + +.container2 h3 { font-size: 3em; text-align: center; color: #00B172; } -.container2 p{ + +.container2 p { font-size: 1.8em; text-align: center; margin: 0 25%; +} + +.green { + margin: 5% 5%; + height: 100vh; + background-color: #1AB16A; + background-image: url(/images/spotify-icon-white.png); + background-repeat: no-repeat; + background-size: 10%; + background-position: 50% 50%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.green div { + margin: 5% 5%; + /* border: 2px solid black; */ + display: flex; + flex-direction: column; + justify-content: center; + width: 40%; +} + +.green div img { + width: 70%; + margin: 0 auto; +} + +.green div h2 { + font-size: 4em; + text-decoration: underline; + text-underline-offset: 20%; + color: white; + position: absolute; + margin-bottom: 35%; +} + +.green div h3 { + margin: 2% 0 0 0; + padding: 2% 0 0 0; + font-size: 3em; + color: white; +} + +.green div p { + padding: 2% 25% 0 0; + margin: 2% 0 0 0; + color: white; + font-size: 2.5em; } \ No newline at end of file From 92b318d8f5d1bd75699b1bfd389b13df5d4659f0 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Tue, 24 Sep 2024 18:59:55 +0200 Subject: [PATCH 5/5] done --- styles/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 4eeecd368..65c286a5c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -172,4 +172,4 @@ section .container2 { margin: 2% 0 0 0; color: white; font-size: 2.5em; -} \ No newline at end of file +}