From 68b5606a9a465aaab17b245fa0f84dd7d7942528 Mon Sep 17 00:00:00 2001 From: Salo Conde Date: Wed, 10 Apr 2024 20:08:04 +0200 Subject: [PATCH] spotylab --- index.html | 75 ++++++++++++++++++++++++++++---- styles/style.css | 110 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 176 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 0697f92..4b2aba7 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,71 @@ 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. - - +
+ + +
+
+
+ concert +

Music for everyone.

+

Spotify is now free on mobile, tablet and computer. Listen to the right music, wherever you are.

+
+
+
+

What´s on Spotify?

+
+
+ Speaker +

Millions of Songs

+

There are millions of songs on Spotify.

+
+
+ HD Music Icon +

HD Music

+

Listen to music as if you were listening live.

+
+
+ Mobile Icon +

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 55efb32..8fda931 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,113 @@ Green: #00B172 White: #FFF */ +body { + font-family: Arial, sans-serif; + font-size: 22px; + margin: 0; + padding: 0; + color: 1A1A1A; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +header { + color: #fff; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + width: 100%; + z-index: 100; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; +} + + +.buttons { + display: flex; + flex-direction: column; + align-items: center; +} + +.imgbutt{ + width: 50px; + height: 50px; + margin-bottom: 10px; +} + +.speaker{ + border: 2px solid #f9d71c; + padding: 20px; + margin: 20px; + background-color: #fff9e5; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.music{ + border: 2px solid #f9d71c; + padding: 20px; + margin: 20px; + background-color: #fff9e5; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.stream{ + border: 2px solid #f9d71c; + padding: 20px; + margin: 20px; + background-color: #fff9e5; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.firsth2{ + color: black; + font-weight: bold; +} + +.greenh2{ + color: #00B172; + font-weight: bold; +} + +footer { + padding: 20px; +} + +.feature { + background-color: #00B172; + padding: 20px; + margin: 20px; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.feature h2 { + font-size: 18px; + font-weight: bold; +} + +.spotify-player img { + width: 100px; + height: 100px; + border-radius: 50%; + margin-bottom: 10px; +} + +@media (min-width: 768px) { + .features { + flex-direction: row; + justify-content: space-between; + } \ No newline at end of file