diff --git a/index.html b/index.html index 0697f92..fee2b5f 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,102 @@ 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..af3b89e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,290 @@ 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; + margin-bottom: 5rem; +} + +.features-title-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100px; +} + +.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 { + width: 100%; + display: flex; + justify-content: space-around; + align-items: flex-start; + gap: 5rem; + padding: 0rem 2rem; +} + +.img_features { + width: auto; + height: 130px; +} +.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; + 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) { + .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; + } + .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; + } +}