<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">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<div class="timeline">
<a href="#" class="timeline-content">
<div class="timeline-icon">
<i class="fa fa-globe"></i>
</div>
<h3 class="title">Web Designing</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
</p>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<div class="timeline-icon">
<i class="fa fa-users"></i>
</div>
<h3 class="title">Web Development</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
</p>
</a>
</div>
</div>
</div>
</div>
</div>
.main-timeline{
font-family: 'Roboto', sans-serif;
position: relative;
}
.main-timeline:after{
content: '';
display: block;
clear: both;
}
.main-timeline .timeline{
width: 50%;
margin: 0 10px 30px 0;
float: left;
}
.main-timeline .timeline-content{
color: #222;
background: linear-gradient(to right,#d62053,#AF2850);
text-align: center;
padding: 75px 30px 30px;
display: block;
position: relative;
z-index: 1;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-content:before{
content: '';
background: #fff;
border-radius: 40px 0 60px 0;
position: absolute;
left: 10px;
top: 10px;
bottom: 10px;
right: 10px;
z-index: -1;
}
.main-timeline .timeline-icon{
color: #fff;
background: linear-gradient(125deg, #d62053 50%, #AF2850 51%);
font-size: 25px;
line-height: 50px;
height: 60px;
width: 60px;
position: absolute;
top: 10px;
left: 30px;
z-index: 1;
clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0);
}
.main-timeline .title{
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 7px;
}
.main-timeline .description{
font-size: 14px;
letter-spacing: 1px;
margin: 0;
}
.main-timeline .timeline:nth-child(even){
float: right;
margin: 0 0 30px 10px;
}
.main-timeline .timeline:nth-child(even) .timeline-content:before{ border-radius: 0 40px 0 60px; }
.main-timeline .timeline:nth-child(even) .timeline-icon{
left: auto;
right: 30px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-content{
background: linear-gradient(to right,#fc8d44,#fc7114);
}
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
background: linear-gradient(125deg, #fc8d44 39%, #fc7114 40%);
}
.main-timeline .timeline:nth-child(4n+3) .timeline-content{
background: linear-gradient(to right,#1071b2,#0A5C96);
}
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
background: linear-gradient(125deg, #1071b2 39%, #0A5C96 40%);
}
.main-timeline .timeline:nth-child(4n+4) .timeline-content{
background: linear-gradient(to right, #3fb1ea,#3DA6DC);
}
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
background: linear-gradient(125deg, #3fb1ea 39%, #3DA6DC 40%);
}
@media screen and (max-width:767px){
.main-timeline .timeline,
.main-timeline .timeline:nth-child(even){
width: 100%;
float: none;
margin: 0 0 30px;
}
}
@media screen and (max-width:567px){
.main-timeline .title{ font-size: 18px; }
}
License Terms
