Responsive timeline design using html and css3 only

Today, share with you ultimate responsive timeline design using html and css only. Timeline is good to display data in chronological order, or you can use timeline for display events, experience, awards etc in chronological order. So I share responsive timeline, its not contain single line of javascript or jQuery code. HTML and CSS is fully hand-coded and easy to use and understand for change something according to you.

timeline

Above image show data in both side, but I share with you both one side as well as both side responsive timeline design.  Try it for design same as above –

HTML code –

<ul class="timeline-both-side">
  <li>
    <div class="border-line"></div>
    <div class="timeline-description">
      <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
    </div>
  </li>
  <li class="opposite-side">
    <div class="border-line"></div>
    <div class="timeline-description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien. </p>
    </div>
  </li>
  <li>
    <div class="border-line"></div>
    <div class="timeline-description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat consectetur, tempor odio sit amet, euismod sapien. </p>
    </div>
  </li>
  <li class="opposite-side">
    <div class="border-line"></div>
    <div class="timeline-description">
      <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
    </div>
  </li>
  <li>
    <div class="border-line"></div>
    <div class="timeline-description">
      <p>Quisque ac laoreet purus, eu dapibus ligula. Mauris nec tincidunt mi, eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
    </div>
  </li>
</ul>

Than, add css –

.timeline-both-side{
  float: left; 
  width: 96%; 
  margin: 20px 2% 50px; 
  position: relative; 
  box-sizing: border-box;
}
.timeline-both-side:before{
  background-color: #ccc; 
  bottom: 0; 
  content: " "; 
  left: 50%; 
  position: absolute; 
  top: 0; 
  width: 1px;
}
.timeline-both-side:after{
  border-radius: 50%; 
  bottom: -22px; 
  content: ""; 
  height: 18px; 
  left: 50%; 
  margin-left: -11px; 
  position: absolute; 
  width: 18px; 
  border: 2px solid #ccc;
}
.timeline-both-side li {
  position: relative; 
  float: left; 
  width: 100%;
}
.timeline-both-side li .border-line{
  background-color: #ccc; 
  font-size: 1.4em; 
  height: 1px; 
  left: 50%; 
  margin-left: -8%; 
  position: absolute; 
  text-align: center; 
  top: 50%; 
  width: 8%; 
  z-index: 100;
}
.timeline-both-side li.opposite-side .border-line{
  left: auto; 
  right: 50%; 
  margin-left: 0; 
  margin-right: -8%;
}
.timeline-both-side li .border-line:before {
  background-color: #ccc; 
  content: ""; 
  height: 7px; 
  position: absolute; 
  right: -4px; 
  top: -3px; 
  width: 7px;
}
.timeline-both-side li.opposite-side .border-line:before{
  left: -4px; 
  right: auto;
}
.timeline-both-side li .timeline-description{
  border-radius: 2px; 
  background-color: #f1f1f1; 
  border: 1px solid #ccc; 
  float: left; 
  font-size: 13px; 
  padding: 10px; 
  position: relative; 
  width: 42%;
}
.timeline-both-side li.opposite-side .timeline-description{
  float: right;
}

8 comments
  1. Wow that was strange. I just wrote an very long comment but
    after I clicked submit my comment didn’t show up. Grrrr…

    well I’m not writing all that over again. Regardless, just wanted to say wonderful blog!

  2. Thank you very much, this is (almost) exactly what I need for my timeline 🙂
    I’m trying to add images with text as elements of the timeline (in replacement of the tiny squares in your version). I also need the circle at the top (it’s missing in the both side version, it only shows at the bottom). I’ve uploaded my version here: http://codepen.io/fifi2111/pen/NxEyYK
    I’ll be grateful for any help 🙂

  3. Your way of explaining everything in this piece of writing is genuinely pleasant,
    all be able to simply be aware of it, Thanks a lot.

  4. Hi..
    I tried to use this code, but it was not working properly, I just did copy and paste above codes(html & css),
    I could not understand where is the problem…
    Plz can any one help me… ?

Add Comment

Required fields are marked *. Your email address will not be published.