From 208a2768b9252e2ccfbf9b49a52cbf1a4b6736a2 Mon Sep 17 00:00:00 2001 From: ISRAEL HERNANDEZ VAZQUEZ Date: Sun, 11 Jul 2021 23:36:40 -0500 Subject: [PATCH 1/2] feat | Actualice css_clone_practice --- index.html | 62 +++++++++++++++++- styles/style.css | 165 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 225 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4a81684..00e8ba0 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,73 @@ Spotify Clone + - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the + + + + + + + + +
+ +
+ + +
+ +
+ Imagen de Fondo +
+ +
+ + + +
+

+ 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/style.css b/styles/style.css index 68b1e59..28a9039 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,167 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ + + +/* Pruebas: Hernández Vázquez Israel +div.fixed { + position: fixed; + bottom: 0; + right: 0; + width: 300px; + border: 3px solid #73AD21; + } + +ul{ + display: block; + color: black; + font-size: 40px; +} + +.cajaGrande { + width: 1000px; + height: 200px; + background: red; + color: yellow; + } + +.box { + height: 100px; + width: 100vw; + background: red; + color: white; + } + + +#one{ + position: fixed; + top: 0; + left: 0; + background: white ; + } + + +.img1 { + display: flex; + justify-content: flex-start; + width: 50vw; + margin: 0 auto; + position: relative; +} + +.Navegacion{ + display: flex; + width: 100vw; + text-align: center; + align-items: center; +} + +.box1{ + width: 50vw; + height: 100px; + background: red; + float: right; + margin: 0 auto; +} + + +.img2 { + top: 0; + left: 0; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + margin:0 auto; +} + +*/ +body{ + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + + +.cajaGrande1 { + width: 100%; + } + + +.header{ + position: fixed; + background: white; + padding-left: 1em; + padding-bottom: 1em; + width: 100%; + top:0; +} + +.header img{ + width: 20vw; + height: 10vw; + float: left; + padding-top: 1em; +} + +.header nav{ + float: right; +} + + +@media screen and ( min-width: 768px){ +.header--menu ul{ + display:flex; + list-style: none; + font-weight: bold; + gap: 40px; + padding-right: 3em; + font-size: 30px; + +} +} + + + + + +/* +.header--menu li a{ + text-decoration: none; + text-transform: uppercase; + color: var(--white); + font-weight: bold; +} +*/ + +/* +@media screen and ( min-width: 768px){ + .header{ + padding: 4em 4em 4em 4em; + } + + .header--menu ul{ + display: flex; + list-style: none; + gap: 40px; + } + .header--menu li a{ + text-decoration: none; + text-transform: uppercase; + color: var(--white); + font-weight: bold; + } + .header--menu ul li a.is-active{ + color: var(--purple); + } +} +*/ + +.Fondo img{ + align-content: center; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100vw; + margin: 0 auto; +} \ No newline at end of file From d64c993640539bfaacdfc7aa017a051bdce27e4e Mon Sep 17 00:00:00 2001 From: ISRAEL HERNANDEZ VAZQUEZ Date: Mon, 19 Jul 2021 22:47:28 -0500 Subject: [PATCH 2/2] Feat | Iteracion 2, 3 y 4 --- index.html | 132 ++++++++++++++++----------- styles/style.css | 232 +++++++++++++++++++++++------------------------ 2 files changed, 197 insertions(+), 167 deletions(-) diff --git a/index.html b/index.html index 00e8ba0..4345475 100644 --- a/index.html +++ b/index.html @@ -10,68 +10,98 @@ +
- +
+

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

+
- - -
- -
- - -
- -
- Imagen de Fondo -
+ +
+ +
+

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

diff --git a/styles/style.css b/styles/style.css index 28a9039..392df8f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,166 +4,166 @@ Text: 1A1A1A Green: #00B172 White: #FFF */ +body{ + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +.cajaGrande1 { + width: 100%; + } -/* Pruebas: Hernández Vázquez Israel -div.fixed { +.header{ position: fixed; - bottom: 0; - right: 0; - width: 300px; - border: 3px solid #73AD21; - } + background: white; + padding-left: 1em; + width: 100%; + top:0; +} -ul{ - display: block; - color: black; - font-size: 40px; +.header img{ + width: 10vw; + height: 5vw; + float: left; + padding-top: 1em; } -.cajaGrande { - width: 1000px; - height: 200px; - background: red; - color: yellow; - } +.header nav{ + float: right; +} -.box { - height: 100px; +@media screen and ( min-width: 768px){ +.header--menu ul{ + display:flex; + list-style: none; + font-weight: bold; + gap: 40px; + padding-right: 3em; + font-size: 30px; + } +} + +.Fondo img{ + align-content: center; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100vw; + margin: 0 auto; +} + +.texto1{ + position: absolute; + color: #FFF; + top: 400px; + font-size: 20px; width: 100vw; - background: red; - color: white; + margin:0 auto; + text-align: center; } +.texto1 h1{ + font-size: 70px; + } -#one{ - position: fixed; - top: 0; - left: 0; - background: white ; +.texto1 h3{ + font-size: 30px; } +.titulo{ + text-align: center; + text-decoration: underline #00B172 3px; + text-underline-position: under; + font-size: 45px; +} -.img1 { +.cajaGrande2 div.contenedor{ display: flex; - justify-content: flex-start; - width: 50vw; - margin: 0 auto; - position: relative; + padding-top: 3em; } -.Navegacion{ - display: flex; - width: 100vw; +.contenedor div.caja1{ + width: 33.33%; text-align: center; - align-items: center; + margin: 3em; } -.box1{ - width: 50vw; - height: 100px; - background: red; - float: right; - margin: 0 auto; +.contenedor div.caja2{ + width: 33.33%; + text-align: center; + margin: 3em; } - -.img2 { - top: 0; - left: 0; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; - margin:0 auto; +.contenedor div.caja3{ + width: 33.33%; + text-align: center; + margin: 3em; } -*/ -body{ - font-family: Verdana, Geneva, Tahoma, sans-serif; +.contenedor h1{ + color: #00B172; + font-size: 30px; } +.contenedor h3{ + font-size: 25px; +} -.cajaGrande1 { - width: 100%; - } +.caja1 img{ + height: 20vh; +} +.caja2 img{ + height: 20vh; +} -.header{ - position: fixed; - background: white; - padding-left: 1em; - padding-bottom: 1em; - width: 100%; - top:0; +.caja3 img{ + height: 20vh; } -.header img{ - width: 20vw; - height: 10vw; - float: left; - padding-top: 1em; +.cajaGrande3{ + display: flex; + background-color: #00B172; + color: white; + padding: 5em; + margin: 1em; + align-content: center; } -.header nav{ - float: right; +.cajaGrande3 div.Text-1{ + width: 50%; } +.Text-1 h1.titulo{ + text-decoration: underline white 3px; + text-underline-position: under; + font-size: 35px; +} -@media screen and ( min-width: 768px){ -.header--menu ul{ - display:flex; - list-style: none; - font-weight: bold; - gap: 40px; - padding-right: 3em; +.Text-1 h1{ font-size: 30px; - } + +.img-1 img{ + align-content: center; + height: 20vh; + padding-top: 20em; + padding-right: 4em; } +.img-2 img{ + height: 100vh; + padding-top: 5em; +} -/* -.header--menu li a{ - text-decoration: none; - text-transform: uppercase; - color: var(--white); - font-weight: bold; -} -*/ -/* -@media screen and ( min-width: 768px){ - .header{ - padding: 4em 4em 4em 4em; - } - .header--menu ul{ - display: flex; - list-style: none; - gap: 40px; - } - .header--menu li a{ - text-decoration: none; - text-transform: uppercase; - color: var(--white); - font-weight: bold; - } - .header--menu ul li a.is-active{ - color: var(--purple); - } -} -*/ -.Fondo img{ - align-content: center; - top: 0; - left: 0; - right: 0; - width: 100%; - height: 100vw; - margin: 0 auto; -} \ No newline at end of file + + + + + \ No newline at end of file