Hugging Face's logo

Spaces:
JAYASWAROOP
/
music1
Running

App Files Community
2
music1 / index.html
JAYASWAROOP's picture
JAYASWAROOP
Update index.html
d155c87
raw
history blame
37.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music</title>
<script src="https://kit.fontawesome.com/20c5629a29.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="audio.js"></script>
<style>
* {
box-sizing: border-box;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.slide{
width: 100%;
}
input{
border-radius: 9px;
border-width: 0px;
width: 170px;
}
.movie {
border-radius: 11px;
margin-bottom: 20px;
transition: transform 0.2s ease-in-out;
}
.movie:hover {
transform: scale(1.07);
}
.song{
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.head{
font-size: 38px;
}
.audio {
width: 100%;
background-color: #ffffff;
border-radius: 10px;
height: 30px;
}
.title {
font-size: 24px;
}
.description {
font-size: 18px;
}
@media (max-width: 767px) {
.head {
font-size: 32px;
}
.title {
font-size: 20px;
}
.description {
font-size: 14px;
}
.audio {
width: 80%;
max-width: 400px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 10px;
height: 30px;
}
}
.container1 {
height: 500px;
width: 450px;
color: #ffffff;
margin: 0 auto;
font-family: 'Pacifico', cursive;
border-width: 0px;
padding: 20px;
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
background-size: cover;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
font-size: 35px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
width: 400px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #cccccc;
border-radius: 3px;
box-sizing: border-box;
}
input[type="submit"] {
width: 400px;
padding: 10px;
background-color: #7accf0;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.card1{
margin-top: 60px;
}
.song-item {
margin-bottom: 10px;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.song-item img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.song-details {
flex-grow: 1;
}
.song-title {
font-weight: bold;
margin: 0 0 5px 0;
}
.song-artist {
font-size: 14px;
color: #666666;
margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.slide1{
background-image: url('https://png.pngtree.com/background/20210711/original/pngtree-music-dream-show-creative-design-background-template-picture-image_1072113.jpg');
height: 555px;
background-size: cover;
}
.matter{
height: 500px;
width: 800px;
margin-top: 100px;
margin-left: 75px;
font-size: 25px;
font-family: 'Pacifico', cursive;
}
.slide2{
background-image: url('https://png.pngtree.com/thumb_back/fh260/back_our/20190628/ourmid/pngtree-taobao-e-commerce-advertisement-carousel-banner-background-purple-blue-image_264734.jpg');
height: 555px;
font-size: 25px;
font-family: 'Pacifico', cursive;
background-size: cover;
text-align: center;
font-weight: bold;
}
.slide3{
background-image: url('https://png.pngtree.com/thumb_back/fh260/back_our/20190620/ourmid/pngtree-guitar-interest-class-enrollment-cartoon-geometric-blue-banner-image_171320.jpg');
height: 555px;
width: 100%;
font-size: 28px;
font-family: 'Pacifico', cursive;
background-size: cover;
text-align: center;
font-weight: bold;
color: #A2FF00;
}
/* For desktops and larger devices */
@media (min-width: 2000px) {
.slide1, .slide2, .slide3 {
height: 700px;
background-size: 1920px 1080px; /* Set the specific dimensions */
}
audio{
width: 100%;
margin: 0 auto;
background-color: #ffffff;
border-radius: 10px;
height: 30px;
}
}
main {
padding: 20px 0;
}
.playlist {
padding: 20px;
}
.song1 {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 20px;
}
audio {
width: 100%;
margin-top: 10px;
}
.container2 {
margin: 0 auto;
font-family: 'Pacifico', cursive;
color: #ffffff;
padding: 20px;
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
border-width: 0px;
background-size: cover;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container3 {
font-family: 'Pacifico', cursive;
color: #ffffff;
padding: 20px;
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
border-width: 0px;
background-size: cover;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.settings {
margin: 0 auto;
padding: 20px;
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.settings h2 {
font-size: 28px;
margin-bottom: 20px;
color: #333;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #444;
}
select,
input[type="checkbox"] {
width: calc(100% - 16px);
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
outline: none;
}
button {
padding: 12px 24px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
/* Toggle Switch Styles */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-switch label {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 15px;
transition: background-color 0.3s ease;
}
.toggle-switch input:checked + label {
background-color: #3498db;
}
.toggle-switch label:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 2px;
bottom: 2px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
}
.toggle-switch input:checked + label:before {
transform: translateX(30px);
}
</style>
</head>
<body>
<!-- vedio tag for background animation -->
<video autoplay muted loop id="myVideo">
<source src="neon1.mp4.mp4" type="video/mp4">
</video>
<!-- Navbar which containes logo and features -->
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<a class="navbar-brand" href="#"><img src="https://cdn.dribbble.com/users/3547568/screenshots/14395014/media/0b94c75b97182946d495f34c16eab987.jpg?resize=400x300&vertical=center" style="height: 65px; width: 65px; border-radius: 100px;"/></a>
<div>
<input type="search" id="searchBar" placeholder="Search for a song" class="form-control mr-2 mt-2 p-2 mt-2"/>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal1" href="#">LogIn</a>
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal2" href="#">SignUp</a>
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal3" href="#">PlayList</a>
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal4" href="#">About</a>
<a class="nav-link text-white" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Settings</a>
<a class="nav-link text-white" href="#">Downloads</a>
</div>
</div>
</nav>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="settings">
<form>
<div class="form-group">
<label for="theme">Theme:</label>
<select id="theme" name="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="form-group">
<label for="autoplay">Autoplay:</label>
<div class="toggle-switch">
<input type="checkbox" id="autoplay" name="autoplay">
<label for="autoplay"></label>
</div>
</div>
<div class="form-group">
<label for="notifications">Notifications:</label>
<div class="toggle-switch">
<input type="checkbox" id="notifications" name="notifications">
<label for="notifications"></label>
</div>
</div>
<div class="form-group">
<label for="language">Language:</label>
<select id="language" name="language">
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="german">German</option>
</select>
</div>
<div class="form-group">
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
</div>
<div class="form-group">
<label for="email">Email Notifications:</label>
<div class="toggle-switch">
<input type="checkbox" id="email" name="email">
<label for="email"></label>
</div>
</div>
<div class="form-group">
<label for="currency">Currency:</label>
<select id="currency" name="currency">
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
<option value="jpy">JPY</option>
</select>
</div>
<div class="form-group">
<label for="timezone">Timezone:</label>
<select id="timezone" name="timezone">
<option value="gmt-8">GMT-8</option>
<option value="gmt-5">GMT-5</option>
<option value="gmt">GMT</option>
<option value="gmt+5">GMT+5</option>
</select>
</div>
<div class="form-group">
<label for="display-mode">Display Mode:</label>
<select id="display-mode" name="display-mode">
<option value="normal">Normal</option>
<option value="compact">Compact</option>
<option value="full-screen">Full Screen</option>
</select>
</div>
<button type="submit">Save Changes</button>
</form>
</div>
</div>
</div>
<!-- Login Page appears when click on the login text -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content container1">
<div class="">
<div class="m-auto">
<button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="m-4">
<h2>Login</h2>
</div>
<form action="" method="POST" onsubmit="return validateLogin();" name="loginForm">
<div class="card1">
<div>
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- SignUp Page appears when click on the signup text -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content container1">
<div class="">
<div class="m-auto">
<button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="m-4">
<h2>Signup</h2>
</div>
<form action="" method="POST" onsubmit="return validateSignup();" name="signupForm">
<div class="card1">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="email" name="email" placeholder="Email" required>
<input type="tel" pattern="[+]91 [0-9]{10}" placeholder="Enter your mobile number" required>
<input type="submit" value="Signup">
</div>
</form>
</div>
</div>
</div>
</div>
<!--About-->
<div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content container3">
<div>
<div class="m-auto">
<button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div>
<section id="about">
<div class="background-image">
<div class="abcd">
<h2>About Us</h2>
<p>Welcome to Be Music , where the rhythm of words meets the melody of music.
We are more than just a website; we're a community of music enthusiasts, creators, and explorers united by our love for diverse sounds and meaningful lyrics.</p>
<section id="mission">
<h2>Our Mission</h2>
<p>At YourMusicHub, our mission is simple: to cultivate a space where music lovers can discover, connect, and celebrate the diverse world of music. Whether you're into chart-toppers, indie gems, or timeless classics, we've got you covered.</p>
</section>
<section id="features">
<h2>What Sets Us Apart</h2>
<ul>
<li><strong>Diverse Music Selection:</strong> From pop to rock, classical to hip-hop, explore a vast array of musical genres.</li>
<li><strong>Expert Reviews:</strong> Our team of music connoisseurs provides insightful reviews to guide your musical exploration.</li>
<li><strong>User Engagement:</strong> Share your thoughts, create playlists, and connect with like-minded music aficionados.</li>
</ul>
</section>
<section id="join">
<h2>Join the Community</h2>
<p>Ready to embark on a musical adventure? Join YourMusicHub today and become part of a community that shares your love for great tunes. Let the music unite us!</p>
<a href="#signup" class="btn">Sign Up Now</a>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Have questions or suggestions? We'd love to hear from you. Reach out to us at <a href="mailto:jayaswaroopdandamudi@gmail.com">jayaswaroopdandamudi@gmail.com</a></p>
</section>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Playlist Page appears when click on the playlist text -->
<!-- still in progress -->
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content container2">
<div class="">
<div class="mt-3 ml-auto">
<button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<section class="playlist">
<h2>Playlist</h2>
<div class="song1">
<h3>Shape Of You</h3>
<p>Artist: Ed Sherran</p>
<audio controls>
<source src="edsherran.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="song1">
<h3>Peaches</h3>
<p>Artist: Justin Beiber</p>
<audio controls>
<source src="peaches.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<!-- Add more songs as needed -->
</section>
</div>
</div>
</div>
</div>
<!-- Carousel for image automate sliding -->
<div>
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="slide1 d-flex flex-column justify-content-center">
<div class="p-3 matter">
<h1>Enjoy The Most Popular Songs</h1>
<p>Popular songs are widely loved tunes that resonate widely with audiences, often topping charts and becoming widely recognized due to their catchy melodies or meaningful lyrics.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide2 d-flex flex-column justify-content-center">
<div>
<div class="p-3">
<h1>Trending Songs</h1>
<p>Trending songs capture the pulse of the moment, reflecting what's widely loved and shared across music charts and streaming platforms.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide3 d-flex flex-column justify-content-center">
<div>
<div class="p-3">
<h1>Best of 90's</h1>
<p>Relive the nostalgia with the greatest hits from the 90s, a golden era of iconic music and timeless melodies.</p>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Container page which containes songs -->
<div class="fluid-container m-5">
<div class="row p-3">
<div class="col-12 mt-4">
<h1 class="text-white head">
Trending Songs
</h1>
</div>
<div class="col-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Heeriye</h1>
<p class="description">Jasleen Royal, Arijit Singh, Dulquer Salmaan</p>
<audio controls class="d-none" id="audio">
<source src="Heeriye Arijit Singh 320 Kbps.mp3" type="audio/mp3" />
</audio>
<button class="add-to-playlist btn btn-primary d-none">Add to Playlist</button>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Chaleya</h1>
<p class="description">Anirudh Ravichande, Arijit Singh, Shilpa Rao</p>
<div>
<audio controls class="d-none" id="audio">
<source src="Chaleya Jawan 320 Kbps(1).mp3" type="audio/mp3" />
</audio>
<button class="add-to-playlist btn btn-primary d-none">Add to Playlist</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://m.timesofindia.com/photo/96027287/size-75010/96027287.jpg" style="width: 100%;" alt="" class="song img-fluid">
</div>
<div class="p-3">
<h1 class="title">Apna Bana Le</h1>
<p class="description">Sachin-Jigar and Sakshi Holkar</p>
<audio controls class="d-none" id="audio">
<source src="Apna Bana Le Bhediya 320 Kbps.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://images.fwdlife.in/2023/07/Feature-Image.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Tum Kya Mile</h1>
<p class="description">Arijit Singh and Shreya Ghoshal</p>
<audio controls class="d-none" id="audio">
<source src="Tum Kya Mile Rocky Aur Rani Kii Prem Kahaani 320 Kbps.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-12 mt-4">
<h1 class="text-white head">
Popular Songs
</h1>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://naasongsmix.com/wp-content/uploads/2022/06/rj.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Ranjha</h1>
<p class="description">Jasleen Royal, B Praak, and Romy</p>
<audio controls class="d-none" id="audio">
<source src="ranjha1.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/asYxxtiWUyw/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Chogada</h1>
<p class="description">Darshan Raval, Asees kaur</p>
<audio controls class="d-none" id="audio">
<source src="chagoda.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://cdn.bollywoodbubble.com/wp-content/uploads/2021/07/raatan-lambiyan-song-shershaah-1.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Raatan Lambiyaan</h1>
<p class="description">Tanishk Bagchi, Jubin Nautiyal, and Asees Kaur</p>
<audio controls class="d-none" id="audio">
<source src="lambiyaan.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://static.mirchi.in/thumb/imgsize-92434,msid-104668768,width-800,height-450,resizemode-1/104668768.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Ordinary Person</h1>
<p class="description">Anirudh Ravichandar</p>
<audio controls class="d-none" id="audio">
<source src="Ordinary Person.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-12 mt-4">
<h1 class="text-white head">
Pop Songs
</h1>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://www.lyricsila.com/wp-content/uploads/Shape-Of-You-Lyrics-Ed-Sheeran.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Shape Of You</h1>
<p class="description">Ed Sherran</p>
<audio controls class="d-none" id="audio">
<source src="edsherran.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/o2DXt11SMNI/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Memories</h1>
<p class="description">Maroon 5</p>
<audio controls class="d-none" id="audio">
<source src="memories.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/W0DM5lcj6mw/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Believer</h1>
<p class="description">Evolve</p>
<audio controls class="d-none" id="audio">
<source src="believer.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/uYfBNw6vInc/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGFEgRyhZMA8=&rs=AOn4CLC9jukvAWz_CrNlZcuQth2E8faYVA" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Peaches</h1>
<p class="description">Justin Beiber</p>
<audio controls class="d-none" id="audio">
<source src="peaches.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-12 mt-4">
<h1 class="text-white head">
Artists
</h1>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://igimages.gumlet.io/tamil/home/aniruh1712022m.jpg?w=376&dpr=2.6" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Anirudh Ravichander</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="ranjha1.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://www.iwmbuzz.com/wp-content/uploads/2021/02/arijit-singhs-top-5-most-viewed-songs-on-the-internet.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Arjit Singh</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="ranjha1.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://st1.latestly.com/wp-content/uploads/2021/06/ShreyaGhoshal.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Shreya Ghoshal</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="ranjha1.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://assets.telegraphindia.com/telegraph/2020/Nov/1604614265_armaan-12-march-20200455-1.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Armaan Malik</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="ranjha1.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-12 mt-4">
<h1 class="text-white head">
Liked Songs
</h1>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://www.telugunestam.com/wp-content/uploads/2021/12/sanchari.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Sanchari</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="Sanchari.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/tN-CUTPwTzQ/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Ilahi</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="ilahi.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://i.ytimg.com/vi/FZpiIQYN6pE/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Calling</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="calling.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="shadow-lg bg-light movie">
<div>
<img src="https://www.koimoi.com/wp-content/new-galleries/2022/02/radhe-shyam-team-ready-for-nationwide-promos-before-march-11-release-001.jpg" style="width: 100%;" alt="" class="song">
</div>
<div class="p-3">
<h1 class="title">Radhe Shyam All mix</h1>
<p class="description">Description</p>
<audio controls class="d-none" id="audio">
<source src="radhe.mp3" type="audio/mp3" />
</audio>
</div>
</div>
</div>
</div>
</div>
<div>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>