Timeline style02
<!DOCTYPE html>
<html>
<head>
<title>Timeline Style 02 | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Timeline Style 02">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<h3 class="card-title">Timeline CSS</h3>
<div class="row">
<div class="col-md-12">
<div class="main-timeline2">
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2018</span>
<div class="inner-content">
<h3 class="title">Web Designer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2017</span>
<div class="inner-content">
<h3 class="title">Web Developer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2016</span>
<div class="inner-content">
<h3 class="title">Web Designer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2015</span>
<div class="inner-content">
<h3 class="title">Web Developer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
body {
margin-top: 20px;
background-color: #f0f6ff;
}
a {
text-decoration: none;
}
.main-timeline2 {
overflow: hidden;
position: relative
}
.main-timeline2:before {
content: "";
width: 5px;
height: 70%;
background: #333;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%)
}
.main-timeline2 .timeline-content:before,
.main-timeline2 .timeline:before {
top: 50%;
transform: translateY(-50%);
content: ""
}
.main-timeline2 .timeline {
width: 50%;
padding-left: 100px;
float: right;
position: relative
}
.main-timeline2 .timeline:before {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 5px solid #333;
position: absolute;
left: -10px
}
.main-timeline2 .timeline-content {
display: block;
padding-left: 150px;
position: relative
}
.main-timeline2 .timeline-content:before {
width: 90px;
height: 10px;
border-top: 7px dotted #333;
position: absolute;
left: -92px
}
.main-timeline2 .year {
display: inline-block;
width: 120px;
height: 120px;
line-height: 100px;
border-radius: 50%;
border: 10px solid #f54957;
font-size: 30px;
color: #f54957;
text-align: center;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
position: absolute;
top: 0;
left: 0
}
.main-timeline2 .year:before {
content: "";
border-left: 20px solid #f54957;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
bottom: -13px;
right: 0;
transform: rotate(45deg)
}
.main-timeline2 .inner-content {
padding: 20px 0
}
.main-timeline2 .title {
font-size: 24px;
color: #f54957;
text-transform: uppercase;
margin: 0 0 5px
}
.main-timeline2 .description {
font-size: 14px;
color: #6f6f6f;
margin: 0 0 5px
}
.main-timeline2 .timeline:nth-child(2n) {
padding: 0 100px 0 0
}
.main-timeline2 .timeline:nth-child(2n) .timeline-content:before,
.main-timeline2 .timeline:nth-child(2n) .year,
.main-timeline2 .timeline:nth-child(2n):before {
left: auto;
right: -10px
}
.main-timeline2 .timeline:nth-child(2n) .timeline-content {
padding: 0 150px 0 0
}
.main-timeline2 .timeline:nth-child(2n) .timeline-content:before {
right: -92px
}
.main-timeline2 .timeline:nth-child(2n) .year {
right: 0
}
.main-timeline2 .timeline:nth-child(2n) .year:before {
right: auto;
left: 0;
border-left: none;
border-right: 20px solid #f54957;
transform: rotate(-45deg)
}
.main-timeline2 .timeline:nth-child(2) {
margin-top: 110px
}
.main-timeline2 .timeline:nth-child(odd) {
margin: -110px 0 0
}
.main-timeline2 .timeline:nth-child(even) {
margin-bottom: 80px
}
.main-timeline2 .timeline:first-child,
.main-timeline2 .timeline:last-child:nth-child(even) {
margin: 0
}
.main-timeline2 .timeline:nth-child(2n) .year {
border-color: #1ebad0;
color: #1ebad0
}
.main-timeline2 .timeline:nth-child(2) .year:before {
border-right-color: #1ebad0
}
.main-timeline2 .timeline:nth-child(2n) .title {
color: #1ebad0
}
.main-timeline2 .timeline:nth-child(3n) .year {
border-color: #7cba01;
color: #7cba01
}
.main-timeline2 .timeline:nth-child(3) .year:before {
border-left-color: #7cba01
}
.main-timeline2 .timeline:nth-child(3n) .title {
color: #7cba01
}
.main-timeline2 .timeline:nth-child(4n) .year {
border-color: #f8781f;
color: #f8781f
}
.main-timeline2 .timeline:nth-child(4) .year:before {
border-right-color: #f8781f
}
.main-timeline2 .timeline:nth-child(4n) .title {
color: #f8781f
}
@media only screen and (max-width:1200px) {
.main-timeline2 .year {
top: 50%;
transform: translateY(-50%)
}
}
@media only screen and (max-width:990px) {
.main-timeline2 .timeline {
padding-left: 75px
}
.main-timeline2 .timeline:nth-child(2n) {
padding: 0 75px 0 0
}
.main-timeline2 .timeline-content {
padding-left: 130px
}
.main-timeline2 .timeline:nth-child(2n) .timeline-content {
padding: 0 130px 0 0
}
.main-timeline2 .timeline-content:before {
width: 68px;
left: -68px
}
.main-timeline2 .timeline:nth-child(2n) .timeline-content:before {
right: -68px
}
}
@media only screen and (max-width:767px) {
.main-timeline2 {
overflow: visible
}
.main-timeline2:before {
height: 100%;
top: 0;
left: 0;
transform: translateX(0)
}
.main-timeline2 .timeline:before,
.main-timeline2 .timeline:nth-child(2n):before {
top: 60px;
left: -9px;
transform: translateX(0)
}
.main-timeline2 .timeline,
.main-timeline2 .timeline:nth-child(even),
.main-timeline2 .timeline:nth-child(odd) {
width: 100%;
float: none;
text-align: center;
padding: 0;
margin: 0 0 10px
}
.main-timeline2 .timeline-content,
.main-timeline2 .timeline:nth-child(2n) .timeline-content {
padding: 0
}
.main-timeline2 .timeline-content:before,
.main-timeline2 .timeline:nth-child(2n) .timeline-content:before {
display: none
}
.main-timeline2 .timeline:nth-child(2n) .year,
.main-timeline2 .year {
position: relative;
transform: translateY(0)
}
.main-timeline2 .timeline:nth-child(2n) .year:before,
.main-timeline2 .year:before {
border: none;
border-right: 20px solid #f54957;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
top: 50%;
left: -23px;
bottom: auto;
right: auto;
transform: rotate(0)
}
.main-timeline2 .timeline:nth-child(2n) .year:before {
border-right-color: #1ebad0
}
.main-timeline2 .timeline:nth-child(3n) .year:before {
border-right-color: #7cba01
}
.main-timeline2 .timeline:nth-child(4n) .year:before {
border-right-color: #f8781f
}
.main-timeline2 .inner-content {
padding: 10px
}
}