<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container mt-5 mb-5">
<ul class="roadmap mt-5">
<li class="d-block position-relative mb-2">
<span class="text-dark d-block font-weight-bold">Q3 2016</span>
<p class="mb-0">Project start-up. Product conception. System architecture development.</p>
</li>
<li class="d-block position-relative mb-2">
<span class="d-block font-weight-bold">Q4 2016</span>
<p class="mb-0">Connection to stock exchanges. Development of trading platform and the system’s core elements.</p>
</li>
<li class="d-block position-relative mb-2">
<span class="d-block font-weight-bold">Q1 2017</span>
<p class="mb-0">Test environment launch for algorithm creators. Development of the first algorithms.</p>
</li>
<li class="d-block position-relative mb-2">
<span class="d-block font-weight-bold">Q2 2017</span>
<p class="mb-0">Tradingene public product launch for algorithm creators. Broadening of financial instruments for algorithm creation.</p>
</li>
<li class="d-block position-relative mb-2">
<span class="d-block font-weight-bold">Q3 2018</span>
<p class="mb-0">Development of user interface prototype for investors.</p>
</li>
</ul>
</div>
<div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div>
.roadmap {
display: block;
position: relative;
}
.roadmap:before {
content: '';
position: absolute;
display: block;
width: 4px;
height: 100%;
top: 0;
bottom: 0;
left: 10px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-image: -moz-linear-gradient(0deg, #2c90e4 0%, #a754e2 100%);
background-image: -webkit-linear-gradient(0deg, #2c90e4 0%, #a754e2 100%);
background-image: -ms-linear-gradient(0deg, #2c90e4 0%, #a754e2 100%);
background-image: linear-gradient(0deg, #2c90e4 0%, #a754e2 100%);
}
.roadmap li:before,
.roadmap li:after {
content: '';
position: absolute;
display: block;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.roadmap li:before {
width: 24px;
height: 24px;
top: 1px;
left: -40px;
background-image: -moz-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
background-image: -webkit-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
background-image: -ms-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
background-image: linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
opacity: 0.37;
z-index: 1;
}
.roadmap li:after {
width: 16px;
height: 16px;
top: 5px;
left: -36px;
background-color: #fff;
z-index: 2;
}
.roadmap li:last-child {
margin-bottom: 0;
}
@media (min-width: 300px) {
.roadmap li {
margin-bottom: 35px;
}
.roadmap li span {
font-size: 17px;
margin-bottom: 10px;
}
}
@media (min-width: 1200px) {
.roadmap {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0;
margin-top: 75px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
.roadmap:before {
width: auto;
height: 4px;
top: 52px;
left: 0;
right: 0;
background-image: -moz-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
background-image: -webkit-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
background-image: -ms-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
background-image: linear-gradient(90deg, #2c90e4 0%, #a754e2 100%);
}
.roadmap li {
display: block;
max-width: 210px;
padding-left: 0;
margin: 0 15px;
}
.roadmap li span {
margin-bottom: 60px;
}
.roadmap li:before {
top: 42px;
left: 0;
}
.roadmap li:after {
top: 46px;
left: 4px;
}
}
