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 =====*/

                                    

                                

                            

                        

                    

                

           

           

               

                    

                        






                    

               

           

           

               

                  

    
        

            

                
            

        

                    

                

                    
                        
                            texte animate css
                        
                    
                    

                        

                             texte animate css                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Timeline style08
                        
                    
                    

                        

                             Timeline style08                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Scroll to div ID
                        
                    
                    

                        

                             Scroll to div ID                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Loading style book loader
                        
                    
                    

                        

                             Loading style book loader                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Input file style01
                        
                    
                    

                        

                             Input file style01                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Form login 03
                        
                    
                    

                        

                             Form login 03                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Convertir une div en image
                        
                    
                    

                        

                             Convertir une div en image                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Card Panel Bootstrap4 with header and footer
                        
                    
                    

                        

                             Card Panel Bootstrap4 with header and footer                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Card Bootstrap4 02
                        
                    
                    

                        

                             Card Bootstrap4 02                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Asidebar Bootstrap4 style02
                        
                    
                    

                        

                             Asidebar Bootstrap4 style02                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Ajouter supprimer une tr dans une table
                        
                    
                    

                        

                             Ajouter supprimer une tr dans une table                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

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

                        

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