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

                                    
toggle switch style02

toggle switch style02

Vidéo background en html5 style01

Vidéo background en html5 style01

Titre section avec une bande style01

Titre section avec une bande style01

Timeline style08

Timeline style08

Scroll down button 01

Scroll down button 01

Profile page with b4

Profile page with b4

Page 404 exemple 01

Page 404 exemple 01

Image hover Flip Flap Style

Image hover Flip Flap Style

Form login 02

Form login 02

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter