A timeline is a graphical representation or a chart that is listed with important events for successive years within a particular historical period. Timelines are 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 (Vertical Timeline), where there is the vertical line that separates the year, title, and the company name on the left side, and on the right side there is a description and some points about the plan or the event. Nowadays, in every sector, the timeline or a plan is very 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 Vertical Timeline is given below if you want the source code of this program, you can copy it. You can use this Vertical Timeline code on your projects.
Vertical 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.
body {
background: #00c6ff;
background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
background: linear-gradient(to right, #0072ff, #00c6ff);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100vw;
margin: 0;
padding: 12vh 100px;
font-family: 'Source Sans Pro', arial, sans-serif;
font-weight: 300;
color: #fff;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.timeline {
width:100%;
max-width:800px;
background:#12192c;
padding: 100px 50px;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.timeline:before {
content: '';
position: absolute;
top: 0px;
left:calc(33% + 15px);
bottom: 0px;
width: 4px;
background: #00c6ff;
}
.timeline:after {
content: "";
display: table;
clear: both;
}
.entry {
clear: both;
text-align: left;
position: relative;}
.title {
margin-bottom: .5em;
float: left;
width: 33%;
padding-right: 30px;
text-align: right;
position: relative;}
.title:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 4px solid #0072ff;
background-color:#fff;
border-radius:100%;
top: 15%;
right: 8px;
z-index: 99;
}
h3 {
margin: 0;
font-size: 120%;
}
p {
margin: 0;
font-size: 100%;
}
.body {
margin: 0 0 3em;
float: right;
width: 66%;
padding-left: 30px;
}
p {
line-height: 1.4em;
color:#00c6ff
}
.body:first-child {
margin-top: 0;
font-weight: 400;
}
ul{
color:#ddd;
padding-left: 0;
list-style-type: none;
}
li:before {
content: "–";
margin-right: .5em;
}
.credit a{
text-decoration: none;
color: #00c6ff;
font-weight: 900;
}
.credit {
margin: 20px;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Vertical 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