How to Make Responsive Vertical Timeline Design using only HTML and CSS ?

Last Updated : 04 Mar, 2024

A Timeline is a list of events according to the order of dates which is used to get an overview of various tasks and their expected timing. Crafting a responsive vertical timeline design using only HTML and CSS involves making a visually pleasing layout that arranges content chronologically in a vertical manner. To make it responsive for small devices using media queries. This design improves user experience by showing information in a clear and easy-to-follow way and also ensures it looks good on different screen sizes.

Output Preview: Let us have a look at how the final output will look like.

Preview

Approach

Firstly, create the main container containing each card with its respective image in the HTML file.
Position the container at the center with the appropriate width. Also, position the line to the center with the appropriate height.
Separate the cards in the left and right part of the line using left and right properties in the left and right class names of the respective cards.
Move the image to the center of the line and create the card arrow using the ::after selector.
The ‘:root’ defines CSS variables that can be used throughout the stylesheet.
For responsiveness use media queries to move the cards in the vertical order to the right of the line. The ‘@media screen and (max-width:790px)’ defines styles for smaller screens using media queries, ensuring the layout remains responsive and readable on different devices.

Example: Create an HTML file named index.html and a CSS file named style.css and paste the following code.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Responsive Vertical Timeline Design</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <header>
        <h1>Geeks for Geeks</h1>
        <p>Make Responsive Vertical Timeline
           Design using only HTML and CSS
        </p>
    </header>
    <main>
        <div class="main-container">
            <div class="line">
                <a href="#">Top</a>
            </div>
            <div class="card left">
                <h1> Oct 2023</h1>
                <p>React Tutorial: This free React tutorial is designed
                   for people who prefer to learn by doing.
                </p>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="React Tutorial Image">
                </div>
            </div>
            <div class="card right">
                <h1> Nov 2023</h1>
                <p>React is one of the most popular, efficient,
                   and powerful open-source JavaScript libraries for
                   building dynamic and interactive user interfaces.
                </p>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="React Image">
                </div>
            </div>
            <div class="card left">
                <h1> Dec 2023</h1>
                <p>ReactJS is famous for its component-based architecture
                    and virtual DOM which makes it highly efficient in
                    rendering user interface and ensuring optimal performance.
                </p>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="ReactJS Image">
                </div>
            </div>
            <div class="card right">
                <h1> Jan 2024</h1>
                <p>It is very helpful in the efficient development
                    and maintenance of large-scale applications.
                </p>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="React Development Image">
                </div>
            </div>
            <div class="card left">
                <h1> Feb 2024</h1>
                <p>Here are the ReactJS important topics
                   that come under in this tutorial.
                </p>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="ReactJS Topics Image">
                </div>
            </div>
            <div class="card right">
                <h1>Mar 2024</h1>
                <p>A Project will always help you to be confident
                    in your learning path, so we recommend you to
                    follow the below-mentioned articles after you
                    clear your fundamentals of React our React Basics
                    section
                </p>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="React Project Image">
                </div>
            </div>
        </div>
    </main>
</body>
 
</html>

CSS

:root {
    scroll-behavior: smooth;
}
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(170, 230, 189);
}
 
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    margin-top: 10px;
}
 
header h1 {
    background-color: #fff;
    padding: .2em .5em;
    border-radius: 1em;
    color: green;
    font-size: 1.5rem;
}
 
header p {
    font-size: 1.25rem;
}
 
.main-container {
    margin-top: 20px;
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.line {
    position: absolute;
    left: 50%;
    height: 1000px;
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    transform: translateX(-50%);
    background-color: blue;
}
 
.line a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    font-weight: bold;
    color: rgb(55, 131, 65);
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}
 
.card {
    font-size: .8rem;
    width: 200px;
    height: 150px;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 10px;
}
 
.left {
    position: relative;
    left: -150px;
}
 
.right {
    position: relative;
    left: 150px;
}
 
.left::after,
.right::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: rgb(18, 113, 48);
    border-radius: 0px 10px;
    transform: rotate(-45deg);
    z-index: -1;
}
 
.left::after {
    top: 5px;
    right: -10px;
}
 
.right::after {
    top: 5px;
    left: -10px;
}
 
.card h1 {
    padding: 5px;
    display: flex;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    color: white;
    background-color: rgb(18, 113, 48);
}
 
.card p {
    padding: 10px;
}
 
.thumbnail {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}
 
.thumbnail img {
    width: 100%;
    height: 100%;
}
 
.left .thumbnail {
    left: 113%;
}
 
.right .thumbnail {
    right: 225px;
}
 
@media screen and (max-width:790px) {
    body {
        text-align: center;
        padding: 0 10px;
    }
 
    .main-container {
        width: auto;
    }
 
    .line {
        height: 1550px;
    }
 
    .card {
        top: 70px;
        margin-bottom: 100px;
    }
 
    .left::after,
    .right::after {
        visibility: hidden;
    }
 
    .left {
        left: auto;
    }
 
    .right {
        left: auto;
    }
 
    .left .thumbnail {
        top: -70px;
        left: 75px;
    }
 
    .right .thumbnail {
        top: -70px;
        left: 75px;
    }
}