Vertical timelines are a popular way to display a series of events or milestones on a website. They offer a visually appealing and organized method to showcase your content. In this blog post, we’ll guide you on how to create a vertical timeline in CSS. We’ll also include a hyperlink to a relevant article on developerstricks.com for further reference.
Getting Started
Before diving into the creation of your vertical timeline, let’s answer a few important questions to ensure you have a clear understanding of the process.
Q1: What is a vertical timeline?
Ans: A vertical timeline is a layout that displays events or information in a vertically arranged list. Each event is represented as a block or card along a vertical line, making it easy for users to navigate through a series of events chronologically.
Q2: Why use CSS for creating a vertical timeline?
Ans: CSS (Cascading Style Sheets) is a fundamental technology for web design. It allows you to control the appearance and layout of your webpage. Creating a vertical timeline in CSS offers flexibility and customization, allowing you to adapt it to your specific design requirements.
HTML Structure
Start by setting up the HTML structure for your timeline. Create a container element and add individual event elements within it. Each event should have a date, title, and content. You can use the following code as a template:
<div class="timeline">
<h1 class="heading">How to create Vertical Timeline in CSS</h1>
<div class="side left">
<div class="content">
<h2>Eduction</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
<div class="side right">
<div class="content">
<h2>Experience</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
<div class="side left">
<div class="content">
<h2>Eduction</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
<div class="side right">
<div class="content">
<h2>Experience</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
</div>
CSS Styling
Next, apply CSS styles to your HTML structure to create the vertical layout. You can style the event elements, and the timeline itself, and add animations or effects to make it visually appealing. Use the following code as a starting point:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Set a background color */
body {
background-color: #22388B;
font-family: Helvetica, sans-serif;
}
.heading
{
color: #fff;
text-align: center;
margin-bottom: 50px;
margin-top: 40px;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 40px;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* side around content */
.side {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.side::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #20965F;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the side to the left */
.left {
left: 0;
}
/* Place the side to the right */
.right {
left: 50%;
}
/* Add arrows to the left side (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right side (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for sides on the right side */
.right::after {
left: -17px;
}
/* The actual content */
.content {
padding: 40px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
.content h2{
margin-bottom: 10px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width sides */
.side {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.side::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 13px;
}
/* Make all right sides behave like the left ones */
.right {
left: 0%;
}
}
Conclusion
Creating a vertical timeline in CSS can be an effective way to showcase a series of events or milestones on your website.
To explore more web development techniques and gain insights into PHP, jQuery, and AJAX, you can check out our article on “Review and Star Rating System Using PHP and jQuery and AJAX” at developerstricks.com.
