| Server IP : 104.21.21.239 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<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=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;700&family=Caveat+Brush&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="one-page/css/et-line.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/components/bs-switches.css">
<link rel="stylesheet" href="demos/music/css/mediaelement/mediaelementplayer.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/music/music.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Music Steaming | Canvas</title>
<style>
.css3-spinner {
background-color: #131722;
}
</style>
</head>
<body class="stretched bg-color2" data-loader="4" data-loader-color="theme">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" style="margin-bottom: 40px">
<!-- Header
============================================= -->
<header id="header" class="full-header transparent-header dark no-sticky header-size-md">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo">
<a href="demo-music.html">
<img class="logo-default" srcset="demos/music/images/logo.png, demos/music/images/[email protected] 2x" src="demos/music/images/[email protected]" alt="Canvas Logo">
<img class="logo-dark" srcset="demos/music/images/logo-dark.png, demos/music/images/[email protected] 2x" src="demos/music/images/[email protected]" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<div class="header-misc">
<!-- Top Search
============================================= -->
<div id="top-search" class="header-misc-icon">
<a href="#" id="top-search-trigger"><i class="uil uil-search"></i><i class="bi-x-lg"></i></a>
</div><!-- #top-search end -->
</div>
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">
<ul class="menu-container">
<li class="menu-item active"><a class="menu-link" href="#"><div>Home</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Musics</div></a>
<ul class="sub-menu-container" data-class="up-lg:not-dark">
<li class="menu-item"><a class="menu-link" href="#"><div>Featured</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>New Arrivals</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Old Popular</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Top 90's</div></a></li>
</ul>
</li>
<li class="menu-item"><a class="menu-link" href="#"><div>About</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Discover</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Artists</div></a>
<ul class="sub-menu-container" data-class="up-lg:not-dark">
<li class="menu-item"><a class="menu-link" href="#"><div>A-Z Artists</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>New Artists</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Popular Artists</div></a></li>
</ul>
</li>
<li class="menu-item"><a class="menu-link" href="#"><div>Videos</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Contact</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
<form class="top-search-form" action="search.html" method="get">
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
</form>
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-element swiper_wrapper min-vh-60 min-vh-md-100 include-header" style="background: #131722;" data-effect="fade" data-loop="true" data-speed="1000">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark">
<div class="container">
<div class="slider-caption justify-content-end">
<div>
<h2 class="font-primary text-transform-none">The Terror Of Highway.</h2>
<p class="d-none d-md-block">From the New York City of the World.</p>
<a class="button button-rounded fw-normal ls-1 track-list mt-3" data-track="demos/music/tracks/the-terror-of-highway.mp3" data-poster="demos/music/tracks/poster-images/the-terror-of-highway.jpg" data-title="The Terror Of Highway" data-singer="United Album"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button d-none d-md-inline-block button-rounded mt-3 px-3" style="background-color: #1f2330;"><i class="bi-bookmark-fill me-0"></i></a>
<a href="#" class="button d-none d-md-inline-block button-rounded mt-3 px-3" style="background-color: #1f2330;"><i class="bi-heart me-0"></i></a>
<a href="#" class="button d-none d-md-inline-block bg-transparent fw-light text-transform-none mt-3 px-3"><i class="bi-share color"></i>Share</a>
<a href="#" class="button d-none d-md-inline-block bg-transparent fw-light text-transform-none mt-3 px-3 ms-0"><i class="uil uil-plus color"></i>Add</a>
</div>
</div>
</div>
<div class="swiper-slide-bg" style="background-image: url('demos/music/images/slider/1.jpg'); background-position: bottom center;"></div>
</div>
<div class="swiper-slide dark">
<div class="container">
<div class="slider-caption justify-content-end">
<div>
<h2 class="font-primary text-transform-none">sgt. peppers heart club band Edition</h2>
<p class="d-none d-md-block">The Beatles Club</p>
<a href="#" class="button button-rounded fw-normal ls-1 track-list mt-3" data-track="demos/music/tracks/tammy-stan-devereaux.mp3" data-poster="demos/music/tracks/poster-images/tammy-stan-devereaux.jpg" data-title="sgt. peppers heart club band Edition" data-singer="the bettles 2021"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button d-none d-md-inline-block button-rounded mt-3 px-3" style="background-color: #1f2330;"><i class="bi-bookmark-fill me-0"></i></a>
<a href="#" class="button d-none d-md-inline-block button-rounded mt-3 px-3" style="background-color: #1f2330;"><i class="bi-heart me-0"></i></a>
<a href="#" class="button d-none d-md-inline-block mt-3 px-3 bg-transparent fw-light text-transform-none" style="background-color: #1f2330;"><i class="bi-share color"></i>Share</a>
<a href="#" class="button d-none d-md-inline-block mt-3 px-3 bg-transparent fw-light text-transform-none ms-0" style="background-color: #1f2330;"><i class="uil uil-plus color"></i>Add</a>
</div>
</div>
</div>
<div class="swiper-slide-bg" style="background-image: url('demos/music/images/slider/2.jpg');"></div>
</div>
<div class="swiper-slide dark">
<div class="container">
<div class="slider-caption justify-content-end">
<div>
<h2 class="font-primary text-transform-none">The End Of The Beginning</h2>
<p class="d-none d-md-block">The Unplugged Editions</p>
<a href="#" class="button button-rounded fw-normal ls-1 track-list mt-3" data-track="demos/music/tracks/the-end-of-the-beginning.mp3" data-poster="demos/music/tracks/poster-images/the-end-of-the-beginning.jpg" data-title="The End Of The Beginning" data-singer="The Unplugged Editions" style="margin-top: 15px"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button d-none d-md-inline-block button-rounded mt-3 px-3" style="background-color: #1f2330;"><i class="bi-bookmark-fill me-0"></i></a>
<a href="#" class="button d-none d-md-inline-block button-rounded mt-3 px-3" style="background-color: #1f2330;"><i class="bi-heart me-0"></i></a>
<a href="#" class="button d-none d-md-inline-block mt-3 px-3 bg-transparent fw-light text-transform-none"><i class="bi-share color"></i>Share</a>
<a href="#" class="button d-none d-md-inline-block mt-3 px-3 bg-transparent fw-light text-transform-none ms-0"><i class="uil uil-plus color"></i>Add</a>
</div>
</div>
</div>
<div class="swiper-slide-bg" style="background-image: url('demos/music/images/slider/3.jpg'); background-position: bottom left;"></div>
</div>
</div>
<div class="slider-arrow-left bg-transparent"><i class="bi-arrow-left"></i></div>
<div class="slider-arrow-right bg-transparent"><i class="bi-arrow-right"></i></div>
</div>
</section>
<!-- Content
============================================= -->
<section id="content" class="bg-color2">
<div class="content-wrap py-0" style="overflow: visible;">
<div class="container" style="z-index: 7;">
<div class="heading-block mb-4 border-0 dark">
<h3>Popular Songs of the Week</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
<!-- Carousel
============================================= -->
<div id="oc-popular-songs" class="owl-carousel image-carousel carousel-widget" data-margin="20" data-nav="true" data-pagi="false" data-items-xs="2" data-items-sm="3" data-items-md="4" data-items-lg="6" data-items-xl="6">
<!-- Carousel Items
============================================= -->
<div class="oc-item" data-animate="fadeInDown">
<img src="demos/music/images/popular-songs/8.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Maq Amor</a></h3>
<span><a href="#">The Universe</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/maq-amor.mp3" data-poster="demos/music/tracks/poster-images/maq-amor.jpg" data-title="Maq Amor" data-singer="The Universe"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown" data-delay="100">
<img src="demos/music/images/popular-songs/9.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Stagger Lee</a></h3>
<span><a href="#">Ed Sheeran</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/stagger-lee.mp3" data-poster="demos/music/tracks/poster-images/stagger-lee.jpg" data-title="Stagger Lee" data-singer="Ed Sheeran"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown" data-delay="250">
<img src="demos/music/images/popular-songs/7.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Clean Clean</a></h3>
<span><a href="#">R Costello</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/clean-clean.mp3" data-poster="demos/music/images/popular-songs/7.jpg" data-title="Clean Clean" data-singer="R Costello"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown" data-delay="400">
<img src="demos/music/images/popular-songs/1.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Take The Dare</a></h3>
<span><a href="#">Bruno Mars</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/take_the_dare.mp3" data-poster="demos/music/images/popular-songs/1.jpg" data-title="Take The Dare" data-singer="Bruno Mars"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown" data-delay="550">
<img src="demos/music/images/popular-songs/3.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Fallin Extended Mix</a></h3>
<span><a href="#">Justin</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown" data-delay="700">
<img src="demos/music/images/popular-songs/4.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">I Need You Now</a></h3>
<span><a href="#">Skelton</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/i-need-you-now.mp3" data-poster="demos/music/tracks/poster-images/i-need-you-now.jpg" data-title="I Need You Now" data-singer="Skelton"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown">
<img src="demos/music/images/popular-songs/2.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Tammy Stan Devereaux</a></h3>
<span><a href="#">Devereaux</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/tammy-stan-devereaux.mp3" data-poster="demos/music/tracks/poster-images/tammy-stan-devereaux.jpg" data-title="Tammy Stan Devereaux" data-singer="Devereaux"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
<div class="oc-item" data-animate="fadeInDown">
<img src="demos/music/images/popular-songs/5.jpg" alt="Image 1">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-center justify-content-between">
<div class="portfolio-desc py-0">
<h3><a href="#">Something About Love</a></h3>
<span><a href="#">Sian</a></span>
</div>
<div data-hover-animate="fadeIn" data-hover-speed="400">
<a href="#" class="text-light mx-0 track-list" data-track="demos/music/tracks/something-about-love.mp3" data-poster="demos/music/tracks/poster-images/something-about-love.jpg" data-title="Something About Love" data-singer="Sian"><i class="bi-play-fill"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-6">
<div class="col-lg-6">
<div class="heading-block border-0 dark mb-3">
<h3>Hot Tracks</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
<!-- Song Lists Items
============================================= -->
<div class="songs-lists-wrap">
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">01</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/ibelieveinyou.mp3" data-poster="demos/music/tracks/poster-images/ibelieveinyou.jpg" data-title="i Believe In You" data-singer="Lost European">
<img src="demos/music/tracks/poster-images/ibelieveinyou.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span>
</a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">i Believe In You<br><span>Lost European</span></a></div>
<div class="songs-time col-auto">03:28</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">02</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/i-need-you-now.mp3" data-poster="demos/music/tracks/poster-images/i-need-you-now.jpg" data-title="I Need You Now" data-singer="Skelton">
<img src="demos/music/tracks/poster-images/i-need-you-now.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">I Need You Now<br><span>Skelton</span></a></div>
<div class="songs-time col-auto">03:33</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">03</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/something-about-love.mp3" data-poster="demos/music/tracks/poster-images/something-about-love.jpg" data-title="Something About Love" data-singer="Sian">
<img src="demos/music/tracks/poster-images/something-about-love.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Something About Love<br><span>Sian</span></a></div>
<div class="songs-time col-auto">03:43</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">04</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/maq-amor.mp3" data-poster="demos/music/tracks/poster-images/maq-amor.jpg" data-title="Maq Amor" data-singer="The Universe">
<img src="demos/music/tracks/poster-images/maq-amor.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Maq Amor<br><span>The Universe</span></a></div>
<div class="songs-time col-auto">04:08</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">05</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/searchin-lost-european.mp3" data-poster="demos/music/tracks/poster-images/searchin-lost-european.jpg" data-title="Searchin Lost European" data-singer="Lost European">
<img src="demos/music/tracks/poster-images/searchin-lost-european.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Searchin Lost European<br><span>Lost European</span></a></div>
<div class="songs-time col-auto">02:54</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">06</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin">
<img src="demos/music/tracks/poster-images/fallin-extended-mix.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Fallin Extended Mix<br><span>Justin</span></a></div>
<div class="songs-time col-auto">03:21</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a href="#" class="button bg-transparent fw-light text-transform-none ms-0" style="color: #AAA; padding: 0 16px;">See More..</a>
</div>
</div>
<div class="w-100 d-block d-md-block d-lg-none mt-6 clear"></div>
<div class="col-lg-6">
<div class="heading-block border-0 dark mb-3">
<h3>Latest Tracks</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
<div class="songs-lists-wrap">
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">01</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/searchin-lost-european.mp3" data-poster="demos/music/tracks/poster-images/searchin-lost-european.jpg" data-title="Searchin Lost European" data-singer="Lost European">
<img src="demos/music/tracks/poster-images/searchin-lost-european.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Searchin Lost European<br><span>Lost European</span></a></div>
<div class="songs-time col-auto">02:54</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">02</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin">
<img src="demos/music/tracks/poster-images/fallin-extended-mix.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Fallin Extended Mix<br><span>Justin</span></a></div>
<div class="songs-time col-auto">03:21</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">03</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/maq-amor.mp3" data-poster="demos/music/tracks/poster-images/maq-amor.jpg" data-title="Maq Amor" data-singer="The Universe">
<img src="demos/music/tracks/poster-images/maq-amor.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Maq Amor<br><span>The Universe</span></a></div>
<div class="songs-time col-auto">04:08</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">04</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/i-need-you-now.mp3" data-poster="demos/music/tracks/poster-images/i-need-you-now.jpg" data-title="I Need You Now" data-singer="Skelton">
<img src="demos/music/tracks/poster-images/i-need-you-now.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">I Need You Now<br><span>Skelton</span></a></div>
<div class="songs-time col-auto">03:33</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">05</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/something-about-love.mp3" data-poster="demos/music/tracks/poster-images/something-about-love.jpg" data-title="Something About Love" data-singer="Sian">
<img src="demos/music/tracks/poster-images/something-about-love.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span></a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">Something About Love<br><span>Sian</span></a></div>
<div class="songs-time col-auto">03:43</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
<!-- List Items
============================================= -->
<div class="songs-list">
<div class="songs-number col-auto">06</div>
<div class="songs-image track-image col-auto">
<a href="#" class="track-list" data-track="demos/music/tracks/ibelieveinyou.mp3" data-poster="demos/music/tracks/poster-images/ibelieveinyou.jpg" data-title="i Believe In You" data-singer="Lost European">
<img src="demos/music/tracks/poster-images/ibelieveinyou.jpg" alt="Image 1"><span><i class="bi-play-fill"></i></span>
</a>
</div>
<div class="songs-name track-name flex-grow-1 col-auto"><a href="#">i Believe In You<br><span>Lost European</span></a></div>
<div class="songs-time col-auto">03:28</div>
<div class="songs-button dropdown col-auto">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</li>
</ul>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a href="#" class="button bg-transparent fw-light text-transform-none ms-0" style="color: #AAA; padding: 0 16px;">See More..</a>
</div>
</div>
</div>
<!-- Tabs
============================================= -->
<div class="tabs-music-demo dark mt-6" id="album-tab">
<div class="nav canvas-alt-tabs tabs-alt tabs-bb tabs nav-tabs mb-4" role="tablist">
<a class="nav-link active" id="tabs-1-tab" data-bs-toggle="tab" href="#tab-1" role="tab"
aria-controls="tab-1" aria-selected="true" data-bg="#D6EBEE">Featured</a>
<a class="nav-link" id="tabs-2-tab" data-bs-toggle="tab" href="#tab-2" role="tab"
aria-controls="tab-2" aria-selected="false" data-bg="#E4E4E4">Recommended</a>
<a class="nav-link" id="tabs-3-tab" data-bs-toggle="tab" href="#tab-3" role="tab"
aria-controls="tab-3" aria-selected="false" data-bg="#EFF1FE">Popular</a>
<a class="nav-link" id="tabs-4-tab" data-bs-toggle="tab" href="#tab-4" role="tab"
aria-controls="tab-4" aria-selected="false" data-bg="#EDF4EA">Latest</a>
</div>
<!-- Tabs Container
============================================= -->
<div class="tab-content music-tabs-albums">
<!-- Tab Content 1
============================================= -->
<div class="tab-pane show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1-tab">
<div class="row gutter-20 align-items-stretch">
<div class="col-md-6 min-vh-40">
<div class="grid-inner h-100" style="background-image: url('demos/music/images/album-artworks/1/1.jpg');">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Justin Bieber</span>
<h3><a href="#" class="font-secondary">Collections of My Worlds</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-0">
<div class="row mx-0 gutter-20">
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/1/2.jpg" alt="Locked Steel Gate" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc py-0">
<span class="font-primary text-uppercase">Nicki Minaj</span>
<h3><a href="#" class="font-secondary">Pills n Positions</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#"><i class="uil uil-ellipsis-h"></i></a>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/1/3.jpg" alt="Mac Sunglasses" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc py-0">
<span class="font-primary text-uppercase">Rihanna</span>
<h3><a href="#" class="font-secondary">Latest Collections of Rihanna</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#"><i class="uil uil-ellipsis-h"></i></a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/1/4.jpg" alt="Image" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">David Guetta</span>
<h3><a href="#" class="font-secondary">Collections of David Guetta</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#"><i class="uil uil-ellipsis-h"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content 2
============================================= -->
<div class="tab-pane" id="tab-2" role="tabpanel" aria-labelledby="tab-2-tab">
<div class="row gutter-20 align-items-stretch">
<div class="col-md-6 min-vh-40">
<div class="grid-inner h-100" style="background-image: url('demos/music/images/album-artworks/2/1.jpg');">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Katy Perry</span>
<h3><a href="#" class="font-secondary">Collections of Katy Perry</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-0">
<div class="row mx-0 gutter-20">
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/2/2.jpg" alt="Locked Steel Gate" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Bruno Mars</span>
<h3><a href="#" class="font-secondary">Just The Way You Are</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/2/3.jpg" alt="Mac Sunglasses" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Jennifer Lopez</span>
<h3><a href="#" class="font-secondary">Ain’t Your Mama</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/2/4.jpg" alt="Image" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Taylor Swift</span>
<h3><a href="#" class="font-secondary">Shake It Off</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content 3
============================================= -->
<div class="tab-pane" id="tab-3" role="tabpanel" aria-labelledby="tab-3-tab">
<div class="row gutter-20 align-items-stretch">
<div class="col-md-6 min-vh-40">
<div class="grid-inner h-100" style="background-image: url('demos/music/images/album-artworks/1/1.jpg');">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Justin Bieber</span>
<h3><a href="#" class="font-secondary">Collections of My Worlds</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-0">
<div class="row mx-0 gutter-20">
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/1/2.jpg" alt="Locked Steel Gate" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc py-0">
<span class="font-primary text-uppercase">Nicki Minaj</span>
<h3><a href="#" class="font-secondary">Pills n Positions</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#"><i class="uil uil-ellipsis-h"></i></a>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/1/3.jpg" alt="Mac Sunglasses" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc py-0">
<span class="font-primary text-uppercase">Rihanna</span>
<h3><a href="#" class="font-secondary">Latest Collections of Rihanna</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#"><i class="uil uil-ellipsis-h"></i></a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/1/4.jpg" alt="Image" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">David Guetta</span>
<h3><a href="#" class="font-secondary">Collections of David Guetta</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#"><i class="uil uil-ellipsis-h"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content 4
============================================= -->
<div class="tab-pane" id="tab-4" role="tabpanel" aria-labelledby="tab-4-tab">
<div class="row gutter-20 align-items-stretch">
<div class="col-md-6 min-vh-40">
<div class="grid-inner h-100" style="background-image: url('demos/music/images/album-artworks/2/1.jpg');">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark desc-sm align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Katy Perry</span>
<h3><a href="#" class="font-secondary">Collections of Katy Perry</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-0">
<div class="row mx-0 gutter-20">
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/2/2.jpg" alt="Locked Steel Gate" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Bruno Mars</span>
<h3><a href="#" class="font-secondary">Just The Way You Are</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/2/3.jpg" alt="Mac Sunglasses" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Jennifer Lopez</span>
<h3><a href="#" class="font-secondary">Ain’t Your Mama</a></h3>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<img src="demos/music/images/album-artworks/2/4.jpg" alt="Image" class="w-100 h-100 object-cover">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-start justify-content-between">
<div>
<div class="portfolio-desc">
<span class="font-primary text-uppercase">Taylor Swift</span>
<h3><a href="#" class="font-secondary">Shake It Off</a></h3>
</div>
<div>
<a href="#" class="button button-circle button-small fw-normal ls-1 ms-0 track-list" data-track="demos/music/tracks/fallin-extended-mix.mp3" data-poster="demos/music/tracks/poster-images/fallin-extended-mix.jpg" data-title="Fallin Extended Mix" data-singer="Justin"><i class="bi-play-fill"></i>Play Now</a>
<a href="#" class="button button-circle button-small button-border button-white fw-normal ls-1">View All</a>
</div>
</div>
</div>
<div class="bg-overlay-floating dropdown z-2" data-hover-animate="fadeIn">
<a href="#"><i class="bi-heart"></i></a>
<a href="#" data-bs-toggle="dropdown" data-bs-display="static"><i class="uil uil-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#"><span class="me-1 uil uil-plus"></span> Add to Queue</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-music-note-beamed"></span> Add to Playlist</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-cloud-download"></span> Download Offline</a>
<a class="dropdown-item" href="#"><span class="me-1 bi-heart"></span> Love</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="me-1 bi-share"></span> Share</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Top Charts
============================================= -->
<div class="heading-block mb-4 mt-5 border-0 dark">
<h3>Top Charts</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
<div id="top-charts" class="portfolio grid-container row dark gutter-20 desc-sm" data-layout="fitRows">
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/1.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Am I that easy</a></h3>
<span><a href="#">Jim Reeves</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="100">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/2.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Bachelor boy</a></h3>
<span><a href="#">Arcade Fire</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="200">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/3.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">I don’t like it, I love it </a></h3>
<span><a href="#">Flo Rida ft. Robin Thicke</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="300">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/4.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Into the night</a></h3>
<span><a href="#">Benny Mardones</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="400">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/5.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Missing you </a></h3>
<span><a href="#">John Waite</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="500">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/6.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Only you</a></h3>
<span><a href="#">Ayo</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="50">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/7.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Over and over again </a></h3>
<span><a href="#">Nathan Sykes</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="150">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/8.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Rolling in the deep</a></h3>
<span><a href="#">Adele</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="250">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/9.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Story of my life</a></h3>
<span><a href="#">One Direction</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="350">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/10.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Take me to church</a></h3>
<span><a href="#">Hozier</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="450">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/11.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Want to want me</a></h3>
<span><a href="#">Jason Derulo</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="550">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/12.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">What's going on</a></h3>
<span><a href="#">Marvin Gaye</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="200">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/13.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Whispering hope</a></h3>
<span><a href="#">Jim Reeves</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="300">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/14.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">With or without you</a></h3>
<span><a href="#">U2</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="400">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/15.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Seasons in the sun </a></h3>
<span><a href="#">Westlife</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="500">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/16.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Red River Valley</a></h3>
<span><a href="#">Marty Robbins</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="600">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/17.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">My happiness</a></h3>
<span><a href="#">Connie Francis</a></span>
</div>
</div>
</article>
<article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn" data-delay="700">
<div class="grid-inner">
<div class="portfolio-image">
<a href="#">
<img src="demos/music/images/charts/18.jpg" alt="Image">
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-folder"></i></a>
<a href="#" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="bi-share"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="#">Good kisser</a></h3>
<span><a href="#">Usher</a></span>
</div>
</div>
</article>
</div>
<!-- Singers
============================================= -->
<div class="section bg-transparent mt-4 mb-0">
<div class="heading-block text-center border-0 dark">
<h2 class="text-transform-none">Top Singers</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
<div class="singer-wrap">
<a href="#" class="singer-bb-image big" style="background-image: url('demos/music/images/singers/david.jpg');"><span>David Guetta</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/jennifer-lopez.jpg'); top: 0px; left: 3%;"><span>Jennifer Lopez</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/selena-gomez.jpg'); top: 43%; margin-left: -49%;"><span>Selena Gomez</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/bruno-mars.jpg'); top: 34%; margin-left: -38%;"><span>Bruno Mars</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/lady-gaga.jpg'); top: 0; margin-left: -33%;"><span>Lady Gaga</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/ariana-grande.jpg'); top: 0; margin-left: -20%;"><span>Ariana Grande</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/chris-brown.jpg'); top: auto; bottom: 0%; margin-left: -42%;"><span>Chris Brown</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/katy-perry.jpg'); top: 34%; margin-left: -27%;"><span>Katy Perry</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/flo-rida.jpg'); top: auto; bottom: 0; margin-left: -31%;"><span>Flo Rida</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/martin-garrix.jpg'); top: auto; bottom: 5%; margin-left: -21%;"><span>Martin Garrix</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/nicki-minaj.jpg'); top: 0px; left: auto; right: 4%;"><span>Nicki Minaj</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/justin-bieber.jpg'); top: 44%; margin-left: 41%;"><span>Justin Bieber</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/rihanna.jpg'); top: 32%; margin-left: 30%;"><span>Rihanna</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/ed-sheeran.jpg'); top: auto; bottom: 2%; margin-left: 34%;"><span>Ed Sheeran</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/u2.jpg'); top: 1%; margin-left: 26%;"><span>U2</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/drake.jpg'); top: 4%; margin-left: 14%;"><span>Drake</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/taylor-swift.jpg'); top: auto; bottom: 0; margin-left: 23%;"><span>Taylor Swift</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/eminem.jpg'); top: auto; bottom: 36%; margin-left: 19%;"><span>Eminem</span></a>
<a href="#" class="singer-bb-image" style="background-image: url('demos/music/images/singers/sia.jpg'); top: auto; bottom: 0; margin-left: 12.5%;"><span>Sia</span></a>
</div>
</div>
<div class="clear"></div>
<div class="row mt-6 dark">
<!-- Soundcloud
============================================= -->
<div class="col-lg-4 col-md-6">
<h3>Soundcloud Embed</h3>
<iframe height="130" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/301161123&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe><br><br>
<iframe height="130" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/278002889&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<!-- Mobile App
============================================= -->
<div class="col-lg-7 col-md-5 offset-md-1 overflow-hidden">
<div class="row">
<div class="col-lg-6 order-lg-12">
<div class="d-block d-md-none d-lg-none d-xl-block mt-5 clear"></div>
<h3>Grab it Now in Mobile</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, impedit.</p>
<a href="#" class="button button-small button-rounded button-desc ms-0"><i class="fa-brands fa-apple"></i><div>App Store<span>Free Forever, Downlod It Now</span></div></a>
<a href="#" class="button button-small button-rounded button-desc ms-0" style="margin-top: 10px"><i class="fa-brands fa-android"></i><div>Google Play<span>Free Forever, Downlod It Now</span></div></a>
</div>
<div class="d-block d-md-block d-lg-none mt-5 clear"></div>
<div class="col-lg-6 order-lg-1 d-sm-none d-md-none d-lg-block">
<img src="demos/music/images/iphone.png" alt="Mobile" data-animate="fadeInUp">
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="border-0 dark" style="background-color: #111;">
<!-- Copyrights
============================================= -->
<div id="copyrights" style="color: #444;">
<div class="container">
<div class="row justify-content-between col-mb-30">
<div class="col-12 col-lg-auto text-center text-lg-start">
Copyrights © 2023 All Rights Reserved by Canvas Inc.
</div>
<div class="col-12 col-lg-auto text-center text-lg-end">
<div class="d-flex">
<a href="#" class="social-icon si-small text-white bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-google">
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-google"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-pinterest">
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-pinterest-p"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-vimeo">
<i class="fa-brands fa-vimeo-v"></i>
<i class="fa-brands fa-vimeo-v"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-github">
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-github"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-yahoo">
<i class="fa-brands fa-yahoo"></i>
<i class="fa-brands fa-yahoo"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-linkedin">
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Audio Player
============================================= -->
<audio id="audio-player" preload="none" class="mejs__player" controls data-mejsoptions='{"defaultAudioHeight": "50", "alwaysShowControls": "true"}' style="max-width:100%;">
<source src="demos/music/src/audios/nashe-si.mp3" type="audio/mp3">
</audio>
<!-- Default Track - onLoad
============================================= -->
<div id="track-onload" data-track="demos/music/tracks/clean-clean.mp3" data-poster="demos/music/images/popular-songs/7.jpg" data-title="Clean Clean" data-singer="R Costello"></div>
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up" style="bottom: 70px;"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- Audio player Plugin
============================================= -->
<script src="demos/music/js/mediaelement/mediaelement-and-player.js"></script>
<script>
// Custom Tab jQuery
// jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
// var gridContainerAvailable = jQuery( ui.newPanel ).find('.grid-container');
// if( gridContainerAvailable.length > 0 ) {
// gridContainerAvailable.each( function(){
// var portfolioGrid = jQuery(this);
// if( !portfolioGrid.hasClass('tabs-enabled-grid-container') ) {
// portfolioGrid.isotope('layout');
// jQuery(window).trigger('resize');
// portfolioGrid.addClass('tabs-enabled-grid-container');
// }
// });
// }
// });
// Music playing Scripts
var trackPlaying = '',
audioPlayer = document.getElementById('audio-player');
audioPlayer.addEventListener("ended", function(){
jQuery('.track-list').find('i').removeClass('bi-pause-fill').addClass('bi-play-fill');
});
audioPlayer.addEventListener("pause", function(){
jQuery('.track-list').find('i').removeClass('bi-pause-fill').addClass('bi-play-fill');
});
function changeAudio( sourceUrl, posterUrl, trackTitle, trackSinger, playAudio = true ) {
var audio = jQuery("#audio-player"),
clickEl = jQuery('[data-track="'+sourceUrl+'"]'),
playerId = audio.closest('.mejs__container').attr('id'),
playerObject = mejs.players[playerId];
jQuery('.track-list').find('i').removeClass('bi-pause-fill').addClass('bi-play-fill');
if( sourceUrl == trackPlaying ) {
if (playerObject.node.paused) {
playerObject.play();
clickEl.find('i').removeClass('bi-play-fill').addClass('bi-pause-fill');
} else {
playerObject.pause();
clickEl.find('i').removeClass('bi-pause-fill').addClass('bi-play-fill');
}
return true;
}
trackPlaying = sourceUrl;
audio.attr( 'poster', posterUrl );
audio.attr( 'title', trackTitle );
jQuery('.mejs__layers').html('').html('<div class="mejs-track-artwork"><img src="'+ posterUrl +'" alt="Track Poster"></div><div class="mejs-track-details"><h3>'+ trackTitle +'<br><span>'+ trackSinger +'</span></h3></div>');
if( sourceUrl != '' ) {
playerObject.setSrc( sourceUrl );
}
playerObject.pause();
playerObject.load();
if( playAudio == true ) {
playerObject.play();
jQuery(clickEl).find('i').removeClass('bi-play-fill').addClass('bi-pause-fill');
}
}
jQuery('.track-list').on( 'click', function(){
var audioTrack = jQuery(this).attr('data-track'), // Track url
posterUrl = jQuery(this).attr('data-poster'), // Track Poster Image
trackTitle = jQuery(this).attr('data-title'); // Track Title
trackSinger = jQuery(this).attr('data-singer'); // Track Singer Name
changeAudio( audioTrack, posterUrl, trackTitle, trackSinger );
return false;
});
jQuery(window).on( 'load', function(){
var trackOnload = jQuery('#track-onload');
if( trackOnload.length > 0 ) {
var audioTrack = trackOnload.attr('data-track'), // Track url
posterUrl = trackOnload.attr('data-poster'), // Track Poster Image
trackTitle = trackOnload.attr('data-title'); // Track Title
trackSinger = trackOnload.attr('data-singer'); // Track Singer Name
setTimeout( function(){
changeAudio( audioTrack, posterUrl, trackTitle, trackSinger, false );
}, 500);
}
});
</script>
</body>
</html>