<div class="container-fluid my-5 d-flex justify-content-center">
<div class="card card-1">
<div class="card-header bg-white">
<div class="media flex-sm-row flex-column-reverse justify-content-between ">
<div class="col my-auto">
<h4 class="mb-0">Thanks for your Order,<span class="change-color">Anjali</span> !</h4>
</div>
<div class="col-auto text-center my-auto pl-0 pt-sm-4"> <img class="img-fluid my-auto align-items-center mb-0 pt-3" src="https://i.imgur.com/7q7gIzR.png" width="115" height="115">
<p class="mb-4 pt-0 Glasses">Glasses For Everyone</p>
</div>
</div>
</div>
<div class="card-body">
<div class="row justify-content-between mb-3">
<div class="col-auto">
<h6 class="color-1 mb-0 change-color">Receipt</h6>
</div>
<div class="col-auto "> <small>Receipt Voucher : 1KAU9-84UIL</small> </div>
</div>
<div class="row">
<div class="col">
<div class="card card-2">
<div class="card-body">
<div class="media">
<div class="sq align-self-center "> <img class="img-fluid my-auto align-self-center mr-2 mr-md-4 pl-0 p-0 m-0" src="https://i.imgur.com/RJOW4BL.jpg" width="135" height="135" /> </div>
<div class="media-body my-auto text-right">
<div class="row my-auto flex-column flex-md-row">
<div class="col my-auto">
<h6 class="mb-0"> Jack Jacs</h6>
</div>
<div class="col-auto my-auto"> <small>Golden Rim </small></div>
<div class="col my-auto"> <small>Size : M</small></div>
<div class="col my-auto"> <small>Qty : 1</small></div>
<div class="col my-auto">
<h6 class="mb-0">₹3,600.00</h6>
</div>
</div>
</div>
</div>
<hr class="my-3 ">
<div class="row">
<div class="col-md-3 mb-3"> <small> Track Order <span><i class=" ml-2 fa fa-refresh" aria-hidden="true"></i></span></small> </div>
<div class="col mt-auto">
<div class="progress my-auto">
<div class="progress-bar progress-bar rounded" style="width: 62%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="media row justify-content-between ">
<div class="col-auto text-right"><span> <small class="text-right mr-sm-2"></small> <i class="fa fa-circle active"></i> </span></div>
<div class="flex-col"> <span> <small class="text-right mr-sm-2">Out for delivary</small><i class="fa fa-circle active"></i></span></div>
<div class="col-auto flex-col-auto"><small class="text-right mr-sm-2">Delivered</small><span> <i class="fa fa-circle"></i></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="card card-2">
<div class="card-body">
<div class="media">
<div class="sq align-self-center "> <img class="img-fluid my-auto align-self-center mr-2 mr-md-4 pl-0 p-0 m-0" src="https://i.imgur.com/fUWWpRS.jpg" width="135" height="135" /> </div>
<div class="media-body my-auto text-right">
<div class="row my-auto flex-column flex-md-row">
<div class="col-auto my-auto ">
<h6 class="mb-0"> Michel Mark</h6>
</div>
<div class="col my-auto "> <small>Black Rim </small></div>
<div class="col my-auto "> <small>Size : L</small></div>
<div class="col my-auto "> <small>Qty : 1</small></div>
<div class="col my-auto ">
<h6 class="mb-0">₹1,235.00</h6>
</div>
</div>
</div>
</div>
<hr class="my-3 ">
<div class="row ">
<div class="col-md-3 mb-3"> <small> Track Order <span><i class=" ml-2 fa fa-refresh" aria-hidden="true"></i></span></small> </div>
<div class="col mt-auto">
<div class="progress">
<div class="progress-bar progress-bar rounded" style="width: 18%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="media row justify-content-between ">
<div class="col-auto text-right"><span> <small class="text-right mr-sm-2"></small> <i class="fa fa-circle active"></i> </span></div>
<div class="flex-col"> <span> <small class="text-right mr-sm-2">Out for delivary</small><i class="fa fa-circle"></i></span></div>
<div class="col-auto flex-col-auto">
<smallclass="text-right mr-sm-2">Delivered</small><span> <i class="fa fa-circle"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="row justify-content-between">
<div class="col-auto">
<p class="mb-1 text-dark"><b>Order Details</b></p>
</div>
<div class="flex-sm-col text-right col">
<p class="mb-1"><b>Total</b></p>
</div>
<div class="flex-sm-col col-auto">
<p class="mb-1">₹4,835</p>
</div>
</div>
<div class="row justify-content-between">
<div class="flex-sm-col text-right col">
<p class="mb-1"> <b>Discount</b></p>
</div>
<div class="flex-sm-col col-auto">
<p class="mb-1">₹150</p>
</div>
</div>
<div class="row justify-content-between">
<div class="flex-sm-col text-right col">
<p class="mb-1"><b>GST 18%</b></p>
</div>
<div class="flex-sm-col col-auto">
<p class="mb-1">843</p>
</div>
</div>
<div class="row justify-content-between">
<div class="flex-sm-col text-right col">
<p class="mb-1"><b>Delivery Charges</b></p>
</div>
<div class="flex-sm-col col-auto">
<p class="mb-1">Free</p>
</div>
</div>
</div>
</div>
<div class="row invoice ">
<div class="col">
<p class="mb-1"> Invoice Number : 788152</p>
<p class="mb-1">Invoice Date : 22 Dec,2019</p>
<p class="mb-1">Recepits Voucher:18KU-62IIK</p>
</div>
</div>
</div>
<div class="card-footer">
<div class="jumbotron-fluid">
<div class="row justify-content-between ">
<div class="col-sm-auto col-auto my-auto"><img class="img-fluid my-auto align-self-center " src="https://i.imgur.com/7q7gIzR.png" width="115" height="115"></div>
<div class="col-auto my-auto ">
<h2 class="mb-0 font-weight-bold">TOTAL PAID</h2>
</div>
<div class="col-auto my-auto ml-auto">
<h1 class="display-3 ">₹ 5,528</h1>
</div>
</div>
<div class="row mb-3 mt-3 mt-md-0">
<div class="col-auto border-line"> <small class="text-white">PAN:AA02hDW7E</small></div>
<div class="col-auto border-line"> <small class="text-white">CIN:UMMC20PTC </small></div>
<div class="col-auto "><small class="text-white">GSTN:268FD07EXX </small> </div>
</div>
</div>
</div>
</div>
</div>
body {
min-height: 100vh;
background-size: cover;
font-family: 'Lato', sans-serif;
color: rgba(116, 116, 116, 0.667);
background: linear-gradient(140deg, #fff, 50%, #BA68C8)
}
.container-fluid {
margin-top: 200px
}
p {
font-size: 14px;
margin-bottom: 7px
}
.small {
letter-spacing: 0.5px !important
}
.card-1 {
box-shadow: 2px 2px 10px 0px rgb(190, 108, 170)
}
hr {
background-color: rgba(248, 248, 248, 0.667)
}
.bold {
font-weight: 500
}
.change-color {
color: #AB47BC !important
}
.card-2 {
box-shadow: 1px 1px 3px 0px rgb(112, 115, 139)
}
.fa-circle.active {
font-size: 8px;
color: #AB47BC
}
.fa-circle {
font-size: 8px;
color: #aaa
}
.rounded {
border-radius: 2.25rem !important
}
.progress-bar {
background-color: #AB47BC !important
}
.progress {
height: 5px !important;
margin-bottom: 0
}
.invoice {
position: relative;
top: -70px
}
.Glasses {
position: relative;
top: -12px !important
}
.card-footer {
background-color: #AB47BC;
color: #fff
}
h2 {
color: rgb(78, 0, 92);
letter-spacing: 2px !important
}
.display-3 {
font-weight: 500 !important
}
@media (max-width: 479px) {
.invoice {
position: relative;
top: 7px
}
.border-line {
border-right: 0px solid rgb(226, 206, 226) !important
}
}
@media (max-width: 700px) {
h2 {
color: rgb(78, 0, 92);
font-size: 17px
}
.display-3 {
font-size: 28px;
font-weight: 500 !important
}
}
.card-footer small {
letter-spacing: 7px !important;
font-size: 12px
}
.border-line {
border-right: 1px solid rgb(226, 206, 226)
}