Responsive CSS Flexbox timeline Design

Timeline design is a part of the web design process. A timeline is a visual tool that can be used to represent the progress of an idea or a project over time. A timeline can be used as a representation of events or stages in a process, a linear representation of a story, or a diagram of events within a single day. It can also be used to show the history of a product or company. It is used in several ways. I recommend you watch the below video to learn more about this project. The video will show you step by step the project. We regularly publish front-end development-related videos on our YouTube channel. If you are a beginner-level web designer then subscribe to our youtube channel. I hope you can learn something new.

I'm assuming you've seen the video and comprehended the basics of the project. Why should we have a timeline on our website? If you show your product's growth and transformation over a period of time, it will help you gain people's trust and create a bond with your users. More eligible customers can be brought to your business by that trust. We used the flexbox grid system for our project design. One of the most convenient ways to create a responsive web layout is through the use of the CSS flexbox.

We showed you how to design a basic timeline. A random header and some text have been used as information. You can enter the information you need in the boxes. Lastly, we used CSS Media queries to give the project a Responsive Look. Timeline boxes will be spread out evenly on large devices on the left and right, but on smaller devices, they will all be on the right.

You May Also Like:

Responsive CSS Flexbox timeline Design [ Source Code ]:

To create this project, you first need to create two files. One of them is an HTML file and the other is a CSS file. After creating the CSS file, link it to the HTML file. Copy the HTML and CSS code in the code box below, paste it into your own file and save. First, open the project in the browser and see if the code is working. If that doesn't work, download the full code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive CSS Flexbox timeline Design | Flexbox Examples</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="timeline">
			<div class="custom"></div>
			<div class="icon">
				<span><i class="fa fa-star"></i></span>
			</div>
			<div class="info">
				<h2>Graphics Design</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="timeline box-right">
			<div class="custom"></div>
			<div class="icon">
				<span><i class="fa fa-star"></i></span>
			</div>
			<div class="info">
				<h2>Web design</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="timeline">
			<div class="custom"></div>
			<div class="icon">
				<span><i class="fa fa-star"></i></span>
			</div>
			<div class="info">
				<h2>Ui/ux design</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="timeline box-right">
			<div class="custom"></div>
			<div class="icon">
				<span><i class="fa fa-star"></i></span>
			</div>
			<div class="info">
				<h2>Digital Marketing</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

* {
	box-sizing: border-box;
}
body {
	background: #3594cc;
}
.container {
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}
.timeline {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	width: 100%;
}
.icon {
	display: flex;
	background: linear-gradient(to right, #3594cc 45%, #b1dcf5 45%, #b1dcf5 45%, #3594cc 50%);
	order: 2;
	text-align: center;
	color: #fff;
	font-size: 28px;
	flex-basis: 100px;
}
.icon>span {
	font-size: 20px;
	margin: auto;
	background: #46a4da;
	border-radius: 50px;
	width: 50px;
	height: 50px;
	line-height: 40px;
	border: 5px solid #b1dcf5;
}
.info {
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	color: #383838;
	order: 3;
	width: 80%;
	padding-left: 10px;
	background: #fff;
	transition: all .6s ease;
}
.info:hover {
	background: bisque;
}
.info {
	margin-bottom: 3%;
}
.info h2 {
	margin: 0;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'Russo One', sans-serif;
	letter-spacing: 2px;
}
.info p {
	line-height: 1.4;
	font-family: montserrat;
}
@media (min-width: 640px) {
	.info, .custom {
		width: 40%;
	}
	.box-right .info {
		order: 1;
		padding-right: 10px;
	}
	.box-right .custom {
		order: 3;
	}
}

Hope you have success with your snippet. We regularly share various snippets related to HTML, CSS, and JavaScript on our blog. If you think these snippets are useful for you, then visit our blog more frequently. Please share our blog articles with like-minded people. One share of yours may open the way for others to learn something new. Thank you so much for visiting our blog.

DOWNLOAD CODE

Responsive CSS Flexbox timeline Design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive CSS Flexbox timeline Design

Responsive CSS Flexbox timeline Design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form