<!--For Page-->
<div class="bg">
<!--For Row containing all card-->
<div class="row mainRow">
<!--Card 1-->
<div class="col-sm-8">
<div class="card card-cascade wider shadow p-3 mb-5 ">
<!--Card image-->
<div class="view view-cascade overlay text-center"> <img class="card-img-top" src="https://i.imgur.com/oFDjIvN.png" alt=""> <a>
<div class="mask rgba-white-slight"></div>
</a> </div>
<!--Product Description-->
<div class="desc">
<!-- 1st Row for title-->
<div class="row subRow">
<!--Column for Data-->
<div class="col">
<p class="text-muted row1">Milage</p>
<p class="row2">100 KM</p>
</div>
<!--Column for Data-->
<div class="col">
<p class="text-muted row1">Transmission</p>
<p class="row2">Mannual</p>
</div>
<!--Column for Data-->
<div class="col">
<p class="text-muted row1">Drive Unit</p>
<p class="row2">Front</p>
</div>
</div> <!-- 2nd Row for title-->
<div class="row subRow">
<!--Column for Data-->
<div class="col">
<p class="text-muted row1">Body</p>
<p class="row2">Coupe</p>
</div>
<!--Column for Data-->
<div class="col">
<p class="text-muted row1">Color</p>
<p class="row2">Black</p>
</div>
<!--Column for Data-->
<div class="col">
<p class="text-muted row1">Daily UI</p>
<p class="row2">#002</p>
</div>
</div>
</div>
</div>
</div>
<!--Card 2-->
<div class="col-sm-4">
<div class="card card-cascade card-ecommerce wider shadow p-3 mb-5 ">
<!--Card Body-->
<div class="card-body card-body-cascade">
<!--Card Description-->
<div class="card2decs">
<p class="heading1"><strong>ZABHL90</strong></p>
<p class="quantity">Qty <span class="float-right text1">30</span></p>
<p class="subtotal">Subtotal<span class="float-right text1">$1,240</span></p>
<p class="shipping">Shipping<span class="float-right text1">Free</span></p>
<p class="promocode">Promo Code<span class="float-right text1">-$100</span></p>
<p class="total"><strong>Total</strong><span class="float-right totalText1">$<span class="totalText2">1,140</span></span></p>
</div>
<div class="payment">
<p class="heading2"><strong>Payment Details</strong></p>
<p class="cardAndExpire">Card Number<span class="float-right">Expiry</span></p>
<p class="cardAndExpireValue">161617161816188<span class="float-right">26/11</span></p>
<p class="nameAndcvc" style="margin-bottom:-10px;">Cardholder name<span class="float-right">CVC</span></p>
<p class="nameAndcvcValue">Mr. Example<span class="float-right">010</span></p>
</div>
<!--Card footer--> <a href="" class="purchaseLink">
<div class="card-footer text-center"> PURCHASE → </div>
</a>
</div>
</div>
</div>
</div>
</div>
.bg {
width: 100%;
height: auto;
min-height: 100vh;
background-color: #cccccc;
background-size: 100% 100%;
background-position: top center;
margin: auto
}
.mainRow {
margin-left: 10%;
margin-right: 10%
}
p {
margin: 0px
}
.desc {
background-color: #f0edeb;
margin-top: 5%;
margin-left: 0;
margin-right: 50px;
margin-bottom: 4%
}
.card-body {
padding: 0;
margin: 0;
margin-top: 10%
}
div.card.main {
margin: 0px !important
}
.card {
padding: 0 !important;
margin-top: 40px
}
.quantity,
.shipping,
.promocode,
.subtotal,
.cardAndExpire,
.nameAndcvc {
margin: 5%;
color: #6c757d !important
}
.heading1 {
margin: 5%;
font-size: 25px
}
.heading2 {
margin: 5%;
margin-top: 15%;
font-size: 20px
}
.payment {
background-color: #f0edeb;
padding: 3px;
margin-top: 15%
}
.text1 {
color: black;
font-weight: 700
}
.card-footer {
background-color: black;
color: white
}
.purchaseLink {
text-decoration: none
}
.row1 {
font-size: 12px
}
.row2 {
font-weight: 600
}
.subRow {
margin-left: 10%;
margin-bottom: 2%;
margin-top: 5%
}
p.cardAndExpireValue,
p.nameAndcvcValue {
margin: 5%;
margin-bottom: 10%;
font-weight: 600
}
p.nameAndcvc,
p.cardAndExpire {
margin-bottom: -10px
}
.total {
margin: 5%
}
.totalText {
font-weight: 700
}
.totalText2 {
font-weight: 700;
font-size: 30px
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
height: 430px
}