diff --git a/index.html b/index.html index 0697f92..c9df259 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,132 @@ Spotify Clone - + - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the + + +
+
+

+ 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. +

+
+ +
+ +
+ +
+ diff --git a/styles/style.css b/styles/style.css index 55efb32..c5589de 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,211 @@ +* { + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +#navbar { + height: 70px; + width: 100%; + background-color: #FFF; + position: fixed; + display: flex; + align-items: center; + justify-content: center; + justify-content: space-between; + border: 5px solid aqua; +} + + + +#logo { + background-image: url("../images/spotify-logo.png"); + height: 60px; + width: 100%; + background-size: contain; + background-repeat: no-repeat; + margin-left: 20px; +} + +#ulist { + height: 50px; + width: 700px; + align-items: center; + justify-content: center; + border: 5px solid chartreuse; + text-align: center; +} +ul { + display: flex; + text-align: right; + align-items: center; + justify-content: space-evenly; + font-size: 20px; +} + +#background { + background-image: url("../images/landing.jpg"); + height: 1000px; /* Adjust height as needed */ + width: 99.5%; /* Full width */ + background-size: cover; /* Cover the entire container */ + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Prevent repeating the image */ + justify-content: center; + display: flex; + align-items: center; + justify-items: center; + border: 5px solid magenta; + +} + +#text { + height: 300px; + width: 1000px; + text-align: center; +} + +h1 { + font-size: 80px; + color: #FFF; +} + +#text p { + font-size: 30px; + font-weight:lighter; + color: rgb(202, 197, 197); +} + +#second { + width: 100%; + height: 600px; + border: 5px solid red; +} + +#second h2 { + color: black; + text-align: center; + padding-top: 20px; + padding-bottom: 20px; + text-decoration: underline green ; + font-size: 40px; + +} + +#subsec { + display: flex; + justify-content: space-evenly; + border: 5px solid orange; + height: 450px; + width: 1800px; + align-items: center; + margin-left: 40px; + margin-right: 30px; +} + +.boxes { + width: 30%; + height: 350px; + border: 5px solid rgb(212, 224, 32); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + +} + +#one { + background-image: url("../images/music-icon.png"); + height: 150px; + width: 150px; + background-size: contain; + background-repeat: no-repeat; +} + +#two { + background-image: url("../images/high-quality-icon.png"); + background-size: contain; + background-repeat: no-repeat; + height: 150px; + width: 150px; +} + +#three { + background-image: url("../images/devices-icon.png"); + background-size: contain; + background-repeat: no-repeat; + height: 150px; + width: 150px; +} + +.greentext { + color:rgb(12, 168, 77); + font-size: 30px; + font-weight: 1000; +} +.normaltext { + padding-top: 15px; + font-size: 25px; +} + +#last { + height: 850px; + width: 95%; + background-color: #00b172; + margin-left: 50px; + border: 7px solid purple; +} + +#last h2 { + color: white; + text-decoration: underline white; + padding-left: 250px; + padding-top: 80px; + font-size: 35px; +} + +.bold { + color: white; + font-size: 25px; + font-weight: 700; +} + +.normal { + color: rgb(241, 233, 233); + font-size: 20px; +} + +#right { + background-image: url("../images/spotify-app.jpg"); + background-size: contain; + background-repeat: no-repeat; + height: 650px; + width: 500px; + margin-top: -620px; + margin-left: 1200px; +} + +#left { + padding-top: 80px; + padding-left: 250px; +} + +#left p { + margin-top: 40px; + margin-bottom: 40px; +} + +#center { + background-image: url("../images/spotify-icon-white.png"); + background-size: contain; + background-repeat: no-repeat; + height: 170px; + width: 170px; + margin-top: -400px; + margin-left: 800px; + position: absolute; +} + + /* Colors: