How to Create Clean Vertical Timeline Design in HTML & CSS?

Timeline designs are used for telling stories and explaining the process. Specifically, these are used for giving details of event, agenda, or to highlight important points.

In this lesson, you will learn to create a timeline. Starting with the HTML layout, sections are created to hold the different elements. The container class encapsulates all other elements. Then, separate sections are created for timeline-item, timeline-image, title, date, and description.

<div id="intern_projects" class="timeline intern-projects">
    <div class="centered timeline-items">
        <div class="timeline-item">
            <div class="timeline-item-thumbnail"><img class="timeline-item-image" src="http://fhts.ac.in/wp-content/uploads/2017/06/k1-150x150.png"></div>
            <div class="timeline-item-content">
                <div class="timeline-item-title">Enviornment day</div>
                <div class="timeline-item-date">05/06/2017</div>
                <div class="timeline-item-description"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-thumbnail"><img class="timeline-item-image" src="http://fhts.ac.in/wp-content/uploads/2017/06/k2-150x150.png"></div>
            <div class="timeline-item-content">
                <div class="timeline-item-title">Diet grant</div>
                <div class="timeline-item-date">13/06/2017</div>
                <div class="timeline-item-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-thumbnail"><img class="timeline-item-image" src="http://fhts.ac.in/wp-content/uploads/2017/06/IMG_9635.jpg"></div>
            <div class="timeline-item-content">
                <div class="timeline-item-title">Swasthya Pahal</div>
                <div class="timeline-item-date">23/06/2017</div>
                <div class="timeline-item-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-content">
                <div class="timeline-item-title">Bowel Disease</div>
                <div class="timeline-item-date">27/06/2017</div>
                <div class="timeline-item-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
            </div>
        </div>
    </div>
</div>

CSS Structure

Let us add CSS structure to provide styling to the layout. The timeline-item class can be considered as a single row that includes text on one hand and date on the opposite section. The area is given position relative, so as to place other elements relative to its position. Next, timeline-items: before class is used to create a circular shape design of border color F44336. Further, timeline-items: after creates a dashed line in the middle of the boxes. Using nth-child selector the text items are designed in the adjacent sides and this also reduces the usage of the CSS, as the same CSS can be applied to all the sections of one type (odd or even).

#intern_projects {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    text-align:justify;
}
	.timeline-items{
		position: relative;
		margin:20px 0;
	}
	.timeline-items:before{
		content: "";
		display: block;
		position: absolute;
		left: 50%;
		width: 16px;
		height: 16px;
		background-color: #ffffff;
		margin: -20px 0 0 -10px;
		border: 2px solid #F44336;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.timeline-items:after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width:0;
		margin:0 0 0 -1px;
		border-right: 2px dashed #F44336;
	}
	.timeline-items .timeline-item{
		width: 48%;
		margin: 0 0 10px 52%;
		padding: 10px;
		position: relative;
		background: #FFFFFF;
		border: 1px solid #e8e8e8;
	}
	.timeline-items .timeline-item:nth-child(odd){
		margin: 0 0 10px 0;
	}
	.timeline-items .timeline-item:before{
		content: "";
	}
	.timeline-items .timeline-item:after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 15px;
		height: 15px;
		margin: -11px 0 0 -9px;
		background-color: #FFFFFF;
		border-top: 1px solid #e8e8e8;
		border-right: 1px solid #e8e8e8;
		-moz-transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	.timeline-items .timeline-item:nth-child(odd):before{
	}
	.timeline-items .timeline-item:nth-child(odd):after{
		right: 0;
		left: initial;
		margin: -11px -9px 0 0;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.timeline-items .timeline-item .timeline-item-thumbnail{
		float: left;
		width: 150px;
		height: 150px;
		overflow: hidden;
		margin-right: 20px;
	}
	.timeline-items .timeline-item:nth-child(odd) .timeline-item-thumbnail{
	}
	.timeline-items .timeline-item .timeline-item-content{
	}
	.timeline-items .timeline-item .timeline-item-content .timeline-item-title{
		color: #f44336;
		font-size: 18px;
	}
	.timeline-items .timeline-item .timeline-item-content .timeline-item-date{
		position: absolute;
		font-size: 18px;
		line-height: 30px;
		color: #ffffff;
		width: 40%;
		top: 50%;
		left: -50%;
		margin: -18px 0 0 0;
		text-align: center;
		background-color: #f44336;
	}
	.timeline-items .timeline-item:nth-child(odd) .timeline-item-content .timeline-item-date{
		right: -50%;
		left: initial;
	}
	.timeline-items .timeline-item .timeline-item-content .timeline-item-date:after{
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		right: -15px;
		margin: -30px 0 0 0;
		border-top: 15px solid transparent;
		border-left: 15px solid #f44336;
		border-bottom: 15px solid transparent;
	}
	.timeline-items .timeline-item:nth-child(odd) .timeline-item-content .timeline-item-date:after{
		right: initial;
		left: -15px;
		border-right: 15px solid #f44336;
		border-left: none;
	}
	.timeline-items .timeline-item .timeline-item-content .timeline-item-description{
	}
	#intern_info h3 {
		margin:0;
	}
	.social-link-div {
		margin-top: 3%;
	    border: 1px solid;
	    padding: 10px;
	    text-align: center;
	}
	.social-link-div .intern-social-link {
		    color: #ffffff;
		    height: 36px;
		    width: 36px;
		    margin:0 5px;
		    font-size: 22px;
		    line-height: 36px;
		    text-align: center;
		    display: inline-block;
		    background-color: #666666;
		    -webkit-transition: all 0.2s ease-in-out;
		    -moz-transition: all 0.2s ease-in-out;
		    -o-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
		}
		.social-link-div .intern-social-link:nth-child(1) {
		    background-color: #3b5998;
		}
		.social-link-div .intern-social-link:nth-child(2) {
		    background-color: #1da1f2;
		}
		.header-banner .social-icon:nth-child(3) {
		    background-color: #0077b5;
		}

Use the design to display chronological events in a neat and accurate style.

Environment day

05/06/2017

Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Diet grant

13/06/2017

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Swasthya Pahal

23/06/2017

Bowel Disease

27/06/2017

Vertical Timeline Design

Leave a Reply Cancel reply