Create Timeline Using HTML And CSS (Source Code)

Create Timeline Using HTML And CSS (Source Code)

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Timeline Using HTML & CSS.

A timeline is a graphical representation of a time period where important events occurred Likewise here we created will represent a work experience in certain years with an explanation of it.

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

 

HTML CODE For TimeLine Project

 

<h1>Pure Css responsive <span>timeline</span></h1>

<div class="container">

   <div class="timeline-block timeline-block-right">
      <div class="marker"></div>
      <div class="timeline-content">
         <h3>First Year</h3>
         <span>Some work experience</span>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
   </div>

   <div class="timeline-block timeline-block-left">
      <div class="marker"></div>
      <div class="timeline-content">
         <h3>Seconed Year</h3>
         <span>Some work experience</span>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
   </div>

   <div class="timeline-block timeline-block-right">
      <div class="marker"></div>
      <div class="timeline-content">
         <h3>Third Year</h3>
         <span>Some work experience</span>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
   </div>

   <div class="timeline-block timeline-block-left">
      <div class="marker"></div>
      <div class="timeline-content">
         <h3>Fourth Year</h3>
         <span>Some work experience</span>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
   </div>

   <div class="timeline-block timeline-block-right">
      <div class="marker"></div>
      <div class="timeline-content">
         <h3>Fifth Year</h3>
         <span>Some work experience</span>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
   </div>
</div>

 

Here We first add a heading using the header tag (H1) with a span tag inside. Then we create a div class with some name that contains the timeline content. Again we created three div classes with names and we added the heading, subheading, and explanation using the h3, Span, and P tag for the representation of the historical period.

100+ Front-end Projects for Web developers (Source Code)

Likewise, we have created it five times with different names for each div class and we closed all the div tags. So the content for the timeline is done. Now we have to add the CSS Code to make it represent has TimeLine By adding attractive Lines in between, fonts and colors.

The CSS code is Mentioned Below.

 

CSS CODE For TimeLine Project

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

body {
   margin: 0;
   padding: 30px 0;
   font-family: 'Roboto', sans-serif;
   background: #F1F2F6;
}

h1 {
   text-align: center;
   font-weight: 300;
   color: #777
}

h1 span {
   font-weight: 600;
}

.container {
   width: 80%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999
}

.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}


@media screen and (max-width: 768px) {
   .container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}

 

Now We have Added our CSS code Successfully. In this code, the first step we did is fixing the values for margin and padding as well as for fonts and background colors. and then we fix the box property for fixing of content to screens. These are done inside of Universal marker(*) and Body.

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

body {
   margin: 0;
   padding: 30px 0;
   font-family: 'Roboto', sans-serif;
   background: #F1F2F6;
}

 

In the Second step, We are adding the margin, padding, width, height, position, and overflow properties for sizing, attaching, and hiding the contents to the size of screens, So this will make all the contents that are inside of the container to represent in it by the given values. These will follow for all the five history contents inside the div class of container.

In the Third Step, We started adding the timeline by styling the contents and adding lines with the contents for history representation. The div class (timeline-block) has the values and properties for making the timeline. and we were fixing the size, color, and font family for the text content which represents history in it.

Further, The properties used here is moreover box models like display, justify-content, etc… and it will be repeated for all the five contents inside the container class.

So Now we see the code for the above explanation.

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999
}

.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}

 

The Last Step Is We specifically call out the screen size(768px) using a media query and changing some of the specific contents inside of it to make it User-attractive and Responsive when it comes to the mentioned screen size.

So for that, we are were used these media queries in it. The Respective code for the above explanation is given.

@media screen and (max-width: 768px) {
   .container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}

 

Now We have successfully completed adding the CSS Code and we now came to the end of this project as of now the only thing left is to preview of TimeLine Project Given in the Output Section.

 

FINAL OUTPUT For TimeLine Project


Now We have Successfully created our TimeLine Project Using HTML & 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.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

 

REFER CODE – Hassan Kamal

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment