html5 css timeline horizontal

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	  <meta http-equiv="X-UA-Compatible" content="ie=edge">	  	
<title>timline html5 css timeline horizontal</title>
<meta name="Description" content="geovindu">
<meta name="Keywords" content="geovindu">
<meta name="author" content="geovindu">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">	
<link href="Bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
}

.status {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
}
.status h4 {
  font-weight: 600;
}
.status:before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  left: 42%;
  transition: all 200ms ease-in;
}

.li.complete .status {
  border-top: 2px solid #66DC71;
}
.li.complete .status:before {
  background-color: #66DC71;
  border: none;
  transition: all 200ms ease-in;
}
.li.complete .status h4 {
  color: #66DC71;
}

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }

  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }

  .timestamp {
    width: 100px;
  }

  .status:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  font-family: "Titillium Web", sans serif;
  color: #758D96;
}

button {
  position: absolute;
  width: 100px;
  min-width: 100px;
  padding: 20px;
  margin: 20px;
  font-family: "Titillium Web", sans serif;
  border: none;
  color: white;
  font-size: 16px;
  text-align: center;
}
	
.geovindu{
		width: 100%;
		position:relative;
	}

#toggleButton {
  position: absolute;
  left: 50px;
  top: 20px;
  background-color: #75C7F6;
}
</style>
	  <script src='js/jquery-3.6.0.min.js'></script>	
<script type="text/javascript">
$(document).ready(function () {
var completes = document.querySelectorAll(".complete");
var toggleButton = document.getElementById("toggleButton");


function toggleComplete(){
  var lastComplete = completes[completes.length - 1];
  lastComplete.classList.toggle('complete');
}

toggleButton.onclick = toggleComplete;	
	
});
</script> 
</head>

<body>
	<button id="toggleButton">Toggle</button>
	<br/>
	<div class="container">
  <div class="row">
<ul class="timeline" id="timeline">
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Abhi Sharma</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> Shift Created </h4>
    </div>
  </li>
  <li class="li complete">
    <div class="timestamp">
      <span class="author">PAM Admin</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> Email Sent </h4>
    </div>
  </li>
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Aaron Rodgers</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> SIC Approval </h4>
    </div>
  </li>
  <li class="li">
    <div class="timestamp">
      <span class="author">PAM Admin</span>
      <span class="date">TBD<span>
    </div>
    <div class="status">
      <h4> Shift Completed </h4>
    </div>
  </li>
	 <li class="li">
    <div class="timestamp">
      <span class="author">geovindu</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> 涂聚文 </h4>
    </div>
  </li>	
	<li class="li">
    <div class="timestamp">
      <span class="author">geovindu，涂聚文</span>
      <span class="date">2/24/2015<span>
    </div>
    <div class="status">
      <h4>Geovin Du,geovindu,涂聚文  </h4>
    </div>
  </li>		
 </ul> 
</div>	  
 <br/>
  <div class="row">
<ul class="timeline" id="timeline">
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Abhi Sharma</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> Shift Created </h4>
    </div>
  </li>
  <li class="li complete">
    <div class="timestamp">
      <span class="author">PAM Admin</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> Email Sent </h4>
    </div>
  </li>
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Aaron Rodgers</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> SIC Approval </h4>
    </div>
  </li>
  <li class="li">
    <div class="timestamp">
      <span class="author">PAM Admin</span>
      <span class="date">TBD<span>
    </div>
    <div class="status">
      <h4> Shift Completed </h4>
    </div>
	</li>
		 <li class="li">
    <div class="timestamp">
      <span class="author">geovindu，涂聚文</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4>Geovin Du  </h4>
    </div>
  </li>	
<li class="li">
    <div class="timestamp">
      <span class="author">geovindu，涂聚文</span>
      <span class="date">2/24/2015<span>
    </div>
    <div class="status">
      <h4>Geovin Du,geovindu,涂聚文  </h4>
    </div>
  </li>			
 </ul>   	  
	  </div>	
	  
	  </div>
</body>
</html>

　　

 

 

posted @ 2022-11-15 16:46  ®Geovin Du Dream Park™  阅读(66)  评论(0)    收藏  举报