diff --git a/index.html b/index.html index 0697f92..a83d5c6 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,110 @@ - Spotify Clone - + Spotify + - 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. +

+ Landing + + +
+ +
+

What’s on Spotify?

+
+
+ Music Icon +

Millions of songs

+

There are millions of songs on Spotify.

+
+
+ HD Music Icon +

HD Music

+

Listen to music as if you were listening live.

+
+
+ Devices Icon +

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

+
+ +
+ Spotify App +
+ +
+ +
+
+ + + + + + + + + + + + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c17befd --- /dev/null +++ b/styles.css @@ -0,0 +1,240 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700'); +html, +body { + margin: 0; + padding: 0; +} + +/* +Colors: + +Text: 1A1A1A +Green: #00B172 +White: #FFF + +*/ + + + +body { + font-family: 'Roboto'; + font-size: 10px; + font-weight: 300; + } + +h1 { + + position: absolute; + margin: 350px; + padding: 10; + font-size: 10em; + color: white; + z-index:1; + text-align: center; + transform: translateX(20%); + + +} + + + + +.nav-bar { + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: white; + padding: 10px 20px; + z-index: 10; + } + + .logo img { + height: 70px; + width: auto; + } + + .nav-bar-ul { + display: flex; + list-style-type: none; + font-size: 20px; + margin: 0; + padding: 0; + margin-right: 50px; + } + + .nav-bar-ul li { + margin-left: 20px; + } + + .nav-bar-ul a { + text-decoration: none; + color: black; + font-weight: bold; + } + + + .header { + background: url('images/landing.jpg') no-repeat center center; + background-size: contain; + background-position: center center; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + overflow: hidden; +} + + + .quote { + text-align: center; + font-size: 2.5em; + color: white; + position: absolute; + bottom: 100px; + left: 510px; + + } + + blockquote { + + padding: 10px; + padding: 1px; + font-size: 1.5em + + } + + + + /* Estilos para la nueva sección */ +.spotify-info { + padding: 50px 20px; + background-color: #f7f7f7; + text-align: center; + } + + .spotify-info h2 { + font-size: 3rem; + text-decoration: underline; + color: black; + text-decoration-color: #00b172; + margin-bottom: 30px; + } + + .info-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 20px; + } + + .info-item { + flex: 1 1 28%; + background-color: transparent; + padding: 20px; + box-shadow: none; + text-align: center; + border-radius: 8px; + position: relative; + aspect-ratio: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin: 0 15px; + } + + .info-item img { + width: 50%px; + height: 150px; + object-fit: cover; + margin-bottom: 20px; + } + + .info-item h3 { + font-size: 3rem; + margin-bottom: 10px; + color: #00b172; + } + + .info-item p { + font-size: 2.7rem; + text-align: center; + color: #333; + margin: 0 20px; + margin-top: 20px; + } + + + .green-section { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #1DB954; + color: white; + padding: 80px 50px; + height: 800px; + position: relative; + } + + .text-container { + width: 45%; + text-align: left; + margin: 60px; + + } + + .main-text { + font-size: 2.5rem; + text-decoration: underline; + font-weight: bold; + margin-bottom: 30px; + } + + + + h2 { + font-size: 2rem; + margin-bottom: 10px; + } + + p { + font-size: 1.4rem; + margin-bottom: 90px; + } + + .image-container { + position: relative; + width: 35%; + display: flex; + justify-content: center; + } + + .spotify-image { + width: 100%; + height: auto; + max-width: 400px; + margin-top: 90px; + } + + .logo-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + + } + + .spotify-logo { + width: 150px; + height: auto; +} + + + + + diff --git a/styles/style.css b/styles/style.css deleted file mode 100644 index 55efb32..0000000 --- a/styles/style.css +++ /dev/null @@ -1,8 +0,0 @@ -/* -Colors: - -Text: 1A1A1A -Green: #00B172 -White: #FFF - -*/