Responsive Vertical Timeline Using HTML & CSS

Responsive Vertical Timeline Using HTML & CSS

A responsive Vertical Timeline is often used on websites to sort any information in terms of time. In this article, you will learn how to create a Responsive Vertical Timeline using HTML and CSS.

This type of CSS Vertical Timeline is very easy to create. For this, you have to have a basic idea about HTML and CSS. The timeline is one of the most used for various business websites or personal websites. In this case, you can show your own experience or your success journey to the user in the timeline.

Responsive Vertical Timeline

This Vertical Timeline has been created in a very simple way. I have shared a preview below. That demo will help you figure out how it works.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


I didn't use any JQuery, BoostApp, or JavaScript. Responsive Vertical Timeline has been created using Pure HTML CSS. I have added all the information using HTML. Then I designed and made it responsive using CSS.

How to create a vertical timeline in HTML 

I have not shared any tutorial here. Because it is very simple so no tutorial is needed. Here you will find the required source code which you can copy directly. Although I have been given an option to download the source code. 

As you can see, this is a simple timeline. There is a long line here. The information is shown in small boxes on both sides of the line. First, create an HTML CSS file. Then add the following code to that file.

HTML Code (index.html)

The code below is the HTML code that will basically add all the text in this Vertical Timeline. Add these codes to your HTML file.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!--CSS file-->
  <link rel="stylesheet" href="style.css">
</head>
<body>

<section class="timeline">
 <ul>
  <li>
    <div class="content">
      <h2>
        <time>2026</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis praesentium itaque veniam dolorum cupiditate </p>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>
        <time>2025</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quas, reiciendis quis sequi voluptatem consectetur adipisci </p>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>
        <time>2022</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, expedita. Dolorem blanditiis, delectus omnis eos accusamus </p>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>
        <time>2020</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas voluptatum dolorum, quibusdam dignissimos animi pariatur </p>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>
        <time>2018</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet inventore odit placeat in laboriosam dolore ducimus vero, sapiente ipsam </p>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>
        <time>2017</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sequi nobis, blanditiis quae dolorem quasi reiciendis odio qui fugit? Officiis</p>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>
        <time>2014</time>
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel corporis sunt nostrum velit quibusdam neque porro ratione quos dolor libero</p>
    </div>
  </li>
 </ul>
</section>

</body>
</html>


CSS Code (style.css)

Now is the time to design and make Responsive Vertical Timeline Responsive. Copy the codes and add them to your CSS file. You must rename your CSS file using style.css.


/* Besic design the webpage*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-size: 16px;
font-family: "Lato", sans-serif;
}

.timeline {
color: #fff;
}

.timeline ul {
background: #faf8eb;
padding: 50px 0;
}

.timeline ul li {
background: #67CC8E;
position: relative;
padding-bottom: 40px;
list-style-type: none;
margin: 0 auto;
width: 5px;
}

.timeline ul li:last-child {
padding-bottom: 7px;
}

.timeline ul li:before {
content: "";
background: #faf8eb;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 20px;
height: 20px;
border: 3px solid #67CC8E;
}

.timeline ul li .hidden {
opacity: 0;
}

.timeline ul li .content {
background: #67CC8E;
width: 450px;
padding: 20px;
position: relative;
top: 7px;
}

.timeline ul li .content h2 {
color: #fff;
padding-bottom: 10px;
text-align: center;
}

.timeline ul li .content p {
text-align: center;
}

.timeline ul li .content:before {
content: "";
top: 0px;
width: 38px;
height: 5px;
background: #3e8e5c;
position: absolute;
}

.timeline ul li:nth-child(odd) .content {
left: 50px;
background: #3e8e5c;
}

.timeline ul li:nth-child(odd) .content:before {
left: -38px;
}

.timeline ul li:nth-child(even) .content {
left: calc(-450px - 45px);
background: #3e8e5c;
}

.timeline ul li:nth-child(even) .content:before {
right: -38px;
}

/* Make it responsive */
@media screen and (max-width: 1020px) {
.timeline ul li .content {
  width: 41vw;
}

.timeline ul li:nth-child(even) .content {
  left: calc(-41vw - 45px);
}
}

@media screen and (max-width: 700px) {
.timeline ul li {
  margin-left: 20px;
}
.timeline ul li .content {
  width: calc(100vw - 100px);
}
.timeline ul li .content h2 {
  text-align: initial;
}
.timeline ul li:nth-child(even) .content {
  left: 45px;
  background: #3e8e5c;
}
.timeline ul li:nth-child(even) .content:before {
  left: -33px;
}
}

Hopefully, you have no problem creating this Responsive Vertical Timeline using the codes above. If you do not have any technical knowledge then use the download button below. If there is any difficulty in creating CSS Vertical Timeline, please comment.




Tags
Foolish Developer

Foolish Developer

Hello, I am shantanu jana a web developer. In this blog, I share tutorials related to web design and development. Here you will find complete step-by-step tutorials and source code. facebook twitter youtube instagram external-link

You may like these posts

Show more