From a9af8fc63966e94ba8ef78b45d13fe7f97130695 Mon Sep 17 00:00:00 2001 From: Gengsu07 Date: Wed, 20 Nov 2024 14:38:26 +0700 Subject: [PATCH 1/2] donefill features section --- index.html | 96 ++++++++++++++++++++++++++-- styles/style.css | 162 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 252 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0697f92..346059b 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,97 @@ 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. + +
+ landingpage +

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

+
+
+
+ +
+
+
diff --git a/styles/style.css b/styles/style.css index 55efb32..d230d55 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,165 @@ Green: #00B172 White: #FFF */ +* { + color: #1a1a1a; + margin: 0px; + padding: 0px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: medium; + letter-spacing: 1px; +} + +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fff; + position: fixed; + width: 100%; + padding: 1rem 0.5rem; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} +.img_logo { + margin-left: 1rem; +} +.nav-links { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 3rem; + margin-right: 3rem; + list-style: none; +} +.nav-links > li > a { + text-decoration: none; +} +.hero { + width: 100%; + position: relative; +} +.img_hero { + width: 100%; + object-fit: cover; + max-height: 95vh; + /* position: relative; */ +} +.hero > h1 { + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: #fff; + font-size: 5vw; + font-weight: 500; + z-index: 1; +} +.hero > p { + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: #fff; + z-index: 1; + font-size: 2vw; + font-weight: 100; +} + +.features { + margin: 2rem 1rem; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5rem 2rem; +} + +.features-title-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100px; + max-width: 90%; +} + +.features-title { + font-size: 2.5rem; + font-weight: 600; + text-align: center; + display: inline-block; + position: relative; +} +.features-title::after { + content: ""; + position: absolute; + bottom: -10px; + left: 0; + width: 100%; + height: 5px; + background-color: #00b172; +} + +.features-item-container { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 5rem; + max-width: 90%; +} + +.img_features { + width: auto; + height: 100px; +} +.features-item { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + flex: 1; + text-align: center; + gap: 1rem; + max-width: 20rem; + height: 100%; +} + +.features-item-title { + font-size: 32px; + font-weight: 700; + color: #00b172; + margin: 0; +} +.features-item-text { + font-weight: 100; + font-size: 1.5rem; + line-height: 2rem; + letter-spacing: 1px; + margin-top: 10px; +} +.mockup-container { + background-color: #00b172; + margin: 2rem; +} + +@media (max-width: 425px) { + .features-item-container { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + gap: 5rem; + max-width: 90%; + } + .nav-links { + display: none; + } +} From a8f268e810b19182865d50d8c8076c9973c651a7 Mon Sep 17 00:00:00 2001 From: Gengsu07 Date: Wed, 20 Nov 2024 17:50:43 +0700 Subject: [PATCH 2/2] done plus mobile friendly --- index.html | 19 ++++--- styles/style.css | 133 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 141 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 346059b..fee2b5f 100644 --- a/index.html +++ b/index.html @@ -75,26 +75,31 @@

Stream Everywhere

It’s as yeezy as Kanye West.

-

Search

-

Know what you want to listen to? Just search and hit play.

+

Search

+

+ Know what you want to listen to? Just search and hit play. +

-

Browse

-

+

Browse

+

Check out the latest charts, brand new releases and great playlists for right now.

-

Discover

-

+

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 d230d55..af3b89e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -85,6 +85,7 @@ White: #FFF justify-content: center; align-items: center; gap: 5rem 2rem; + margin-bottom: 5rem; } .features-title-container { @@ -93,7 +94,6 @@ White: #FFF justify-content: center; align-items: center; height: 100px; - max-width: 90%; } .features-title { @@ -114,16 +114,17 @@ White: #FFF } .features-item-container { + width: 100%; display: flex; - justify-content: space-between; + justify-content: space-around; align-items: flex-start; gap: 5rem; - max-width: 90%; + padding: 0rem 2rem; } .img_features { width: auto; - height: 100px; + height: 130px; } .features-item { display: flex; @@ -153,6 +154,78 @@ White: #FFF .mockup-container { background-color: #00b172; margin: 2rem; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + gap: 5rem; + padding: 2rem 5rem; + position: relative; +} +.img_mockup { + max-height: 40vw; + width: auto; +} +.img-spotifywhite { + width: 10vw; + height: auto; +} +.mockup-logowhite { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 30%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.mockup-image-block { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + gap: 2rem; + max-width: 25vw; +} +.mockup_text-block { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + gap: 3rem; + margin: 3rem 0rem; +} + +.mockup-title { + font-weight: 500; + font-size: 3vw; + color: #fff; + position: relative; +} +.mockup-title::after { + content: ""; + height: 3px; + background-color: #fff; + position: absolute; + display: block; + width: 100%; + bottom: -10px; +} +.mockup-text-container { + max-width: 25vw; +} +.mockup-text-title { + font-size: 2vw; + font-weight: 700; + color: #fff; + margin-bottom: 1rem; +} +.mockup-text-description { + color: #fff; + font-size: 1.5vw; + font-weight: 100; } @media (max-width: 425px) { @@ -167,4 +240,56 @@ White: #FFF .nav-links { display: none; } + .mockup-container { + background-color: #00b172; + margin: 2rem; + padding: 1rem; + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + align-items: center; + gap: 5rem; + padding: 2rem 5rem; + position: relative; + } + .mockup-logowhite { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 30%; + position: absolute; + left: 50%; + top: 37%; + transform: translate(-50%, -50%); + } + .mockup-text-title { + font-size: 5vw; + font-weight: 700; + color: #fff; + margin-bottom: 1rem; + } + .mockup-text-description { + color: #fff; + font-size: 3vw; + font-weight: 100; + } + .img_mockup { + max-height: 80vw; + width: auto; + } + .mockup-image-block { + align-items: center; + } + .mockup-title { + font-size: 5vw; + text-align: center; + } + .mockup_text-block { + align-items: center; + } + .mockup-text-container { + text-align: center; + max-width: 50vw; + } }