We are giving you pure html,css timeline design example. this is a vertical timeline design using html and css. how to create timeline design using html and css ? then we are help you. it's a timeline best design. timeline design with pure css.

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


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="custom.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="timeline"> <div class="timeline-left"> <div class="timeline-date-lable"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> 2013-1014</h2> </div> <div class="image-content-section"> <div class="timeline-image-icon"> <img src="//nicesnippets.com/demo/man.png"> </div> <div class="timeline-content"> <h3>Web Designer</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="timeline-dotted"> <i class="fa fa-circle" aria-hidden="true"></i> </div> </div> <div class="timeline-right"> <div class="timeline-date-lable"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> 2015-1015</h2> </div> <div class="image-content-section"> <div class="timeline-image-icon"> <img src="//nicesnippets.com/demo/man04.png"> </div> <div class="timeline-content"> <h3>Web Designer</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="timeline-dotted"> <i class="fa fa-circle" aria-hidden="true"></i> </div> </div> <div class="timeline-left"> <div class="timeline-date-lable"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> 2015-1016</h2> </div> <div class="image-content-section"> <div class="timeline-image-icon"> <img src="//nicesnippets.com/demo/man02.png"> </div> <div class="timeline-content"> <h3>Web Designer</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="timeline-dotted"> <i class="fa fa-circle" aria-hidden="true"></i> </div> </div> <div class="timeline-right"> <div class="timeline-date-lable"> <h2><i class="fa fa-calendar" aria-hidden="true"></i> 2016-1017</h2> </div> <div class="image-content-section"> <div class="timeline-image-icon"> <img src="//nicesnippets.com/demo/man03.png"> </div> <div class="timeline-content"> <h3>Web Designer</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="timeline-dotted"> <i class="fa fa-circle" aria-hidden="true"></i> </div> </div> </div> </body> </html>
*{ box-sizing: border-box; } body { background-color: #f1f1f1; font-family: Helvetica, sans-serif; margin: 0px; padding: 30px; } h2, h3{ margin: 0px; } .timeline-left,.timeline-right{ position: relative; width:35%; left:15%; border:1px solid transparent; border-right: 3px solid #FFD05B; } .timeline-right{ border-right: 0px; border-left: 3px solid #FFD05B; margin-left: -3px; } .timeline-left .timeline-date-lable,.timeline-right .timeline-date-lable{ background-color:#FFD05B; padding:6px 30px; width: 50%; border-radius: 5px 0px 0px 5px; color:#fff; float:right; } .timeline-right .timeline-date-lable{ float:left; border-radius: 0px 5px 5px 0px; } .timeline-left .image-content-section,.timeline-right .image-content-section{ border-top:4px solid #FFD05B; margin-top:70px; } .timeline-left .timeline-image-icon,.timeline-right .timeline-image-icon{ margin-top:15px; float:left; position: relative; } .timeline-right .timeline-image-icon{ float:right; } .timeline-image-icon img{ width:100px; height:100px; border:3px solid #FFD05B; border-radius: 50%; } .timeline-right{ left:50%; } .timeline-left .timeline-image-icon:before, .timeline-right .timeline-image-icon:before{ content: " "; position:absolute; top:-17px; left:30px; border:16px solid transparent; border-top-color:#FFD05B; } .timeline-right .timeline-image-icon:before{ left: unset; right:30px; } .timeline-content,.timeline-right .timeline-content{ border-radius: 5px; width:60%; margin:12px 0px 0px 136px; color: #929dab; } .timeline-right .timeline-content{ margin:12px 0px 0px 30px; } .timeline-content h3{ text-align: center; color:#324A5E; } .timeline-dotted i{ position: absolute; top:57px; font-size:30px; color:#324A5E; height:29px; width:29px; line-height:25px; border-radius:50%; border:2px solid #FFD05B; right:-13px; z-index: 1; } .timeline-right .timeline-dotted i{ left:-15px; position: absolute; } @media (min-width:320px) and (max-width:640px){ .timeline-left, .timeline-right{ width: 100%; left: 0%; } .timeline-left .timeline-date-lable, .timeline-right .timeline-date-lable{ width: 100%; } .timeline-content{ margin: 12px 0px 0px 115px; } .timeline-right .timeline-content{ margin: 12px 0px 0px 30px; } } @media (min-width:768px) and (max-width:1024px){ .timeline-left{ width: 50%; left: 0%; } .timeline-right{ width: 50%; } .timeline-left .timeline-date-lable, .timeline-right .timeline-date-lable{ width: auto; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog