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

                                    
Alert Bootstrap4 style02

Alert Bootstrap4 style02

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Background div gradient

Background div gradient

Buttons Styles Inspirations

Buttons Styles Inspirations

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Card Profile Style01

Card Profile Style01

Chercher un mot sur la liste

Chercher un mot sur la liste

Elastic Content Slider

Elastic Content Slider

Form login b4 01

Form login b4 01

Image hover Inspiration styles

Image hover Inspiration styles

Planète animée style01

Planète animée style01

Titre section avec une bande style01

Titre section avec une bande style01