Tracking card HTML CSS
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>
<!-- Bootstrap core CSS -->
<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>
<!-- Add custom CSS here -->
</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>
<!-- /.container -->
<!-- JavaScript -->
<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>
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.
Comments (0)