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>Document</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{ | |
| height: 60vh; | |
| 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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <video autoplay muted loop id="myVideo"> | |
| <source src="neon1.mp4.mp4" type="video/mp4"> | |
| </video> | |
| <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" href="#">LogIn</a> | |
| <a class="nav-link text-white" href="#">SignUp</a> | |
| <a class="nav-link text-white" 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> | |
| <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"> | |
| <img src="https://img.freepik.com/free-vector/young-people-jumping-having-fun_23-2148313536.jpg?t=st=1700131011~exp=1700131611~hmac=d9864498c06aa235de278720d8abbca1263c0904b9afd1675cb489a559d65732" class="d-block slide" alt="..."> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h5>First slide label</h5> | |
| <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> | |
| </div> | |
| </div> | |
| <link rel="stylesheet" href="style.css"> | |
| <div class="carousel-item"> | |
| <img src="https://img.freepik.com/free-vector/flat-design-nostalgic-90-s-background_52683-72484.jpg?w=1380&t=st=1700130425~exp=1700131025~hmac=b93fc935100be45a915bc63d0ac7d6fa485afebe63e5aeba683502868b65a013" class="d-block slide" alt="..."> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h5>Second slide label</h5> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-metaverse-background_23-2149257282.jpg?w=900&t=st=1700130483~exp=1700131083~hmac=e47fa0774a51bbf2170c2ee0333f93a846156dedf3fd5408b69274f423a7e4d8" class="d-block slide" alt="..."> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h5>Third slide label</h5> | |
| <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> | |
| </div> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-metaverse-background_23-2149257282.jpg?w=900&t=st=1700130483~exp=1700131083~hmac=e47fa0774a51bbf2170c2ee0333f93a846156dedf3fd5408b69274f423a7e4d8" class="d-block slide" alt="..."> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h5>Third slide label</h5> | |
| <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> | |
| </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> | |
| <div class="fluid-container m-5"> | |
| <div class="row p-3"> | |
| <div class="col-12 mt-4"> | |
| <h1 class="text-white"> | |
| Trending Songs | |
| </h1> | |
| </div> | |
| <div class="col-6 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 style="font-size: 28px;">Heeriye</h1> | |
| <p style="font-size: 20px;">Description</p> | |
| <audio controls class="d-none" id="audio"> | |
| <source src="ranjha1.mp3" type="audio/mp3" /> | |
| </audio> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-6 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 style="font-size: 28px;">Heeriye</h1> | |
| <p style="font-size: 20px;">Description</p> | |
| <audio controls class="d-none" id="audio"> | |
| <source src="ranjha1.mp3" type="audio/mp3" /> | |
| </audio> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-6 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 style="font-size: 28px;">Heeriye</h1> | |
| <p style="font-size: 20px;">Description</p> | |
| <audio controls class="d-none" id="audio"> | |
| <source src="ranjha1.mp3" type="audio/mp3" /> | |
| </audio> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-6 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 style="font-size: 28px;">Heeriye</h1> | |
| <p style="font-size: 20px;">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> |