Home Web Design CSS HTML CSS Timeline Design | Vertical Timeline Example

HTML CSS Timeline Design | Vertical Timeline Example

May 15, 2019

19425

How we can create or design a timeline in HTML CSS? Solution: HTML CSS Timeline Design – Vertical Timeline Example

You must have seen a timeline on some websites. Basically, those timelines are using for showing events or about of any company. There are two types of timeline design vertical and horizontal. Timeline is very good for own intro website or showing about your brand. In other words, the timeline shows your information to the user in a proper and attractive way.

Yesterday I saw a guy in a group asking for how to create a timeline, So today I am sharing this HTML CSS Timeline Design Program. This is completely in pure HTML & CSS, & also a perfect vertical timeline example. This is a stylish timeline design you can use it anywhere, also a plus point in this program is its have icons. So, You can add or change icons as you want.

This timeline has 3 different sections, you can add more by simply copy and paste the codes of one section. If you recreate this program by your own, then it will boost your HTML CSS skills. If you are a beginner you can also understand this program easily. Because we share always easy program for everyone can understand.

If you don’t understand what is HTML CSS timeline or what program’s I am talking about, Here a preview for you. After seeing the preview you can understand what is the whole concept or what this program actually is. See the preview given below.

Preview Of Vertical Timeline Example

See this video preview, after seeing you will definitely understand what is timeline & how this program looks like.

Now you can see how this program is visual. If you like this, get the source code of this program.

HTML CSS Timeline Design Source Code

As always before sharing source code, let’s talk little bit about this program. I had created this program in Pure HTML CSS, you can call this pure CSS vertical timeline. I also used a google font to create this program more attractive. The whole concept is based on CSS position and display (get info)property. I used 3 PNG icons which I had uploaded on this site and gave a link there. You can also use font-awesome for icons.

For creating this program you have to create only two files. One for HTML, & one for CSS. Follow the steps for creating this program without any error.

index.html

Create an HTML file named ‘index.html’ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML CSS Timeline | Webdevtrick.com</title>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
  <h1 class="main-title">HTML CSS Timeline</h1>
			<ul class="timeline">	
				<li class="timeline-blocks">
					<figure class="timeline-icon">
						<img src="https://webdevtrick.com/wp-content/uploads/computer.png" alt="timeline" />
					</figure>
					<div class="dir-r radius-3">
							<h1>Web Dev Trick</h1>
							<p> Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. We highly believe that top quality is much better than quantity. We share resources regarding design & development, graphics, WordPress as well as Coding. We share HTML5, CSS3,  Bootstrap, JavaScript, PHP and many more web language’s  Examples, Tutorials & Source Code as well as Graphic Desing and SEO’s stuff.</p>
					</div>
					<div class="date-l">25/02/2019 – Present</div>
				</li>
			  
				<li class="timeline-blocks">
					<figure class="timeline-icon">
						<img src="https://webdevtrick.com/wp-content/uploads/work.png" alt="timeline" />
					</figure>
					<div class="dir-l radius-3">
							<h1>This Blog's Speciality</h1>
							<p> We share HTML, CSS, JavaScript, Bootstrap, PHP programs. We always share simple or basic program because everyone can understand. Also a beginner will learn how to code after seeing these simple program. Web Dev Trick is a digital playground for individuals who want to learn. Our study will keep you on top of the most recent trends with some of the most effective and interesting content.</p>
					</div>
					<div class="date-r">25/02/2019 – 15/05/2019</div>
				</li>

				<li class="timeline-blocks">
					<figure class="timeline-icon">
						<img src="https://webdevtrick.com/wp-content/uploads/email.png" alt="course" />
					</figure>
					<div class="dir-r radius-3">
							<h1> Contact </h1>
							<p> You can contact us by visiting our contact page. There I have given a contact form you can email me. Also Webdevtrick is on many social media like facebook, twitter, pinterest, etc you can simply search webdevtrick on social media, then you can find us.</p>
					</div>
					<div class="date-l">Present – Lifetime</div>
				</li>
			</ul>
</div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML CSS Timeline | Webdevtrick.com</title>

</head>

<body>

<h1 class="main-title">HTML CSS Timeline</h1>

</figure>

<h1>Web Dev Trick</h1>

