web-dev-open · EyobZewde23 · Jan 30, 2025
diff --git a/index.html b/index.html
@@ -4,15 +4,75 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="styles/style.css">
     <title>Spotify Clone</title>
     <!-- don't forget to link your styles -->
   </head>
   <body>
-    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.
+    <header class="allheader">
+      <div class="head">
+      <img class="logo" src="styles/images/spotify-logo.png">
+      <div >
+      <ul class="headlist">
+        <li>Premium</li>
+        <li>Discover</li>
+        <li>Help</li>
+        <li>Download</li>
+      </ul>
+      </div>
+      </div>
+
+    <aside>
+      <div class="secondpage">
+        <div class="textcontainer">
+          <h1>Music for everyone.</h1>
+          <p>Spotify is now free on mobile, tablet and computer. Listen to the
+          right music, wherever you are.</p>
+        </div>
+      </div>
+    </aside>
+    </header>
+    <section class="thirdpagefull">
+
+      <h1 class="thirdhead">what's on spotify?</h1>
+      <aside class="thirdpage">
+        <div class="millions">
+          <img class="milimg" src="styles/images/music-icon.png">
+          <p class="thirdtext">Millions of Songs</p>
+          <p>There are millions of songs on spotify</p>
+        </div>
+        <div class="HD">
+          <img class="HDimg" src="styles/images/high-quality-icon.png">
+          <p class="thirdtext">HD Music</p>
+          <p>Listen to music as if you were listening live</p>
+        </div>
+        <div class="Stream">
+          <img class="stimg" src="styles/images/devices-icon.png">
+          <p class="thirdtext">Stream Everywhere</p>
+          <p>Stream music on your smart phone,tablet or computer</p>
+        </div>
+      </aside>
+    </section>
+    <section class="lastpage">
+
+      <div class="lastcontainer">
+        <h1 class="lasthead">it's as yeezy as Kanye West</h1><br>
+        <P><b>Search</b><br><br>
+          Know what you want to listen to?<br>
+          Just search and hit play. </P>
+        <p><b>Browse</b><br><br>
+        Check out the latest chartes,<br>
+        brand new release and great<br>
+        playlists for right now.</p>
+        <p><b>Discover</b><br><br>
+        Enjoy new music every Monday<br>
+        with your own personal playlist.<br>
+        or sit back and enjoy radio.</p>
+      </div>
+      <img class="lastimgcenter" src="styles/images/spotify-icon-white.png">
+      <img class="lastimg" src="styles/images/spotify-app.jpg">
+
+    </section>
+
   </body>
 </html>
diff --git a/styles/images/devices-icon.png b/styles/images/devices-icon.png
diff --git a/styles/images/high-quality-icon.png b/styles/images/high-quality-icon.png
diff --git a/styles/images/landing.jpg b/styles/images/landing.jpg
diff --git a/styles/images/music-icon.png b/styles/images/music-icon.png
diff --git a/styles/images/spotify-app.jpg b/styles/images/spotify-app.jpg
diff --git a/styles/images/spotify-icon-white.png b/styles/images/spotify-icon-white.png
diff --git a/styles/images/spotify-logo.png b/styles/images/spotify-logo.png
diff --git a/styles/style.css b/styles/style.css
@@ -1,8 +1,139 @@
-/*
-Colors:
+body{
+    font-size: larger;
+    margin: 100px;
+}
+.allheader{
+    border: 5px solid palevioletred;
+    height: 60em;
+}
+.head{
+    border: 5px solid lightgreen;
+
+}
+.logo{
+    width: 20em;
+    height: 6em;
+    position: relative;
+    float: left;
+}
+.headlist {
+    display: inline-flex;
+    gap: 10px;
+    float: right;
+    margin-right: 100px;
+    border: 5px solid green;
+}
+.headlist li{
+    list-style: none;
+    font-size: 50px;
+    margin: 10px;
 
-Text: 1A1A1A
-Green: #00B172
-White: #FFF
+}
+.secondpage{
+    text-align: center;
+    background-image: url("images/landing.jpg");
+    height: 50em;
+    width: 100%;
+    background-size: contain;
+    justify-content: center;
+    position: relative;
+    top:200px;
+
+}
+.textcontainer{
+    color: white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    gap: 50em;
+    font-size: 50px;
+}
+.thirdpagefull{
+    text-align: center;
+    position: relative;
+    top: 200px;
+    border: 10px solid red;
+}
+.thirdhead{
+    display: inline;
+    margin-top: 60px;
+    font-size: 60px;
+    border-bottom: 5px solid green;
+}
+.thirdpage{
+    display: inline-flex;
+    gap: 200px;
+    border:5px solid orangered ;
+    margin: 30px 30px 30px 30px;
+}
+.millions{
+    border: 10px solid yellow;
+    margin: 50px;
+    padding: 30px;
+    font-size: 40px;
+}
+.milimg{
+    background-size: contain;
+    height: 300px;
+    width: 500px;
+}
+.HD{
+    border: 10px solid yellow;
+    margin: 50px;
+    padding: 30px;
+    font-size: 40px;
 
-*/
+}
+.HDimg{
+    background-size: contain;
+    height: 300px;
+    width: 500px;
+}
+.Stream{
+    border: 10px solid yellow;
+    margin: 50px;
+    padding: 30px;
+    font-size: 40px;
+}
+.stimg{
+    background-size: contain;
+    height: 300px;
+    width: 500px;
+}
+.thirdtext{
+    color: green;
+}
+.lastpage{
+    border: 10px solid purple;
+    height: 70em;
+    position: relative;
+    top: 300px;
+    background: green;
+
+}
+.lastcontainer{
+    margin: 200px;
+    float: left;
+    font-size: 40px;
+    color: white;
+    height: 500px;
+}
+.lastimg{
+    float: right;
+    height: 45em;
+    margin-top: 300px ;
+    margin-right: 200px;
+}
+.lastimgcenter{
+    text-align: center;
+    height: 300px;
+    background-size: contain;
+    position: relative;
+    top: 50%;
+
+
+}
+.lasthead{
+    border-bottom: 4px solid white;
+}