How to create Timeline | HTML & CSS Project - Frontend everything
Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Timeline with the help of HTML and CSS Only! 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Timeline that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Timeline Using HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for containers.
<div class="timeline">
<div class="container left">
<div class="date">15 Dec</div>
<i class="icon fa fa-home"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container right">
<div class="date">22 Oct</div>
<i class="icon fa fa-gift"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container left">
<div class="date">10 Jul</div>
<i class="icon fa fa-user"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container right">
<div class="date">18 May</div>
<i class="icon fa fa-running"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container left">
<div class="date">10 Feb</div>
<i class="icon fa fa-cog"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
<div class="container right">
<div class="date">01 Jan</div>
<i class="icon fa fa-certificate"></i>
<div class="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium.
</p>
</div>
</div>
</div>
After the HTML we will design the Timeline with CSS..
Output till now
CSS🎈( step - 2)
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
}
.timeline {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 15px 0;
}
.timeline::after {
content: '';
position: absolute;
width: 2px;
background: #006E51;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.container {
padding: 15px 30px;
position: relative;
background: inherit;
width: 50%;
}
.container.left {
left: 0;
}
.container.right {
left: 50%;
}
.container::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 8px);
right: -8px;
background: #ffffff;
border: 2px solid #006E51;
border-radius: 16px;
z-index: 1;
}
.container.right::after {
left: -8px;
}
.container::before {
content: '';
position: absolute;
width: 50px;
height: 2px;
top: calc(50% - 1px);
right: 8px;
background: #006E51;
z-index: 1;
}
.container.right::before {
left: 8px;
}
.container .date {
position: absolute;
display: inline-block;
top: calc(50% - 8px);
text-align: center;
font-size: 14px;
font-weight: bold;
color: #006E51;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 1;
}
.container.left .date {
right: -75px;
}
.container.right .date {
left: -75px;
}
.container .icon {
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
padding: 9px 0;
top: calc(50% - 20px);
background: #F6D155;
border: 2px solid #006E51;
border-radius: 40px;
text-align: center;
font-size: 18px;
color: #006E51;
z-index: 1;
}
.container.left .icon {
right: 56px;
}
.container.right .icon {
left: 56px;
}
.container .content {
padding: 30px 90px 30px 30px;
background: #F6D155;
position: relative;
border-radius: 0 500px 500px 0;
}
.container.right .content {
padding: 30px 30px 30px 90px;
border-radius: 500px 0 0 500px;
}
.container .content h2 {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: normal;
color: #006E51;
}
.container .content p {
margin: 0;
font-size: 16px;
line-height: 22px;
color: #000000;
}
@media (max-width: 767.98px) {
.timeline::after {
left: 90px;
}
.container {
width: 100%;
padding-left: 120px;
padding-right: 30px;
}
.container.right {
left: 0%;
}
.container.left::after,
.container.right::after {
left: 82px;
}
.container.left::before,
.container.right::before {
left: 100px;
border-color: transparent #006E51 transparent transparent;
}
.container.left .date,
.container.right .date {
right: auto;
left: 15px;
}
.container.left .icon,
.container.right .icon {
right: auto;
left: 146px;
}
.container.left .content,
.container.right .content {
padding: 30px 30px 30px 90px;
border-radius: 500px 0 0 500px;
}
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.