Timeline style08

<!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 mt-5 mb-5">
        <div class="row">
            <div class="col-md-12">
                <div class="main-timeline">
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2020</span>
                            <div class="timeline-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h3 class="title">Web Designing</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2019</span>
                            <div class="timeline-icon">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <h3 class="title">Web Development</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2020</span>
                            <div class="timeline-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h3 class="title">Web Designing</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2019</span>
                            <div class="timeline-icon">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <h3 class="title">Web Development</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2020</span>
                            <div class="timeline-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h3 class="title">Web Designing</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2019</span>
                            <div class="timeline-icon">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <h3 class="title">Web Development</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
.main-timeline{
  font-family: 'Roboto', sans-serif;
  position: relative;
}
.main-timeline:after{
  content: '';
  display: block;
  clear: both;
}
.main-timeline .timeline{
  width: 60%;
  padding: 0 30px 0 0;
  margin: 20px 0;
  float: left;
}
.main-timeline .timeline-content{
  background-color: #536E79;
  min-height: 133px;
  padding: 30px 95px 30px 130px;
  display: block;
  position: relative;
  z-index: 1;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-content:before{
  content: '';
  background: #fff;
  border-radius: 100px 20px 20px 100px;
  position: absolute;
  left: 70px;
  top: 10px;
  bottom: 10px;
  right: -30px;
  z-index: -1;
}
.main-timeline .timeline-year{
  color: #fff;
  font-size: 45px;
  font-weight: 600;
  line-height: 45px;
  transform: translateY(-50%) rotate(-90deg);
  position: absolute;
  left: -15px;
  top: 50%;
}
.main-timeline .timeline-icon{
  color: #fff;
  background-color: #536E79;
  font-size: 60px;
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transform: translateY(-50%);
  position: absolute;
  right: -20px;
  top: 50%;
}
.main-timeline .title{
  color: #536E79;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 7px 0;
}
.main-timeline .description{
  color: #817f7f;
  font-size: 15px;
  margin: 0;
}
.main-timeline .timeline:nth-child(even){
  padding: 0 0 0 30px;
  float: right;
}
.main-timeline .timeline:nth-child(even) .timeline-content{ padding: 30px 130px 30px 95px; }
.main-timeline .timeline:nth-child(even) .timeline-content:before{
  border-radius: 20px 100px 100px 20px;
  left: -30px;
  right: 70px;
}
.main-timeline .timeline:nth-child(even) .timeline-year{
  right: -15px;
  left: auto;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
  right: auto;
  left: -20px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-content,
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
  background-color: #00B8D4;
}
.main-timeline .timeline:nth-child(4n+2) .title{ color: #00B8D4; }
.main-timeline .timeline:nth-child(4n+3) .timeline-content,
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
  background-color: #FEA726;
}
.main-timeline .timeline:nth-child(4n+3) .title{ color: #FEA726; }
.main-timeline .timeline:nth-child(4n+4) .timeline-content,
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
  background-color: #01BFA5;
}
.main-timeline .timeline:nth-child(4n+4) .title{ color: #01BFA5; }
@media screen and (max-width:767px){
  .main-timeline .timeline,
  .main-timeline .timeline:nth-child(even){
      text-align: center;
      width: 100%;
      padding: 0 0 30px 0;
      margin: 0 0 30px;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(even) .timeline-content{
      padding: 80px 25px;
  }
  .main-timeline .timeline-content:before,
  .main-timeline .timeline:nth-child(even) .timeline-content:before{
      border-radius: 50px 50px 20px 20px;
      bottom: -30px;
      top: 65px;
      left: 10px;
      right: 10px;
  }
  .main-timeline .timeline-year,
  .main-timeline .timeline:nth-child(even) .timeline-year{
      transform: translateX(-50%) translateY(0);
      top: 10px;
      left: 50%;
  }
  .main-timeline .timeline-icon,
  .main-timeline .timeline:nth-child(even) .timeline-icon{
      font-size: 50px;
      line-height: 85px;
      width: 85px;
      height: 85px;
      transform: translateX(-50%);
      top: auto;
      bottom: -20px;
      right: auto;
      left: 50%;
  }
}
@media screen and (max-width:576px){
  .main-timeline .title{ font-size: 18px; }
}

                                    
Background overlay

Background overlay

Bootstrap4 datepicker

Bootstrap4 datepicker

Card Bootstrap4 02

Card Bootstrap4 02

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Carousel Bootstrap3

Carousel Bootstrap3

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Form contact avec validation en css

Form contact avec validation en css

Google Style Login

Google Style Login

Image hover Inspiration styles

Image hover Inspiration styles

Menu aside style01 slide out

Menu aside style01 slide out

Responsive image grid

Responsive image grid

Timeline style04

Timeline style04