From b64de295c4d9708c17c7e541e89b48105ba7032f Mon Sep 17 00:00:00 2001 From: Brandon Jaimes Date: Wed, 20 Oct 2021 01:01:16 -0500 Subject: [PATCH 1/5] =?UTF-8?q?|=20Se=20tiene=20base=20de=20bloques=20y=20?= =?UTF-8?q?barra=20de=20navegaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 48 ++++++++++++++++++++++++++++++++++++++-------- styles/navBar.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 32 ++++++++++++++++++++++++++++++- 3 files changed, 120 insertions(+), 9 deletions(-) create mode 100644 styles/navBar.css diff --git a/index.html b/index.html index 4a81684..8f0a5e7 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,50 @@ - + 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. + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/styles/navBar.css b/styles/navBar.css new file mode 100644 index 0000000..1934bd4 --- /dev/null +++ b/styles/navBar.css @@ -0,0 +1,49 @@ + +#nav{ + display: flex; + flex-direction: row; + background-color: var(--colorWhite); + border: 2px solid black; + height: 8em; + width: auto; +} + +.nav__logo{ + justify-content: flex-start; + width: 50%; + height: 100%; +} + +.nav__logo img{ + padding-left: 3em; + margin: 1.5em 0; + width: 38%; + height: 65%; +} + +.nav__list{ + width: 100%; + height: 70%; + display: flex; + flex-direction: row; + justify-content:flex-end; + margin: 1.5em 0; + padding-right: 5em; +} + +.nav__list ul{ + height: 100%; + list-style-type: none; + gap: 3em; + padding: 0; +} + + +.nav__list ul li a{ + width: 100%; + padding-top:14em; + text-align: center; + color: var(--colorText); + font: var(--textNav); + text-decoration: none; +} diff --git a/styles/style.css b/styles/style.css index 68b1e59..211511b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,34 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ + + +@import url(./navBar.css); + + +:root{ + --fontBase: 'Poppins', sans-serif; + --colorText: #1A1A1A; + --colorGreen: #00B172; + --colorWhite: #FFF; + font-size: 10px; + --textNav: 400 2em/1em var(--fontBase); +} + + +*{ + margin: 0; + padding: 0; +} + + + + +/* +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. */ \ No newline at end of file From 79c5727567759e4692b3f0152499ed722445b466 Mon Sep 17 00:00:00 2001 From: Brandon Jaimes Date: Thu, 21 Oct 2021 00:46:39 -0500 Subject: [PATCH 2/5] =?UTF-8?q?|=20Se=20corrigi=C3=B3=20barra=20nav.=20Se?= =?UTF-8?q?=20agreg=C3=B3=20Cover=20Page=20(Iteraci=C3=B3n2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 70 ++++++++++++++++++++++++++------------------ styles/coverPage.css | 32 ++++++++++++++++++++ styles/navBar.css | 48 +++++++++++++++--------------- styles/style.css | 29 +++++++++++++----- 4 files changed, 120 insertions(+), 59 deletions(-) create mode 100644 styles/coverPage.css diff --git a/index.html b/index.html index 8f0a5e7..ac203e2 100644 --- a/index.html +++ b/index.html @@ -9,42 +9,56 @@ - - - + - -
-

hola

+
+
+

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

