CSS Responsive Timeline Design

byCodingFlicks -October 08, 2021

0

Hello visitors, today in this blog, we will learn to create a responsive vertical timeline design using HTML and CSS flexbox. Earlier, I have shared many snippets on CSS animation examples, HTML CSS, Javascript, Jquery Plugins implementation, etc. Today, we will share a snippet on CSS responsive timeline or vertical timeline CSS using only HTML and CSS. Below you can see the video demo of the snippet.

I hope you have seen the video demo and got some idea about what the project will look like after finishing our coding. Now, what is CSS timeline or HTML timeline or HTML CSS responsive Timeline? A timeline is a chart that lists important events for progressive years in a particular historical period. There are two types of CSS timelines we see nowadays. One is a Horizontal timeline and, the other one is a Vertical Timeline. In the Horizontal Timeline, The chart list will align in the X-direction. In the Vertical Timeline, the Chart will align in the Y-direction. A timeline is an important part of any website and, every website has its way to demonstrate its progress in a timeline chart.

In this Vertical Timeline Design, there is a timeline that aligns vertically shown different information. These are the year, company name, designation, and some text. This timeline is designed for resume purposes but you can add other text and font-awesome icons to modify it. I have included four different boxes and two on each side.

To design the responsive CSS timeline, I have used the CSS flexbox property. You can also make this snippet using the CSS float property. But I think using CSS Flexbox, will be easy for us to align the elements of this project. For making the project mobile-friendly, I have used CSS Media Queries. In the smaller devices, all the boxes will align to the right side and, the year box will align to the left.

You May also like:

Responsive Vertical Timeline Design [Source Codes]:

For Creating this Project ( Vertical Timeline Design ), We have to create two files. One is HTML file with .html extension and the other one CSS file with .css extension. After that, link the external CSS in the HTML file, otherwise, the project will get its required style. Now copy the code below and paste them into the appropriate file and save them.

HTML

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive CSS vertical timeline Design</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="single-box">
			<div class="custom"></div>
			<div class="date-area">
				<span>2012</span>
			</div>
			<div class="content">
				<h2>Google Inc.</h2>
				<h3>Digital Marketer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="single-box box-right">
			<div class="custom"></div>
			<div class="date-area">
				<span>2008</span>
			</div>
			<div class="content">
				<h2>Yahoo Inc</h2>
				<h3>Senior Marketer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="single-box">
			<div class="custom"></div>
			<div class="date-area">
				<span>2006</span>
			</div>
			<div class="content">
				<h2>Bing</h2>
				<h3>Junior Marketing officer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="single-box box-right">
			<div class="custom"></div>
			<div class="date-area">
				<span>2000</span>
			</div>
			<div class="content">
				<h2>Youtube</h2>
				<h3>Search Engine Optimizer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
	</div>
</body>
</html>

CSS:

* {
	box-sizing: border-box;
}
body {
	background: #e7e7e7;
}
.container {
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}
.single-box {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	width: 100%;
}
.date-area {
	display: flex;
	background: linear-gradient(to right, #e7e7e7 45%, #000 45%, #000 45%, #e7e7e7 50%);
	order: 2;
	text-align: center;
	color: #fff;
	font-size: 28px;
	flex-basis: 100px;
}
.date-area>span {
	font-size: 20px;
	line-height: 70px;
	margin: auto;
	background: #14b6c1;
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.content {
	text-align: center;
	padding: 20px;
	border-radius: 25px;
	color: #858585;
	order: 3;
	width: 80%;
	padding-left: 10px;
	background: #fff;
}
.content {
	margin-bottom: 3%;
}
.content h2 {
	margin: 0;
	font-size: 14px;
	text-transform: uppercase;
}
.content h3 {
	margin: 5px;
	font-size: 14px;
	color: #000;
}
@media (min-width: 640px) {
	.content, .custom {
		width: 40%;
	}
	.box-right .content {
		order: 1;
		padding-right: 10px;
		border-radius: 25px;
	}
	.box-right .custom {
		order: 3;
	}
}

I hope you have successfully implemented the code. If you like this snippet, then please share the articles on this blog. Your cooperation will make me motivated to make more of this kind of snippets. Please follow us on our social media profiles to stay connected with this blog. Thank you very much for this visit.

Please do not enter any spam link in the comment box.