Timeline style05

<!DOCTYPE html>
<html>
<head>
	<title>ALERT BOOTSTRAP4 STYLE02 | 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="ALERT BOOTSTRAP4 STYLE02">
	<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>

  <!-- Vertical Timeline -->
  <section id="conference-timeline">
    <div class="timeline-start">Debut</div>
    <div class="conference-center-line"></div>
    <div class="conference-timeline-content">
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="article-number">01</span></p>
          </div>
          <span class="timeline-author">Mezgani Said</span>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="article-number">02</span></p>
          </div>
          <span class="timeline-author">Mezgani Said</span>
        </div>
        <div class="meta-date">
          <span class="date">18</span>
          <span class="month">APR</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="article-number">01</span></p>
          </div>
          <span class="timeline-author">Mezgani Said</span>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="article-number">02</span></p>
          </div>
          <span class="timeline-author">Mezgani Said</span>
        </div>
        <div class="meta-date">
          <span class="date">18</span>
          <span class="month">APR</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="article-number">01</span></p>
          </div>
          <span class="timeline-author">Mezgani Said</span>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="article-number">02</span></p>
          </div>
          <span class="timeline-author">Mezgani Said</span>
        </div>
        <div class="meta-date">
          <span class="date">18</span>
          <span class="month">APR</span>
        </div>
      </div>
      <!-- // Article -->
    </div>
    <div class="timeline-end">Fin</div>
  </section>
  <!-- // Vertical Timeline -->

</body>
</html>
body {
    background: #e6e6e6;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
  }
  
  /*===== Vertical Timeline =====*/
  #conference-timeline {
    position: relative;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
  }
  #conference-timeline .timeline-start,
  #conference-timeline .timeline-end {
    display: table;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    background: #00b0bd;
    padding: 15px 23px;
    color: #fff;
    max-width: 5%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  #conference-timeline .conference-center-line {
    position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -2px;
    background: #00b0bd;
    z-index: -1;
  }
  #conference-timeline .conference-timeline-content {
    padding-top: 67px;
    padding-bottom: 67px;
  }
  .timeline-article {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 20px 0;
  }
  .timeline-article .content-left-container,
  .timeline-article .content-right-container {
    max-width: 44%;
    width: 100%;
  }
  .timeline-article .timeline-author {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #242424;
    text-align: right;
  }
  .timeline-article .content-left,
  .timeline-article .content-right {
    position: relative;
    width: auto;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    padding: 27px 25px;
  }
  .timeline-article p {
    margin: 0 0 0 60px;
    padding: 0;
    font-weight: 400;
    color: #242424;
    font-size: 14px;
    line-height: 24px;
    position: relative;
  }
  .timeline-article p span.article-number {
    position: absolute;
    font-weight: 300;
    font-size: 44px;
    top: 10px;
    left: -60px;
    color: #00b0bd;
  }
  .timeline-article .content-left-container {
    float: left;
  }
  .timeline-article .content-right-container {
    float: right;
  }
  .timeline-article .content-left:before,
  .timeline-article .content-right:before{
    position: absolute;
    top: 20px;
    font-size: 23px;
    font-family: "FontAwesome";
    color: #fff;
  }
  .timeline-article .content-left:before {
    content: "\f0da";
    right: -8px;
  }
  .timeline-article .content-right:before {
    content: "\f0d9";
    left: -8px;
  }
  .timeline-article .meta-date {
    position: absolute;
    top: 0;
    left: 50%;
    width: 62px;
    height: 62px;
    margin-left: -31px;
    color: #fff;
    border-radius: 100%;
    background: #00b0bd;
  }
  .timeline-article .meta-date .date,
  .timeline-article .meta-date .month {
    display: block;
    text-align: center;
    font-weight: 900;
  }
  .timeline-article .meta-date .date {
    font-size: 30px;
    line-height: 40px;
  }
  .timeline-article .meta-date .month {
    font-size: 18px;
    line-height: 10px;
  }
  /*===== // Vertical Timeline =====*/
  
  /*===== Resonsive Vertical Timeline =====*/
  @media only screen and (max-width: 830px) {
    #conference-timeline .timeline-start,
    #conference-timeline .timeline-end {
      margin: 0;
    }
    #conference-timeline .conference-center-line {
      margin-left: 0;
      left: 50px;
    }
    .timeline-article .meta-date {
      margin-left: 0;
      left: 20px;
    }
    .timeline-article .content-left-container,
    .timeline-article .content-right-container {
      max-width: 100%;
      width: auto;
      float: none;
      margin-left: 110px;
      min-height: 53px;
    }
    .timeline-article .content-left-container {
      margin-bottom: 20px;
    }
    .timeline-article .content-left,
    .timeline-article .content-right {
      padding: 10px 25px;
      min-height: 65px;
    }
    .timeline-article .content-left:before {
      content: "\f0d9";
      right: auto;
      left: -8px;
    }
    .timeline-article .content-right:before {
      display: none;
    }
  }
  @media only screen and (max-width: 400px) {
    .timeline-article p {
      margin: 0;
    }
    .timeline-article p span.article-number {
      display: none;
    }
    
  }
  /*===== // Resonsive Vertical Timeline =====*/

                                    
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Bootstrap4 datepicker

Bootstrap4 datepicker

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é

Form login 03

Form login 03

Input range slider HTML style03

Input range slider HTML style03

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Pie Charts

Pie Charts

Table bootstrap with Datatable

Table bootstrap with Datatable

bootstrap4 tabs

bootstrap4 tabs

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

texte animate effects style 01

texte animate effects style 01

toggle switch style02

toggle switch style02