<div class="container m-5 mx-auto">
<div class="row main">
<div class="col-lg-6 col-12 my-5 rcol">
<h3 class="product text-center">PRODUCT DETAILS</h3>
<div class="image text-center"><img src="https://images-na.ssl-images-amazon.com/images/I/61TLUy%2BepGL._SX425_.jpg" width="300px" height="350px"></div>
<p class="text-center my-3">Toilet paper is a tissue paper product primarily used to clean<br>the anus and surrounding area of feces after defecation,<br> and to clean the vulva and perineum of puppies</p>
</div>
<div class="col-lg-6 col-12 my-5 scol">
<div class="row r1">
<h6 class="text-muted">ORDER TOTAL:</h6>
<h4 class="text-danger">58$</h4>
</div>
<div class="row r2">
<h6>Lilly Soft & Strong 32 pack</h6>
<h6 class="htwo">X4</h6>
</div>
<div class="row r3">
<h3 class="payment">PAYMENT DETAILS</h3>
</div>
<div class="row r4">
<h6 class="payment-method">Select Payment method:</h6>
</div>
<div class="row r5">
<div class="col-2"><img src="https://img.icons8.com/color/48/000000/mastercard-logo.png" /></div>
<div class="col-2"><img src="https://img.icons8.com/color/48/000000/visa.png" /></div>
<div class="col-2"><img src="https://img.icons8.com/color/48/000000/amex.png" /></div>
<div class="col-2"><img src="https://img.icons8.com/color/48/000000/paypal.png" /></div>
</div>
<div class="row r6">
<form class="personalDetails">
<div class="form-group"> <input type="text" class="form-control" placeholder="Cardholder Name"> </div>
<div class="form-group"> <input type="text" class="form-control" placeholder="Card number"> </div>
<div class="form-group">
<div class="row">
<div class="col-4"> <input type="text" class="form-control" placeholder="MM/YY"> </div>
<div class="col-4 offset-2"> <input type="password" class="form-control" placeholder="CCV"> </div>
<div class="col-2 th"><i class="far fa-credit-card"></i> </div>
</div>
</div> <button type="submit" class="btn btn-primary mt-3">PLACE ORDER</button>
</form>
</div>
</div>
</div>
</div>
body {
background: #000;
font-family: Arial, Helvetica, sans-serif
}
.container {
background: #fff !important;
border: none;
border-radius: 20px
}
h6.text-muted {
color: #6c757d85 !important
}
h4.text-danger {
margin-left: 250px;
color: #f11126 !important
}
.htwo {
margin-left: 200px
}
.scol {
padding-left: 60px
}
.row.r2 {
margin-bottom: 20px
}
.row.r2:after {
content: '.';
font-size: 0;
display: block;
height: 1px;
width: 77%;
background: #a9abae3d
}
h3.payment {
margin-top: 30px
}
h6.payment-method {
margin-top: 30px
}
.r5.col-2 {
padding-left: 0
}
div.col-2 {
cursor: pointer
}
.personalDetails {
margin-right: 100px;
padding-top: 30px
}
.form-control {
border: none;
border-radius: none;
border-bottom: 1px solid #a9abae3d
}
.form-control:focus {
border: none;
color: #000 !important;
font-weight: bold;
border-color: #fff;
border-bottom: 1px solid #a9abae3d;
outline: 0;
box-shadow: 0 0 0 0 rgba(0, 123, 255, .25)
}
.far {
color: #adb5bd
}
.th {
margin-top: 10px
}
.btn.btn-primary {
border: none;
border-radius: 40px;
width: 40%
}
@media screen and (max-width: 1200px) {
.rcol {
width: 100%
}
.scol {
width: 100%
}
}
@media screen and (max-width: 768px) {
.container {
width: 95%
}
.row.r2:after {
width: 95%
}
}