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> | |
| <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 { | |
| font-family: 'Pacifico', cursive; | |
| 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); | |
| } | |
| .downloads { | |
| background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%); | |
| border-radius: 8px; | |
| font-family: 'Pacifico', cursive; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .downloads h2 { | |
| font-size: 32px; | |
| margin-bottom: 30px; | |
| } | |
| .downloads-options { | |
| width: 250px; | |
| margin-bottom: 10px; | |
| } | |
| .downloads-list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .download-item { | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .download-item img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 8px 8px 0 0; | |
| } | |
| .download-info { | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| } | |
| .download-info h3 { | |
| margin-bottom: 10px; | |
| } | |
| .download-info p { | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| color: #555; | |
| } | |
| .download-button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| background-color: #3498db; | |
| color: #fff; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| transition: background-color 0.3s ease; | |
| } | |
| .download-button:hover { | |
| background-color: #2980b9; | |
| } | |
| .offcanvas-body .search-input { | |
| width: 260px; | |
| padding: 10px; | |
| font-size: 16px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| } | |
| .offcanvas .form-select { | |
| width: 120px; | |
| padding: 12px; | |
| font-size: 14px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| margin-bottom: 15px; | |
| } | |
| #searchBar { | |
| width: 150px; | |
| padding: 8px; | |
| font-size: 14px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| } | |
| </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-1 mt-2 mt-2 ml-0"/> | |
| </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="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Downloads</a> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| <!--Downloads--> | |
| <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> | |
| <div class="offcanvas-header"> | |
| <h4 class="offcanvas-title" id="offcanvasExampleLabel">Downloads</h4> | |
| <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> | |
| </div> | |
| <div class="offcanvas-body"> | |
| <div class="downloads"> | |
| <div> | |
| <input type="text" id="search" placeholder="Search..." class="search-input form-control"> | |
| <select class="form-select"> | |
| <option value="recent">Sort by Recent</option> | |
| <option value="name">Sort by Name</option> | |
| <option value="artist">Sort by Artist</option> | |
| </select> | |
| </div> | |
| <div class="downloads-list"> | |
| <div class="download-item"> | |
| <img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" alt="Album 1 Cover"> | |
| <div class="download-info"> | |
| <h4>Album 1</h4> | |
| <h5>Artist: Arijit Singh</h5> | |
| <a href="download_link_album_1.zip" download class="download-button">Download</a> | |
| </div> | |
| </div> | |
| <div class="download-item"> | |
| <img src="https://naasongsmix.com/wp-content/uploads/2022/06/rj.jpg" alt="Album 2 Cover"> | |
| <div class="download-info"> | |
| <h4>Album 2</h4> | |
| <h5>Artist: Arijith Singh</h5> | |
| <a href="download_link_album_2.zip" download class="download-button">Download</a> | |
| </div> | |
| </div> | |
| <div class="download-item"> | |
| <img src="https://images.fwdlife.in/2023/07/Feature-Image.jpg" alt="Album 2 Cover"> | |
| <div class="download-info"> | |
| <h4>Album 3</h4> | |
| <h5>Artist: Sherya Goshal</h5> | |
| <a href="download_link_album_2.zip" download class="download-button">Download</a> | |
| </div> | |
| </div> | |
| <!-- Add more download items as needed --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settiings page--> | |
| <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">×</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 modal-dialog-centered"> | |
| <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 modal-dialog-centered"> | |
| <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">×</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 modal-dialog-centered"> | |
| <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> | |
| </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> |