Timelines are usually used to go through steps on a website or to introduce the process of a task or to review the steps of a task. In this code, timelines are displayed along with the icon. The text box of each item in the timeline had a radius border on one side and no radius border on the other. The icons are green and the text box itself is yellowish orange. The general line is also green.
HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-body">
<div class="timeline">
<div class="container left">
<div class="date">15 Dec</div>
<i class="icon fa fa-home"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container right">
<div class="date">22 Oct</div>
<i class="icon fa fa-gift"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container left">
<div class="date">10 Jul</div>
<i class="icon fa fa-user"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container right">
<div class="date">18 May</div>
<i class="icon fa fa-ravelry"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container left">
<div class="date">10 Feb</div>
<i class="icon fa fa-cog"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container right">
<div class="date">01 Jan</div>
<i class="icon fa fa-certificate"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
}
.timeline {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 15px 0;
}
.timeline::after {
content: '';
position: absolute;
width: 2px;
background: #006E51;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.container {
padding: 15px 30px;
position: relative;
background: inherit;
width: 50%;
}
.container.left {
left: 0;
}
.container.right {
left: 50%;
}
.container::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 8px);
right: -8px;
background: #ffffff;
border: 2px solid #006E51;
border-radius: 16px;
z-index: 1;
}
.container.right::after {
left: -8px;
}
.container::before {
content: '';
position: absolute;
width: 50px;
height: 2px;
top: calc(50% - 1px);
right: 8px;
background: #006E51;
z-index: 1;
}
.container.right::before {
left: 8px;
}
.container .date {
position: absolute;
display: inline-block;
top: calc(50% - 8px);
text-align: center;
font-size: 14px;
font-weight: bold;
color: #006E51;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 1;
}
.container.left .date {
right: -75px;
}
.container.right .date {
left: -75px;
}
.container .icon {
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
padding: 9px 0;
top: calc(50% - 20px);
background: #F6D155;
border: 2px solid #006E51;
border-radius: 40px;
text-align: center;
font-size: 18px;
color: #006E51;
z-index: 1;
}
.container.left .icon {
right: 56px;
}
.container.right .icon {
left: 56px;
}
.container .content {
padding: 30px 90px 30px 30px;
background: #F6D155;
position: relative;
border-radius: 0 500px 500px 0;
}
.container.right .content {
padding: 30px 30px 30px 90px;
border-radius: 500px 0 0 500px;
}
.container .content h2 {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: normal;
color: #006E51;
}
.container .content p {
margin: 0;
font-size: 16px;
line-height: 22px;
color: #000000;
}
@media (max-width: 767.98px) {
.timeline::after {
left: 90px;
}
.container {
width: 100%;
padding-left: 120px;
padding-right: 30px;
}
.container.right {
left: 0%;
}
.container.left::after,
.container.right::after {
left: 82px;
}
.container.left::before,
.container.right::before {
left: 100px;
border-color: transparent #006E51 transparent transparent;
}
.container.left .date,
.container.right .date {
right: auto;
left: 15px;
}
.container.left .icon,
.container.right .icon {
right: auto;
left: 146px;
}
.container.left .content,
.container.right .content {
padding: 30px 30px 30px 90px;
border-radius: 500px 0 0 500px;
}
}