From 39df588f0aab3103fbaf9c1f4ae82a0ee67455bd Mon Sep 17 00:00:00 2001 From: Jose Antonio Date: Wed, 7 Jul 2021 20:48:47 -0500 Subject: [PATCH 1/4] =?UTF-8?q?feat|barra=20de=20navegaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 16 ++++++++++++++++ styles/style.css | 37 ++++++++++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4a81684..78a160c 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,25 @@ Spotify Clone + + +
+
+ +
+
+
    +
  • Premium
    • +
  • Discover
    • +
  • Help
    • +
  • Download
    • + +
+
+
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 diff --git a/styles/style.css b/styles/style.css index 68b1e59..0a122f6 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,39 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ +.barrafija{ + + width: 60vw; + height: 10vh; + background-color: #FFF; + order: 1; +} + +#aboutMe{ + display: flex; + position: fixed; + flex-direction: row; + justify-content: flex-start; +} +.imagenspot{ + width: 15vw; + height: 8vh; + padding-top: 1vh; + padding-left: 15px; + +} +.horizontal{ + display: inline; + font-family: 'Encode Sans SC', sans-serif; + font-size:medium; + margin-left: 20px; +} +.segundo{ + order: 2; + padding-left: 15vh; + padding-top: 1.5vh; + height: 10vh; + width: 40vw; + background-color:#FFF; +} From 97df42607aeda838e73cea6874702ef470d216c5 Mon Sep 17 00:00:00 2001 From: Jose Antonio Date: Thu, 8 Jul 2021 01:54:11 -0500 Subject: [PATCH 2/4] feat|Fondo de Imagen --- index.html | 18 +++++++++++------- styles/style.css | 33 +++++++++++++++++++++++++++++++-- 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 78a160c..9c39a10 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ - + +
@@ -24,11 +25,14 @@
- 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.

+
+ +
+ \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 0a122f6..2afb41b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -8,7 +8,8 @@ White: #FFF width: 60vw; height: 10vh; - background-color: #FFF; + background-color:blue; + order: 1; } @@ -17,6 +18,8 @@ White: #FFF position: fixed; flex-direction: row; justify-content: flex-start; + + } .imagenspot{ width: 15vw; @@ -30,12 +33,38 @@ White: #FFF font-family: 'Encode Sans SC', sans-serif; font-size:medium; margin-left: 20px; + } .segundo{ order: 2; padding-left: 15vh; - padding-top: 1.5vh; + height: 10vh; width: 40vw; background-color:#FFF; } +.fondoetiqueta{ + background-image: url("/images/landing.jpg"); + margin-top: 0%; + background-size:100vw 90vh; + width: 100vw; + height:90vh; +} +.texto{ + + margin-top: 0%; + padding-top: 25vh; + color: white; + text-align: center; + font-size: 70px; +} +.textopequeno{ + + color: white; + text-align: center; + font-size: 25px; +} +.tamanosection{ + + padding-top: 10vh; +} From 04a95998a95ebaa1d4493f24cb58864869926a12 Mon Sep 17 00:00:00 2001 From: Jose Antonio Date: Thu, 8 Jul 2021 22:25:17 -0500 Subject: [PATCH 3/4] =?UTF-8?q?feat|secci=C3=B3n=20de=20Spotify?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 +++ index.html | 24 ++++++++++++++++++++++-- styles/style.css | 31 ++++++++++++++++++++++++++----- 3 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 9c39a10..25ce265 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -
+
@@ -33,6 +33,26 @@

Music for everyone.

- +
+

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

+
+
+ \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 2afb41b..e5f85ab 100644 --- a/styles/style.css +++ b/styles/style.css @@ -12,13 +12,17 @@ White: #FFF order: 1; } - +#iconos{ + display: flex; + + flex-direction: row; + justify-content: center; +} #aboutMe{ display: flex; - position: fixed; + flex-direction: row; justify-content: flex-start; - } .imagenspot{ @@ -44,7 +48,7 @@ White: #FFF background-color:#FFF; } .fondoetiqueta{ - background-image: url("/images/landing.jpg"); + background-image: url("../images/landing.jpg"); margin-top: 0%; background-size:100vw 90vh; width: 100vw; @@ -65,6 +69,23 @@ White: #FFF font-size: 25px; } .tamanosection{ - padding-top: 10vh; } +.texto_sub{ + text-align: center; + text-decoration: underline #00B172; +} +.texto_imagen{ + width: 20vw; + height: 50vh; + text-align: center; + margin-right: 15vh; + margin-left: 15vh; +} +.redimensionar_Icon{ + width: 20vw; + height: 20vh; +} +.verde{ + color: #00B172; +} \ No newline at end of file From c43a89f777b8a74083a8e336de468c14eb73a9eb Mon Sep 17 00:00:00 2001 From: Jose Antonio Date: Fri, 9 Jul 2021 00:48:30 -0500 Subject: [PATCH 4/4] =?UTF-8?q?feat|La=20secci=C3=B3n=20verde?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/launch.json | 15 +++++++++ .vscode/settings.json | 3 -- index.html | 41 +++++++++++++++++++---- styles/style.css | 77 +++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 124 insertions(+), 12 deletions(-) create mode 100644 .vscode/launch.json delete mode 100644 .vscode/settings.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..7a9dfa0 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6f3a291..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file diff --git a/index.html b/index.html index 25ce265..c67624c 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,13 @@ Spotify Clone - - + + + + + + + @@ -33,26 +38,48 @@

Music for everyone.

-
+

What’s on Spotify?

Millions of Songs

-

There are millions of songs on Spotify

+

There are millions of songs on Spotify

HD Music

-

Listen to music as if you were listening live

+

Listen to music as if you were listening live

Stream Everywhere

-

Stream music on your smartphone, tablet or computer

+

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.

+
+
+ Icono Spotify blanco +
+
+ Imagen de la aplicación Spotify
- \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index e5f85ab..ca27683 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,17 +4,41 @@ Text: 1A1A1A Green: #00B172 White: #FFF */ +.margen{ + margin-top: 10vh; +} +body{ + margin-bottom: 0%; +} .barrafija{ width: 60vw; height: 10vh; - background-color:blue; + background-color: white; order: 1; } +.informacion{ + width: 40vw; + height: 93vh; + margin-top: 7vh; + margin-left: 5vw; + +} +#especificaciones{ + display: flex; + flex-direction: row; + + margin-left: 2.5vw; + margin-right: 2.5vw; + background-color: #00B172; + width: 95vw; + height: 100vh; +} + #iconos{ display: flex; - + margin-top: 10vh; flex-direction: row; justify-content: center; } @@ -59,6 +83,8 @@ White: #FFF margin-top: 0%; padding-top: 25vh; color: white; + font-family: 'Encode Sans SC', sans-serif; + font-family: 'Open Sans', sans-serif; text-align: center; font-size: 70px; } @@ -74,6 +100,7 @@ White: #FFF .texto_sub{ text-align: center; text-decoration: underline #00B172; + } .texto_imagen{ width: 20vw; @@ -88,4 +115,50 @@ White: #FFF } .verde{ color: #00B172; +} +.fuente_icono{ + font-family: 'Encode Sans SC', sans-serif; + font-family: 'Open Sans', sans-serif; + color:grey; +} +.texto_grande{ + color: #FFF; + font-family: 'Encode Sans SC', sans-serif; +font-family: 'Open Sans', sans-serif; + font-size: 35px; + text-decoration: underline; +} +.texto_informacion{ + color: #FFF; + font-family: 'Encode Sans SC', sans-serif; +font-family: 'Open Sans', sans-serif; + font-size: 22px; +} +.texto_informacion_pequeno{ + color: #FFF; + font-family: 'Encode Sans SC', sans-serif; +font-family: 'Open Sans', sans-serif; + font-size: 16px; +} +.reducir_imagen{ + width: 20vh; + height: 20vh; +} +.informacion--imagen{ + width: 10vw; + height: 50vh; + padding-top: 40vh; + +} +.informacion--album{ + width: 40 vw; + height: 80vh; + margin-top: 10vh; + margin-bottom: 10vh; + margin-left: 10vw; + margin-right: 5vw; +} +.informacion--album--imagen{ + width: 30vw; + height: 80vh; } \ No newline at end of file