<p> Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. We highly believe that top quality is much better than quantity. We share resources regarding design & development, graphics, WordPress as well as Coding. We share HTML5, CSS3, Bootstrap, JavaScript, PHP and many more web language’s Examples, Tutorials & Source Code as well as Graphic Desing and SEO’s stuff.</p>

</div>

<div class="date-l">25/02/2019 – Present</div>

</li>

</figure>

<h1>This Blog's Speciality</h1>

<p> We share HTML, CSS, JavaScript, Bootstrap, PHP programs. We always share simple or basic program because everyone can understand. Also a beginner will learn how to code after seeing these simple program. Web Dev Trick is a digital playground for individuals who want to learn. Our study will keep you on top of the most recent trends with some of the most effective and interesting content.</p>

</div>

</li>

</figure>

<h1> Contact </h1>

<p> You can contact us by visiting our contact page. There I have given a contact form you can email me. Also Webdevtrick is on many social media like facebook, twitter, pinterest, etc you can simply search webdevtrick on social media, then you can find us.</p>

</div>

<div class="date-l">Present – Lifetime</div>

</li>

</ul>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* code by webdevtrick ( https://webdevtrick.com ) */

.container{ 
  background-color: whitesmoke; 
  color: #7f8c97;
  max-width: 1224px;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 2em;
	position: relative;
}

.main-title{
	color: #4e4e4e;
	font-weight: 600;
	font-size: 4em;
	margin-bottom: .3em;
  font-family: "Dosis";
}

 .timeline {
	  position: relative;
	  width: auto;
	  margin: 0 auto;
	  margin-top: 5em;
   padding-bottom: 2em;
   padding-left: 0;
	}

	.timeline:before {
	  position: absolute;
	  left: 50%;
	  top: 0;
	  content: ' ';
	  display: block;
	  width: 4px;
	  height: 100%;
	  margin-left: -3px;
	  background: #d7e4ed;
	  z-index: 5;
	}


	.dir-l, .dir-r{ 
		position: relative; 
		width: 40%; 
		padding: 1.5em 1em; 
		background: #fff; 
		box-shadow: 0 3px 0 #d7e4ed; 
		margin-top: 0; 
		margin-bottom: 1.5em;
	}

.timeline h1{
	font-size: 1.6em;
  color: #4B878D;
	width: 90%;
  margin-top: 0;
  font-family: "Dosis";
}

.timeline p{ 
  letter-spacing: .5px;
  font-size: 1.1em;
  line-height: 1.5em;
  margin: .5em;
  margin-top: 1.5em;
  font-family: "Dosis";
}

.timeline img{
	border-radius: 50%;
}

.timeline-icon{
	position: absolute;
	top: 1em;
	width: 2.5em;
	height: 2.5em;
	right: 0;
	border-radius: 50%;
	z-index: 10;
}

.timeline a{
	color: #38666a;
	margin-left: .3em;
} 

	.dir-l{ float: left; }

	.dir-l:before{
		content: "";
	  display: inline-block;
	  vertical-align: middle;
	  width: 0; 
	  height: 0; 
	  position: absolute;
	  right: -.95em;
	  top: 1em;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent; 
		border-left: 15px solid #fff; 
	}

	.dir-r{ float: right; }

	.dir-r:before{
		content: "";
	  display: inline-block;
	  vertical-align: middle;
	  width: 0; 
	  height: 0; 
	  position: absolute;
	  left: -.9em;
	  top: 1em;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent; 
		border-right: 15px solid #fff; 
	}

	.timeline-icon{
		position: absolute;
		top: -.2em;
		width: 60px;
		height: 60px;
		left: 50%;
		margin-left: -30px;
		box-shadow:  0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0.15);
	}

	.timeline-blocks{
		display: block;
		height: auto;
		padding: 1em 0;
		position: relative;
		overflow: hidden;
	}

	.timeline img{
		border-radius: 50%;
    width: 100%;
	}

	.timeline a{
		color: #38666a;
		margin-left: .3em;
	} 

	.timeline-blocks .date-l, .timeline-blocks .date-r{
		position: absolute;
		top: 2em;
		right: 58%;
		font-size: 1em;
	}

	.timeline-blocks .date-r{ left: 54%; right: auto;}

	.timeline-blocks a:hover{ color: #4B878D; }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

/* code by webdevtrick ( https://webdevtrick.com ) */

.container{

background-color: whitesmoke;

color: #7f8c97;

max-width: 1224px;

height: 100%;

text-align: center;

margin: 0 auto;

padding: 2em;

position: relative;

}

.main-title{

color: #4e4e4e;

font-weight: 600;

font-size: 4em;

margin-bottom: .3em;

font-family: "Dosis";

}

.timeline {

position: relative;

width: auto;

margin: 0 auto;

margin-top: 5em;

padding-bottom: 2em;

padding-left: 0;

}

.timeline:before {

position: absolute;

left: 50%;

top: 0;

content: ' ';

display: block;

width: 4px;

height: 100%;

margin-left: -3px;

background: #d7e4ed;

z-index: 5;

}

.dir-l, .dir-r{

position: relative;

width: 40%;

padding: 1.5em 1em;

background: #fff;

box-shadow: 0 3px 0 #d7e4ed;

margin-top: 0;

margin-bottom: 1.5em;

}

.timeline h1{

font-size: 1.6em;

color: #4B878D;

width: 90%;

margin-top: 0;

font-family: "Dosis";

}

.timeline p{

letter-spacing: .5px;

font-size: 1.1em;

line-height: 1.5em;

margin: .5em;

margin-top: 1.5em;

font-family: "Dosis";

}

.timeline img{

border-radius: 50%;

}

.timeline-icon{

position: absolute;

top: 1em;

width: 2.5em;

height: 2.5em;

right: 0;

border-radius: 50%;

z-index: 10;

}

.timeline a{

color: #38666a;

margin-left: .3em;

}

.dir-l{ float: left; }

.dir-l:before{

content: "";

display: inline-block;

vertical-align: middle;

width: 0;

height: 0;

position: absolute;

right: -.95em;

top: 1em;

border-top: 17px solid transparent;

border-bottom: 17px solid transparent;

border-left: 15px solid #fff;

}

.dir-r{ float: right; }

.dir-r:before{

content: "";

display: inline-block;

vertical-align: middle;

width: 0;

height: 0;

position: absolute;

left: -.9em;

top: 1em;

border-top: 17px solid transparent;

border-bottom: 17px solid transparent;

border-right: 15px solid #fff;

}

.timeline-icon{

position: absolute;

top: -.2em;

width: 60px;

height: 60px;

left: 50%;

margin-left: -30px;

box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0.15);

}

