How to create Vertical Timeline Design Pure HTML5 CSS3 in Advanced

Kunjan Koiri
July 31, 2023

How to create Vertical Timeline Design Pure HTML5 CSS3 in Advanced

How to create Vertical Timeline Design Pure HTML5 CSS3 in Advanced


Hi, guys welcome to another topic it will be different from previous posts. So just you need only basic and advanced CSS3.in the Last posts, we saw how to create input placeholder animation. Now we will watch a vertical timeline design pure html5 CSS3 in Advanced. 

Learn to design a Vertical Timeline

Just start before, I just want to tell you that I haven’t completed design knowledge so; it will be some dirty. So let’s start to build a vertical timeline with CSS3.

I have given you a Video with source code to watch, which will help you to create an Awesome effect so will you understand how does it work.

Again I will teach you in some steps to easily understand what is it mean.

Steps:1 HTML Timeline Design

We have a boilerplate using emmet if you are using VS Code, Sublime, Bracket, Atom, etc.. in which already emmet build. 

I have used an external CSS link with stylesheet <link rel=” stylesheet” href=”yttimeline2.css”/>

Just come in body tag I’ve taken a div which class is para it will help to access of inside all paragraph. Inside we’ve ten ‘P’ tags with random text that’s it in HTML.

Steps:2 CSS design Tutorial

First of all universal operator in which margin and padding is zeroed and box-sizing is equal to border-box; income to the body, width and height is to 100%, background-color is in form of RGB(14,13,13);

Now come to ‘.para’ element in which I get margin, width, color, and counter-reset; ‘.para’ element all ‘P’ element now time to access border-top, border-image, border-image-slice, padding, and position;

Its “before” pseudo-element will be used for number increment with the help of a counter tag. 

Now its that enough for CSS, when you get source code then you will see all the above element. 

Watch Video:

HTML Code:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="yttimeline2.css" />

    <title>Vertical Timeline</title>

  </head>

  <body>

    <div class="para">

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

         Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate

        odio repellat debitis beatae id doloremque soluta suscipit a dolorem

        architecto aliquam similique atque fugit sit quidem, quo pariatur neque

        quibusdam! Ad iure magnam nulla dolores, quibusdam esse quis error,

        totam voluptates at quae nostrum, ratione labore explicabo praesentium

        debitis. <br /><br /><span>Mr. User</span>

      </p>

    </div>

  </body>

</html>

CSS Code:
@import url("https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Yusei Magic", sans-serif;
}
body {
  width: 100%;
  height: 100%;
  background-color: rgb(14, 13, 13);
}
.para {
  margin: 10px auto;
  width: 40%;
  color: white;
  counter-reset: head;
}
.para p {
  border-top: 2px solid;
  border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
  border-image-slice: 1;
  padding: 30px 25px;
  position: relative;
}
.para p::before {
  position: absolute;
  counter-increment: head;
  content: counters(head, ".") " ";
  top: 40%;
  left: 0;
  width: 35px;
  height: 35px;
  background-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
  text-align: center;
  line-height: 2;
  transform: translate(-50%) rotateZ(45deg);
}
.para p:nth-child(odd) {
  border-right: 2px solid;
}
.para p:nth-child(even) {
  border-left: 2px solid;
}
.para p:first-child {
  border-top: 0;
}
.para p:nth-child(odd)::before {
  left: 100%;
}
span {
  margin-left: 360px;
  color: #d53a9d;
  position: relative;
}
span::after {
  position: absolute;
  content: "";
  top: 13px;
  right: 75px;
  width: 45px;
  height: 2px;
  background-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
}