Spotify-Clone

//This ia a Spotify-Clone.

<link rel="icon" href="./Assets/logo.png">

<title>Spotify - Web Player: Music for everyone</title>
<link rel="stylesheet" href="Style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

Home

Search

Your Library

Create your first playlist

It's easy, we'll help you

Create playlist

Let's find some podcasts to follow

We'll keep you updated on new episodes

Browse podcasts

Explore Premium Install App

        </div>
       
            <h2>Recently Played </h2>
            <div class="cards-container">
             <div class="card">
                <img src="Assets/card1img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>
            </div>

            
            <h2>Trending now near you  </h2>
            <div class="cards-container">
             <div class="card">
                <img src="Assets/card2img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>
            

              
             <div class="card">
                <img src="Assets/card3img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>
            

           
             <div class="card">
                <img src="Assets/card4img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>

             <div class="card">
                <img src="Assets/card2img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>

              
             <div class="card">
                <img src="Assets/card3img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>
             
            </div>
            <h2>Featured Charts </h2>
            <div class="cards-container">
             <div class="card">
                <img src="Assets/card5img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>

             <div class="card">
                <img src="Assets/card6img.jpeg" class="card-img">
                <p class="card-title">Top Songs-India</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>

             <div class="card">
                <img src="Assets/card1img.jpeg" class="card-img">
                <p class="card-title">Top 50-Global</p>
                <p class="card-info">Your daily updates of the most played ... </p>
             </div>
            </div>
        <div class="footer">
            <div class="line">

            </div>
        </div>
     </div>
     <div class="music-player">
        <div class="album"></div>  
        <div class="player">
            <div class="player-controls">
                <img src="./Assets/player_icon1.png" class="player-control-icon">
                <img src="./Assets/player_icon2.png" class="player-control-icon">
                <img src="./Assets/player_icon3.png" class="player-control-icon" style="opacity:1; height:2rem">
                <img src="./Assets/player_icon4.png" class="player-control-icon">
                <img src="./Assets/player_icon5.png" class="player-control-icon">
            </div>
            <div class="playback-bar">
                <span class="curr-time">00:00</span>
                <input type="range" min="0" max="100" class="progress-bar" step="1">
                 <span class="tot-time">3:33</span>
            </div>
        </div>
        <div class="controls"></div>
     </div>
</div>