<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">OUR PROCESS</h1>
<span class="glyphicon glyphicon-fire"></span>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">SUBMIT YOUR PATENTED SOLUTION</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, in elementis mé pra quem é amistosis quis leo. mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">SUBMIT YOUR PATENTED SOLUTION</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds .Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">SUBMIT YOUR PATENTED SOLUTION</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis.. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"><i class="glyphicon glyphicon-floppy-disk"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">SUBMIT YOUR PATENTED SOLUTION</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
<hr>
<div class="btn-group">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-thumbs-up"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">SUBMIT YOUR PATENTED SOLUTION</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, , mais bolis eu num gostis.</p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
// Code goes here
.page-header {
font-size: 60px;
text-align: center;
margin: 0;
border-bottom: none;
}
.page-header .glyphicon-fire{
color: #f78b0a;
}
h1#timeline {
text-align: center;
color: #3F5570;
font-family: monospace;
}
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
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: 46%;
float: left;
border: none;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0;
box-shadow: 0;
}
.timeline > li > .timeline-panel:before {
/* position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " "; */
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #fff;
border: 1px solid #38568C;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li > .timeline-badge i{
color: #f78b0a;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: #3F5570;
font-family: monospace;
font-weight: 900;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
text-align: right;
}
.timeline-body > ul li{
margin-bottom: 0;
text-align: right;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}