+
+
+ + +
+
diff --git a/styles/navBar.css b/styles/navBar.css index a09473c..f3b89f1 100644 --- a/styles/navBar.css +++ b/styles/navBar.css @@ -6,6 +6,7 @@ background-position: top; background-size: cover; background-repeat: no-repeat; + } .nav__logo{ @@ -16,6 +17,7 @@ width: 100%; height: 19%; background-color: var(--colorWhite); + position: fixed; } .nav__logo img{ @@ -29,6 +31,7 @@ position: absolute; top: 0; left: 88em; + position: fixed; } .nav__list ul{ diff --git a/styles/style.css b/styles/style.css index 56ac681..b746b14 100644 --- a/styles/style.css +++ b/styles/style.css @@ -8,6 +8,7 @@ White: #FFF @import url(./navBar.css); @import url(./coverPage.css); +@import url(./whatsSpotify.css); :root{ --fontBase: 'Poppins', sans-serif; @@ -18,6 +19,8 @@ White: #FFF --textNav: 400 2.3em/1em var(--fontBase); --textNormal: 300 2.8em/1.4em var(--fontBase); --textTitle: 500 8.2em/1em var(--fontBase); + --textDescrip: 200 2.2em/1.2em var(--fontBase); + } @@ -36,6 +39,7 @@ Spotify is now free on mobile, tablet and computer. Listen to the right music, w 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 diff --git a/styles/whatsSpotify.css b/styles/whatsSpotify.css new file mode 100644 index 0000000..f786070 --- /dev/null +++ b/styles/whatsSpotify.css @@ -0,0 +1,55 @@ +#whatsSpot{ + display: flex; + flex-direction: column; + justify-content: center; + margin: 5em; +} + + +.whatsSpot__text{ + padding-top: 1em; + padding-bottom: 4em; + font: var(--textNormal); + color: var(--colorText); + text-align: center; + +} + +.whatsSpot__div{ + display: flex; + flex-direction: row; + justify-content: center; + gap: 10em; +} + +.whatsSpot__div-element{ + width: 30em; + height: 30em; + justify-content: center; +} + +.whatsSpot__div-element-img--img{ + width: 10em; + height: 10em; + margin: auto; + display: block; +} + + +.whatsSpot__div-element-txt h2{ + font: var(--textNormal); + color: var(--colorGreen); + text-align: center; + font-weight: 700; + padding: 1em 0; + +} + +.whatsSpot__div-element-txt p{ + font: var(--textDescrip); + color: var(--colorText); + text-align: center; + +} + + From 4a53d048bab4b769cf89f348958c8ff7a7d1f74e Mon Sep 17 00:00:00 2001 From: Brandon Jaimes Date: Sat, 23 Oct 2021 20:15:08 -0500 Subject: [PATCH 4/5] =?UTF-8?q?|=20Se=20agreg=C3=B3=20secci=C3=B3n=20verde?= =?UTF-8?q?=20(iteraci=C3=B3n=204)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 33 ++++++++++++++--- styles/screanGreen.css | 80 +++++++++++++++++++++++++++++++++++++++++ styles/style.css | 3 +- styles/whatsSpotify.css | 4 +-- 4 files changed, 112 insertions(+), 8 deletions(-) create mode 100644 styles/screanGreen.css diff --git a/index.html b/index.html index 531e59c..77fe98b 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,6 @@

Music for everyone.

-

What’s on Spotify?

@@ -89,10 +88,34 @@

Stream Everywhere

- - -
-

hola

+
+
+
+
+

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/screanGreen.css b/styles/screanGreen.css new file mode 100644 index 0000000..6b326d3 --- /dev/null +++ b/styles/screanGreen.css @@ -0,0 +1,80 @@ +#seccionGreen{ + margin: 0em 3em; + background-color: var(--colorGreen); + padding: 10em 8em; +} + +.seccionGreen__div{ + display: flex; + flex-direction: row; + align-items: center; +} + + +.seccionGreen__div-txt{ + justify-content: flex-start; + display: inline-block; + width: 42em; +} + + +.seccionGreen__div-txt-tittle h2{ + font: var(--textNormal); + color: var(--colorWhite); + font-weight: 700; + display: block; + border-bottom: 2px solid white; + text-align: center; +} + +.seccionGreen__div-txt-elem{ + color: var(--colorWhite); + text-align: left; + margin: 2em 0; + width: 42em; + display: inline-block; +} + +.seccionGreen__div-txt-elem h2{ + font: var(--textNormal); + font-weight: 500; + margin-top: 1em; + margin-bottom: 1em; +} + +.seccionGreen__div-txt-elem p{ + font: var(--textDescrip); + color: var(--colorWhite); + font-size: 2em; + margin-bottom: 0; +} + +.seccionGreen__div-back{ + display: block; + justify-content: center; +} + +.seccionGreen__div-back--img{ + width: 12em; + height: 12em; + margin: auto; + display: block; + position: relative; + top: 40%; + left: 1em; +} + + + +.seccionGreen__div-img{ + display: block; + justify-content: flex-end; +} + +.seccionGreen__div-img--img{ + width: 35em; + height: 60em; + margin-left: 18em; + margin-top: 5em; + +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index b746b14..2207716 100644 --- a/styles/style.css +++ b/styles/style.css @@ -9,6 +9,7 @@ White: #FFF @import url(./navBar.css); @import url(./coverPage.css); @import url(./whatsSpotify.css); +@import url(./screanGreen.css); :root{ --fontBase: 'Poppins', sans-serif; @@ -39,11 +40,11 @@ Spotify is now free on mobile, tablet and computer. Listen to the right music, w 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. diff --git a/styles/whatsSpotify.css b/styles/whatsSpotify.css index f786070..1d4cc70 100644 --- a/styles/whatsSpotify.css +++ b/styles/whatsSpotify.css @@ -8,7 +8,7 @@ .whatsSpot__text{ padding-top: 1em; - padding-bottom: 4em; + padding-bottom: 2em; font: var(--textNormal); color: var(--colorText); text-align: center; @@ -19,7 +19,7 @@ display: flex; flex-direction: row; justify-content: center; - gap: 10em; + gap: 8em; } .whatsSpot__div-element{ From 4e29ed67abd3141a950c1d4ec4ae466b1895d48a Mon Sep 17 00:00:00 2001 From: Brandon Jaimes Date: Sat, 23 Oct 2021 20:20:52 -0500 Subject: [PATCH 5/5] done --- index.html | 2 +- styles/coverPage.css | 2 -- styles/navBar.css | 2 +- styles/screanGreen.css | 3 --- styles/style.css | 21 --------------------- styles/whatsSpotify.css | 1 - 6 files changed, 2 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 77fe98b..cdacca5 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Spotify Clone - + diff --git a/styles/coverPage.css b/styles/coverPage.css index 7e83aa4..0b5be56 100644 --- a/styles/coverPage.css +++ b/styles/coverPage.css @@ -1,5 +1,3 @@ - - .coverPage__txt h1{ position: absolute; top: 69%; diff --git a/styles/navBar.css b/styles/navBar.css index f3b89f1..f607764 100644 --- a/styles/navBar.css +++ b/styles/navBar.css @@ -6,7 +6,6 @@ background-position: top; background-size: cover; background-repeat: no-repeat; - } .nav__logo{ @@ -44,6 +43,7 @@ .nav__list li{ float: left; } + .nav__list ul li a{ display: block; text-align: center; diff --git a/styles/screanGreen.css b/styles/screanGreen.css index 6b326d3..39e6425 100644 --- a/styles/screanGreen.css +++ b/styles/screanGreen.css @@ -64,8 +64,6 @@ left: 1em; } - - .seccionGreen__div-img{ display: block; justify-content: flex-end; @@ -76,5 +74,4 @@ height: 60em; margin-left: 18em; margin-top: 5em; - } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 2207716..f4c390f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -31,24 +31,3 @@ White: #FFF } - - -/* -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. */ \ No newline at end of file diff --git a/styles/whatsSpotify.css b/styles/whatsSpotify.css index 1d4cc70..b04bbd5 100644 --- a/styles/whatsSpotify.css +++ b/styles/whatsSpotify.css @@ -5,7 +5,6 @@ margin: 5em; } - .whatsSpot__text{ padding-top: 1em; padding-bottom: 2em;