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

                                    

                                

                            

                        

                    

                

           

           

               

                    

                        






                    

               

           

           

               

                  

    
        

            

                
            

        

                    

                

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

                        

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

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Background div gradient
                        
                    
                    

                        

                             Background div gradient                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Card 4 Product Style01
                        
                    
                    

                        

                             Card 4 Product Style01                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Creation dune icone de prechargement avec css
                        
                    
                    

                        

                             Creation dune icone de prechargement avec css                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Form Création de compte
                        
                    
                    

                        

                             Form Création de compte                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Form login b4 01
                        
                    
                    

                        

                             Form login b4 01                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Image hover 02
                        
                    
                    

                        

                             Image hover 02                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Organization Chart
                        
                    
                    

                        

                             Organization Chart                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Radio button style
                        
                    
                    

                        

                             Radio button style                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Texte Block Posts Style01
                        
                    
                    

                        

                             Texte Block Posts Style01                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            Transitions Animations SVG Style01
                        
                    
                    

                        

                             Transitions Animations SVG Style01                        

                    

                    

                        
                            
                        
                    

                

            

                    

                

                    
                        
                            toggle switch style02
                        
                    
                    

                        

                             toggle switch style02