Timeline style07

<!DOCTYPE html>
<html>
<head>
	<title>Timeline Style | 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">
	<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='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700,900' rel='stylesheet' type='text/css'>
	<link href="style.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <div class="row mt-5 mb-5">
        <div class="col-md-12">
            <div class="main-timeline">
                <div class="timeline">
                    <a href="#" class="timeline-content">
                        <span class="timeline-year">2018</span>
                        <div class="timeline-icon">
                            <i class="fa fa-rocket"></i>
                        </div>
                        <div class="content">
                            <h3 class="title">Web Development</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="timeline">
                    <a href="#" class="timeline-content">
                        <span class="timeline-year">2017</span>
                        <div class="timeline-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="content">
                            <h3 class="title">Java Script</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="timeline">
                    <a href="#" class="timeline-content">
                        <span class="timeline-year">2017</span>
                        <div class="timeline-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="content">
                            <h3 class="title">Java Script</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="timeline">
                    <a href="#" class="timeline-content">
                        <span class="timeline-year">2017</span>
                        <div class="timeline-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="content">
                            <h3 class="title">Java Script</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="timeline">
                    <a href="#" class="timeline-content">
                        <span class="timeline-year">2017</span>
                        <div class="timeline-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="content">
                            <h3 class="title">Java Script</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus.
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
.main-timeline{
  font-family: 'Roboto', sans-serif;
  padding: 20px 0;
  position: relative;
}
.main-timeline:before,
.main-timeline:after{
  content: '';
  height: 40px;
  width: 40px;
  background-color: #e7e7e7;
  border-radius: 50%;
  border: 10px solid #303334;
  transform:translateX(-50%);
  position: absolute;
  left: 50%;
  top: -15px;
  z-index: 2;
}
.main-timeline:after{
  top: auto;
  bottom:15px;
}
.main-timeline .timeline{
  padding: 35px 0;
  margin-top: -30px;
  position: relative;
  z-index: 1;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
  content: '';
  height: 100%;
  width: 50%;
  border-radius: 100px 0 0 100px;
  border: 15px solid #46B2BC;
  border-right: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.main-timeline .timeline:after{
  height: calc(100% - 30px);
  width: calc(50% - 12px);
  border-color: #65C7D0;
  left: 12px;
  top: 15px;
}
.main-timeline .timeline-content{ display:inline-block; }
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-year{
  color: #65C7D0;
  font-size: 50px;
  font-weight: 600;
  display: inline-block;
  transform:translateY(-50%);
  position: absolute;
  top: 50%;
  left: 10%;
}
.main-timeline .timeline-icon{
  color: #65C7D0;
  font-size: 80px;
  display: inline-block;
  transform: translateY(-50%);
  position: absolute;
  left: 34%;
  top: 50%;
}
.main-timeline .content{
  color: #909090;
  width: 50%;
  padding: 20px;
  display: inline-block;
  float: right;
}
.main-timeline .title{
  color: #65C7D0;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 5px 0;
}
.main-timeline .description{
  font-size: 15px;
  letter-spacing: 1px;
  margin: 0;
}
.main-timeline .timeline:nth-child(even):before{
  left: auto;
  right: 0;
  border-radius: 0 100px 100px 0;
  border: 15px solid red;
  border-left: none;
}
.main-timeline .timeline:nth-child(even):after{
  left: auto;
  right: 12px;
  border: 15px solid green;
  border-left: none;
  border-radius: 0 100px 100px 0;
}
.main-timeline .timeline:nth-child(even) .content{ float: left; }
.main-timeline .timeline:nth-child(even) .timeline-year{
  left: auto;
  right: 10%;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
  left: auto;
  right: 32%;
}
.main-timeline .timeline:nth-child(5n+2):before{ border-color: #EA3C14; }
.main-timeline .timeline:nth-child(5n+2):after{ border-color: #EF5720; }
.main-timeline .timeline:nth-child(5n+2) .timeline-icon{ color: #EA3C14; }
.main-timeline .timeline:nth-child(5n+2) .timeline-year{ color: #EA3C14; }
.main-timeline .timeline:nth-child(5n+2) .title{ color: #EA3C14; }
.main-timeline .timeline:nth-child(5n+3):before{ border-color: #8CC63E; }
.main-timeline .timeline:nth-child(5n+3):after{ border-color: #6CAF29; }
.main-timeline .timeline:nth-child(5n+3) .timeline-icon{ color: #8CC63E; }
.main-timeline .timeline:nth-child(5n+3) .timeline-year{ color: #8CC63E; }
.main-timeline .timeline:nth-child(5n+3) .title{ color: #8CC63E; }
.main-timeline .timeline:nth-child(5n+4):before{ border-color: #F99324; }
.main-timeline .timeline:nth-child(5n+4):after{ border-color: #FBB03B; }
.main-timeline .timeline:nth-child(5n+4) .timeline-icon{ color: #F99324; }
.main-timeline .timeline:nth-child(5n+4) .timeline-year{ color: #F99324; }
.main-timeline .timeline:nth-child(5n+4) .title{ color: #F99324; }
.main-timeline .timeline:nth-child(5n+5):before{ border-color: #0071BD; }
.main-timeline .timeline:nth-child(5n+5):after{ border-color: #0050A3; }
.main-timeline .timeline:nth-child(5n+5) .timeline-icon{ color: #0071BD; }
.main-timeline .timeline:nth-child(5n+5) .timeline-year{ color: #0071BD; }
.main-timeline .timeline:nth-child(5n+5) .title{ color: #0071BD; }
@media screen and (max-width:1200px){
  .main-timeline .timeline:after{ border-radius: 88px 0 0 88px; }
  .main-timeline .timeline:nth-child(even):after{ border-radius: 0 88px 88px 0; }
}
@media screen and (max-width:767px){
  .main-timeline .timeline{ margin-top: -19px; }
  .main-timeline .timeline:before {
      border-radius: 50px 0 0 50px;
      border-width: 10px;
  }
  .main-timeline .timeline:after {
      height: calc(100% - 18px);
      width: calc(50% - 9px);
      border-radius: 43px 0 0 43px;
      border-width:10px;
      top: 9px;
      left: 9px;
  }
  .main-timeline .timeline:nth-child(even):before {
      border-radius: 0 50px 50px 0;
      border-width: 10px;
  }
  .main-timeline .timeline:nth-child(even):after {
      height: calc(100% - 18px);
      width: calc(50% - 9px);
      border-radius: 0 43px 43px 0;
      border-width: 10px;
      top: 9px;
      right: 9px;
  }
  .main-timeline .timeline-icon{ font-size: 60px; }
  .main-timeline .timeline-year{ font-size: 40px; }
}
@media screen and (max-width:479px){
  .main-timeline .timeline-icon{
      font-size: 50px;
      transform:translateY(0);
      top: 25%;
      left: 10%;
  }
  .main-timeline .timeline-year{
      font-size: 25px;
      transform:translateY(0);
      top: 65%;
      left: 9%;
  }
  .main-timeline .content{
      width: 68%;
      padding: 10px;
  }
  .main-timeline .title{ font-size: 18px; }
  .main-timeline .timeline:nth-child(even) .timeline-icon{
      right: 10%;
  }
  .main-timeline .timeline:nth-child(even) .timeline-year{
      right: 9%;
  }
}

                                    
Social Media Icons

Social Media Icons

Planète animée style01

Planète animée style01

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Image hover 06

Image hover 06

Image hover 05

Image hover 05

Image hover 01

Image hover 01

Header Aside Footer Admin

Header Aside Footer Admin

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Convertir une div en image

Convertir une div en image

Card Profile Style01

Card Profile Style01

Bootstrap4 datepicker

Bootstrap4 datepicker