From 0b0691b3f7e4c6f417329a744a5919ca9b8cc69e Mon Sep 17 00:00:00 2001 From: Tais Taschetto Date: Thu, 4 Apr 2024 22:11:15 +0200 Subject: [PATCH 1/2] style middle section with images and flex box with space --- index.html | 55 ++++++++++++++++++++++++---- styles/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 143 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0697f92..60993f7 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,55 @@ 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?

+
+
+ music-icon +

Millions of Songs

+

There are millions 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. +
diff --git a/styles/style.css b/styles/style.css index 55efb32..921a42d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,98 @@ Green: #00B172 White: #FFF */ + +@font-face { + font-family: Montserrat; + src: url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +.header { + display: flex; + justify-content: space-between; + margin: 10px 40px; + background-color: white; + + .logo-img { + height: 40px; + width: 132px; + } +} +.navbar ul { + height: 100%; + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + gap: 20px; + align-items: center; +} +.background-img { + background-image: url(/lab-css-spotify-clone-es/images/landing.jpg); + background-color: #fff; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 110vh; + width: 100vw; + align-items: center; +} +.centered-text { + color: #fff; + font-size: 2.3em; + text-align: center; +} + +.maintitle { + margin-top: 0; +} + +.whatson { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 1.5em; + + .secondtitle { + border-bottom: 2px solid #00b172; + padding-bottom: 5px; + } + + .container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + height: 200px; + margin: 50px; + + .streaming { + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 85px; + } + } + + .container img { + align-self: center; + width: 25%; + } + + + + +} From 75ecc71749f4834f251146e3a834665908a2dd1e Mon Sep 17 00:00:00 2001 From: Tais Taschetto Date: Fri, 5 Apr 2024 00:20:45 +0200 Subject: [PATCH 2/2] final version and that is it --- index.html | 73 +++++++++++++++++++++++------- styles/style.css | 112 ++++++++++++++++++++++++++++++++++++----------- 2 files changed, 143 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 60993f7..63fae23 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,10 @@ @@ -33,27 +33,68 @@

Music for everyone.

What’s on Spotify?

- music-icon + music-icon

Millions of Songs

-

There are millions of songs on Spotify

+

There are millions of songs on Spotify

- high-quality-icon + high-quality-icon

HD Music

-

Listen to music as if you were listening live

+

Listen to music as if you were listening live

- devices-icon + devices-icon

Stream Everywhere

-

Stream music on your smartphone, tablet or computer

+

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

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 921a42d..bdae12f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,19 +7,19 @@ White: #FFF */ -@font-face { - font-family: Montserrat; - src: url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); -} - -* { +@import url("https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap") * { box-sizing: border-box; } body { margin: 0; + font-family: "Flow Circular", system-ui; } +a { + color: inherit; + text-decoration: none; +} .header { display: flex; justify-content: space-between; @@ -30,17 +30,18 @@ body { height: 40px; width: 132px; } + .navbar ul { + height: 100%; + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + gap: 20px; + align-items: center; + } } -.navbar ul { - height: 100%; - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: row; - gap: 20px; - align-items: center; -} + .background-img { background-image: url(/lab-css-spotify-clone-es/images/landing.jpg); background-color: #fff; @@ -52,15 +53,15 @@ body { height: 110vh; width: 100vw; align-items: center; -} -.centered-text { - color: #fff; - font-size: 2.3em; - text-align: center; -} -.maintitle { - margin-top: 0; + .centered-text { + color: #fff; + font-size: 2.3em; + text-align: center; + } + .maintitle { + margin-top: 0; + } } .whatson { @@ -73,6 +74,7 @@ body { .secondtitle { border-bottom: 2px solid #00b172; padding-bottom: 5px; + margin-bottom: 50px; } .container { @@ -90,14 +92,72 @@ body { justify-content: space-between; padding: 85px; } + + h3 { + color: #00b172; + margin-bottom: 0px; + } + + .p-section { + color: #1a1a1a; + font-weight: 100; + } } .container img { align-self: center; - width: 25%; + width: 30%; } +} + +.footer { + display: flex; + flex-direction: row; + background-color: #00b172; + justify-content: center; + /* gap: 100px; */ + align-items: center; + margin: 30px; + height: 800px; + h2{ + display: inline; + border-bottom: 2px solid #fff; + font-size: 2em; + } - + .white-logo { + position: absolute; + width: 9%; + + } + + .footer-text { + height: 60vh; + text-align: left; + padding: 30px 70px; + color: #fff; + letter-spacing: 0.5px; + margin-top: 30px; + } + + aside { + display: flex; + justify-content: center; + padding: 50px; + } + .app-img { + width: 60%; + height: auto; + max-height: 100vh; + } + + .footerdivs{ + text-align: left; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 10px 400px 10px 0px; + } }