first commit

Ajaykumar724 · Oct 30, 2024 · a29e194 · a29e194
commit a29e194
Show file tree

Hide file tree

Showing 23 changed files with 491 additions and 0 deletions.
diff --git a/images/backward_icon.png b/images/backward_icon.png
diff --git a/images/card1img.jpeg b/images/card1img.jpeg
diff --git a/images/card2img.jpeg b/images/card2img.jpeg
diff --git a/images/card3img.jpeg b/images/card3img.jpeg
diff --git a/images/card4img.jpeg b/images/card4img.jpeg
diff --git a/images/card5img.jpeg b/images/card5img.jpeg
diff --git a/images/card6img.jpeg b/images/card6img.jpeg
diff --git a/images/controls_icon1.jpg b/images/controls_icon1.jpg
diff --git a/images/controls_icon2.jpg b/images/controls_icon2.jpg
diff --git a/images/controls_icon3.jpg b/images/controls_icon3.jpg
diff --git a/images/controls_icon4.jpg b/images/controls_icon4.jpg
diff --git a/images/controls_icon5.jpg b/images/controls_icon5.jpg
diff --git a/images/forward_icon.png b/images/forward_icon.png
diff --git a/images/library_icon.png b/images/library_icon.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/play_musicbar.png b/images/play_musicbar.png
diff --git a/images/player_icon1.png b/images/player_icon1.png
diff --git a/images/player_icon2.png b/images/player_icon2.png
diff --git a/images/player_icon3.png b/images/player_icon3.png
diff --git a/images/player_icon4.png b/images/player_icon4.png
diff --git a/images/player_icon5.png b/images/player_icon5.png
diff --git a/index.html b/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="images/logo.png">
+    <title>Spotify : Web play</title>
+    <link href="style.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div class="main">
+        <div class="sidebar">
+          <div class="home-menu">
+            <div class="home"> <i class="fa-solid fa-house"></i>Home</div>
+            <div class="search"><i class="fa-solid fa-magnifying-glass"></i>Search</div>
+          </div>
+          <div class="optn-menu">
+            <div class="library-menu">
+              <div class="library-menu-icon"><img src="images/library_icon.png" alt="library" class="library">
+                Your Library</div>
+               <div class="library-icon"><i class="fa-solid fa-plus"></i><i class="fa-solid fa-arrow-right"></i></div>  
+            </div>
+            <div class="card1">
+              <h3>Create your first playlist</h3>
+              <p>It,s easy.we'll help you</p>
+              <button>Create playlist</button>
+            </div>
+            <div class="card1">
+              <h3>Let,s find some podcasts to follow</h3>
+              <p>We'll keep you uploaded on new episodes</p>
+              <button>Browse podcasts</button>
+            </div>
+
+          </div>
+        </div>
+        <div class="hero-content">
+          <div class="nav-bar">
+            <div class="nav-icon">
+              <img src="images/backward_icon.png" class="backward-icon" alt="backward">
+              <img src="images/forward_icon.png" class="forward-icon" alt="forward">
+            </div>
+
+            <div class="nav-btn">
+              <button class="install-btn premium">Premium</button>
+              <button class="install-btn"><i class="fa-solid fa-download install-icon"></i>Install App</button>
+              <i class="fa-solid fa-user profile"></i>
+            </div>
+
+          </div>
+          <div class="below-nav">
+            <div class="first-line">
+              <h2 class="heading">Recently played</h2>
+              <div class="music-card1">
+                <img src="images/card1img.jpeg" alt="image" class="cards">
+                <h3>Top 50 - Global</h3>
+                <p class="card-content">Your daily update of the most played tracks right...</p>
+              </div>
+            </div>
+            <div class="second-line">
+              <h2 class="heading">Spotify original & exclusive prodcasts</h2>
+              <div class="line-cards">
+                <div class="music-card1">
+                  <img src="images/card2img.jpeg" alt="image" class="cards">
+                  <h3>Top 50 - Global</h3>
+                  <p class="card-content">Your daily update of the most played tracks right...</p>
+                </div>
+                <div class="music-card1">
+                  <img src="images/card3img.jpeg" alt="image" class="cards">
+                  <h3>Top 50 - Global</h3>
+                  <p class="card-content">Your daily update of the most played tracks right...</p>
+                </div>
+                <div class="music-card1">
+                  <img src="images/card4img.jpeg" alt="image" class="cards">
+                  <h3>Top 50 - Global</h3>
+                  <p class="card-content">Your daily update of the most played tracks right...</p>
+                </div>
+              </div>
+
+              </div>
+              <div class="third-line">
+                <h2 class="heading">Spotify original & exclusive prodcasts</h2>
+                <div class="line-cards">
+                  <div class="music-card1">
+                    <img src="images/card5img.jpeg" alt="image" class="cards">
+                    <h3>Top 50 - Global</h3>
+                    <p class="card-content">Your daily update of the most played tracks right...</p>
+                  </div>
+                  <div class="music-card1">
+                    <img src="images/card1img.jpeg" alt="image" class="cards">
+                    <h3>Top 50 - Global</h3>
+                    <p class="card-content">Your daily update of the most played tracks right...</p>
+                  </div>
+                  <div class="music-card1">
+                    <img src="images/card2img.jpeg" alt="image" class="cards">
+                    <h3>Top 50 - Global</h3>
+                    <p class="card-content">Your daily update of the most played tracks right...</p>
+                  </div>
+                </div>
+                </div>
+            </div>
+          </div>
+        <div class="music-playbar">
+          <div class="playbar-name">
+            <img src="images/card2img.jpeg" alt="image" class="playbar-image">
+            <h4 class="song">Daylight</h4>
+            <p class="singer">yoo honey singh</p>
+            <div class="playbar-name-icon">
+              <i class="fa-regular fa-heart fav"></i>
+              <i class="fa-solid fa-compact-disc album"></i>
+            </div>
+
+          </div>
+          <div class="player-optns">
+            <div class="upper-player-optns">
+
+              <img src="images/player_icon1.png" class="musicbar1" alt="icon">
+              <img src="images/player_icon2.png" class="musicbar1" alt="icon">
+              <img src="images/player_icon3.png" class="musicbar" alt="icon">
+              <img src="images/player_icon4.png" class="musicbar2" alt="icon">
+              <img src="images/player_icon5.png" class="musicbar2" alt="icon">
+            </div>
+            <div class="lower-player">00:00<input class="progress-bar" type="range" value="20" min="0" max="100">03:56</div>
+          </div>
+          <div class="player-menu">
+            <img src="images/controls_icon4.jpg" class="sp_icon" alt="icon">
+            <img src="images/controls_icon2.jpg" class="sp_icon" alt="icon">
+            <img src="images/controls_icon3.jpg" alt="icon">
+            <img src="images/controls_icon1.jpg" alt="icon">
+            <img src="images/controls_icon5.jpg" alt="icon">
+            <input class="vol" type="range" value="70" min="0" max="100">
+          </div>
+        </div>
+    </div>
+
+</body>
+</html>