Create a Spotify Clone Project Using HTML and CSS

Hello Coder, Welcome to the Codewithrandom blog. In today’s blog, we are going to create a Spotify Clone Project using HTML and CSS. we use Javascript code for a little bit of functionality in  Spotify Clone. Before that, we could see what is Spotify Clone project.

A Spotify clone is a clone homage to Spotify that is similar to the original page, but with the same theme and body elements. We have used basic HTML and CSS for this project. It is an intermediate-level project through which developers get real-time experience on real-world projects and also learn about the tools and technologies that have been used by big companies for creating web applications.

What is a Clone Website?

A clone website is a replica of the original website, which looks exactly the same as the clone website. In a clone website, the user can perform all the tasks that an original website provides. These types of projects are helpful for developers to understand the styling concepts and what tools and technologies have been used for creating a clone website.

What is the need for creating clone websites?

Creating a clone website is the most demanding and popular clone website project in which the user gets real-world hands-on experience with the tools and technologies that have been used in the website creation. This type of project also helps in gaining real-world experience on big projects and helps in enhancing skills.

A Spotify Clone page displays the artist’s name with the songs they composed. The songs by the artist will be displayed with a number of listeners and you can add the songs to the required playlists and hear it.

50+ HTML, CSS and JavaScript Projects With Source Code

Also, we can subscribe to our favorite artists to know the upcoming songs and events.

Now we have seen the project summary, so let’s get started with adding our Html Code For Spotify.

Spotify Html Code:-

<section class="header">

  <!--
  <div class="window__actions">
    <i class="ion-record red"></i>
    <i class="ion-record yellow"></i>
    <i class="ion-record green"></i>
  </div>
  -->
  
  <div class="page-flows">
  
    <span class="flow">
      <i class="ion-chevron-left"></i>
    </span>
    
    <span class="flow">
      <i class="ion-chevron-right disabled"></i>
    </span>
    
  </div>
  
  <div class="search">
  
    <input type="text" placeholder="Search" />
    
  </div>
  
  <div class="user">
  
    <div class="user__notifications">
    
      <i class="ion-android-notifications"></i>
      
    </div>
    
    <div class="user__inbox">
    
      <i class="ion-archive"></i>
      
    </div>
    
    <div class="user__info">
    
      <span class="user__info__img">
      
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/adam_proPic.jpg" alt="Profile Picture" class="img-responsive" />
        
      </span>
      
      <span class="user__info__name">
      
        <span class="first">Adam</span>
        
        <span class="last">Lowenthal</span>
        
      </span>
      
    </div>
    
    <div class="user__actions">
    
      <div class="dropdown">
        <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <i class="ion-chevron-down"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
          <li><a href="#">Private Session</a></li>
          <li><a href="#">Account</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Log Out</a></li>
        </ul>
      </div>
      
    </div>
    
  </div>
  
</section>

