Tracking card HTML CSS

Mar 18, 2020 115 0

Tracking card disign html css bootsprap

Tracking card disign html css bootsprap.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Shop Homepage Template for Bootstrap</title>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</head>
<style>
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
   background-color: #FFFFFF;
background-image: linear-gradient(180deg, #372F6A 0%, #2D276B 50%, #372F6A 100%);
background-clip: border-box;
border: 1px solid rgb(73, 59, 125);
border-radius: .5rem;
   box-shadow: 0 0.25rem 1rem rgba(90, 61, 165, 0.68) !important;
}
.nomer {
font-size: small;
   color: #8A7AF1;
}
.num {
font-size: 15px;
color: aliceblue;

}
.dat {
color: aliceblue;
font-size: 12px;
}
.left {
text-align: -webkit-right;
}
.right {
text-align: -webkit-left;
}

.timeline {
position: relative;
display: block;
width: 100%;
height: 2.5rem;
background-image: -webkit-gradient(linear, left top, right top, from(#880E4F), color-stop(50%, #E91E63), to(#F06292));
background-image: linear-gradient(to right, #312A6A, #3B2F84 50%, #362E6A);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF880E4F', endColorstr='#FFF06292', GradientType=1);
border-radius: 5px;
}
.timeline--inner {
position: absolute;
display: block;
top: 50%;
right: 1rem;
left: 1rem;
height: 4px;
margin: 0;
margin-top: -3px;
border: 0;
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2) inset;
border-radius: 1em;
z-index: 1;
}
.timeline--inner-pin:nth-of-type(1) {
background-color: #98DACB;
left: 0%;
}
[data-title] {
white-space: nowrap;
}
.is-featured {
width: 12px;
height: 12px;
}
---
.timeline--inner-pin:nth-of-type(2) {
background-color: #721743;
left: 30%;
}
[data-title] {
white-space: nowrap;
}
.is-normal {
width: 8px;
height: 8px;
}
.timeline--inner-pin {
position: absolute;
display: block;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #8151FF;
border-radius: 100%;
cursor: help;
box-shadow: 0 0 0 1px #ffffff, 0 2px 6px rgba(0, 0, 0, 0.35);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.pun {
font-size: xx-small;
color: white;
padding-top: 15px;
position: absolute;
   left: -10px;
}
</style>
<body style="background-color: #18154A;">
<div class="container" style="padding-top: 30%;margin-left: 20%;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6 nomer right">
NUMBER<p><span class="num">№5666955148</p>
</div>
<div class="col-6 nomer left" >
TIME <p><span class="dat">20.02.2020/ 17:33</span></p>
</div>
<div class="col-12">
<section class="timeline">
<figure class="timeline--inner">
   <i class="timeline--inner-pin is-featured" style="left: 0%;" data-title="Featured Pin"><span class="pun">Departure</span></i>
   <i class="timeline--inner-pin is-featured" style="left: 25%;" data-title="Featured Pin"><span class="pun">in Transit</span></i>
   <i class="timeline--inner-pin is-featured" style="left: 50%;" data-title="Featured Pin"><span class="pun">Arrived</span></i>
   <i class="timeline--inner-pin is-featured" style="left: 75%;" data-title="Featured Pin"><span class="pun">in Transit</span></i>
   <i class="timeline--inner-pin is-featured" style="left: 100%;" data-title="Featured Pin"><span class="pun">Recd</span></i>
</figure>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>



<script src="http://www.oswt.co.uk/startbootstrap/templates/js/jquery-1.10.2.js"></script>
<script src="http://www.oswt.co.uk/startbootstrap/templates/js/bootstrap.js"></script>

</body>

</html>

All materials on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.