----------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Demo</title> <link rel="shortcut icon" href="https://freepngimg.com/thumb/letter/130287-b-letter-free-download-png-hd.png" type="image/x-icon" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" /> </head> <body class="bg-white"> <nav class="navbar navbar-expand-lg bg-info-subtle sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" > Dropdown </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <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"> <img src="https://c0.wallpaperflare.com/preview/304/131/640/beverage-blog-blogger-browsing.jpg" class="d-block w-100" alt="..." style="height: 93vh" /> </div> <div class="carousel-item"> <img src="https://c0.wallpaperflare.com/preview/304/131/640/beverage-blog-blogger-browsing.jpg" class="d-block w-100" alt="..." style="height: 93vh" /> </div> <div class="carousel-item"> <img src="https://c0.wallpaperflare.com/preview/304/131/640/beverage-blog-blogger-browsing.jpg" class="d-block w-100" alt="..." style="height: 93vh" /> </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> <section> <div class="container py-5"> <div class="row justify-content-center"> <div class="col-12 text-center"> <h3>My Card</h3> <hr /> </div> <div class="col-md-3 col-11 p-2"> <div class="card"> <img src="https://i0.wp.com/icenet.blog/wp-content/uploads/2021/12/blog.jpg?fit=400%2C322&ssl=1" class="card-img-top img-fluid" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-3 col-11 p-2"> <div class="card"> <img src="https://i0.wp.com/icenet.blog/wp-content/uploads/2021/12/blog.jpg?fit=400%2C322&ssl=1" class="card-img-top img-fluid" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-3 col-11 p-2"> <div class="card"> <img src="https://i0.wp.com/icenet.blog/wp-content/uploads/2021/12/blog.jpg?fit=400%2C322&ssl=1" class="card-img-top img-fluid" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-3 col-11 p-2"> <div class="card"> <img src="https://i0.wp.com/icenet.blog/wp-content/uploads/2021/12/blog.jpg?fit=400%2C322&ssl=1" class="card-img-top img-fluid" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </section> <section> <div class="container py-5"> <div class="row"> <div class="col-12 text-center"> <h3>My Table</h3> <hr /> </div> <div class="col-12"> <div class="table-responsive"> <table class="table table-responsive table-striped table-hover"> <thead class="table-primary"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col" class="text-end">Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td class="text-end"> <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#Edit" ><i class="bi bi-pencil-fill"></i ></a> <a href="#" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#Delete" ><i class="bi bi-trash-fill"></i ></a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td class="text-end"> <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#Edit" ><i class="bi bi-pencil-fill"></i ></a> <a href="#" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#Delete" ><i class="bi bi-trash-fill"></i ></a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td class="text-end"> <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#Edit" ><i class="bi bi-pencil-fill"></i ></a> <a href="#" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#Delete" ><i class="bi bi-trash-fill"></i ></a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td class="text-end"> <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#Edit" ><i class="bi bi-pencil-fill"></i ></a> <a href="#" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#Delete" ><i class="bi bi-trash-fill"></i ></a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td class="text-end"> <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#Edit" ><i class="bi bi-pencil-fill"></i ></a> <a href="#" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#Delete" ><i class="bi bi-trash-fill"></i ></a> </td> </tr> <!-- Edit --> <div class="modal fade" id="Edit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog modal-dialog-centered"> <form action="" method="post"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Update</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body"> <div class="row"> <div class="col-12 pb-3"> <label for="">Name :</label> <input type="text" name="" value="Abc..." class="form-control" /> </div> <div class="col-12 pb-3"> <label for="">Mobile :</label> <input type="number" name="" value="012" class="form-control" /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button> <button type="button" class="btn btn-success">Update</button> </div> </div> </form> </div> </div> <!-- Delete --> <div class="modal fade" id="Delete" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Delete</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body text-center text-danger fs-3">Are you sure ?</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button> <button type="button" class="btn btn-danger">Yes</button> </div> </div> </div> </div> </tbody> </table> </div> </div> </div> </div> </section> <section class="bg-primary-subtle"> <div class="container py-5"> <div class="row"> <div class="col-12 text-center"> <h3>About Us</h3> <hr /> </div> <div class="col-md-6 align-self-center"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel cumque natus quidem quis, itaque exercitationem adipisci odio ab, enim animi possimus minus. Ab nesciunt iusto vero odio. Culpa neque consequatur accusantium vitae ipsum fugit quibusdam facilis id placeat explicabo repellendus non magnam, iste odio maiores cumque sed, molestiae excepturi dolorem impedit porro quos, similique atque ducimus? Voluptatibus, non dicta inventore tempora ab magnam alias! Deleniti accusamus fugit iusto ipsum vel doloribus alias facere quos reprehenderit. Dolorum voluptatum quibusdam saepe reiciendis nam? Commodi ullam odit aliquam, et animi repudiandae voluptatibus quidem eveniet laudantium deserunt eum, quaerat quae maiores perspiciatis nemo illum. </p> </div> <div class="col-md-6 align-self-center p-2"> <img src="https://c0.wallpaperflare.com/preview/304/131/640/beverage-blog-blogger-browsing.jpg" alt="" class="img-fluid rounded" /> </div> </div> </div> </section> <section class=""> <div class="container py-5"> <div class="row"> <div class="col-12 text-center"> <h3>Contact Us</h3> <hr /> </div> <div class="col-md-6 p-2"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117658.79381361954!2d89.44986232968654!3d22.84550795444119!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39ff9071cb47152f%3A0xf04b212290718952!2sKhulna!5e0!3m2!1sen!2sbd!4v1698499086722!5m2!1sen!2sbd" width="100%" height="100%" style="border: 0" class="rounded" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe> </div> <div class="col-md-6 align-self-center p-2"> <form action="" method="post" class="card px-md-5 p-3 bg-success-subtle"> <div class="row"> <div class="col-12 py-2"> <label for="">Name :</label> <input type="text" name="" class="form-control" /> </div> <div class="col-12 py-2"> <label for="">Mobile :</label> <input type="number" name="" class="form-control" /> </div> <div class="col-12 py-2"> <label for="">Message :</label> <textarea name="" id="" cols="30" rows="3" class="form-control">
Send Now