Hello developer, today in this blog, you will learn to create a Vertical Timeline using HTML & CSS.
A timeline is a graphical representation or a chart that is listed with important events for successive years within a particular historical period. Timeline is often used while the events are planned. It helps to do the events in sequential modal, where it can be analyzed easily and, the events may not be missed.
In this program (Horizontal Timeline), where there is the horizontal timeline where we have perfectly shown the title and description of the event. At the center of the design, there is a horizontal while line with a big dot or a small circle and, there is a total of five events you can easily add more. There is a scroll bar at the bottom of the timeline, where you can scroll to see the entire timeline. Nowadays, in every sector, the timeline or a plan is most important and, every website has its timeline to display a particular event. You can add more events and points as per your need.
The source code of this Horizontal Timeline is given below. If you want the source code of this program, you can copy it. You can use this Horizontal Timeline code on your projects.
Horizontal Timeline [Source Code]
To make this website, you would like to make two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to make a file with a .html extension.
* {
box-sizing: border-box;
}
html, body {
width: 100%;
background-color: #FFE53B;
background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
height: 100%;
margin: 0;
}
.timeline {
width: 100%;
height: 480px;
padding: 20px;
position: relative;
box-sizing: border-box;
overflow: auto;
display: flex;
}
.timieline-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
font-family: sans-serif;
}
.timeline-content {
max-width: 300px;
height: 200px;
padding: 20px;
flex-shrink: 0;
flex-grow: 0;
align-self: flex-start;
border:5px solid #12192c;
background: #FFF;
position: relative;
border-radius: 10px;
margin-right: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.timeline-content:before {
position: absolute;
width: calc(100% + 14px);
height: 4px;
top: calc(100% + 8px);
background: #FFF;
content: "";
left: -7px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.timeline-content:after {
position: absolute;
width: 4px;
height: 25px;
top: 100%;
left: calc(50% - 10px);
background: #FFF;
content: "";
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.timeline-period {
position: absolute;
top: calc(100% + 25px);
background: #FFF;
padding: 10px;
width: 100px;
text-align: center;
border-radius: 10px;
left: calc(50% - 60px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.timeline-period:before {
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
content: "";
position: absolute;
top: -20px;
left: calc(50% - 6px);
z-index: 2;
}
.timeline-content:nth-child(even) {
align-self: flex-end;
}
.timeline-content:nth-child(even):before {
top: -15px;
}
.timeline-content:nth-child(even):after {
top: -25px;
}
.timeline-content:nth-child(even) .timeline-period {
top: -60px;
}
.timeline-content:nth-child(even) .timeline-period:before {
top: calc(100% + 2px);
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#fff;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Horizontal Timeline using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team