<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<section class="main-timeline-section">
<div class="timeline-start"></div>
<div class="conference-center-line"></div>
<div class="conference-timeline-content">
<div class="timeline-article timeline-article-top">
<div class="content-date">
<span>12-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Message</p>
</div>
</div>
<div class="timeline-article timeline-article-bottom">
<div class="content-date">
<span>11-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Message</p>
</div>
</div>
<div class="timeline-article timeline-article-top">
<div class="content-date">
<span>10-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Message</p>
</div>
</div>
<div class="timeline-article timeline-article-bottom">
<div class="content-date">
<span>09-09-2017</span>
</div>
<div class="meta-date"></div>
<div class="content-box">
<p>Message</p>
</div>
</div>
</div>
<div class="timeline-end"></div>
</section>
</div>
</div>
</div>
body{
background-color: #1F1F1F;
padding: 5em 0;
color: #00BFFF;
}
p {
margin-bottom: 0;
}
.main-timeline-section{
position: relative;
width: 100%;
margin:auto;
height:300px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
position: absolute;
background: #00BFFF;
border: 3px solid #FFF;
border-radius:100px;
top:50%;
transform: translateY(-50%);
width:30px;
height:30px;
z-index: 10;
}
.main-timeline-section .timeline-end{
right:0px;
}
.main-timeline-section .conference-center-line{
position: absolute;
width:100%;
height:5px;
top:50%;
transform: translateY(-50%);
background: #00BFFF;
}
.timeline-article{
width: 20%;
position: relative;
min-height: 300px;
float:right;
}
.timeline-article .content-date {
position: absolute;
top: 35%;
left: -30px;
font-size:18px;
}
.timeline-article .meta-date {
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
width:20px;
height:20px;
border-radius: 100%;
background: #00BFFF;
border:3px solid #FFF;
}
.timeline-article .content-box {
/* box-shadow: 2px 2px 4px 0px #888; */
border: 3px solid #00BFFF;
border-radius: 5px;
background-color: #FFF;
width: 180px;
position: absolute;
top: 60%;
left: -80px;
padding:10px;
color: #1F1F1F;
text-align: center;
}
.timeline-article-top .content-box:before {
content: " ";
position:absolute;
left:50%;
transform: translateX(-50%);
top:-20px;
border:10px solid transparent;
border-bottom-color: #00BFFF;
}
.timeline-article-bottom .content-date {
top: 59%;
}
.timeline-article-bottom .content-box {
top: 25%;
}
.timeline-article-bottom .content-box:before {
content: " ";
position:absolute;
left:50%;
transform: translateX(-50%);
bottom:-20px;
border:10px solid transparent;
border-top-color: #00BFFF;
}
@media (max-width:460px){
body{
display: none;
}
}
This Pen doesn't use any external JavaScript resources.