<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="section-spacing text-center" id="features">
<div class="container">
<header class="section-header">
<h2>Versions of Cartwheel</h2>
<h3>Reasons why you should choose this product</h3>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="timeline">
<li class="timeline wow bounceInUp">
<div class="timeline-badge warning"><i class="fa fa-bullseye"></i></div>
<div class="date-info">
<span class="day">29</span><span class="month"> Jan</span><span class="year"> 2017</span>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h6 class="timeline-title">Version 1.0.2 Released with user identified fixes/enhancements</h6>
</div>
<div class="timeline-body">
<p>
Release highlights :
Layout changed inline with other Cartwheel applications. (Menu based and full-screen).
Introduced filters and sorting of Actions items.
Print facility to support printing of any saved reports (including previous reports)
</p>
</div>
</div>
</li>
<li class="timeline-inverted wow bounceInUp">
<div class="timeline-badge danger"><i class="fa fa-crosshairs"></i></div>
<div class="date-info">
<span class="day">04</span><span class="month"> Feb</span><span class="year"> 2017</span>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h6 class="timeline-title">Version 1.0.2 Released with user identified fixes/enhancements</h6>
</div>
<div class="timeline-body">
<p>
Release highlights :
Layout changed inline with other Cartwheel applications. (Menu based and full-screen).
Introduced filters and sorting of Actions items.
Print facility to support printing of any saved reports (including previous reports)
</p>
</div>
</div>
</li>
<li class="timeline-inverted wow bounceInUp">
<div class="timeline-badge danger"><i class="fa fa-crosshairs"></i></div>
<div class="date-info">
<span class="day">31</span><span class="month"> Jan</span><span class="year"> 2016</span>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h6 class="timeline-title">Version 1.0.2 Released with user identified fixes/enhancements</h6>
</div>
<div class="timeline-body">
<p>
Release highlights :
Layout changed inline with other Cartwheel applications. (Menu based and full-screen).
Introduced filters and sorting of Actions items.
Print facility to support printing of any saved reports (including previous reports)
</p>
</div>
</div>
</li>
<li class="timeline-inverted wow bounceInUp">
<div class="timeline-badge danger"><i class="fa fa-crosshairs"></i></div>
<div class="date-info">
<span class="day">25</span><span class="month"> Jan</span><span class="year"> 2016</span>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h6 class="timeline-title">Version 1.0.2 Released with user identified fixes/enhancements</h6>
</div>
<div class="timeline-body">
<p>
Release highlights :
Layout changed inline with other Cartwheel applications. (Menu based and full-screen).
Introduced filters and sorting of Actions items.
Print facility to support printing of any saved reports (including previous reports)
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
.timeline {
list-style: none;
padding: 5px 0 5px;
position: relative;
}
.timeline h6 {
margin-bottom: 0px;
font-size: 15px;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 2px;
background-color: #eeeeee;
left: 49%;
margin-left: -1.5px;
background: rgb(80, 80, 80);
background: -moz-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -o-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -ms-linear-gradient(top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
}
.timeline > li {
margin-bottom: 5px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 45%;
text-align: left;
float: right;
border: 1px solid #d4d4d4;
border-radius: 4px;
padding: 15px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 7px;
display: inline-block;
border-top: 7px solid transparent;
border-left: 7px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 7px solid transparent;
content: " ";
border-left-width: 0;
border-right-width: 10px;
left: -10px;
right: auto;
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 7px;
display: inline-block;
border-top: 7px solid transparent;
border-left: 7px solid #fff;
border-right: 0 solid #fff;
border-bottom: 7px solid transparent;
content: " ";
border-left-width: 0;
border-right-width: 10px;
left: -10px;
right: auto;
}
.timeline > li > .timeline-badge {
color: #fff;
width: 35px;
height: 35px;
line-height: 34px;
font-size: 20px;
text-align: center;
position: absolute;
top: 8px;
left: 50%;
margin-left: -28px;
background-color: #f56363;
z-index: 8;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: left;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 12px;
border-right-width: 0px;
left: auto;
right: -12px;
}
.timeline-inverted{
padding-top:5px;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 12px;
border-right-width: 0px;
left: auto;
right: -12px;
}
.timeline-heading{
color:#000;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
font-size: 13px;
color: #777;
}
.timeline-body > p + p {
margin-top: 5px;
}
.overlay {
position: absolute;
width: 100%;
min-height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
}
.timeline .date-info{
position: absolute;
top: -2px;
left: 40%;
margin-left: -28px;
width: 100px;
}
.timeline-inverted .date-info{
left: 51%;
}
.date-info .month{
position: absolute;
top: 10px;
font-size: 14px;
left: 70px;
}
.date-info .year{
position: absolute;
top: 23px;
font-size: 14px;
left: 70px;
}
.date-info .day{
font-size: 35px;
}
@media (max-width: 768px) {
.timeline:before {
left: 0.9%;
}
.timeline > li > .timeline-badge {
left: 2.2%;
}
.timeline > li > .timeline-panel{
width: 94%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 10px;
left: -10px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 10px;
left: -10px;
right: auto;
}
.date-info {
position: absolute;
top: 1px;
left: 90%;
margin-left: -24px;
width: auto;
}
.date-info .day {
font-size: 12px;
}
.date-info .month,.date-info .year{
position: initial;
font-size: 12px;
}
}
