diff --git a/css code b/css code
new file mode 100644
index 0000000..524abc1
--- /dev/null
+++ b/css code	
@@ -0,0 +1,217 @@
+/* General Styles */
+* {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+/* Navbar */
+nav {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    background: #FFF;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 40px; /* Thinner navbar */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+.logo img {
+    width: 100px;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+}
+
+.nav-links li {
+    margin: 0;
+}
+
+.nav-links a {
+    color: #1A1A1A;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 8px 12px;
+    display: inline-block;
+    white-space: nowrap;
+}
+
+/* Ensure "Download" link fits in viewport */
+@media (max-width: 1024px) {
+    .nav-links {
+        gap: 10px;
+    }
+
+    .nav-links a {
+        padding: 6px 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    nav {
+        flex-direction: column;
+        align-items: center;
+        padding: 8px 20px;
+    }
+
+    .nav-links {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}
+
+/* Hero Section */
+.hero {
+    background: url("../images/landing.jpg") no-repeat center center/cover;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    color: white;
+}
+
+.hero h1 {
+    font-size: 50px;
+    margin-bottom: 20px;
+}
+
+.hero p {
+    font-size: 20px;
+}
+
+/* What's on Spotify Section */
+.features {
+    text-align: center;
+    padding: 50px;
+}
+
+.section-title {
+    font-size: 28px;
+    text-align: center;
+    color: #1A1A1A;
+    position: relative;
+    display: inline-block;
+    margin-bottom: 20px;
+}
+
+.section-title::after {
+    content: "";
+    display: block;
+    width: 100px;
+    height: 3px;
+    background-color: #00B172;
+    margin: 5px auto 0;
+}
+
+.feature-container {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin-top: 30px;
+}
+
+.feature {
+    width: 30%;
+    text-align: center;
+}
+
+.feature img {
+    width: 80px;
+}
+
+.feature h3 {
+    color: #00B172;
+    font-size: 22px;
+    margin-top: 10px;
+}
+
+.feature p {
+    font-size: 16px;
+}
+
+/* Green Section */
+.green-section {
+    background: #00B172;
+    color: white;
+    padding: 50px;
+    text-align: left;
+}
+
+.white-title {
+    text-align: left;
+    display: inline-block;
+    position: relative;
+    color: white;
+}
+
+.white-title::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 3px;
+    background-color: white;
+    margin-top: 5px;
+}
+
+.green-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30px;
+}
+
+.text-section {
+    width: 30%;
+}
+
+.text-section h3 {
+    font-size: 22px;
+    font-weight: bold;
+}
+
+.text-section p{
+    font-weight: 100;
+}
+
+.icon-section img {
+    width: 80px;
+}
+
+.image-section img {
+    width: 250px;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .whats-on-spotify .features {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .feature {
+        width: 80%;
+        margin-bottom: 20px;
+    }
+
+    .green-section {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .green-content,
+    .green-icon,
+    .green-image {
+        width: 80%;
+    }
+
+    .green-icon {
+        margin: 20px 0;
+    }
+}
diff --git a/html code b/html code
new file mode 100644
index 0000000..9ef6228
--- /dev/null
+++ b/html code	
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+   <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spotify Clone</title>
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+<body>
+  
+   <!-- Navbar -->
+    <nav>
+        <div class="logo">
+       <img src="images/spotify-logo.png" alt="Spotify Logo">
+        </div>
+        <ul class="nav-links">
+            <li><a href="#">Premium</a></li>
+            <li><a href="#">Discover</a></li>
+            <li><a href="#">Help</a></li>
+            <li><a href="#">Download</a></li>
+        </ul>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <h1>Music for everyone.</h1>
+        <p>Spotify is now free on mobile, tablet, and computer. Listen to the right music, wherever you are.</p>
+    </section>
+
+    <!-- What's on Spotify Section -->
+    <section class="features">
+        <h2 class="section-title">What's on Spotify?</h2>
+        <div class="feature-container">
+            <div class="feature">
+                <img src="images/music-icon.png" alt="Music Icon">
+                <h3>Millions of Songs</h3>
+                <p>There are millions of songs on Spotify</p>
+            </div>
+            <div class="feature">
+                <img src="images/high-quality-icon.png" alt="High Quality">
+                <h3>HD Music</h3>
+                <p>Listen to music as if you were listening live Stream</p>
+            </div>
+            <div class="feature">
+                <img src="images/devices-icon.png" alt="Devices">
+                <h3>Stream Everywhere</h3>
+                <p>Stream music on your smartphone, tablet, or computer.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Green Section -->
+    <section class="green-section">
+        <h2 class="section-title white-title">It’s as yeezy as Kanye West.</h2>
+        <div class="green-content">
+            <div class="text-section">
+                <h3>Search</h3><br>
+                <p>Know what you want to listen to? Just search and hit play.</p><br><br>
+                <h3>Browse</h3><br>
+                <p>Check out the latest charts, brand new releases, and great playlists for right now.</p><br><br>
+                <h3>Discover</h3><br>
+                <p>Enjoy new music every Monday with your own personal playlist. Or sit back and enjoy Radio.</p>
+            </div>
+            <div class="icon-section">
+                <img src="images/spotify-icon-white.png" alt="Spotify Icon">
+            </div>
+            <div class="image-section">
+                <img src="images/spotify-app.jpg" alt="Spotify App">
+            </div>
+        </div>
+    </section>
+
+</body>
+</html>
