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

                                    
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Ajouter une pagination1

Ajouter une pagination1

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Chercher un mot sur la liste

Chercher un mot sur la liste

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Create icon animate with svg

Create icon animate with svg

Form login 03

Form login 03

Header Aside Footer Admin

Header Aside Footer Admin

Image hover 07

Image hover 07

Planète animée style01

Planète animée style01

Table Responsive with css 01

Table Responsive with css 01

Titre section avec une anmation style01

Titre section avec une anmation style01