Timeline style06

<!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">
    <div class="col-12">
      <ul class="timeline">
        <li class="timeline-item">
          <h3 class="timeline-title">Lorem</h3>
          <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempora perferendis vero officia enim impedit voluptatem dignissimos, veniam ratione est alias rerum aperiam, nam aliquam reprehenderit iste dolor, commodi deleniti.</p>
        </li>
        <li class="timeline-item">
          <h3 class="timeline-title">Ipsum</h3>
          <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempora perferendis vero officia enim impedit voluptatem dignissimos, veniam ratione est alias rerum aperiam, nam aliquam reprehenderit iste dolor, commodi deleniti.</p>
        </li>
        <li class="timeline-item">
          <h3 class="timeline-title">Dolor</h3>
          <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempora perferendis vero officia enim impedit voluptatem dignissimos, veniam ratione est alias rerum aperiam, nam aliquam reprehenderit iste dolor, commodi deleniti.</p>
        </li>
        <li class="timeline-item">
          <h3 class="timeline-title">Sit</h3>
          <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempora perferendis vero officia enim impedit voluptatem dignissimos, veniam ratione est alias rerum aperiam, nam aliquam reprehenderit iste dolor, commodi deleniti.</p>
        </li>
        <li class="timeline-item">
          <h3 class="timeline-title">Amet</h3>
          <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempora perferendis vero officia enim impedit voluptatem dignissimos, veniam ratione est alias rerum aperiam, nam aliquam reprehenderit iste dolor, commodi deleniti.</p>
        </li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>
.timeline {
  padding: 0 60px;
  margin: 50px 0 0 0;
  position: relative;
  counter-reset: list 0;
}
.timeline-item {
  list-style: none;
  border-left: 4px solid green;
}
.timeline-item:last-child {
  border-left-color: transparent;
}
.timeline-title {
  margin: 0;
  padding: 0;
}
.timeline-title:before {
  color: white;
  position: relative;
  left: -22px;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: green;
  counter-increment: list;
  content: counter(list);
}
.timeline-text {
  margin: 0;
  padding: 40px;
}

                                    
Timeline style06

Timeline style06

Timeline style01

Timeline style01

Tablet style code texte

Tablet style code texte

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Social Media Icons

Social Media Icons

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Page 404 exemple 01

Page 404 exemple 01

Nav Menu style02

Nav Menu style02

Form login b4 01

Form login b4 01

Form contact avec validation en css

Form contact avec validation en css

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Asidebar Menu Style01

Asidebar Menu Style01