.timeline-blocks{

display: block;

height: auto;

padding: 1em 0;

position: relative;

overflow: hidden;

}

.timeline img{

border-radius: 50%;

width: 100%;

}

.timeline a{

color: #38666a;

margin-left: .3em;

}

.timeline-blocks .date-l, .timeline-blocks .date-r{

position: absolute;

top: 2em;

right: 58%;

font-size: 1em;

}

.timeline-blocks .date-r{ left: 54%; right: auto;}

.timeline-blocks a:hover{ color: #4B878D; }

That’s It. Now you have successfully created an HTML CSS Timeline Design or Vertical Timeline. If you have any doubt or question comment down below.

After many peoples asking, what hosting I use? I added an affiliate link of my hosting on my head menu section. If you have to buy a fast hosting and want to support me, please go to the link and purchase.

Thanks For Visiting, Keep Visiting.

7 COMMENTS

pomodor.com May 21, 2019 At 10:49 am

Hi there, all the time i used to check weblog posts
here early in the morning, since i like to gain knowledge of more and more.

Reply
- shaan May 21, 2019 At 11:23 am
  
  Thank you very much.
  
  Reply
Jalaj May 21, 2019 At 1:40 pm

Hey, Shaan how do you create demo videos in your posts?

Reply
- shaan May 21, 2019 At 1:46 pm
  
  First I run the program in the browser, then I record screen.
  
  Reply
Lamont June 2, 2019 At 2:32 am

wonderful submit, very informative. I wonder why the other
specialists of this sector don’t realize this. You must continue your writing.

I’m confident, you have a great readers’ base already!

Reply
Phil August 4, 2019 At 10:47 am

Hi is it possible to animate the timeline and scroll, as the user scroll downs the icons change color and the timeline also animates into color on scroll.

Also is it possible to have demo links for these tutorials which are great instead of just videos.

Reply
baani August 17, 2020 At 12:30 pm

hey after we have done the coding in style and then in index how can we compres it in a singel file

Reply