Laboratoriska3-KI-Payout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Payout</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/jquery.js"></script>
<style>
    span{
        border-radius: 10px;
        margin-left:35%;
    }
</style>
<div class="container pt-5">
    <div class="row">
        <div class="col offset-3">
            <form>
                <h1>Payment page</h1>
                <div class="row pt-3 pb-3 border-top border-bottom" style="margin-left:2px;margin-right:2px;">
                    <div class="col pl-0 pr-0">
                        <div class="progress" style="border-radius: 0px;">
                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><b>Step 4: Payment</b></div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="nameCard"><b>Name on Card</b></label>
                    <input type="text" class="form-control pl-0" id="nameCard">
                </div>
                <div class="form-group pl-0">
                    <label for="cardNumber"><b>Card Number</b></label>
                    <input type="text" class="form-control" id="cardNumber">
                </div>
                <div class="form-group">
                    <label for="billingAddress"><b>Billing Address</b></label>
                    <input type="text" class="form-control" id="billingAddress">
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="cvc"><b>CVC</b></label>
                            <input type="text" class="form-control" id="cvc" placeholder="ex.311">
                        </div>
                    </div>
                    <div class="col">

                        <div class="form-group">
                            <label for="expiration"><b>Expiration</b></label>
                            <input type="text" class="form-control" id="expiration" placeholder="MM">
                        </div>
                    </div>
                    <div class="col" style="padding-top:30px;">
                        <input type="text" placeholder="YYYY" class="form-control">
                    </div>
                </div>

              <hr>
                <br>
              <div class="bg-success pt-2" style="height:40px;border-radius:0.25rem;"><span class="bg-light text-success">Your total today: $300</span></div>
                <br>
                <input type="button" class="btn btn-primary btn-block" value="Pay»">
            </form>
        </div>
    </div>
</div>
</body>
</html>