Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Checkout</title>
  <!-- Add the Bootstrap CSS link -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h3 class="text-center">Review Your Cart</h3>
          </div>
          <div class="card-body">
            <table class="table">
              <thead>
                <tr>
                  <th>Product</th>
                  <th>Price</th>
                  <th>Quantity</th>
                  <th>Subtotal</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Product 1</td>
                  <td>$100</td>
                  <td>2</td>
                  <td>$200</td>
                </tr>
                <tr>
                  <td>Product 2</td>
                  <td>$50</td>
                  <td>1</td>
                  <td>$50</td>
                </tr>
                <!-- Add more products here as needed -->
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3"></td>
                  <th>Total: $250</th>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h3 class="text-center">Shipping Details</h3>
          </div>
          <div class="card-body">
            <form>
              <div class="form-group">
                <label for="fullName">Full Name</label>
                <input type="text" class="form-control" id="fullName" placeholder="Enter your full name" required>
              </div>
              <div class="form-group">
                <label for="address">Address</label>
                <input type="text" class="form-control" id="address" placeholder="Enter your address" required>
              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="city">City</label>
                  <input type="text" class="form-control" id="city" placeholder="Enter your city" required>
                </div>
                <div class="form-group col-md-6">
                  <label for="zipCode">Zip Code</label>
                  <input type="text" class="form-control" id="zipCode" placeholder="Enter your zip code" required>
                </div>
              </div>
              <div class="form-group">
                <label for="country">Country</label>
                <input type="text" class="form-control" id="country" placeholder="Enter your country" required>
              </div>
              <div class="text-center">
                <button type="submit" class="btn btn-primary">Place Order</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Add the Bootstrap JS and jQuery links -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>