HTML CSS JAVASCRIPT Band source code
CSS Code
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Band</title> <style> #sticky{ position: sticky; top: 0; position: -webkit-sticky; z-index: 99; } .myslide{ position: relative; display: none; transition: all 0.5s ease; } .text-slide{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.5); } .tour{ position: relative; } .modal-container{ width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease; background-color: aliceblue; } .cz-modal{ /* display: none; Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 0%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.0); /* Black w/ opacity */ overflow: hidden; transition: all 0.5s ease; } </style> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head>
HTML Code
<body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark" id="sticky"> <div class="container-fluid"> <a class="navbar-brand" href="#home">BAND</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#band">Band</a> </li> <li class="nav-item"> <a class="nav-link" href="#tour">Tour</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Link</a></li> <li><a class="dropdown-item" href="#">Another link</a></li> <li><a class="dropdown-item" href="#">A third link</a></li> </ul> </li> </ul> </div> </div> </nav> <!-- Automatic slide===================== --> <div class="container-fluid p-0" id="home"> <div class="myslide"> <img src="/tajmahal.webp" alt="" style="width: 100%;"> <div class="text-slide"> <h1 class="text-light p-2">Taj Mahal</h1> <p class="text-light p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> </div> <div class="myslide"> <img src="/tajmahal2.webp" alt="" style="width: 100%;"> <div class="text-slide"> <h1 class="text-light p-2">Taj Mahal</h1> <p class="text-light p-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> </div> </div> <div class="myslide"> <img src="/kalla.webp" alt="" style="width: 100%;"> <div class="text-slide"> <h1 class="text-light p-2">Lal Kella</h1> <p class="text-light p-2">Lorem ipsum dolor sit amet consectetur, adipisicing.</p> </div> </div> </div> <section id="band"> <div class="container"> <h1 class="text-center display-3 pt-5">The Band</h1> <h6 class="text-center">We Love coding</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quas magnam est rem mollitia? Ratione repellat sunt libero, similique deserunt hic quisquam iusto aliquam, aspernatur nemo harum ipsum. Quisquam, doloribus!</p> </div> <div class="container py-5"> <div class="row"> <div class="col-xl-4"> <div class="card" style="width: 100%;"> <img src="/kalla.webp" alt=""> <div class="card-body"> <h2>Lal Kella</h2> </div> </div> </div> <div class="col-xl-4"> <div class="card" style="width: 100%;"> <img src="/tajmahal.webp" alt=""> <div class="card-body"> <h2>Taj Mahal</h2> </div> </div> </div> <div class="col-xl-4"> <div class="card" style="width: 100%;"> <img src="/tajmahal2.webp" alt=""> <div class="card-body"> <h2>Taj Mahal</h2> </div> </div> </div> </div> </div> </section> <section class="bg-dark" id="tour"> <div class="container"> <h1 class="text-center py-5 text-light">The World best</h1> <h6 class="text-center text-light">Remember to book your tickets!</h6> <div class="row d-flex justify-content-center py-5"> <div class="col-xl-6 bg-light py-5"> <div class="bg-light d-flex gap-4"> <samp class="p-3">september</samp><samp class="bg-danger p-3 text-light">soldout</samp> </div> <hr> <div class="bg-light d-flex gap-4"> <samp class="p-3">october</samp><samp class="bg-danger p-3 text-light">soldout</samp> </div> <hr> <div class="bg-light gap-4" style="display: flex;justify-content: space-between;width: 100%;"> <samp class="p-3">November</samp><samp class="bg-dark p-3 text-light rounded">4</samp> </div> </div> </div> <div class="container py-5 tour" > <div class="row"> <div class="col-xl-4 col-md-6 col-12 mt-5"> <div class="card"> <img src="/kalla.webp" alt=""> <div class="card-body bg-light p-5"> <h2 class="card-title">Lal Kella</h2> <p class="card-para pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt iste tempore voluptatem reiciendis quia laborum fugit sequi provident! Dolore cupiditate, magnam sequi autem iusto qui soluta laborum. Eos, voluptatum! Nemo?</p> <button href="" onclick="document.getElementById('tiketModal').style.height='100%';" class="bg-dark p-3 text-light nav-link text-center">Buy Tickets</button> </div> </div> </div> <div class="col-xl-4 col-md-6 col-12 mt-5"> <div class="card"> <img src="/tajmahal.webp" alt=""> <div class="card-body bg-light p-5"> <h2 class="card-title">Taj Mahal</h2> <p class="card-para pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt iste tempore voluptatem reiciendis quia laborum fugit sequi provident! Dolore cupiditate, magnam sequi autem iusto qui soluta laborum. Eos, voluptatum! Nemo?</p> <button href="" onclick="document.getElementById('tiketModal').style.height='100%';" class="bg-dark p-3 text-light nav-link text-center">Buy Tickets</button> </div> </div> </div> <div class="col-xl-4 col-md-6 col-12 mt-5"> <div class="card"> <img src="/tajmahal2.webp" alt=""> <div class="card-body bg-light p-5"> <h2 class="card-title">Taj Mahal</h2> <p class="card-para pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt iste tempore voluptatem reiciendis quia laborum fugit sequi provident! Dolore cupiditate, magnam sequi autem iusto qui soluta laborum. Eos, voluptatum! Nemo?</p> <button href="" onclick="document.getElementById('tiketModal').style.height='100%';" class="bg-dark p-3 text-light nav-link text-center">Buy Tickets</button> </div> </div> </div> </div> <div id="tiketModal" class="cz-modal"> <div class="modal-container"> <header class="bg-info"> <span class="bg-danger p-2 text-light" style="float: right;cursor: pointer;" onclick="document.getElementById('tiketModal').style.height='0%';">x</span> <h2 class="text-center text-light p-5"> <i class="fa fa-briefcase"></i> Tikets</h2> </header> <form action="#" method="post"> <div class="container"> <p><label><i class="fa fa-shopping-cart"></i> Tickets, $15 per person</label></p> <input type="text" class="form-control"> </div> <div class="container"> <p><label><i class="fa fa-user"></i> Send User</label></p> <input type="text" class="form-control"> </div> <div class="container mt-3 pb-5"> <input type="submit" value="PAY" class="form-control bg-info text-light"> </div> <span class="bg-danger p-2 text-light" style="float: left;cursor: pointer;" onclick="document.getElementById('tiketModal').style.height='0%';">Close</span> <span class=" p-2" style="float: right;">Need <a href="">Help?</a> </span> </form> </div> </div> </div> </div> </section> <section id="contact"> <div class="container py-5"> <h2 class="py-5 text-center display-3">Contact</h2> <div class="row"> <div class="col-xl-6"> <ul> <li class="nav-link py-2"><i class="fa fa-location fs-3 px-3"></i> India</li> <li class="nav-link py-2"><i class="fa fa-phone fs-3 px-3"></i> +918617363636</li> <li class="nav-link py-2"><i class="fa fa-envelope fs-3 px-3"></i>india@gmail.com</li> </ul> </div> <div class="col-xl-6"> <form action="" method="post" class="border p-5 rounded-5"> <div class="row d-flex"> <div class="col-xl-6"> <input type="text" placeholder="name" name="name" class="form-control"> </div> <div class="col-xl-6"> <input type="email" placeholder="email" name="email" class="form-control"> </div> </div> <div class="mt-5"> <textarea name="" id="" class="form-control" name="message" placeholder="Message">