<section class="content">

  <div class="content__left">
  
    <section class="navigation">

        <!-- Main -->
        <div class="navigation__list">

          <div class="navigation__list__header" 
               role="button" 
               data-toggle="collapse" 
               href="#main" 
               aria-expanded="true" 
               aria-controls="main">
            Main
          </div>
          
          <div class="collapse in" id="main">
          
            <a href="#" class="navigation__list__item">
              <i class="ion-ios-browsers"></i>
              <span>Browse</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-person-stalker"></i>
              <span>Activity</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-radio-waves"></i>
              <span>Radio</span>
            </a>
            
          </div>

        </div>
        <!-- / -->

        <!-- Your Music -->
        <div class="navigation__list">

          <div class="navigation__list__header" 
               role="button" 
               data-toggle="collapse" 
               href="#yourMusic" 
               aria-expanded="true" 
               aria-controls="yourMusic">
            Your Music
          </div>
          
          <div class="collapse in" id="yourMusic">
          
            <a href="#" class="navigation__list__item">
              <i class="ion-headphone"></i>
              <span>Songs</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Albums</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-person"></i>
              <span>Artists</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-document"></i>
              <span>Local Files</span>
            </a>
            
          </div>

        </div>
        <!-- / -->

        <!-- Playlists -->
        <div class="navigation__list">

          <div class="navigation__list__header" 
               role="button" 
               data-toggle="collapse" 
               href="#playlists" 
               aria-expanded="true" 
               aria-controls="playlists">
            Playlists
          </div>
          
          <div class="collapse in" id="playlists">
          
            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Doo Wop</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Pop Classics</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Love $ongs</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Hipster</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>New Music Friday</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Techno Poppers</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Summer Soothers</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Hard Rap</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Pop Rap</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>5 Stars</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Dope Dancin</span>
            </a>

            <a href="#" class="navigation__list__item">
              <i class="ion-ios-musical-notes"></i>
              <span>Sleep</span>
            </a>
            
          </div>

        </div>
        <!-- / -->

      </section>
      
    <section class="playlist">

      <a href="#">

        <i class="ion-ios-plus-outline"></i>

        New Playlist

      </a>

    </section>

    <section class="playing">

      <div class="playing__art">

        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/cputh.jpg" alt="Album Art" />

      </div>

      <div class="playing__song">

        <a class="playing__song__name">Some Type of Love</a>

        <a class="playing__song__artist">Charlie Puth</a>

      </div>

      <div class="playing__add">

        <i class="ion-checkmark"></i>

      </div>

    </section>
    
  </div>
  
  <div class="content__middle">
  
    <div class="artist is-verified">
    
      <div class="artist__header">
      
        <div class="artist__info">
        
          <div class="profile__img">
          
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/g_eazy_propic.jpg" alt="G-Eazy" />
            
          </div>
          
          <div class="artist__info__meta">
          
            <div class="artist__info__type">Artist</div>
            
            <div class="artist__info__name">G-Eazy</div>
            
            <div class="artist__info__actions">
            
              <button class="button-dark">
                <i class="ion-ios-play"></i>
                Play
              </button>
              
              <button class="button-light">Follow</button>
              
              <button class="button-light more">
                <i class="ion-ios-more"></i>
              </button>
              
            </div>
            
          </div>
          
          
        </div>
        
        <div class="artist__listeners">
        
          <div class="artist__listeners__count">15,662,810</div>
          
          <div class="artist__listeners__label">Monthly Listeners</div>
          
        </div>
        
        <div class="artist__navigation">
        
          <ul class="nav nav-tabs" role="tablist">
            
            <li role="presentation" class="active">
              <a href="#artist-overview" aria-controls="artist-overview" role="tab" data-toggle="tab">Overview</a>
            </li>
            
            <li role="presentation">
              <a href="#related-artists" aria-controls="related-artists" role="tab" data-toggle="tab">Related Artists</a>
            </li>
            
            <!--<li role="presentation">
              <a href="#artist-about" aria-controls="artist-about" role="tab" data-toggle="tab">About</a>
            </li>-->
            
          </ul>
          
          <div class="artist__navigation__friends">
          
            <a href="#">
              <img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="" />
            </a>
            
            <a href="#">
              <img src="http://zblogged.com/wp-content/uploads/2015/11/5.png" alt="" />
            </a>
            
            <a href="#">
              <img src="http://cdn.devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" alt="" />
            </a>
            
          </div>
          
        </div>
        
      </div>
      
      <div class="artist__content">
      
        <div class="tab-content">
      
          <!-- Overview -->
          <div role="tabpanel" class="tab-pane active" id="artist-overview">
            
            <div class="overview">
            
              <div class="overview__artist">
            
                <!-- Latest Release-->
                <div class="section-title">Latest Release</div>

                <div class="latest-release">

                  <div class="latest-release__art">

                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/whenDarkOut.jpg" alt="When It's Dark Out" />

                  </div>

                  <div class="latest-release__song">

                    <div class="latest-release__song__title">Drifting (Track Commentary)</div>

                    <div class="latest-release__song__date">

                      <span class="day">4</span>

                      <span class="month">December</span>

                      <span class="year">2015</span>

                    </div>

                  </div>

                </div>
                <!-- / -->

                <!-- Popular-->
                <div class="section-title">Popular</div>

                <div class="tracks">

                  <div class="track">

                    <div class="track__art">

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/whenDarkOut.jpg" alt="When It's Dark Out" />

                    </div>

                    <div class="track__number">1</div>

                    <div class="track__added">

                      <i class="ion-checkmark-round added"></i>

                    </div>

                    <div class="track__title">Me, Myself & I</div>

                    <div class="track__explicit">

                      <span class="label">Explicit</span>

                    </div>

                    <div class="track__plays">147,544,165</div>

                  </div>

                  <div class="track">

                    <div class="track__art">

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/tth.jpg" alt="These Things Happen" />

                    </div>

                    <div class="track__number">2</div>

                    <div class="track__added">

                      <i class="ion-plus not-added"></i>

                    </div>

                    <div class="track__title">I Mean It</div>

                    <div class="track__explicit">

                      <span class="label">Explicit</span>

                    </div>

                    <div class="track__plays">74,568,782</div>

                  </div>

                  <div class="track">

                    <div class="track__art">

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/whenDarkOut.jpg" alt="When It's Dark Out" />

                    </div>

                    <div class="track__number">3</div>

                    <div class="track__added">

                      <i class="ion-checkmark-round added"></i>

                    </div>

                    <div class="track__title">Calm Down</div>

                    <div class="track__explicit">

                      <span class="label">Explicit</span>

                    </div>

                    <div class="track__plays">13,737,506</div>

                  </div>

                  <div class="track">

                    <div class="track__art">

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/whenDarkOut.jpg" alt="When It's Dark Out" />

                    </div>

                    <div class="track__number">4</div>

                    <div class="track__added">

                      <i class="ion-plus not-added"></i>

                    </div>

                    <div class="track__title">Some Kind Of Drug</div>

                    <div class="track__explicit">

                      <span class="label">Explicit</span>

                    </div>

                    <div class="track__plays">12,234,881</div>

                  </div>

                  <div class="track">

                    <div class="track__art">

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/tth.jpg" alt="These Things Happen" />

                    </div>

                    <div class="track__number">5</div>

                    <div class="track__added">

                      <i class="ion-checkmark-round added"></i>

                    </div>

                    <div class="track__title">Let's Get Lost</div>

                    <div class="track__explicit">

                      <span class="label">Explicit</span>

                    </div>

                    <div class="track__plays">40,882,954</div>

                  </div>

                </div>

                <button class="show-more button-light">Show 5 More</button>
                <!-- / -->
              
              </div>
            
              <div class="overview__related">

                <div class="section-title">Related Artists</div>
                
                <div class="related-artists">
                
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/hoodie.jpg" alt="Hoodie Allen" />
                      
                    </span>
                    
                    <span class="related-artist__name">Hoodie Allen</span>
                    
                  </a>
                  
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/mikestud.jpg" alt="Mike Stud" />
                      
                    </span>
                    
                    <span class="related-artist__name">Mike Stud</span>
                    
                  </a>
                  
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/drake.jpeg" alt="Drake" />
                      
                    </span>
                    
                    <span class="related-artist__name">Drake</span>
                    
                  </a>
                  
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/jcole.jpg" alt="J. Cole" />
                      
                    </span>
                    
                    <span class="related-artist__name">J. Cole</span>
                    
                  </a>
                  
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/bigsean.jpg" alt="Big Sean" />
                      
                    </span>
                    
                    <span class="related-artist__name">Big Sean</span>
                    
                  </a>
                  
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/wiz.jpeg" alt="Wiz Khalifa" />
                      
                    </span>
                    
                    <span class="related-artist__name">Wiz Khalifa</span>
                    
                  </a>
                  
                  <a href="#" class="related-artist">
                  
                    <span class="related-artist__img">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/yonas.jpg" alt="Yonas" />
                      
                    </span>
                    
                    <span class="related-artist__name">Yonas</span>
                    
                  </a>
                  
                </div>

              </div>

              <div class="overview__albums">
              
                <div class="overview__albums__head">
                
                  <span class="section-title">Albums</span>
                  
                  <span class="view-type">
                  
                    <i class="fa fa-list list active"></i>
                    
                    <i class="fa fa-th-large card"></i>
                    
                  </span>
                
                </div>
                
                <div class="album">
                
                  <div class="album__info">
                  
                    <div class="album__info__art">
                    
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/whenDarkOut.jpg" alt="When It's Dark Out" />
                      
                    </div>
                    
                    <div class="album__info__meta">
                    
                      <div class="album__year">2015</div>
                      
                      <div class="album__name">When It's Dark Out</div>
                      
                      <div class="album__actions">
                      
                        <button class="button-light save">Save</button>
                        
                        <button class="button-light more">
                          <i class="ion-ios-more"></i>
                        </button>
                        
                      </div>
                      
                    </div>
                    
                  </div>
                  
                  <div class="album__tracks">
                  
                    <div class="tracks">
                      
                      <div class="tracks__heading">
                      
                        <div class="tracks__heading__number">#</div>
                        
                        <div class="tracks__heading__title">Song</div>
                        
                        <div class="tracks__heading__length">
                        
                          <i class="ion-ios-stopwatch-outline"></i>
                          
                        </div>
                        
                        <div class="tracks__heading__popularity">
                        
                          <i class="ion-thumbsup"></i>
                          
                        </div>
                        
                      </div>

                      <div class="track">

                        <div class="track__number">1</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title">Intro</div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">1:11</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">2</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title">Random</div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:00</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">3</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Me, Myself & I</span>
                          <span class="feature">Bebe Rexha</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">4:11</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">4</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">One Of Them</span>
                          <span class="feature">Big Sean</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:20</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-down-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">5</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Drifting</span>
                          <span class="feature">Chris Brown</span>
                          <span class="feature">Tory Lanez</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">4:33</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">6</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Of All Things</span>
                          <span class="feature">Too $hort</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:34</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">7</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Order More</span>
                          <span class="feature">Starrah</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:29</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">8</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title">
                        
                          <span>Calm Down</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">2:07</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">9</div>

                        <div class="track__added">

                          <i class="ion-plus not-added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Don't Let Me Go</span>
                          <span class="feature">Grace</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:11</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-down-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">10</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title">
                        
                          <span>You Got Me</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:28</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">11</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">What If</span>
                          <span class="feature">Gizzle</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">4:13</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">12</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title">
                        
                          <span>Sad Boy</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:23</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">13</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Some Kind Of Drug</span>
                          <span class="feature">Marc E. Bassy</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">3:42</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">14</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Think About You</span>
                          <span class="feature">Quin</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">2:59</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">15</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Everything Will Be OK</span>
                          <span class="feature">Kehlani</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">5:11</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">16</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">For This</span>
                          <span class="feature">Iamnobodi</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">4:11</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>
                      
                      <div class="track">

                        <div class="track__number">17</div>

                        <div class="track__added">

                          <i class="ion-checkmark-round added"></i>

                        </div>

                        <div class="track__title featured">
                        
                          <span class="title">Nothing to Me</span>
                          <span class="feature">Keyshia Cole</span>
                          <span class="feature">E-40</span>
                          
                        </div>

                        <div class="track__explicit">

                          <span class="label">Explicit</span>

                        </div>
                        
                        <div class="track__length">5:30</div>
                        
                        <div class="track__popularity">
                        
                          <i class="ion-arrow-graph-up-right"></i>
                          
                        </div>

                      </div>

                    </div>
                    
                  </div>
                  
                </div>
                
              </div>
              
            </div>
          
          </div>
          <!-- / -->

          <!-- Related Artists -->
          <div role="tabpanel" class="tab-pane" id="related-artists">
          
            <div class="media-cards">
            
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/hoodie.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Hoodie Allen</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/mikestud_large.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Mike Stud</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/drake_large.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Drake</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/jcole_large.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">J. Cole</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/bigSean_large.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Big Sean</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/wiz.jpeg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Wiz Khalifa</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/yonas.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Yonas</a>
                
              </div>
              
              <div class="media-card">
              
                <div class="media-card__image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/childish.jpg);">
                
                  <i class="ion-ios-play"></i>
                  
                </div>
                
                <a class="media-card__footer">Childish Gambino</a>
                
              </div>
              
            </div>
          
          </div>
          <!-- / -->

          <!-- About // Coming Soon-->
            <!--<div role="tabpanel" class="tab-pane" id="artist-about">About</div>-->
          <!-- / -->

        </div>
        
      </div>
      
    </div>
    
  </div>
  
  <div class="content__right">
  
    <div class="social">
    
      <div class="friends">
      
        <a href="#" class="friend">
        
          <i class="ion-android-person"></i>
          
          Sam Smith
          
        </a>
        
        <a href="#" class="friend">
        
          <i class="ion-android-person"></i>
          
          Tarah Forsyth
          
        </a>
        
        <a href="#" class="friend">
        
          <i class="ion-android-person"></i>
          
          Ricahrd Tomkins
          
        </a>
        
        <a href="#" class="friend">
        
          <i class="ion-android-person"></i>
          
          Tony Russo
          
        </a>
        
        <a href="#" class="friend">
        
          <i class="ion-android-person"></i>
          
          Alyssa Marist
          
        </a>
        
        <a href="#" class="friend">
        
          <i class="ion-android-person"></i>
          
          Ron Samson
          
        </a>
        
      </div>
      
      <button class="button-light">Find Friends</button>
      
    </div>
    
  </div>
  
