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..9c2e724 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,70 @@ - - - - + + + + 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 +

HD Music

Listen to music as if you were listening live

+
+
+ phone +

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.

+ +
+
+ + +
+ +
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32..0412a2b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,170 @@ Green: #00B172 White: #FFF */ + +.main{ + background-color: white; + width: 100%; + max-width: 1200px; + margin: 0 auto; + display: grid; + +} + +.a{ + position: fixed; + background-color: white; + height: 70px; + width: 79%; + +} +.nav{ + position: relative; + left: 60%; + top: -90px; + font-size: 30px; +} + +.b{ + background-image: url('../images/landing.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 110vh; + color: white; +} +.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; + +} +.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; + 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{ + height: 150px; + width: 150px; + +} +.img2{ + height: 150px; + width: 150px; + +} +.img3{ + height: 150px; + width: 150px; + +} + + +.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; + + } + +.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