diff --git a/index.html b/index.html index 4a81684..cdacca5 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,123 @@ - + 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.

+

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/coverPage.css b/styles/coverPage.css new file mode 100644 index 0000000..0b5be56 --- /dev/null +++ b/styles/coverPage.css @@ -0,0 +1,30 @@ +.coverPage__txt h1{ + position: absolute; + top: 69%; + left: 51%; + transform: translate(-50%, -50%); + + width: 70vw; + margin: 0 auto; + color: var(--colorWhite); + font: var(--textTitle); + text-align: center; +} + +.coverPage__txt p{ + position: absolute; + top: 87%; + left: 51%; + height: 1em; + transform: translate(-50%, -50%); + + width: 55vw; + margin: 0 auto; + color: var(--colorWhite); + font: var(--textNormal); + text-align: center; +} + + + + diff --git a/styles/navBar.css b/styles/navBar.css new file mode 100644 index 0000000..f607764 --- /dev/null +++ b/styles/navBar.css @@ -0,0 +1,54 @@ + +#nav{ + background-image: url(./../images/landing.jpg) ; + height: 100em; + width: 100vw; + background-position: top; + background-size: cover; + background-repeat: no-repeat; +} + +.nav__logo{ + position: absolute; + top: 0; + left: 0; + justify-content: flex-start; + width: 100%; + height: 19%; + background-color: var(--colorWhite); + position: fixed; +} + +.nav__logo img{ + padding-left: 3em; + margin-top: 3em; + width: 22em; + height: 6em; +} + +.nav__list{ + position: absolute; + top: 0; + left: 88em; + position: fixed; +} + +.nav__list ul{ + list-style-type: none; + margin-top: 5mm; + padding: 0; + overflow: hidden; +} + +.nav__list li{ + float: left; +} + +.nav__list ul li a{ + display: block; + text-align: center; + padding: 1.4em 0.5em; + color: var(--colorText); + font: var(--textNav); + text-decoration: none; +} diff --git a/styles/screanGreen.css b/styles/screanGreen.css new file mode 100644 index 0000000..39e6425 --- /dev/null +++ b/styles/screanGreen.css @@ -0,0 +1,77 @@ +#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 68b1e59..f4c390f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,31 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ + + +@import url(./navBar.css); +@import url(./coverPage.css); +@import url(./whatsSpotify.css); +@import url(./screanGreen.css); + +:root{ + --fontBase: 'Poppins', sans-serif; + --colorText: #1A1A1A; + --colorGreen: #00B172; + --colorWhite: #FFF; + font-size: 10px; + --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); + +} + + +*{ + margin: 0; + padding: 0; +} + + diff --git a/styles/whatsSpotify.css b/styles/whatsSpotify.css new file mode 100644 index 0000000..b04bbd5 --- /dev/null +++ b/styles/whatsSpotify.css @@ -0,0 +1,54 @@ +#whatsSpot{ + display: flex; + flex-direction: column; + justify-content: center; + margin: 5em; +} + +.whatsSpot__text{ + padding-top: 1em; + padding-bottom: 2em; + font: var(--textNormal); + color: var(--colorText); + text-align: center; + +} + +.whatsSpot__div{ + display: flex; + flex-direction: row; + justify-content: center; + gap: 8em; +} + +.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; + +} + +