From 862c9c7391558f31ba6c437de15068baac01a820 Mon Sep 17 00:00:00 2001 From: A4Revolution <91364746+AdeDeepFishing@users.noreply.github.com> Date: Sun, 18 May 2025 14:54:28 +0900 Subject: [PATCH] done the html & css clone page --- index.html | 75 ++++++++++++++++++++++--- styles/style.css | 143 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 203 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 0697f92..d24b026 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,75 @@ - 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. + +
+ + +
+ + +
+ landing img +

Music for everyone.

+

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

+
+ + +
+

What’s on Spotify?

+
+
+ Music icon +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ HD icon +

HD Music

+

Listen to music as if you were listening live

+
+
+ Device 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 Kanye West +
+
+ diff --git a/styles/style.css b/styles/style.css index 55efb32..1872127 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,137 @@ -/* -Colors: +body { + font-family: Arial, sans-serif; + margin: 0; + color: #222; + } + + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background: white; + } + + .logo { + height: 40px; + } + + .nav-links { + list-style: none; + display: flex; + gap: 20px; + } + + .nav-links a { + text-decoration: none; + color: black; + } + + .hero { + position: relative; + text-align: center; + color: white; + } + + .hero img { + width: 100%; + height: auto; + display: block; + } + + .hero h1 { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3rem; + font-weight: bold; + } + + .hero p { + position: absolute; + top: 55%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1.2rem; + line-height: 1.5; + } + + + .features { + text-align: center; + padding: 50px 20px; + background: white; + } + + .features h2 { + font-size: 32px; + margin-bottom: 40px; + text-decoration: underline; + text-decoration-color: #1db954; + } + + .feature-cards { + display: flex; + justify-content: center; + gap: 40px; + flex-wrap: wrap; + } + + .card { + width: 200px; + } + + .card img { + height: 50px; + margin-bottom: 10px; + } + + .card h3 { + color: #1db954; + } -Text: 1A1A1A -Green: #00B172 -White: #FFF - -*/ + .kanye { + background-color: #1db954; + color: white; + padding: 50px 0; + } + + .kanye-text, + .kanye-logo, + .kanye-img { + flex: 1; + padding: 20px; + } + + .kanye-logo img { + width: 80px; + display: block; + margin: 0 auto; + } + + .kanye-text { + max-width: 300px; + padding-left: 100px; + } + + .kanye-img img { + height: 300px; + } + + .kanye { + display: flex; + justify-content: center; + align-items: center; + max-width: 1200px; + margin: 0 auto; + flex-wrap: wrap; + } + + .kanye-text h2 { + border-bottom: 2px solid white; + display: inline-block; + padding-bottom: 5px; + margin-bottom: 20px; + } + \ No newline at end of file