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%;
  }
}

                                    
Asidebar Menu Style01

Asidebar Menu Style01

Background overlay

Background overlay

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Create icon animate with svg

Create icon animate with svg

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Form contact avec validation en css

Form contact avec validation en css

Google Style Login

Google Style Login

Header Aside Footer Admin

Header Aside Footer Admin

Image hover 05

Image hover 05

Image hover style border top

Image hover style border top

Input range slider HTML style03

Input range slider HTML style03

Manual Slideshow

Manual Slideshow