Without any css framework we create timeline page design. but this timeline page design also responsive. in this timeline design you can see day title and title of event and description. this is best timeline page design using only css and html. you can use this design in company timeline and college event timeline and also you can set your day timeline.

We allows to free snippets of pure css timeline , you can download full code of vertical timeline creator layout. Here in this post i will give you example of html timeline code snippet and you will get simple code of html, css and jquery. In vertical timeline css snippet i give you three tab with html, css and js, you can easily get code of vertical timeline template layout.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="timeline"> <div class="timeline-left"> <img src="/demo/man01.png"> <div class="header-content"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> Today</h2> </div> <div class="content"> <h3>John Addison</h3> <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> </div> </div> <div class="timeline-right"> <img src="/demo/man02.png"> <div class="header-content"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> Yesterday</h2> </div> <div class="content"> <h3>John Addison</h3> <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> </div> </div> <div class="timeline-left"> <img src="/demo/man03.png"> <div class="header-content"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> July 14,2017</h2> </div> <div class="content"> <h3>John Addison</h3> <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> </div> </div> <div class="timeline-right"> <img src="/demo/man04.png"> <div class="header-content"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> Jun 14,2017</h2> </div> <div class="content"> <h3>John Addison</h3> <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> </div> </div> </div> </body> </html>
* { box-sizing: border-box; } body { background-color: #f1f1f1; font-family: Helvetica, sans-serif; } h2, h3{ margin: 0px; font-weight: normal; } .timeline { position: relative; max-width: 1200px; margin: 0 auto; } .timeline-left .header-content:after{ content: " "; position:absolute; left:0px; top:40px; border-color:transparent; border-style: solid; border-width:0px 20px 20px 0px; border-right-color:#E7DB21; } .timeline-right .header-content:after{ content: " "; position:absolute; right:0px; top:40px; border-color:transparent; border-style: solid; border-width:0px 0px 20px 20px; border-left-color:#E56F57; } .timeline-left .header-content:before{ content: " "; position:absolute; top:0px; right:-40px; border:20px solid transparent; border-left-color:#FEC006; } .timeline-right .header-content:before{ content: " "; position:absolute; top:0px; left:-40px; border:20px solid transparent; border-right-color:#FF7058; } .timeline-left .header-content, .timeline-right .header-content{ text-align: center; color:#fff; width:97%; padding: 5px; height: 40px; background-color: #FEC006; position: relative; } .timeline-right .header-content{ background-color: #FF7058; margin-left:18px; } .timeline::after { content: ''; position: absolute; width: 6px; background-color: white; top:17px; bottom: 0; left: 50%; margin-left: -3px; } .timeline-right, .timeline-left { padding: 10px 40px; position: relative; width: 50%; } .timeline-left img,.timeline-right img{ position: absolute; width:50px; height: 50px; border-radius: 50%; border:5px solid #fff; right:-25px; top:7px; z-index:1; } .timeline-right img{ left:-25px; } .timeline-right { left: 50%; } .timeline-left .content,.timeline-right .content{ padding:20px; background-color:#FFF; position: relative; width: 90%; margin:0px 0px 0px 20px; } .timeline-right .content{ left:15px; text-align:right; } @media (min-width:320px) and (max-width:360px) { .timeline-left img,.timeline-right img{ left:5px; } .timeline::after { left:30px; } .timeline{ width: 100%; padding-left: 0px; padding-right: 0px; } .timeline-left{ width: 100%; } .timeline-right{ width: 100%; left: 0px; } .timeline-left .header-content, .timeline-right .header-content{ margin-left:40px; width: 100%; } .timeline-right .content, .timeline-left .content{ width:80% !important; margin-left:52px !important; left: 15px; text-align: left; } .timeline-left .header-content:before{ right: unset; left:-40px; border:20px solid transparent; border-right-color:#FEC006; } .timeline-right .header-content:after{ border-width:0px 0px 30px 26px; } .timeline-left .header-content:after{ content: " "; position:absolute; left: unset; right:0px; top:40px; border-color:transparent; border-style: solid; border-width:0px 0px 30px 26px; border-left-color:#E7DB21; } } @media (min-width:640px) and (max-width:768px) { .timeline-right .content{ margin:0px 0 0 4px; } }




Random Post




Related Post

Sample bootstrap code of timeline design using html and css

Sample bootstrap code of timeline design using html and css

Responsive timeline page desing using bootstrap and css. you can easly implementation in you project. you can get code of vertical timeline design snippet. w...

Read More
Horizontal Timeline design using html,css and bootstrap

Horizontal Timeline design using html,css and bootstrap

Horizontal timeline page desing using custom html,css and bootstrap. in timeline you can display date and message or description. you can get timeline free code...

Read More
Best timeline page design using html,css and bootstrap

Best timeline page design using html,css and bootstrap

Good looking timeline page design. new timeline page design usign html and css. nicesnippets provide free timeline page design. you can get code of bootstrap...

Read More