Spaces:
Running
Running
<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> | |
<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="https://kit.fontawesome.com/20c5629a29.js" 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: Arial, sans-serif; | |
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: "Avenir Next"; | |
} | |
.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: "Avenir Next"; | |
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: "Avenir Next"; | |
background-size: cover; | |
text-align: center; | |
font-weight: bold; | |
color: #EEFF41; | |
} | |
/* 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: Arial, sans-serif; | |
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); | |
} | |
</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="mr-2 ml-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" href="#" data-toggle="modal" data-target="#exampleModal4">About</a> | |
<a class="nav-link text-white" href="#">Settings</a> | |
<a class="nav-link text-white" href="#">Downloads</a> | |
</div> | |
</div> | |
</nav> | |
</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">×</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">×</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 container1"> | |
<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> | |
<!-- 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">×</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="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> | |
<ol class="carousel-indicators"> | |
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> | |
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li> | |
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li> | |
</ol> | |
<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> | |
<link rel="stylesheet" href="style.css"> | |
<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> | |
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> | |
<span class="carousel-control-prev-icon" aria-hidden="true"></span> | |
<span class="sr-only">Previous</span> | |
</a> | |
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> | |
<span class="carousel-control-next-icon" aria-hidden="true"></span> | |
<span class="sr-only">Next</span> | |
</a> | |
</div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> | |
<link rel="stylesheet" href="search.css" /> | |
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script> | |
</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-sm-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-sm-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-sm-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-sm-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">Description</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">Description</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-39216,msid-104845503,width-800,height-450,resizemode-1/104845503.jpg" style="width: 100%;" alt="" class="song"> | |
</div> | |
<div class="p-3"> | |
<h1 class="title">I Am Scared</h1> | |
<p class="description">Description</p> | |
<audio controls class="d-none" id="audio"> | |
<source src="leo.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">Description</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">Maroon 5</h1> | |
<p class="description">Description</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">Description</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">Description</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> | |
</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> |