From 2417ba691e76a9058e15918f708fc54593a0d6e1 Mon Sep 17 00:00:00 2001 From: sosina14 Date: Sun, 20 Apr 2025 22:36:21 +0300 Subject: [PATCH 1/2] updates --- images/{high-quality-icon.png => 1.png} | Bin index.html | 56 +++++++++++---- styles/style.css | 90 ++++++++++++++++++++++++ 3 files changed, 132 insertions(+), 14 deletions(-) rename images/{high-quality-icon.png => 1.png} (100%) diff --git a/images/high-quality-icon.png b/images/1.png similarity index 100% rename from images/high-quality-icon.png rename to images/1.png diff --git a/index.html b/index.html index 0697f92..1766504 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,46 @@ - - - - + + + + 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. - + + + +
+
Premium Discover Help Download
+

Music for everyone.


Spotify is now free on moblie, 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

+
+
+ music + +
+
+ phone + +
+
+
+ spotify-logo-white + spotify-logo-white +

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.

+ +
+
+ + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32..1c5ea09 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,93 @@ Green: #00B172 White: #FFF */ + +.main{ + background-color: rgb(64, 60, 62); + border: 5px solid black; +} +.nav{ + /* margin: 50px; */ +} +.a{ + background-color: white; + margin: 10px; + border: 2px solid black; +} + + +.b{ + background-image: url('../images/landing.jpg'); + background-size: cover; /* This makes the image cover the entire div */ + background-position: center; /* Centers the image */ + background-repeat: no-repeat; /* Prevents the image from repeating */ + width: 97vh; /* Ensure the div has some width */ + height: 100vh; + color: white; +} +.c{ + background-color: rgb(251, 251, 245); + width: 97vh; /* Ensure the div has some width */ + height: 100vh; + +} +.d{ + background-color: rgb(58, 198, 109); + width: 97vh; + height: 100vh; + color: white; +} +.m{ + text-align: center; + font-size: 50px; + padding-top: 100px; + font-weight: bold; +} +.m2{ + text-align: center; + color: white; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + font-weight: 10; +} +.logo{ + height: 70px; + width: 150px; +} +#img1{ + border: 1px solid black; +} +#img2{ + border: 1px solid black; +} +#img3{ + border: 1px solid black; +} +.img1{ + height: 150px; + width: 150px; + /* padding: 40px; */ +} +.img2{ + height: 150px; + width: 150px; + /* padding: 40px; */ +} +.img3{ + height: 150px; + width: 150px; + /* padding: 40px; */ +} +.img4{ + width: 30vh; + height: 60vh; +} +.img5{ + width: 100px; + height: 100px; + +} +.underline{ + text-decoration: underline white; + +} \ No newline at end of file From a64c628326a2de9b2f41f243ce03014ef326b6a1 Mon Sep 17 00:00:00 2001 From: sosina14 Date: Mon, 21 Apr 2025 02:13:09 +0300 Subject: [PATCH 2/2] Done --- index.html | 62 ++++++++++++------ styles/style.css | 165 ++++++++++++++++++++++++++++++++++------------- 2 files changed, 164 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index 1766504..9c2e724 100644 --- a/index.html +++ b/index.html @@ -9,32 +9,56 @@
-
Premium Discover Help Download
-

Music for everyone.


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

-
-

What's on Spotify

+
+ +
Premium     Discover    Help    Download
+ +
+
+

Music for everyone.


Spotify is now free on moblie, 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

+ music-icon +

Millions of songs

There are millions of songs on spotify

- music - + music +

HD Music

Listen to music as if you were listening live

- phone - + phone +

Stream Everywhere

Stream music on your smartphone, tablet or computer

-
- spotify-logo-white - spotify-logo-white -

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.

- -
+ +
+ +
+
+

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.

+ +
+
+ + +
+ +
+ +
+
+
diff --git a/styles/style.css b/styles/style.css index 1c5ea09..0412a2b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -8,40 +8,77 @@ White: #FFF */ .main{ - background-color: rgb(64, 60, 62); - border: 5px solid black; -} -.nav{ - /* margin: 50px; */ + background-color: white; + width: 100%; + max-width: 1200px; + margin: 0 auto; + display: grid; + } + .a{ + position: fixed; background-color: white; - margin: 10px; - border: 2px solid black; + height: 70px; + width: 79%; + +} +.nav{ + position: relative; + left: 60%; + top: -90px; + font-size: 30px; } - .b{ background-image: url('../images/landing.jpg'); - background-size: cover; /* This makes the image cover the entire div */ - background-position: center; /* Centers the image */ - background-repeat: no-repeat; /* Prevents the image from repeating */ - width: 97vh; /* Ensure the div has some width */ - height: 100vh; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 110vh; color: white; } -.c{ - background-color: rgb(251, 251, 245); - width: 97vh; /* Ensure the div has some width */ +.c1{ + background-color: white; height: 100vh; + display: flex; + flex-direction: row; + align-items: center; + gap: 60px; + margin-left: 50px; + margin-right: 50px; + padding: 30px; +} +.c{ + text-align: center; + font-size: 20px; + font-weight: bold; + background-color: white; } -.d{ - background-color: rgb(58, 198, 109); - width: 97vh; - height: 100vh; - color: white; +.t{ + position: relative; + top:70px; + align-content: center; + text-decoration: underline green; + font-size: 40px; + +} +h3{ + text-align: center; + font-size: 33px; + font-weight: bold; + color: green; + } +p{ + text-align: center; + font-size: 25px; + color: rgb(17, 17, 17); + font-weight: 100; +} + + .m{ text-align: center; font-size: 50px; @@ -59,40 +96,80 @@ White: #FFF height: 70px; width: 150px; } -#img1{ - border: 1px solid black; -} -#img2{ - border: 1px solid black; -} -#img3{ - border: 1px solid black; -} + .img1{ height: 150px; width: 150px; - /* padding: 40px; */ + } .img2{ height: 150px; width: 150px; - /* padding: 40px; */ + } .img3{ height: 150px; width: 150px; - /* padding: 40px; */ -} -.img4{ - width: 30vh; - height: 60vh; -} -.img5{ - width: 100px; - height: 100px; } -.underline{ - text-decoration: underline white; + + +.d { + background-color: rgb(58, 198, 109); + height: 100vh; + color: white; + display: flex; + padding: 30px; + margin: 20px; +} +.d-left { + flex: 1; + display: flex; + flex-direction: column; + } +.d-right { + flex: 1; + display: flex; + + } +.d-center { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + } +.img4 { + width: 80px; + height: 80px; + margin-top: 40px; + align-self: center; -} \ No newline at end of file + } + +.img5 { + width: 300px; + height: 700px; + object-fit: cover; + } + +.underline { + text-decoration: underline white ; + font-size: 30px; + font-weight: bold; + text-align: start; + } + +.section-title { + font-size: 28px; + font-weight: bold; + color: #FFF; + text-align: start; + } + +.section-desc { + font-size: 20px; + font-weight: 100; + color: #FFF; + text-align: start; + } + \ No newline at end of file