1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. 	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  6. 	  <meta http-equiv="X-UA-Compatible" content="ie=edge">	  	
  7. <title>timline html5 css timeline horizontal</title>
  8. <meta name="Description" content="geovindu">
  9. <meta name="Keywords" content="geovindu">
  10. <meta name="author" content="geovindu">
  11. <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
  12. <link href="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">	
  13. <link href="Bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
  14. <style type="text/css">
  15. .timeline {
  16.   list-style-type: none;
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: center;
  20. }
  21.  
  22. .li {
  23.   transition: all 200ms ease-in;
  24. }
  25.  
  26. .timestamp {
  27.   margin-bottom: 20px;
  28.   padding: 0px 40px;
  29.   display: flex;
  30.   flex-direction: column;
  31.   align-items: center;
  32.   font-weight: 100;
  33. }
  34.  
  35. .status {
  36.   padding: 0px 40px;
  37.   display: flex;
  38.   justify-content: center;
  39.   border-top: 2px solid #D6DCE0;
  40.   position: relative;
  41.   transition: all 200ms ease-in;
  42. }
  43. .status h4 {
  44.   font-weight: 600;
  45. }
  46. .status:before {
  47.   content: "";
  48.   width: 25px;
  49.   height: 25px;
  50.   background-color: white;
  51.   border-radius: 25px;
  52.   border: 1px solid #ddd;
  53.   position: absolute;
  54.   top: -15px;
  55.   left: 42%;
  56.   transition: all 200ms ease-in;
  57. }
  58.  
  59. .li.complete .status {
  60.   border-top: 2px solid #66DC71;
  61. }
  62. .li.complete .status:before {
  63.   background-color: #66DC71;
  64.   border: none;
  65.   transition: all 200ms ease-in;
  66. }
  67. .li.complete .status h4 {
  68.   color: #66DC71;
  69. }
  70.  
  71. @media (min-device-width: 320px) and (max-device-width: 700px) {
  72.   .timeline {
  73.     list-style-type: none;
  74.     display: block;
  75.   }
  76.  
  77.   .li {
  78.     transition: all 200ms ease-in;
  79.     display: flex;
  80.     width: inherit;
  81.   }
  82.  
  83.   .timestamp {
  84.     width: 100px;
  85.   }
  86.  
  87.   .status:before {
  88.     left: -8%;
  89.     top: 30%;
  90.     transition: all 200ms ease-in;
  91.   }
  92. }
  93. html, body {
  94.   width: 100%;
  95.   height: 100%;
  96.   display: flex;
  97.   justify-content: center;
  98.   font-family: "Titillium Web", sans serif;
  99.   color: #758D96;
  100. }
  101.  
  102. button {
  103.   position: absolute;
  104.   width: 100px;
  105.   min-width: 100px;
  106.   padding: 20px;
  107.   margin: 20px;
  108.   font-family: "Titillium Web", sans serif;
  109.   border: none;
  110.   color: white;
  111.   font-size: 16px;
  112.   text-align: center;
  113. }
  114. 	
  115. .geovindu{
  116. 		width: 100%;
  117. 		position:relative;
  118. 	}
  119.  
  120. #toggleButton {
  121.   position: absolute;
  122.   left: 50px;
  123.   top: 20px;
  124.   background-color: #75C7F6;
  125. }
  126. </style>
  127. 	  <script src='js/jquery-3.6.0.min.js'></script>	
  128. <script type="text/javascript">
  129. $(document).ready(function () {
  130. var completes = document.querySelectorAll(".complete");
  131. var toggleButton = document.getElementById("toggleButton");
  132.  
  133.  
  134. function toggleComplete(){
  135.   var lastComplete = completes[completes.length - 1];
  136.   lastComplete.classList.toggle('complete');
  137. }
  138.  
  139. toggleButton.onclick = toggleComplete;	
  140. 	
  141. });
  142. </script> 
  143. </head>
  144.  
  145. <body>
  146. 	<button id="toggleButton">Toggle</button>
  147. 	<br/>
  148. 	<div class="container">
  149.   <div class="row">
  150. <ul class="timeline" id="timeline">
  151.   <li class="li complete">
  152.     <div class="timestamp">
  153.       <span class="author">Abhi Sharma</span>
  154.       <span class="date">11/15/2014<span>
  155.     </div>
  156.     <div class="status">
  157.       <h4> Shift Created </h4>
  158.     </div>
  159.   </li>
  160.   <li class="li complete">
  161.     <div class="timestamp">
  162.       <span class="author">PAM Admin</span>
  163.       <span class="date">11/15/2014<span>
  164.     </div>
  165.     <div class="status">
  166.       <h4> Email Sent </h4>
  167.     </div>
  168.   </li>
  169.   <li class="li complete">
  170.     <div class="timestamp">
  171.       <span class="author">Aaron Rodgers</span>
  172.       <span class="date">11/15/2014<span>
  173.     </div>
  174.     <div class="status">
  175.       <h4> SIC Approval </h4>
  176.     </div>
  177.   </li>
  178.   <li class="li">
  179.     <div class="timestamp">
  180.       <span class="author">PAM Admin</span>
  181.       <span class="date">TBD<span>
  182.     </div>
  183.     <div class="status">
  184.       <h4> Shift Completed </h4>
  185.     </div>
  186.   </li>
  187. 	 <li class="li">
  188.     <div class="timestamp">
  189.       <span class="author">geovindu</span>
  190.       <span class="date">11/15/2014<span>
  191.     </div>
  192.     <div class="status">
  193.       <h4> 涂聚文 </h4>
  194.     </div>
  195.   </li>	
  196. 	<li class="li">
  197.     <div class="timestamp">
  198.       <span class="author">geovindu，涂聚文</span>
  199.       <span class="date">2/24/2015<span>
  200.     </div>
  201.     <div class="status">
  202.       <h4>Geovin Du,geovindu,涂聚文  </h4>
  203.     </div>
  204.   </li>		
  205.  </ul> 
  206. </div>	  
  207.  <br/>
  208.   <div class="row">
  209. <ul class="timeline" id="timeline">
  210.   <li class="li complete">
  211.     <div class="timestamp">
  212.       <span class="author">Abhi Sharma</span>
  213.       <span class="date">11/15/2014<span>
  214.     </div>
  215.     <div class="status">
  216.       <h4> Shift Created </h4>
  217.     </div>
  218.   </li>
  219.   <li class="li complete">
  220.     <div class="timestamp">
  221.       <span class="author">PAM Admin</span>
  222.       <span class="date">11/15/2014<span>
  223.     </div>
  224.     <div class="status">
  225.       <h4> Email Sent </h4>
  226.     </div>
  227.   </li>
  228.   <li class="li complete">
  229.     <div class="timestamp">
  230.       <span class="author">Aaron Rodgers</span>
  231.       <span class="date">11/15/2014<span>
  232.     </div>
  233.     <div class="status">
  234.       <h4> SIC Approval </h4>
  235.     </div>
  236.   </li>
  237.   <li class="li">
  238.     <div class="timestamp">
  239.       <span class="author">PAM Admin</span>
  240.       <span class="date">TBD<span>
  241.     </div>
  242.     <div class="status">
  243.       <h4> Shift Completed </h4>
  244.     </div>
  245. 	</li>
  246. 		 <li class="li">
  247.     <div class="timestamp">
  248.       <span class="author">geovindu，涂聚文</span>
  249.       <span class="date">11/15/2014<span>
  250.     </div>
  251.     <div class="status">
  252.       <h4>Geovin Du  </h4>
  253.     </div>
  254.   </li>	
  255. <li class="li">
  256.     <div class="timestamp">
  257.       <span class="author">geovindu，涂聚文</span>
  258.       <span class="date">2/24/2015<span>
  259.     </div>
  260.     <div class="status">
  261.       <h4>Geovin Du,geovindu,涂聚文  </h4>
  262.     </div>
  263.   </li>			
  264.  </ul>   	  
  265. 	  </div>	
  266. 	  
  267. 	  </div>
  268. </body>
  269. </html>