</section>

<section class="current-track">

  <div class="current-track__actions">
  
    <a class="ion-ios-skipbackward"></a>
    
    <a class="ion-ios-play play"></a>
    
    <a class="ion-ios-skipforward"></a>
    
  </div>
  
  <div class="current-track__progress">
  
    <div class="current-track__progress__start">0:01</div>
    
    <div class="current-track__progress__bar">
      
      <div id="song-progress"></div>
      
    </div>
    
    <div class="current-track__progress__finish">3:07</div>
    
  </div>
  
  <div class="current-track__options">
  
    <a href="#" class="lyrics">Lyrics</a>
    
    <span class="controls">
    
      <a href="#" class="control">
        <i class="ion-navicon"></i>
      </a>
      
      <a href="#" class="control">
        <i class="ion-shuffle"></i>
      </a>
      
      <a href="#" class="control">
        <i class="fa fa-refresh"></i>
      </a>
      
      <a href="#" class="control devices">
        <i class="ion-iphone"></i>
        <span>Devices Available</span>
      </a>
      
      <a href="#" class="control volume">
        
        <i class="ion-volume-high"></i>
      
        <div id="song-volume"></div>
        
      </a>
      
    </span>
    
  </div>
  
</section>

Only Html Code Output of Spotify Clone:-

