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%; | |
| } | |
| .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; | |
| } | |
| } | |
| .container1 { | |
| height: 500px; | |
| width: 450px; | |
| margin: 0 auto; | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| background-image: url('https://dm0qx8t0i9gc9.cloudfront.net/watermarks/image/rDtN98Qoishumwih/colorful-musical-notes-wave-background_zkTcaoOd_SB_PM.jpg'); | |
| 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: 98px; | |
| } | |
| .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: #EEFF41; | |
| } | |
| /* For desktops and larger devices */ | |
| @media (min-width: 2000px) { | |
| .slide1, .slide2, .slide3 { | |
| height: 700px; | |
| background-size: 1920px 1080px; /* Set the specific dimensions */ | |
| } | |
| } | |
| </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="#">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> | |
| <!-- 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"> | |
| <div class="container playlist"> | |
| <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>Play List</h2> | |
| </div> | |
| <div class="py-4"> | |
| <ul class="list-unstyled song-list"> | |
| <li class="song-item row"> | |
| <img src="song1.jpg" alt="Song 1" class="col-2 col-md-1"> | |
| <div class="song-details col-10 col-md-11"> | |
| <p class="song-title">Song Title 1</p> | |
| <p class="song-artist">Artist 1</p> | |
| </div> | |
| </li> | |
| <li class="song-item row"> | |
| <img src="song2.jpg" alt="Song 2" class="col-2 col-md-1"> | |
| <div class="song-details col-10 col-md-11"> | |
| <p class="song-title">Song Title 2</p> | |
| <p class="song-artist">Artist 2</p> | |
| </div> | |
| </li> | |
| <li class="song-item row"> | |
| <img src="song3.jpg" alt="Song 3" class="col-2 col-md-1"> | |
| <div class="song-details col-10 col-md-11"> | |
| <p class="song-title">Song Title 3</p> | |
| <p class="song-artist">Artist 3</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </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">Description</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">Description</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">Description</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">Description</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">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://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://tamil.filmibeat.com/img/2020/05/sid-sriram06-1589878305.jpg" style="width: 100%;" alt="" class="song"> | |
| </div> | |
| <div class="p-3"> | |
| <h1 class="title">Sid Sriram</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> |