HTML5 + CSS3 implements a responsive vertical timeline, html5css3

HTML5 + CSS3 implements a responsive vertical timeline, html5css3

The webpage timeline is generally used to show events that take time as the main line, such as the company's common development history of Enterprise websites. This article will introduce you to a beautiful vertical timeline Based on HTML5 and CSS3, which can respond to page layout and is suitable for PC and mobile phone WEB applications developed by html5.

HTML

We use the HTML5 tag <section>. All content in the timeline includes the title, Introduction, time, and image. in the DIV of cd-timeline-block, multiple divs form a sequence and place these divs in <section>. Note that you need your browser to support HTML5 and css3.

<Section id = "cd-timeline" class = "cd-container"> <div class = "cd-timeline-block"> <div class = "cd-timeline-img cd -picture ">  </div> <div class =" cd-timeline-content "> 
In this example, svg images are used as icons. You can also convert them to png and gif images.
CSS
We use the before pseudo class to create a vertical line before the timeline # cd-timeline. The content of each node in the timeline is based on this vertical line.
#cd-timeline {  position: relative;  padding: 2em 0;  margin-top: 2em;  margin-bottom: 2em;}#cd-timeline::before {  content: '';  position: absolute;  top: 0;  left: 18px;  height: 100%;  width: 4px;  background: #d7e4ed;}
Okay. Next we need to adjust the timeline layout based on the size of the browser window. When the browser window is very large, the content of each node in the timeline is distributed on both sides of the vertical line (center vertical line). When the browser window is small enough, such as a mobile phone or an iPad vertical screen, the content of each node in the timeline is arranged on the right side of the vertical line (vertical line to the left), which is commonly known as a responsive layout.
.cd-timeline-block {  position: relative;  margin: 2em 0;}.cd-timeline-block:after {  content: "";  display: table;  clear: both;}.cd-timeline-block:first-child {  margin-top: 0;}.cd-timeline-block:last-child {  margin-bottom: 0;}@media only screen and (min-width: 1170px) {  .cd-timeline-block:nth-child(even) .cd-timeline-content {    float: right;  }  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {    top: 24px;    left: auto;    right: 100%;    border-color: transparent;    border-right-color: white;  }  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {    float: right;  }  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {    left: auto;    right: 122%;    text-align: right;  }}
In CSS3, @ media can be used to determine the screen size of a device and perform different css styles based on different sizes. In the hosts file. Of course, you can also use JS and CSS3 on the basis of this example to add some transition animations to the timeline, and the effect may be better.