Create a Horizontal Timeline Using HTML And CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Horizontal Timeline Using HTML and CSS. Before That, We Could See What This Project Is About.

A Horizontal Timeline is simply a line plot that describes a horizontal representation of some event that occurred at a time. Here we used three OSs android, IOS, and Windows that represent the current OS used by the world in a timeline representation. Look’s Better right?…

A timeline project is usually used to track the progress of the users and is mainly used on edtech websites or government job websites where we need to follow some steps for the completion of a course or form application.

50+ HTML, CSS & JavaScript Projects With Source Code

So,  Let’s Begin Our Horizontal Timeline Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Horizontal Timeline Html Code:-

<div class="container">
  <ul class="timeline">
    <li class="active-tl">Android</li>
    <li>Windows</li>
    <li>iOS</li>
  </ul>
</div>

Here We have simply created a div tag with a class name and inside of the div, we just added an unordered list class with three contents Android, IOS, and Windows, the android content inside the list is given by a separate class name active-tl for the active class purpose by giving a color shade on it for reference. then close the list and div tag.

Restaurant Website Using HTML and CSS

So We have just added the contents that need to be represented in a horizontal format, So let’s make them styling by adding the CSS properties which is given down below.

Output:

Horizontal Timeline Css Code:-

body{
  background: #fff;
}

h1{
  text-align: center;
  text-transform: uppercase;
}

.container{
  width: 1200px;
  margin: auto;
}

.timeline{
  counter-reset: test 20;
  position: relative;
}

.timeline li{
  list-style: none;
  float: left;
  width: 33.3333%;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

ul:nth-child(1){
  color: #4caf50;
}

.timeline li:before{
  counter-increment: test;
  content: counter(test);
  width: 50px;
  height: 50px;
  border: 3px solid #4caf50;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 50px;
  margin: 0 auto 10px auto;
  background: #fff;
  color: #000;
  transition: all ease-in-out .3s;
  cursor: pointer;
}

.timeline li:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: grey;
  top: 25px;
  left: -50%;
  z-index: -999;
  transition: all ease-in-out .3s;
}

.timeline li:first-child:after{
  content: none;
}
.timeline li.active-tl{
  color: #555555;
}
.timeline li.active-tl:before{
  background: #4caf50;
  color: #F1F1F1;
}

.timeline li.active-tl + li:after{
  background: #4caf50;
}

Now We have added our CSS code for the Horizontal Timeline. Here is the first step we just add the background, text-align, and transform using the universal mark(*) and body section.

Weather App Using Html,Css And JavaScript 

In the Second Step, We are fixing the margin and width for the horizontal timeline and in the unordered list class we again add a value for the position to not change which is absolute then we make it for alignments and fixing backgrounds, text colors, width, margin, and text transform to make it attractive.

The code for the above explanation is down.

body{
  background: #fff;
}

h1{
  text-align: center;
  text-transform: uppercase;
}

.container{
  width: 1200px;
  margin: auto;
}

.timeline{
  counter-reset: test 20;
  position: relative;
}

.timeline li{
  list-style: none;
  float: left;
  width: 33.3333%;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

Now In the Third step, We are using an nth-child CSS property to add some events in a specific part of the code. Here we fixing a color for the first content using the Nth child(1) property to make the text colored green and the content is Android.

After that, we are adding the code inside the timeline for a straight line that connects with other content. and now again we are adding some specific properties to the second content like color, background, transition, z-index, counter, etc.. and make it leave without shading to make it represent as nonactive.

Portfolio Website using HTML and CSS (Source Code)

Further, The contents with transition are also added for animation then for the movement of shades to contents we add separate css properties using child class so then it passes the content and applies shade on it when it is active.

The Code for a particular explanation is down below.

ul:nth-child(1){
  color: #4caf50;
}

.timeline li:before{
  counter-increment: test;
  content: counter(test);
  width: 50px;
  height: 50px;
  border: 3px solid #4caf50;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 50px;
  margin: 0 auto 10px auto;
  background: #fff;
  color: #000;
  transition: all ease-in-out .3s;
  cursor: pointer;
}

.timeline li:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: grey;
  top: 25px;
  left: -50%;
  z-index: -999;
  transition: all ease-in-out .3s;
}

.timeline li:first-child:after{
  content: none;
}
.timeline li.active-tl{
  color: #555555;
}
.timeline li.active-tl:before{
  background: #4caf50;
  color: #F1F1F1;
}

.timeline li.active-tl + li:after{
  background: #4caf50;
}

Hey, There we have successfully completed adding the source code for the project. But We also want to see it how it came Right?.. So we can use the output section for the project preview.

Final Output of horizontal timeline HTML and CSS:

Horizontal Timeline Using HTML And CSS:

Now We have Successfully created our Horizontal Timeline Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

If you find out this Blog helpful? , Then make sure to search Codewithrandom on Google for Front End Projects With Source codes and make sure to Follow the Code With Random Instagram page.

REFER CODE – Iqbal Taher

WRITTEN BY – Ragunathan S