Responsive Vertical Timeline using HTML CSS

A timeline is a list of events or a visual representation through which an event or information is displayed in chronological order. We can arrange the contents of a timeline horizontally or vertically. In this blog post, we will learn how to design a responsive vertical timeline using only HTML and CSS. We all know that responsive web design is essential in this modern age of web design, so we have made this timeline responsive for your convenience. The video tutorial below shows the entire process of how to create a timeline. We Hope you will watch the full video tutorial.

Video Tutorial:

We Hope you have watched the above video tutorial on how to make a responsive vertical timeline design using only HTML and CSS. Since all information is arranged in chronological order on a timeline, it becomes easier for the audience to follow the flow of a process or event. This increases readability and makes it easier for the audience to grasp a complex topic quickly. It adds visual interest to a website and therefore encourages users to explore more content A timeline highlights key milestones and achievements Users get an overall idea of a particular topic when they view a timeline.

Designing a timeline isn't the only thing we can do. We need to make it responsive as it is essential for modern day web design. Best practices for designing a timeline are to keep it simple, include multimedia, ensure responsiveness, use visual hierarchy, etc. Timeline is a valuable web element for many types of websites. Company websites, educational websites, news websites, portfolio websites etc. use timeline as a design element. Several well-known websites like The New York Times, NASA, Apple, etc. use timelines effectively on their websites.

You May Also like:

Responsive Vertical Timeline using HTML CSS [ Source Code ]:

To create this responsive vertical timeline, first, we need to create CSS and HTML files. The entire process is shown in the above video tutorial. After that, copy the source code below and paste it into the files you created earlier. If the code is not working properly, you can download the source code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <title>Responsive vertical timeline using flexbox</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="timeline-container">
        <div class="timeline-event">
            <div class="blank-box"></div>
            <div class="timeline-date">
                <span>2022</span>
            </div>
            <div class="timeline-details">
                <h2>Future University</h2>
                <h3>Advanced Degree in Technology</h3>
                <p>Embarking on a journey into advanced technology studies for a brighter future.</p>
            </div>
        </div>

        <div class="timeline-event right-side">
            <div class="blank-box"></div>
            <div class="timeline-date">
                <span>2020</span>
            </div>
            <div class="timeline-details">
                <h2>Cyber Academy</h2>
                <h3>Specialization in Cybersecurity</h3>
                <p>Diving deep into the world of cybersecurity to combat digital threats.</p>
            </div>
        </div>

        <div class="timeline-event">
            <div class="blank-box"></div>
            <div class="timeline-date">
                <span>2018</span>
            </div>
            <div class="timeline-details">
                <h2>Quantum Institute</h2>
                <h3>Exploring Quantum Computing</h3> 
                <p>Delving into the realm of quantum computing for cutting-edge problem-solving.</p>
            </div>
        </div>

        <div class="timeline-event right-side">
            <div class="blank-box"></div>
            <div class="timeline-date">
                <span>2012</span> 
            </div>
            <div class="timeline-details">
                <h2>Tech College</h2>
                <h3>Bachelor's Degree in Computer Science</h3>
                <p>Commencing the journey with a solid foundation in computer science studies.</p>
            </div>
        </div>
        
    </div>
</body>
</html>

ADD CSS:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
}
body{
    background: #1d2731;
}
.timeline-container{
    font-family:poppins;
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 25px auto; 
}
.timeline-event{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%; 
}
.timeline-date{
    display: flex;
    background: linear-gradient(to right,transparent 50%,#01b7f6 53%,#01b7f6 0,transparent 50%); 
    order: 2;
    text-align: center;
    font-size: 28px;
    color: #fff; 
    width: 150px;
}
.timeline-date > span{
    font-size: 30px;
    margin: auto;
    font-weight: 900;
}
.timeline-details{
    text-align: center;
    padding: 20px;
    color: #fff;
    order: 3;
    width: 80%;
    border-radius: 15px;
    padding-left: 10px;
    background: #01b7f6;
    margin-bottom: 3%; 
}
.timeline-details h2 {
	font-family: 'Permanent Marker', cursive;
	margin: 0;
	font-size: 20px;
	text-transform: uppercase;
}
.timeline-details h3 {
	margin: 5px;
	font-size: 14px;
	color: #1d2731;
}
.timeline-details p{
    font-size: 12px;
}

@media (min-width: 640px){
    .timeline-details,
    .blank-box{
        width: 40%; 
    }
    .right-side .timeline-details{
        order: 1;
        padding-right: 10px;
    }
    .right-side .blank-box{
        order: 3; 
    }
}

A timeline is a powerful tool on a website that significantly increases user experience and engagement. It provides more clarity and facilitates the narrative flow of a process. We hope you liked our snippet today. To get more such snippets you need to click on the Load More button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Vertical Timeline using HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Vertical Timeline using HTML CSS

Video Tutorial:

Responsive Vertical Timeline using HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form