diff --git a/index.html b/index.html index 0697f92..8c33b8e 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,105 @@ 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. + +
+ +
+ + + +
+ +
+

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

+

HD Music

+

Stream Everywhere

+
+
+

There are millions of songs on Spotify

+

Listen to music as if you were listening live

+

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.

+

+
+
+
+
+
+ diff --git a/styles/style.css b/styles/style.css index 55efb32..136c3c8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,137 @@ Green: #00B172 White: #FFF */ +body{ + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} +#logo{ + margin: 20px 0 0 30px; +} +nav{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 120px; + background-color: white; +} +#ul{ + display: flex; + justify-content: flex-end; + gap: 30px; + margin-right: 30px; +} +#ul li{ + list-style: none; + font-size: 25px; + position: relative; + bottom: 67px; +} + + + +/* section1 */ +#div1{ + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + top: 311px; + left: 383px; + color: #fff; +} +#div1 h1{ + font-size: 81px; + margin-bottom: 42px; +} +#div1 p{ + margin-top: 0px; + margin-bottom: 1px; + font-size: 32px; +} + + +/* section2 */ +#section2 h1{ + font-size: 35px; + text-align: center; + margin-bottom: 0; +} +hr{ + background-color: #00B172; + width: 300px; + height: 4px; + margin-bottom: 91px; +} +#div2{ + display: flex; + justify-content: space-evenly; +} +#div3{ + display: flex; + justify-content: space-evenly; + margin-left: 35px; + color: #00B172; +} +#div4{ + display: flex; + justify-content: space-evenly; + font-size: 25px; + /* margin-left: 80px; */ + +} +#div4 p{ + padding: 0px; + text-align: center; + + width: 300px; +} + + + + +#div5{ + padding-top: 31px; + color: #fff; + background-color: #00B172; + display: flex; + margin: 25px 30px; + height: 750px; + justify-content: space-evenly; +} + +#div5 h1{ + font-size: 37px; + margin-bottom: 2px; +} + +#div5 hr{ + height: 3px; + background-color: #fff; + width: 490px; + position: relative; + right: 1px; +} + +#div5 h2{ + margin-top: 47px; + font-size: 28px; +} + +#div5 p{ + margin-bottom: -10px; + font-size: 21px; +} + +#div5 div:nth-child(2){ + position: relative; + top: 270px; + right: 80px; +} + +#div5 div:last-child{ + margin-top: 70px; +} +