From 0f8f7cf9b15964c0e23688b9053e7604481873f3 Mon Sep 17 00:00:00 2001 From: Ytanlo Date: Tue, 6 Jul 2021 22:58:55 -0500 Subject: [PATCH 1/4] make | Iteracion 1 hecha, barra de navegacion creada --- index.html | 17 +++++++++++++++-- styles/style.css | 35 ++++++++++++++++++++++++++++++++++- 2 files changed, 49 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4a81684..8e04a99 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,26 @@ Spotify Clone + - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the +
+ logo de la pagina + +
+ + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 68b1e59..84fa3ed 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,37 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ + +* { + box-sizing: border-box; + list-style: none; + text-decoration: none; +} + +body { + margin: 0; + padding: 0; +} + +header { + background-color: #ffffff; + display: flex; + justify-content: space-between; + height: 12vh; + width: 100%; + padding: 12px 50px; + position: fixed; +} + +nav ul { + color: #1A1A1A; + display: flex; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.5rem; + width: 100%; +} + +nav ul li { + margin-right: 30px; +} \ No newline at end of file From f97da1c6edacb92dd67ac5b5a65bc97abd132c0e Mon Sep 17 00:00:00 2001 From: Ytanlo Date: Tue, 6 Jul 2021 23:53:15 -0500 Subject: [PATCH 2/4] feat | hice segunda iteracion, fondo de imagen con texto centrado --- index.html | 10 ++++++++-- styles/style.css | 33 +++++++++++++++++++++++++++++++-- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 8e04a99..ee7b371 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Spotify Clone + @@ -21,8 +22,13 @@ - diff --git a/styles/style.css b/styles/style.css index f9f71b7..de613d1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -14,12 +14,15 @@ White: #FFF body { margin: 0; padding: 0; + height: 100vh; + width: 100vw; } header { background-color: #ffffff; display: flex; height: 12vh; + width: 100%; justify-content: space-between; padding: 12px 50px; position: fixed; @@ -32,10 +35,10 @@ nav ul { display: flex; font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; - width: 100%; + } -nav ul li { +nav ul li{ margin-right: 30px; } @@ -65,4 +68,60 @@ main h2 { main p { font-size: 1.8rem; font-weight: 200; +} + +#whatsOn { + height: 100vh; + width: 100%; +} + +#whatsOn h3 { + color: #1A1A1A; + font-size: 2.3rem; + font-family: 'Montserrat', sans-serif; + margin-bottom: 0; + text-align: center; +} + +#whatsOn hr { + color: #00B172; + background-color: #00B172; + height: 5px; + width: 344px; +} + +.whatsOn__group { + display: flex; + justify-content: space-around; + margin-top: 100px; + +} + +.whatsOn__group div { + position: relative; + left: -2%; + +} + +.whatsOn__group div img { + position: relative; + left: 50%; + transform: translateX(-50%); + height: 120px; + width: 150px; +} + +.whatsOn__group div p { + font-family: 'Montserrat', sans-serif; + font-size: 1.6rem; + text-align: center; + margin: 10%; +} + +h6 { + color: #00B172; + font-size: 1.8rem; + font-family: 'Montserrat', sans-serif; + margin-top: 6%; + text-align: center; } \ No newline at end of file From f1a591711d5d1dc1263900943084631e80c99e14 Mon Sep 17 00:00:00 2001 From: Ytanlo Date: Wed, 7 Jul 2021 02:08:24 -0500 Subject: [PATCH 4/4] feat | Se realizo cuarta iteracion, Hice green section --- index.html | 27 ++++++++++++++++-- styles/style.css | 71 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 94 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 63393e4..b3409b7 100644 --- a/index.html +++ b/index.html @@ -50,10 +50,31 @@
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.

+
+
+ + logo de spotify + imagen de muestra de la app +
+ + --> \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index de613d1..eaf6f8b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -28,6 +28,7 @@ header { position: fixed; top: 0; width: 100%; + z-index: 1; } nav ul { @@ -44,7 +45,7 @@ nav ul li{ main { background: url("../images/landing.jpg"); - background-position-y: 40%; + background-position-y: 100%; background-size: cover; height: 100vh; width: 100%; @@ -124,4 +125,72 @@ h6 { font-family: 'Montserrat', sans-serif; margin-top: 6%; text-align: center; +} + +.green-section { + background-color: #00B172; + height: 90vh; + left: 50%; + position: relative; + transform: translateX(-50%); + width: 90%; + padding: 30px 100px; +} + +.green-section div { + width: 60%; +} + +.green-section div h3, .green-section div div p { + color: white; +} + +.green__h3 { + font-size: 2.3rem; + font-family: 'Montserrat', sans-serif; + font-weight: 500; + margin-bottom: 0; +} + +.green__h3 + hr { + color: #fff; + background-color: #fff; + height: 5px; + margin-top: 5px; + margin-left: 0; + width: 505px; +} + +.green-section div div h3:first-child { + font-size: 1.8rem; + font-family: 'Montserrat', sans-serif; + font-weight: 600; +} + +.green-section div div { + padding: 30px 0; + margin: 0 0; + height: 160px; +} + +.green-section div div p { + font-size: 1.3rem; + font-family: 'Montserrat', sans-serif; + font-weight: 200; +} + +.spotify-ico { + width: 130px; + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); +} + +.spotify-ico-app { + height: 80%; + position: absolute; + top: 55%; + right: 8%; + transform: translateY(-50%) } \ No newline at end of file