10+ HTML CSS Projects With Source Code

Now we have added our html code successfully. In this code, we first add the header with the section tag after that the image is inserted with the help of img tag then we started adding the navigation links with anchor tags and further div tags have been implemented for every element in the html code.

For alignments and changes in the particular element, we are adding div tags but there is some class name that is changed for every div element in order to specify the actual contents that are added to elements. Now we add some icons with the I tag by specifying the name that performs actions when an animation is included. Some spans were used for effects to make it interactive through effects.

For the up-to-footer section we have added the required html tags that are necessary and some button properties were added for plating the songs, adding options, etc…

So that’s off for html, we now move on to css for styling the elements and the respective code is down below.

Create A Travel Website Using HTML & CSS

CSS Code For Spotify Clone:

@charset "UTF-8";
body {
  background: #181818;
  font-family: "Roboto", sans-serif;
}
body a {
  color: #aaaaaa;
}
body a:hover {
  color: #c8c8c8;
}

.header {
  background: #282828;
  padding: 10px;
  color: #aaaaaa;
  border-bottom: 1px solid #181818;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.header .page-flows .flow {
  font-size: 20px;
  color: #aaaaaa;
  margin: 0 10px;
}
.header .page-flows .flow:hover {
  color: white;
}
.header .page-flows .flow .disabled {
  color: #5e5e5e;
}
.header .search {
  margin-left: 1%;
}
.header .search input {
  border-radius: 15px;
  border: none;
  background: white;
  color: #181818;
  padding-left: 30px;
  outline: none;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/ios-search.svg);
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: 5px;
}
.header .user {
  width: 300px;
  margin-left: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.header .user i {
  font-size: 20px;
}
.header .user i:hover {
  color: white;
  cursor: pointer;
}
.header .user__info img {
  max-width: 30px;
  max-height: 30px;
  border-radius: 50%;
  display: inline-block;
}
.header .user__actions button {
  background: none;
  border: none;
}
.header .user__actions .dropdown-menu {
  background: #282828;
  margin-top: 25px;
  border-radius: 2px;
  padding: 0;
  border: none;
}
.header .user__actions .dropdown-menu:before {
  font-family: "Ionicons";
  content: "";
  position: absolute;
  top: -30px;
  right: 7px;
  color: #282828;
  font-size: 36px;
}
.header .user__actions .dropdown-menu a {
  color: #aaaaaa;
  transition: all 0.2s ease;
}
.header .user__actions .dropdown-menu a:hover {
  background: none;
  transition: all 0.2s ease;
}
.header .user__actions .dropdown-menu li {
  padding: 10px;
  margin: 0;
  transition: all 0.2s ease;
}
.header .user__actions .dropdown-menu li:hover {
  background: #aaaaaa;
  transition: all 0.2s ease;
}
.header .user__actions .dropdown-menu li:hover a {
  color: #c8c8c8;
  transition: all 0.2s ease;
}

.content {
  display: flex;
  flex-flow: row wrap;
}
.content__left {
  width: 15%;
}
.content__middle {
  width: 70%;
}
.content__right {
  width: 15%;
}
@media (max-width: 1400px) {
  .content__left {
    width: 20%;
  }
  .content__middle {
    width: 80%;
  }
  .content__right {
    display: none;
  }
}
@media (max-width: 768px) {
  .content__left {
    width: 100%;
  }
  .content__middle {
    width: 100%;
  }
}

.navigation {
  padding: 15px;
  background: #282828;
  color: #aaaaaa;
  overflow-y: scroll;
}
.navigation__list {
  display: flex;
  flex-flow: column wrap;
  margin-bottom: 15px;
}
.navigation__list__header:after {
  font-family: "Ionicons";
  content: "";
}
.navigation__list .active:after {
  font-family: "Ionicons";
  content: "";
}
.navigation__list__item {
  color: #aaaaaa;
  padding: 5px 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.navigation__list__item:hover {
  color: white;
  text-decoration: none;
  border-right: 3px solid #1ed760;
}
.navigation__list__item i {
  width: 25px;
  display: block;
}

@media (max-width: 768px) {
  .navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .navigation__list {
    margin-bottom: 0;
    width: calc( 100% / 3 );
    text-align: center;
  }
  .navigation__list__item {
    width: 100%;
    text-align: center;
  }
  .navigation__list__item i {
    display: none;
  }
  .navigation__list__item span {
    margin: 0 auto;
  }
  .navigation__list__item:hover {
    border: none;
  }
}
.playlist {
  padding: 15px;
  background: #282828;
  border-top: 1px solid #181818;
  border-bottom: 1px solid #181818;
}
.playlist:hover {
  background: #424242;
}
.playlist:hover a {
  color: white;
}
.playlist a {
  color: #aaaaaa;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.playlist a:hover {
  text-decoration: none;
}
.playlist a i {
  font-size: 24px;
  color: white;
  margin-right: 15px;
}

@media (max-width: 768px) {
  .playlist {
    display: none;
  }
}
.playing {
  background: #282828;
  border-bottom: 1px solid #181818;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.playing__art img {
  width: 50px;
  height: 50px;
}
.playing__song {
  color: #aaaaaa;
  padding-left: 15px;
  display: flex;
  flex-flow: column wrap;
}
.playing__song a {
  color: #aaaaaa;
}
.playing__song a:hover {
  color: white;
  cursor: pointer;
}
.playing__add {
  margin-left: auto;
  padding-right: 15px;
  color: #aaaaaa;
}

@media (max-width: 768px) {
  .playing {
    border-top: 1px solid #181818;
  }
}
.current-track {
  background: #282828;
  padding: 5px 15px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.current-track__actions {
  width: 5%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.current-track__actions a {
  font-size: 24px;
  color: #c8c8c8;
}
.current-track__actions a:hover {
  color: white;
  cursor: pointer;
}
.current-track__actions .play {
  font-size: 36px;
}
.current-track__progress {
  width: 70%;
  padding: 0 30px;
  color: #aaaaaa;
  font-size: 11px;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}
.current-track__progress__bar {
  width: 100%;
  padding: 0 15px;
}
.current-track__progress__bar .noUi-target {
  border: none;
  height: 4px;
}
.current-track__progress__bar .noUi-base {
  background: #1ed760;
}
.current-track__progress__bar .noUi-origin {
  background: #5e5e5e;
}
.current-track__progress__bar .noUi-handle {
  background: #c8c8c8;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: none;
  border: none;
  left: 0;
  display: none;
}
.current-track__progress__bar .noUi-handle:before, .current-track__progress__bar .noUi-handle:after {
  background: none;
}
.current-track__progress:hover .noUi-handle {
  display: block;
}
.current-track__options {
  width: 25%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.current-track__options .lyrics {
  font-size: 11px;
  text-transform: uppercase;
  width: 15%;
  padding: 0 15px 0 0;
}
.current-track__options .controls {
  width: 85%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.current-track__options .controls .devices:hover {
  text-decoration: none;
}
.current-track__options .controls .devices i {
  margin-right: 5px;
}
.current-track__options .controls .devices span {
  font-size: 11px;
  text-transform: uppercase;
}
.current-track__options .controls .volume {
  width: 25%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.current-track__options .controls .volume i {
  width: 20px;
  color: #aaaaaa;
}
.current-track__options .controls .volume #song-volume {
  width: calc( 80% - 20px );
  border: none;
  height: 4px;
}
.current-track__options .controls .volume #song-volume .noUi-base {
  background: #c8c8c8;
}
.current-track__options .controls .volume #song-volume .noUi-origin {
  background: #5e5e5e;
}
.current-track__options .controls .volume #song-volume .noUi-handle {
  background: #c8c8c8;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: none;
  border: none;
  left: 0;
  display: none;
}
.current-track__options .controls .volume #song-volume .noUi-handle:before, .current-track__options .controls .volume #song-volume .noUi-handle:after {
  background: none;
}
.current-track__options .controls .volume #song-volume:hover .noUi-handle {
  display: block;
}
@media (max-width: 1400px) {
  .current-track__actions {
    width: 10%;
  }
  .current-track__progress {
    width: 50%;
  }
  .current-track__options {
    width: 40%;
  }
}
@media (max-width: 980px) {
  .current-track__actions {
    width: 10%;
  }
  .current-track__progress {
    width: 40%;
  }
  .current-track__options {
    width: 50%;
  }
}
@media (max-width: 768px) {
  .current-track__actions {
    width: 25%;
  }
  .current-track__progress {
    width: 75%;
  }
  .current-track__options {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .current-track__actions {
    width: 100%;
    justify-content: space-around;
    padding: 5px 0;
  }
  .current-track__progress {
    width: 100%;
    padding: 5px 0;
  }
  .current-track__options {
    width: 100%;
    padding: 5px 0;
  }
}

@media (max-width: 768px) {
  .current-track__action {
    padding-top: 15px;
  }
}
.artist {
  height: 617px;
  overflow-y: scroll;
}
.artist__header {
  height: 320px;
  border-bottom: 1px solid #282828;
  position: relative;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/spotify_img_bground.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
}
.artist__header:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/g-eazy.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}
.artist__header .artist__info {
  padding: 15px;
  z-index: 1;
  width: 80%;
  margin-top: 78px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
}
.artist__header .artist__info .profile__img {
  margin-right: 15px;
}
.artist__header .artist__info .profile__img img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
.artist__header .artist__info__type {
  color: #aaaaaa;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}
.artist__header .artist__info__name {
  color: white;
  font-size: 36px;
  font-weight: 100;
  padding: 0 0 10px 0;
}
.artist__header .artist__info__actions {
  display: flex;
  flex-flow: row wrap;
}
.artist__header .artist__info__actions button {
  margin-right: 10px;
  height: 27px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  padding: 0 15px;
  font-weight: 500;
}
.artist__header .artist__info__actions button i {
  font-size: 20px;
  margin-right: 5px;
}
.artist__header .artist__info__actions .more {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  padding: 0;
  text-align: center;
}
.artist__header .artist__info__actions .more i {
  margin: 0;
  padding-left: 6px;
}
.artist__header .artist__listeners {
  width: 20%;
  z-index: 1;
  padding: 15px;
  text-align: right;
  color: #aaaaaa;
  font-weight: 100;
  font-size: 16px;
  letter-spacing: 1px;
}
.artist__header .artist__listeners__label {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
.artist__header .artist__navigation {
  width: 100%;
  z-index: 1;
  background: rgba(24, 24, 24, 0.6);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.artist__header .artist__navigation ul {
  border: none;
}
.artist__header .artist__navigation ul li {
  padding: 0 15px;
}
.artist__header .artist__navigation ul li a {
  padding: 15px 0;
  color: #aaaaaa;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.4s ease;
  border-bottom: 4px solid rgba(0, 0, 0, 0);
}
.artist__header .artist__navigation ul li a:hover {
  background: none;
  border: none;
  color: white;
  transition: all 0.4s ease;
  border-bottom: 4px solid rgba(0, 0, 0, 0);
}
.artist__header .artist__navigation ul li.active a {
  color: white;
  background: none;
  border: none;
  border-bottom: 4px solid #1ed760;
}
.artist__header .artist__navigation ul li.active a:hover {
  border-bottom: 4px solid #1ed760;
}
.artist__header .artist__navigation__friends {
  padding: 15px;
}
.artist__header .artist__navigation__friends img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
}
.artist__header .artist__navigation__friends .tooltip {
  z-index: 1;
  position: absolute;
}
.artist.is-verified .profile__img {
  position: relative;
}
.artist.is-verified .profile__img:after {
  font-family: "Ionicons";
  content: "";
  position: absolute;
  bottom: 5px;
  right: 25px;
  color: white;
  background: #4688d7;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  line-height: 1;
}
.artist__content {
  padding: 15px;
}
.artist__content .overview {
  display: flex;
  flex-flow: row wrap;
}
.artist__content .overview__artist {
  padding-right: 15px;
  width: 70%;
}
.artist__content .overview__artist .latest-release {
  margin-bottom: 30px;
  display: flex;
  flex-flow: row wrap;
}
.artist__content .overview__artist .latest-release__art {
  width: 75px;
}
.artist__content .overview__artist .latest-release__art img {
  width: 75px;
  height: 75px;
}
.artist__content .overview__artist .latest-release__song {
  width: calc( 100% - 75px );
  padding: 10px 15px;
  background: #282828;
  color: #aaaaaa;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.artist__content .overview__artist .latest-release__song__title {
  color: #c8c8c8;
}
.artist__content .overview__related {
  width: 30%;
}
@media (max-width: 1024px) {
  .artist__content .overview__artist {
    width: 100%;
  }
  .artist__content .overview__related {
    width: 100%;
    margin-top: 15px;
  }
}
@media (max-width: 768px) {
  .artist__content .overview__artist {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .artist {
    overflow-y: auto;
  }
}
@media (max-width: 522px) {
  .artist__header {
    height: auto;
    flex-flow: column wrap;
  }
  .artist__header .artist__info {
    margin-top: 0;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    text-align: center;
  }
  .artist__header .artist__info .profile__img {
    margin-right: 0;
  }
  .artist__header .artist__info__type {
    margin-top: 10px;
  }
  .artist__header .artist__listeners {
    width: 100%;
    text-align: center;
  }
}
.tracks {
  display: flex;
  flex-flow: column wrap;
  margin-bottom: 15px;
}
.tracks__heading {
  color: #aaaaaa;
  height: 42px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.tracks__heading__number {
  margin-left: 10px;
  font-style: italic;
}
.tracks__heading__title {
  margin-left: 70px;
  width: 45%;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tracks__heading__length {
  margin-left: auto;
  font-size: 20px;
}
.tracks__heading__popularity {
  font-size: 20px;
  margin-left: 55px;
  padding-right: 10px;
}
.tracks .track {
  border-top: 1px solid #282828;
  height: 42px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.tracks .track:hover {
  background: #282828;
}
.tracks .track:last-child {
  border-bottom: 1px solid #282828;
}
.tracks .track__art img {
  width: 42px;
  height: 42px;
}
.tracks .track__number {
  margin-left: 10px;
  color: #aaaaaa;
  width: 12px;
}
.tracks .track__added {
  margin-left: 30px;
  color: #c8c8c8;
}
.tracks .track__added .added {
  color: #c8c8c8;
}
.tracks .track__added .not-added {
  color: #aaaaaa;
}
.tracks .track__title {
  width: 45%;
  margin-left: 30px;
  color: white;
}
.tracks .track__title.featured .title:after {
  content: "-";
  margin: 0 5px;
}
.tracks .track__title.featured .feature {
  color: #aaaaaa;
}
.tracks .track__title.featured .feature:after {
  content: ",";
  margin-right: 5px;
}
.tracks .track__title.featured .feature:last-child:after {
  content: "";
  margin-right: 0;
}
.tracks .track__title.featured .feature:hover {
  cursor: pointer;
  color: #c8c8c8;
  text-decoration: underline;
}
.tracks .track__explicit .label {
  border: 1px;
  border-style: solid;
  border-color: #424242;
  color: #424242;
  text-transform: uppercase;
}
.tracks .track__plays {
  color: #aaaaaa;
  margin-left: auto;
  padding-right: 10px;
}
.tracks .track__length {
  margin-left: auto;
  color: #aaaaaa;
}
.tracks .track__popularity {
  margin-left: 46px;
  padding-right: 10px;
  font-size: 20px;
  color: #aaaaaa;
}

@media (max-width: 1200px) {
  .tracks__heading__title {
    width: auto;
  }
  .tracks__heading__popularity {
    display: none;
  }
  .tracks .track__title {
    width: auto !important;
  }
  .tracks .track__explicit {
    display: none;
  }
  .tracks .track__popularity {
    display: none;
  }
}
.related-artists {
  display: flex;
  flex-flow: column wrap;
}
.related-artists .related-artist {
  background: #282828;
  padding: 5px;
  margin-bottom: 2px;
}
.related-artists .related-artist:hover {
  background: #373737;
  text-decoration: none;
}
.related-artists .related-artist__img img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.related-artists .related-artist__name {
  margin-left: 15px;
  color: white;
}

@media (max-width: 1024px) {
  .related-artists {
    flex-flow: row wrap;
  }
  .related-artists .related-artist {
    margin: 10px;
    width: calc( (100% / 3) - 20px );
  }
}
@media (max-width: 768px) {
  .related-artists .related-artist {
    margin: 5px;
    width: calc( (100% / 2) - 10px );
  }
}
@media (max-width: 480px) {
  .related-artists .related-artist {
    margin: 5px;
    width: 20%;
    background: none;
  }
  .related-artists .related-artist:hover {
    background: none;
    opacity: 0.6;
  }
  .related-artists .related-artist__name {
    display: none;
  }
}
.overview__albums {
  width: 100%;
  margin-top: 30px;
}
.overview__albums__head {
  border-bottom: 1px solid #282828;
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.overview__albums__head .view-type {
  color: white;
  margin-bottom: 4px;
}
.overview__albums__head .view-type .active {
  background: #282828;
  padding: 8px;
  border-radius: 50%;
}
.overview__albums__head .view-type i {
  padding: 8px;
  border-radius: 50%;
}
.overview__albums__head .view-type i:hover {
  padding: 8px;
  border-radius: 50%;
  background: #353535;
  cursor: pointer;
}

.album__info {
  margin-bottom: 15px;
  display: flex;
  flex-flow: row wrap;
}
.album__info__art img {
  width: 135px;
  height: 135px;
}
.album__info__meta {
  width: calc( 100% - 150px);
  margin-left: 15px;
  display: flex;
  flex-flow: column wrap;
}
.album__info__meta .album__year {
  color: #aaaaaa;
  letter-spacing: 1px;
}
.album__info__meta .album__name {
  color: white;
  font-size: 30px;
  font-weight: 100;
}
.album__info__meta .album__actions {
  margin-top: auto;
}
.album__info__meta .album__actions .save {
  padding-left: 30px;
  padding-right: 30px;
  margin-right: 10px;
}
.album__info__meta .album__actions .save:hover {
  border-color: #1ed760;
}
.album__info__meta .album__actions .more {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  padding: 0;
  text-align: center;
}
.album .track__title {
  width: 70%;
}

@media (max-width: 1200px) {
  .album .tracks .track {
    height: auto;
    padding: 10px 0;
  }
}
.social {
  padding: 15px;
  text-align: center;
  overflow-y: scroll;
}
.social .friends {
  display: flex;
  flex-flow: column wrap;
  margin-bottom: 15px;
}
.social .friends .friend {
  padding: 15px 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.social .friends .friend:first-child {
  padding-top: 0;
}
.social .friends .friend i {
  font-size: 20px;
  margin-right: 15px;
}

.media-cards {
  display: flex;
  flex-flow: row wrap;
}
.media-cards .media-card {
  margin: 15px;
  width: calc( (100% / 4) - 30px );
}
.media-cards .media-card__image {
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
}
.media-cards .media-card__image i {
  color: white;
  font-size: 72px;
  margin: 0 auto;
  opacity: 0;
  transition: all 0.5s ease;
  text-shadow: 1px 5px 15px #181818;
}
.media-cards .media-card__image i:hover {
  cursor: pointer;
}
.media-cards .media-card__image:hover i {
  opacity: 1;
  transition: all 0.5s ease;
}
.media-cards .media-card__footer {
  display: block;
  background: #282828;
  padding: 15px;
  color: white;
}
.media-cards .media-card__footer:hover {
  cursor: pointer;
}

@media (max-width: 1100px) {
  .media-cards .media-card {
    width: calc( (100% / 3) - 30px );
  }
}
@media (max-width: 768px) {
  .media-cards .media-card {
    width: calc( (100% / 2) - 30px );
  }
}
@media (max-width: 480px) {
  .media-cards .media-card {
    margin: 15px 0;
    width: 100%;
  }
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #373737;
}

@media (max-width: 650px) {
  .header .window__actions {
    width: 15%;
  }
  .header .page-flows {
    width: 20%;
    margin: 0;
  }
  .header .search {
    width: 65%;
    margin: 0;
  }
  .header .search input {
    width: 100%;
    background-size: 7%;
  }
  .header .user {
    width: 100%;
    margin-top: 15px;
    justify-content: space-around;
  }
}
.h1 {
  font-size: 36px;
}

.h2, .navigation__list__header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.red {
  color: #fc615c;
}
.red:hover {
  color: #fb302a;
}

.yellow {
  color: #fdbe41;
}
.yellow:hover {
  color: #fcad0f;
}

.green {
  color: #34c94a;
}
.green:hover {
  color: #2aa03b;
}

button {
  border-radius: 20px;
  border: none;
  padding: 5px 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  outline: none;
}
button:hover {
  cursor: pointer;
}

.button-dark {
  background: #1ed760;
  color: white;
  border: 1px solid #1ed760;
}
.button-dark:hover {
  background: #43e57d;
}

.button-light {
  background: none;
  color: #c8c8c8;
  border: 1px solid #c8c8c8;
}
.button-light:hover {
  border-color: white;
  color: white;
}

.section-title {
  text-transform: uppercase;
  color: #aaaaaa;
  letter-spacing: 1.25px;
  font-size: 13.2px;
  margin-bottom: 10px;
}

Now we added our css code successfully. In this code, we newly added several methods in margins, padding, colors, borders, and font sizes. Some of the methods in spacing(margins and padding) are “$padding-xs : 5px; $padding-sm : 10px; and $margin-lg : 30px; ,$margin-xl : 60px;” , colors – $green: RGB(30, 215, 96); and $light-black: RGB(40, 40, 40); and lot more.

Personal Portfolio Website Using HTML & CSS With Source Code

Then we styled our body sections with colors, backgrounds, font family, etc… After that, we start styling each and every element with the required css properties to make it interactive and user-responsive and those respective properties were given in the code mentioned above.

Lastly, we are adding the media queries in order to make the elements change their appearance to meet various screen sizes.

So that’s for css, now we are adding some javascript code to perform animations and toggles. The respective code is down below.

JavaScript Code For Spotify Clone:

// Sliders

var slider = document.getElementById('song-progress');

noUiSlider.create(slider, {
    start: [ 20 ],
    range: {
        'min': [   0 ],
        'max': [ 100 ]
    }
});

var slider = document.getElementById('song-volume');

noUiSlider.create(slider, {
    start: [ 90 ],
    range: {
        'min': [   0 ],
        'max': [ 100 ]
    }
});


// Tooltips

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Viewport Heights

$(window).on("resize load", function(){
  
  var totalHeight = $(window).height();

  var headerHeight = $('.header').outerHeight();
  var footerHeight = $('.current-track').outerHeight();
  var playlistHeight = $('.playlist').outerHeight();
  var nowPlaying = $('.playing').outerHeight();

  var navHeight = totalHeight - (headerHeight + footerHeight + playlistHeight + nowPlaying);
  var artistHeight = totalHeight - (headerHeight + footerHeight);

  console.log(totalHeight);
  
  $(".navigation").css("height" , navHeight);
  $(".artist").css("height" , artistHeight);
  $(".social").css("height" , artistHeight);
  
});
    


  

// Collapse Toggles

$(".navigation__list__header").on( "click" , function() {
  
  $(this).toggleClass( "active" );
  
});


// Media Queries

$(window).on("resize load", function(){
    if ($(window).width() <= 768){	
        
    $(".collapse").removeClass("in");
    
    $(".navigation").css("height" , "auto");
    
    $(".artist").css("height" , "auto");
    
    }	
});

$(window).on("resize load", function(){
    if ($(window).width() > 768){	
        
    $(".collapse").addClass("in");
    
    }	
});

Now the javascript code is also added successfully. This code is added for making the carousel concept in this project by adding the song images with respective links so that after this code the images will be displayed line by line with a start, delay, and end time which is added in this javascript code.

Make Travel Booking App Clone Using Html, Css And, Javascript

Next, we are adding the navigation links to hide behind the menu bar which is visible on lower screen size. Also, some par of this code is actually used to add play/pause, volume increase/decrease concept which may be seen from line 13. Afterwards, some part of the code represents the carousel to adjust in size and alignments in lowering screen sizes.

So now we have completed the js part. Also, we come to end, but there is one more left which is the project preview and that can be viewed in the output section.

Final Output Spotify Clone Using Html and Css:-

Live Preview Of Spotify clone Using Html and CSS:

Now we have successfully created our Spotify Clone Project with the help of Html,Css and JavaScript. You can use this project for your personnel needs and the respective lines of code is given with the code pen link mentioned below.

If you find out this blog helpful? , then make sure to search Codewithrandom on Google for front-end projects with source codes and make sure to follow the codewithrandom Instagram page.

Refer code – alowenthal

Written by – ragunathan s