<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CHECKOUT</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <style>
    .required::after {
      content: " *";
      color: red;
    }

  </style>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container mt-5 ">
 
    <div class="row">
        <div class="col-md-6">
            <h3>CHECKOUT</h3>
    <h5>Billing details</h5>
    <p>Enter your details below to process your order</p>
    <form>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label class="required">First Name</label>
          <input type="text" class="form-control" placeholder="">
        </div>
        <div class="form-group col-md-6">
          <label class="required">Last Name</label>
          <input type="text" class="form-control" placeholder="">
        </div>
      </div>

      <div class="form-group">
        <label>Company Name <small>(Optional)</small></label>
        <input type="text" class="form-control" placeholder="">
      </div>

      <div class="form-group">
        <label class="required">Country / Region</label>
        <select class="form-control">
          <option>India</option>
          <option>United States</option>
          <option>United Kingdom</option>
          <option>Australia</option>
        </select>
      </div>

      <div class="form-group">
        <label class="required">Street Address</label>
        <input type="text" class="form-control mb-2" placeholder="House number and street name">
        <input type="text" class="form-control" placeholder="Apartment, suite, unit, etc. (optional)">
      </div>

      <div class="form-group">
        <label class="required">Town / City</label>
        <input type="text" class="form-control" placeholder="">
      </div>
     <div class="form-group">
        <label class="required">Country / Region</label>
        <select class="form-control">
          <option>India</option>
          <option>United States</option>
          <option>United Kingdom</option>
          <option>Australia</option>
        </select>
      </div>
       <div class="form-group">
        <label class="required">Pincode</label>
        <input type="number" class="form-control" placeholder="">
      </div>
       <div class="form-group">
        <label class="required">Phone</label>
        <input type="number" class="form-control" placeholder="">
      </div>
       <div class="form-group">
        <label class="required">Email</label>
        <input type="text" class="form-control" placeholder="">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
        </div>
        
    
   
        <div class="col-md-6">
        <div class="order-box">
          <h5><strong>Order Summary</strong></h5>
          <div class="d-flex justify-content-between">
            <span>Cart Subtotal (Excl. Tax)</span>
            <span>₹13,144.07</span>
          </div>
          <div class="d-flex justify-content-between">
            <span>Cart Subtotal (Incl. Tax)</span>
            <span>₹15,510.00</span>
          </div>
          <div class="d-flex justify-content-between">
            <span>Shipping</span>
            <span class="text-success">Free shipping</span>
          </div>
          <div class="d-flex justify-content-between">
            <span>Tax</span>
            <span>₹2,365.93</span>
          </div>
          <hr>
          <div class="d-flex justify-content-between font-weight-bold">
            <span>Order Total</span>
            <span>₹15,510.00</span>
          </div>

          <!-- Items -->
          <div class="order-item">
            <img src="image/ball.jpg" alt="SS Bat Vault" style="width: 70px;">
            <div style="display: flex;">
              <div>SS Bat Vault</div>
               <div class="ms-5"> <p  style="margin-left: 50px;">₹400.00 &nbsp; Qty: 3</p></div> 
            </div>
          </div>
          <div class="order-item">
            <img src="image/bat_grip.jpg" alt="SS Ball Bag" style="width: 70px;">
            <div style="display: flex;">
              <div>SS Ball Carrying Bag</div>
                  <div class="ms-5"> <p  style="margin-left: 50px;">₹400.00 &nbsp; Qty: 3</p></div> 
            </div>
          </div>
          <div class="order-item">
            <img src="image/bat_vault.jpg" alt="Kit Bag" style="width: 70px;">
            <div style="display: flex;">
              <div>SS Limited Edition <br>Cricket Kit Bag<br> (wheel)</div>
            <div class="ms-3"> <p  style="margin-left: 50px;">₹400.00 &nbsp; Qty: 3</p></div> 
            </div>
          </div>
        </div>
        <div class="payment-box">
          <h5><strong>Payment Method</strong></h5>
          <div class="form-check mb-3">
            <input class="form-check-input" type="radio" name="payment" id="ccavenue" checked>
            <label class="form-check-label" for="ccavenue">
              <img src="image/cc_avenue.png" alt="CCAvenue" style="height:30px;">
              <br>
              <div class="payment-desc mt-2">
                Pay securely by Credit or Debit card or internet banking through CCAvenue Secure Servers.
              </div>
            </label>
          </div>
          <div class="form-check mb-4">
            <input class="form-check-input" type="radio" name="payment" id="bank">
            <label class="form-check-label" for="bank">
              Direct Bank Transfer
            </label>
          </div>
          <button class="btn-sm btn-danger btn-order">PLACE ORDER</button>
        </div>
      </div>
       </div>
</div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
