From e0f691efa6bfa7b8cdbfa1cbc539fb75b878d5e0 Mon Sep 17 00:00:00 2001 From: Nestor Suarez Delgado Date: Mon, 13 Jan 2025 18:03:39 +0000 Subject: [PATCH 1/3] =?UTF-8?q?Version=201.=20N=C3=A9stor=20y=20Kilian?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 72 +++++++++++++++++++++-- styles/style.css | 146 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 211 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..25556d9b5 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,74 @@ 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. + + +
+ + + + +
+ + +
+

Music for everyone.

+

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

+
+ +
+ app +
+
+ + +
diff --git a/styles/style.css b/styles/style.css index 55efb32c6..67d817d3d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,152 @@ /* Colors: -Text: 1A1A1A +Text: 1A1A1A 26,26,26 Green: #00B172 White: #FFF */ + +.nav-bar { + position: fixed; + background-color: #FFF; +} + +.nav-bar-ul { + margin-left: 75%; + list-style-type: none; + display: flex; + flex-direction: row; + justify-content: space-around; + font-size: 20px; + color: black; + text-decoration: none; + + } + + .nav-bar-ul > li { + padding: 5px; + } + + #logo { + height: 5%; + width: 10%; + list-style-type: none; + display: flex; + flex-direction: row; + justify-content: right; + } + +#principal { + background-image: url("https://raw.githubusercontent.com/nestorsdelgado/lab-css-spotify-clone/refs/heads/master/images/landing.jpg"); + background-repeat: no-repeat; + background-size: cover; + padding-top: 50px; + height: 850px; + width: 100%; + } + + #principal h1 { + color: #FFF; + text-align: center; + padding-top: 20%; + font-weight: bold; + font-size: 50px; + } + + #principal h2 { + color: #FFF; + text-align: center; + font-weight:lighter; + font-size: 25px; + margin-bottom: 0px; + } + + #principal h3 { + color: #FFF; + text-align: center; + font-weight:lighter; + font-size: 25px; + margin-top: 0px; + + } + + .bloque { + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + + #spotify-features h2 { + text-align: center; + font-size: 40px; + } + + #spotify-features h3 { + text-align: center; + font-size: 40px; + } + + #spotify-features p { + text-align: center; + font-size: 25px; + padding-left: 20px; + padding-right: 20px; + margin-right: 20px; + margin-left: 20px; + } + + .features { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; + } + + .features img{ + width: 150px; + width: 150px; + } + + #last-section { + background-color: #00B172; + color: white; + padding: 100px; + } + + #column-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + + #last-section h3 { + font-size: 40px; + text-decoration: underline; + } + + #last-section h4 { + font-size: 35px; + } + + #last-section p { + font-size: 25px; + margin-right: 600px; + } + + #pantalla { + padding-left: 20px; + height: 100%; + width: 80%; + } + + #white-logo { + height: 150px; + width: 150px; + display: flex; + position: absolute; + top: 225%; + left: 50%; + + } From 0279534e579f533b2184ff0a5d0d31d80ae6af8d Mon Sep 17 00:00:00 2001 From: Nestor Suarez Delgado Date: Mon, 13 Jan 2025 20:25:11 +0000 Subject: [PATCH 2/3] =?UTF-8?q?Spotify=20commit.=20N=C3=A9stor=20y=20Kilia?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/style.css | 45 +++++++++++++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/styles/style.css b/styles/style.css index 67d817d3d..885331da9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -10,18 +10,29 @@ White: #FFF .nav-bar { position: fixed; background-color: #FFF; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + top: 0; + left: 0; } .nav-bar-ul { - margin-left: 75%; + margin-left: 60%; list-style-type: none; display: flex; flex-direction: row; justify-content: space-around; - font-size: 20px; - color: black; - text-decoration: none; + } + .nav-bar a { + color: rgb(0, 0, 0); + text-decoration: none; + font-size: 30px; + padding-top: 14px; + padding-bottom: 14px; + padding-right: 5px; } .nav-bar-ul > li { @@ -74,39 +85,49 @@ White: #FFF .bloque { display: flex; flex-direction: row; - justify-content: space-evenly; + justify-content: center; + align-items: center; + text-align: center; } #spotify-features h2 { text-align: center; font-size: 40px; + margin: 10px; + padding-bottom: 10px; } #spotify-features h3 { - text-align: center; font-size: 40px; + color: #00B172; + height: 50px; } #spotify-features p { - text-align: center; font-size: 25px; padding-left: 20px; padding-right: 20px; margin-right: 20px; margin-left: 20px; + margin: 0; + color: gray; + height: 10px; } .features { display: flex; flex-direction: column; - justify-content: center; - text-align: center; + text-align:center; align-items: center; + justify-content:space-between; + height: 300px; + width: 500px; + padding-bottom: 25px; } .features img{ - width: 150px; - width: 150px; + width: 175px; + height: 150px; } #last-section { @@ -147,6 +168,6 @@ White: #FFF display: flex; position: absolute; top: 225%; - left: 50%; + left: 45%; } From 1cd44a84f5e7c8aea82c6b7a70decaa6600a5829 Mon Sep 17 00:00:00 2001 From: Kilian Date: Mon, 13 Jan 2025 21:21:50 +0000 Subject: [PATCH 3/3] =?UTF-8?q?commit=20Kilian=20y=20N=C3=A9stor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 885331da9..ef26d1ff0 100644 --- a/styles/style.css +++ b/styles/style.css @@ -95,6 +95,7 @@ White: #FFF font-size: 40px; margin: 10px; padding-bottom: 10px; + text-decoration:underline #00B172; } #spotify-features h3 { @@ -167,7 +168,7 @@ White: #FFF width: 150px; display: flex; position: absolute; - top: 225%; + top: 190%; left: 45%; }