<div class="container my-container ">
<div class="card bg-white px-5">
<div class="card-header">
<div class="jumbotron mb-1 bg-white ">
<h1 class="display-5"><b>You'r almost there</b></h1>
</div>
</div>
<div class="card-body">
<div class="row ">
<!-- Left Half -->
<div class="col-md-5 ">
<div class="card mt-0 border-0 first-card">
<!-- 1st Card -->
<div class="card-body">
<h5 class="card-title">1. Choose your billing cycle</h5>
<div class="row">
<div class="col-md-auto ">
<div class="custom-control custom-radio custom-control-inline "> <input id="customRadioInline1" type="radio" name="customRadioInline1" class="custom-control-input" checked="true"> <label for="customRadioInline1" class="custom-control-label label-radio">Bill Yearly</label> </div>
<p class="my-0"> $45.99 / year</p> <del class="text-success">
<p>$45.99 / year</p>
</del>
</div>
<div class="col-md-auto ">
<div class="custom-control custom-radio custom-control-inline "> <input id="customRadioInline2" type="radio" name="customRadioInline1" class="custom-control-input"> <label for="customRadioInline2" class="custom-control-label label-radio">Bill Monthly</label> </div>
<p> $19.99 / year</p>
</div>
</div>
</div>
</div>
<div class="card mt-2 border-0 second-card">
<!-- Form -->
<div class="card-body">
<h5 class="card-title">2. Enter Payment details</h5>
<div class="row">
<div class="col-md-auto col-sm-auto ">
<div class="custom-control custom-radio custom-control-inline "> <input id="customRadioInline11" type="radio" name="customRadioInline11" class="custom-control-input" checked="true"> <label for="customRadioInline11" class="custom-control-label label-radio"><img src="https://img.icons8.com/color/48/000000/visa.png" class="card-image"> </label> </div>
</div>
<div class="col-md-auto col-sm">
<div class="custom-control custom-radio custom-control-inline "> <input id="customRadioInline22" type="radio" name="customRadioInline11" class="custom-control-input"> <label for="customRadioInline22" class="custom-control-label label-radio"><img src="https://img.icons8.com/officel/48/000000/discover.png" class="card-image"></label> </div>
</div>
</div> <!-- Payment Form -->
<form method="get" action="">
<div class="form-group "> <label for="cc-number" class="control-label mt-3">Card number</label> <input id="cc-number" name="cc-number" type="tel" placeholder="xxxx-xxxx-xxxx-xxxx" class="form-control form-control-lg cc-number identified visa " value="" data-val="true" data-val-required="Please enter the card number" data-val-cc-number="Please enter a valid card number" autocomplete="cc-number"> </div>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6"> <label for="cc-exp" class="control-label ">Expiration date</label> <input id="cc-exp" type="tel" class=" form-control form-control-lg cc-exp" autocomplete="cc-exp" placeholder="MM / YY" required> </div>
<div class="form-group col-md-6 col-sm-6"> <label for="cc-cvc" class="control-label ">CVV<span><i class="fa fa-info-circle px-2" aria-hidden="true"></i> </span> </label> <input id="cc-cvc" type="tel" class="form-control-lg form-control cc-cvc " autocomplete="off" placeholder="•••" required> </div>
</div>
<div class="form-row">
<div class="form-group col-md-8 col-sm-6"> <label for="inputState">State</label> <select id="inputState" class="form-control form-control-lg">
<option selected>United State</option>
<option>India</option>
<option>UK</option>
<option>China</option>
</select> </div>
<div class="form-group col-md-4 col-sm-6"> <label for="inputZip">Zip</label> <input type="text" class="form-control form-control-lg" id="inputZip" placeholder="111111"> </div>
</div>
</form>
</div>
</div>
</div>
<div class="col-1 d-none d-sm-block"></div> <!-- Right Half -->
<div class="col-md-6">
<div class="card right-card ">
<div class="card-header ">
<h3 class="font-weight"><b>BBBotstrap Professional</b></h3>
<h6><b>Bilied Now : $45.99</b></h6>
</div>
<div class="card-body">
<p class="card-text">Perfect Software Solution is a <span class="text-primary">professional software, website development</span> timely delivered and cost effective software,<span class="text-primary"> website development services</span>. We are highly experienced in offering offshore software development.</p>
<div class="custom-control custom-checkbox checkbox-lg"><input type="checkbox" class="custom-control-input" id="checkbox-2"><label class="custom-control-label" for="checkbox-2">I agree <span class="text-primary cursor-pointer"><u> BBBotstrap Terms</u> </span> </label> </div>
</div>
<div class="card-footer"> <button type="submit" class="btn btn-primary btn-lg">Buy now</button> </div>
</div>
<div class="card border-0">
<div class="card-body">
<h4 class="card-title">What included in BBBotstrap Professional</h4>
<div class="row ">
<div class="col-md-6">
<ul class="list-group list-group-flush ">
<li class="list-group-item borderless"><i class="fa fa-check"></i> Strategic Consulting,</li>
<li class="list-group-item borderless"><i class="fa fa-check"></i> UI AND UX </li>
<li class="list-group-item borderless"><i class="fa fa-check"></i> Client Application</li>
</ul>
</div>
<div class="col-md-6 ">
<ul class="list-group list-group-flush p-0">
<li class="list-group-item borderless"><i class="fa fa-check"></i> E-Commerce</li>
<li class="list-group-item borderless"><i class="fa fa-check"></i> IT Consulting</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
font: 300 18px/1.5 'Muli', sans-serif;
color: rgb(0, 0, 0);
background: linear-gradient(138deg, #EC407A 60%, #7C4DFF 60%);
overflow-x: hidden;
padding-bottom: 0 !important;
height: 100%;
position: relative
}
.container {
margin-top: 50px;
margin-bottom: 50px
}
.cc-number.identified {
background-repeat: no-repeat;
background-position-y: 11px;
background-position-x: 99%
}
.right-card {
border-top: 10px blue solid;
padding-top: 1rem;
width: fit-content
}
.btn-group-lg>.btn,
.btn-lg {
width: -webkit-fill-available
}
li.borderless {
border-top: 0 none !important;
font-size: 15px;
padding: 0;
padding-top: 5%
}
.fa-check {
color: rgb(0, 195, 255)
}
.card,
.card-header,
.card-footer {
background-color: white !important
}
.card-header {
border-bottom: none
}
.cursor-pointer {
cursor: pointer
}
.second-card,
.first-card {
border-top: 1px solid #ccc !important;
padding-top: 2rem
}
.card-image {
width: 45px;
margin-top: -9px
}
@media (max-width: 1000px) {
.card {
padding: 0 !important
}
}