<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container dhn-info"> <!-- Timeline --> <div class="timeline dhn-text"> <!-- Line component --> <div class="line text-muted"></div> <!-- Separator --> <div class="separator text-muted"> <time>Roadmap</time> </div> <!-- /Separator --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <p>Q1 - Q2 2017</p> <span>Preparation and planning to <b>CrudeCoin</b>.</span> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <span>Q3- Q4 2017</span> <p>Whitepaper V1 / team build.</p> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <span>Q1 2018</span> <p>Whitepaper V2 / Pre-STO / DAO development.</p> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <span>Q2 2018</span> <p>Product development / Early marketing campaign.</p> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <span>Q3 2018</span> <p>Full product launch / Main STO / Contract input.</p> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <span>Q4 2019</span> <p>Tokens on exchange / Contract voting & implementation.</p> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <span>Q1 2020</span> <p>Full project realization.</p> </div> <!-- /Body --> </article> <!-- /Panel --> </div> <div class="dhn-img"> <img src="http://www.crudecoin.io/seed2/img/crudecoin-road-map.png" class="responsive-img"> </div> </div>

.timeline { position: relative; padding: 21px 0px 10px; margin-top: 4px; margin-bottom: 30px; } .timeline .line { position: absolute; width: 4px; display: block; background: currentColor; top: 0px; bottom: 0px; margin-left: 30px; } .timeline .separator { border-top: 1px solid currentColor; padding: 5px; padding-left: 40px; font-style: italic; font-size: .9em; margin-left: 30px; } .timeline .line::before { top: -4px; } .timeline .line::after { bottom: -4px; } .timeline .line::before, .timeline .line::after { content: ''; position: absolute; left: -4px; width: 12px; height: 12px; display: block; border-radius: 50%; background: currentColor; } .timeline .panel { position: relative; margin: 10px 0px 21px 70px; clear: both; } .timeline .panel::before { position: absolute; display: block; top: 8px; left: -24px; content: ''; width: 0px; height: 0px; border: inherit; border-width: 12px; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; } .timeline .panel .panel-heading.icon { position: absolute; left: -59px; display: block; width: 40px; height: 40px; padding: 0px; border-radius: 50%; text-align: center; float: left; } .timeline .panel-outline { border-color: transparent; background: transparent; box-shadow: none; } .timeline .panel-outline .panel-body { padding: 10px 0px; } .timeline .panel-outline .panel-heading:not(.icon), .timeline .panel-outline .panel-footer { display: none; } .dhn-info { width: 100%; display: inline-block; } .dhn-info .dhn-text { width: 50%; height: auto; float: left; padding: 20px 10px 0px 35px; } .dhn-info .dhn-text p { font-family: arial; font-size: 24px; line-height: 30px; text-transform: uppercase; word-spacing: 5px; margin: 0; padding: 0; display: block; } .dhn-info .dhn-img { width: 40%; height: 100%; float: right; } .dhn-info .dhn-text p > span.text-purple { color: #9b59b6; } .dhn-info .dhn-img img { display: block; height: auto; max-width: 100%; }