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

                                    
texte animate css

texte animate css

Timeline style05

Timeline style05

Texte Block Posts Style01

Texte Block Posts Style01

Tablet style code texte

Tablet style code texte

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Input range slider HTML style01

Input range slider HTML style01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Css Page grid layout

Css Page grid layout

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Arrows Defense Game

Arrows Defense Game

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table