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

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

Last Updated : 26 Jul, 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.

timeline1 — 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 in 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;
    }
}

Output:

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

R

rohan_paul

Improve

Article Tags :

Similar Reads

How to make a HTML div responsive using CSS ?

The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular elem

How to design a responsive Web Page in HTML ?

In this article, we will learn how to design a responsive Web Page in HTML. Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.RWD can be obtained by u

How to Create Responsive Sidebar using HTML & CSS ?

Creating a responsive sidebar using HTML and CSS means designing a navigation menu that adapts seamlessly to different screen sizes. It provides a user-friendly experience on both desktop and mobile devices, adjusting its layout for better readability and easy access to content. PreviewApproachBasic

How to create Vertical Navigation Bar using HTML and CSS ?

After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we crea

How to create Responsive Profile Card using HTML and CSS ?

In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user. Approach:Set up HTML with a container div containing an image and content sections.Style the container,