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 style07

Timeline style07

Table responsive avec css native

Table responsive avec css native

Social Media Icons

Social Media Icons

Scroll to div ID

Scroll to div ID

Manual Slideshow

Manual Slideshow

Lightbox gallery style01

Lightbox gallery style01

Input range slider HTML style04

Input range slider HTML style04

Image hover 04

Image hover 04

Image hover 03

Image hover 03

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Card Bootstrap4 01

Card Bootstrap4 01

Bootstrap4 datepicker

Bootstrap4 datepicker