From 32928c56c23d09de697df5e1acf896dddf4812ea Mon Sep 17 00:00:00 2001 From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com> Date: Sat, 21 Sep 2024 21:00:24 +0530 Subject: [PATCH 1/2] code updates --- index.html | 52 ++++++++++++++++++++++++++++---- styles/style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0697f92..6055e6a 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,54 @@ 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. +
+ + +
+
+

What's on Spotify?

+
+
+ +

Millions of Songs

+

Lorem ipsum dolor sit amet consectetur.

+
+
+ +

HD Music

+

Lorem ipsum dolor sit amet consectetur.

+
+
+ +

Stream Everywhere

+

Lorem ipsum dolor sit amet consectetur.

+
+ + +
+ +
+ + diff --git a/styles/style.css b/styles/style.css index 55efb32..1c194b8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,81 @@ Green: #00B172 White: #FFF */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +nav{ + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 16px; + +} +nav img{ + width: 200px; + margin: 12px auto; +} +nav ul{ + display: flex; + justify-content: space-around; + align-items: center; + gap: 24px; +} +ul{ + list-style: none; +} + +.banner img { + width: 100%; + height: 100vh; +} +.banner{ + position: relative; +} +.text-container{ + color: #FFF; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + +} +.text-container h1{ + margin-bottom: 12px; +} + +.mid-container{ + width: 100%; + height: 50vh; + padding: 18px; +} +.mid-container h2{ + text-align: center; +} +.features{ + display: flex; + justify-content: space-around; + align-items: center; + padding: 6px; + margin: 24px auto; + +} +.icons img{ + width: 92px; +} +.icons{ + padding: 12px; + text-align: center; + +} +.icons h3{ + color: #00B172; + margin-top: 6px; +} +.icons p{ + color: #1A1A1A; + margin-top: 12px; +} From 0f8497c6e1cc09821f568a200a24d9bd182d09c8 Mon Sep 17 00:00:00 2001 From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com> Date: Mon, 23 Sep 2024 22:16:29 +0530 Subject: [PATCH 2/2] code updated --- .vscode/settings.json | 3 +++ index.html | 26 +++++++++++++++++++++++++- styles/style.css | 42 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 2 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 6055e6a..2c7f44d 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@