<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<div class="col-md-3 col-sm-4">
<div class="timeline">
<a href="#" class="timeline-content">
<div class="timeline-icon">
<i class="fa fa-globe"></i>
</div>
<div class="timeline-year">
<span>2018</span>
</div>
<div class="inner-content">
<h3 class="title">Web Designing</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo
</p>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="timeline blue">
<a href="#" class="timeline-content">
<div class="timeline-icon">
<i class="fa fa-users"></i>
</div>
<div class="timeline-year">
<span>2017</span>
</div>
<div class="inner-content">
<h3 class="title">Java Script</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
:root{
--white: #fff;
--black: #000;
--color_1: #EA2027;
--color_2: #1F5295;
--color_3: #89b743;
--color_4: #e02a6d;
}
.main-timeline{ font-family: 'Niramit', sans-serif; }
.main-timeline:after{
content: '';
display: block;
clear: both;
}
.main-timeline .timeline{ margin: 0 -15px; }
.main-timeline .timeline-content{
color: var(--color_1);
text-align: left;
display: block;
position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
font-size: 70px;
text-align: center;
margin-bottom: 10px;
transition: all 0.3s;
}
.main-timeline .timeline:hover .timeline-icon{ transform: rotateY(360deg); }
.main-timeline .timeline-year{
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.main-timeline .timeline-year:after{
content: '';
height: 60px;
width: 107%;
background-color: var(--color_1);
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
-webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
}
.main-timeline .timeline-year span{
color: #var(--white);
background-color: var(--color_1);
font-size: 35px;
font-weight: 600;
text-align: center;
line-height: 120px;
height: 120px;
width: 120px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #999, 0 0 0 15px #var(--white);
display: block;
}
.main-timeline .inner-content{
padding: 0 10px 10px 15px;
border-left: 15px solid var(--color_1);
}
.main-timeline .title{
font-size: 25px;
font-weight: 600;
margin: 0 0 15px 0;
}
.main-timeline .description{
color: #333;
font-size: 15px;
letter-spacing: 1px;
}
.main-timeline .timeline.blue .timeline-icon,
.main-timeline .timeline.blue .title{
color: var(--color_2);
}
.main-timeline .timeline.blue .timeline-year:after,
.main-timeline .timeline.blue .timeline-year span{
background-color: var(--color_2);
}
.main-timeline .timeline.blue .inner-content{ border-left-color: var(--color_2); }
.main-timeline .timeline.green .timeline-icon,
.main-timeline .timeline.green .title{
color: var(--color_3);
}
.main-timeline .timeline.green .timeline-year:after,
.main-timeline .timeline.green .timeline-year span{
background-color: var(--color_3);
}
.main-timeline .timeline.green .inner-content{ border-left-color: var(--color_3); }
.main-timeline .timeline.pink .timeline-icon,
.main-timeline .timeline.pink .title{
color: var(--color_4);
}
.main-timeline .timeline.pink .timeline-year:after,
.main-timeline .timeline.pink .timeline-year span{
background-color: var(--color_4);
}
.main-timeline .timeline.pink .inner-content{ border-left-color: var(--color_4); }
@media screen and (max-width:767px){
.main-timeline .timeline{ margin: 0 0 15px; }
.main-timeline .timeline-year:after{ width: 100%; }
}
License Terms