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

                                    
toggle switch style03

toggle switch style03

toggle switch style01

toggle switch style01

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Vidéo background en html5 style02

Vidéo background en html5 style02

Titre section avec une bande style01

Titre section avec une bande style01

Table Responsive with css 01

Table Responsive with css 01

Menu aside style01 slide out

Menu aside style01 slide out

Image hover 06

Image hover 06

Image hover 05

Image hover 05

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Arrows Defense Game

Arrows Defense Game