<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <button type="button" class="btn btn-success launch" data-toggle="modal" data-target="#staticBackdrop"> <i class="fa fa-info"></i> Book Tour Now </button> <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body "> <div class="d-flex justify-content-between align-items-center"> <span class="text-uppercase">Pay Now</span> <i class="fa fa-close close" data-dismiss="modal"></i> </div> <div class="row mt-3"> <div class="col-md-6"> <div class="d-flex flex-column"> <small>Tourist</small> <span class="font-weight-bold">Divya Lahad</span> </div> </div> <div class="col-md-6"> <div class="d-flex flex-column"> <small>Package Tour Book by Date</small> <span class="font-weight-bolder">04/04/2021</span> </div> </div> </div> <div class="mt-3 d-flex flex-column"> <small>Package Tour Name</small> <span class="font-weight-bolder">Taste of India</span> </div> <div class="mt-3"> <small>Payment Plan</small> <div class="row mt-1"> <div class="col-md-6"> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Monthly </label> </div> </div> <div class="col-md-6"> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Weekly </label> </div> </div> </div> </div> <div class="mt-3"> <label class="radio"> <input type="radio" name="week" value="1" checked> <span>1st Week</span> </label> <label class="radio"> <input type="radio" name="week" value="2"> <span>2nd Week</span> </label> <label class="radio"> <input type="radio" name="week" value="3"> <span>3rd Week</span> </label> <label class="radio"> <input type="radio" name="week" value="4"> <span>4th Week</span> </label> </div> <div class="mt-3 text-center book align-items-center"> <h3 class="mb-0 font-weight-light">$1,000</h3> </div> <div class="mt-3"> <small>Payment Method</small> <div class="d-flex flex-row"> <label class="radio1"> <input type="radio" name="payment" value="bank"> <span><i class="fa fa-bank"></i> BANK TRANSFER</span> </label> <label class="radio1"> <input type="radio" name="payment" value="card"> <span><i class="fa fa-credit-card-alt"></i> CREDIT CARD</span> </label> </div> </div> <div class="mt-3 mr-2"> <div class="row g-2"> <div class="col-md-6"> <div class="inputbox"> <small>Card Number</small> <input type="text" class="form-control" name=""> </div> </div> <div class="col-md-6"> <div class="inputbox"> <small>Card Name</small> <input type="text" class="form-control" name=""> </div> </div> </div> </div> <div class="mt-3 mr-2"> <div class="row g-2"> <div class="col-md-6"> <div class="row g-2"> <div class="col-md-6"> <div class="inputbox"> <small>Date</small> <input type="text" class="form-control" name=""> </div> </div> <div class="col-md-6"> <div class="inputbox"> <small>Month</small> <input type="text" class="form-control" name=""> </div> </div> </div> </div> <div class="col-md-6"> <div class="inputbox"> <small>CVV</small> <input type="text" class="form-control" name=""> </div> </div> </div> </div> <hr class="mr-2 mt-4"> <div class="mt-3 mr-2 d-flex justify-content-end align-items-center"> <a href="#" class="cancel">Cancel</a> <button class=" ml-2 btn btn-primary pay">PAY NOW</button> </div> </div> </div> </div> </div> </div> </div>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap"); body { background-color: #5165ff; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: "Poppins", sans-serif } .modal-body { background-color: #fff; border-color: #fff } .close { color: #000; cursor: pointer } .close:hover { color: #000 } .form-check-input:checked { background-color: #8f37aa; border-color: #8f37aa } .form-check-input:focus { border-color: #8bbafe; outline: 0; box-shadow: none } label.radio { cursor: pointer } label.radio input { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none } label.radio span { padding: 7px 12px; border: 2px solid #8f37aa; display: inline-block; color: #8f37aa; border-radius: 3px; text-transform: capitalize } label.radio input:checked+span { border-color: #8f37aa; background-color: #8f37aa; color: #fff } .book { padding: 8px; border: 1px solid #eee; border-radius: 4px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2); margin-right: 8px } label.radio1 { cursor: pointer; width: 100%; margin-right: 7px } label.radio1 input { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none } label.radio1 span { padding: 20px 12px; border: 2px solid #8f37aa; display: inline-block; color: #8f37aa; border-radius: 3px; text-transform: capitalize; width: 100% } label.radio1 input:checked+span { border-color: #8f37aa; background-color: #8f37aa; color: #fff } .form-control { border: 2px solid #ced4da } .form-control:focus { box-shadow: none; border-color: #8f37aa } .pay { color: #fff; background-color: #8f37aa; border-color: #8f37aa; border-radius: 3px; padding: 8px } .pay:hover { color: #fff; background-color: #8f37aa; border-color: #8f37aa; border-radius: 3px; padding: 8px } .cancel { text-decoration: none; color: #8f37aa }