diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..87848fe Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index 0697f92..0c1fe37 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,83 @@ 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.
+ + +spotify-logo-alone + +spotify-app +
+ + diff --git a/styles/style.css b/styles/style.css index 55efb32..c14efee 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,208 @@ Green: #00B172 White: #FFF */ + +ul { + list-style-type: none; +} + +.navbar { + display: flex; + padding: 50px; + top: 0; + flex-wrap: wrap; + flex-direction: row; + align-content: center; + justify-content: space-between; + align-items: center; +} + +.spotify-logo { + width: 400px; + height: 150px; + color: rgb(67, 151, 67); + +} + +.nav-links { + display: flex; + align-items: flex-end; + align-content: space-around; + flex-direction: row; + gap: 40px; + font-size: 40px; +} + +.img-back { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + background-image: url("../images/landing.jpg"); + width:auto; + height: 1500px; + align-content:center + +} + +header { + justify-content: center; +} + +h1 { + display: flex; + font-size:100px; + font-family: system-ui, sans-serif; + padding: 10px; + margin-bottom: 0px; + word-spacing: 15px; + color: white; + align-items: center; + align-content: center; + text-align: center; + justify-content: center; +} + + +h2 { + display: flex; + margin-top:5px; + font-size:700px; + font-family: system-ui, sans-serif; + color:white; + align-items: center; + text-align: center; + justify-content: flex-end; + flex-direction: column; + +} + +h3 { + align-items: center; + text-align: center; + font-size: 50px; + margin: 50px; + font-family: system-ui, sans-serif; +} + +.h3 { + color: black; + text-decoration: underline; + text-decoration-color: green; + gap:15px; + margin:10px; + text-decoration-thickness: 10px; + text-decoration-style:solid; +} + +.box-container { + display: flex; + gap: 20px; + align-content: space-around; + flex-wrap: nowrap; + flex-direction: row; + justify-content: center; + height: 500px; + + +} + + +.box { + + padding: 120px; /* Espacio interno alrededor del contenido de cada caja */ + width: 400px; + height:1000px; + text-align: center; + font-size: 30px; + + +} + +h4 { + color: green; + font-family: system-ui, sans-serif; +font-size: 30px; + +} + + +.logo { + width: 80px; /* Ajusta el tamaño del logo según sea necesario */ + height: auto; /* Mantiene la proporción del logo */ + margin-bottom: 15px; /* Espacio debajo del logo */ +} + +ul{ + +text-align:left; + +} + +.container { + margin-top: none; + margin-left:30px; + font-size: 120px; + background-color: rgb(67, 151, 67); + text-align: left; + color:white; + padding:500px: + /* Tamaño máximo que no excederá */ + height: 100px; /* Ajusta la altura de acuerdo a tu diseño */ + margin: 0 auto; /* Centraliza horizontalmente si es menor que el contenedor padre */ + padding: 10px; + margin:60px 60px 60px 60px; + +} + +h5 { + align-items: stretch; + gap: none; + justify-content: left; + align-content: space-around; + flex-direction: column; + font-size: 60px; + color: white; + font-family: system-ui, sans-serif; +margin-left:40px; +padding:70px; + +} + +p { + gap:700px: + padding:15px; + color:white + font-family: system-ui, sans-serif; + font-size: 35px; + text-align:center; + margin-left:30px; +} + +.search-browse-discover { + + font-family: system-ui, sans-serif; + font-size: 60px; + text-align: left; + text-align: column; + padding:none; +} + +.spotify-logo-alone { + display: flex; + width: 250px; + margin-left: 1700px; + +} + +.spotify-app { + display: flex; + position: relative; + margin-left: 1800px; + width: 1000px; + height: auto; + top: -1800px; + margin-right: 2000px; + margin-left: 2500px; + +}