<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>
<div class="inner-content">
<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>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<div class="timeline-icon">
<i class="fa fa-rocket"></i>
</div>
<h3 class="title">Web Development</h3>
<div class="inner-content">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
.main-timeline{
font-family: 'Roboto', sans-serif;
padding: 20px 0;
}
.main-timeline:before{
content: '';
background-color: #333;
height: 100%;
width: 15px;
border-radius: 10px;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 0;
}
.main-timeline:after{
content: '';
display: block;
clear: both;
}
.main-timeline .timeline{
width: 50%;
padding: 0 20px 0 60px;
margin: 0 0 30px 10px;
float: right;
position: relative;
}
.main-timeline .timeline:after{
content: '';
background-color: #0985f9;
height: 100px;
width: 10px;
transform: translateY(-50%);
position: absolute;
right: 0;
top: 50%;
}
.main-timeline .timeline-content{
color: #555;
background-color: #fff;
text-align: center;
display: block;
position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
color: #fff;
background: #0985f9;
font-size: 45px;
line-height: 85px;
height: 100px;
width: 100px;
border: 10px solid #fff;
border-right: none;
box-shadow: 10px 0 0 #fff,0 0 0 10px #0985f9;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: -110px;
z-index: 1;
}
.main-timeline .title{
color: #fff;
background: #0985f9;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 15px;
margin: 0;
}
.main-timeline .inner-content{
background-color: #e7e7e7;
padding: 10px 20px;
}
.main-timeline .description{
font-size: 14px;
letter-spacing: 1px;
margin: 0;
}
.main-timeline .timeline:nth-child(even){
padding: 0 60px 0 20px;
margin: 0 10px 30px 0;
float: left;
}
.main-timeline .timeline:nth-child(even):after{
right: auto;
left: 0;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
border: 10px solid #fff;
border-left: none;
box-shadow: -10px 0 0 #fff,0 0 0 10px #0985f9;
left: auto;
right: -110px;
}
.main-timeline .timeline:nth-child(4n+2):after{ background-color: #68B73A; }
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
background: #68B73A;
box-shadow: -10px 0 0 #fff,0 0 0 10px #68B73A;
}
.main-timeline .timeline:nth-child(4n+2) .title{ background-color: #68B73A; }
.main-timeline .timeline:nth-child(4n+3):after{ background-color: #ff5500; }
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
background: #ff5500;
box-shadow: 10px 0 0 #fff,0 0 0 10px #ff5500;
}
.main-timeline .timeline:nth-child(4n+3) .title{ background-color: #ff5500; }
.main-timeline .timeline:nth-child(4n+4):after{ background-color: #8710d9; }
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
background: #8710d9;
box-shadow: -10px 0 0 #fff,0 0 0 10px #8710d9;
}
.main-timeline .timeline:nth-child(4n+4) .title{ background-color: #8710d9; }
@media screen and (max-width:767px){
.main-timeline{ padding: 40px 0; }
.main-timeline .timeline,
.main-timeline .timeline:nth-child(even){
background-color: #fff;
width: 100%;
padding: 110px 0 20px 0;
margin: 0 0 50px;
float: none;
}
.main-timeline .timeline:last-child{ margin: 0; }
.main-timeline .timeline:after,
.main-timeline .timeline:nth-child(even):after{
height: 10px;
width: 100px;
transform: translateY(0) translateX(-50%);
top: auto;
bottom: 0;
left: 50%;
right: auto;
}
.main-timeline .timeline-icon,
.main-timeline .timeline:nth-child(even) .timeline-icon{
border: 10px solid #fff;
border-bottom: none;
box-shadow: 0 10px 0 #fff,0 0 0 10px #0985f9;
transform: translateY(0) translateX(-50%);
left: 50%;
top: -110px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #68B73A; }
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #ff5500; }
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #8710d9; }
}
@media screen and (max-width:567px){
.main-timeline .title{ font-size: 18px; }
}
License Terms