Css Timeline | Css Timeline Vertical | Html Css Timeline – Codewithrandom
Welcome to codewithrandom blog in this blog we learn that how we create a simple vertical html css timeline. We use only html & css for this responsive css vertical timeline. Hope you enjoy our blog so let’s start with basic html structure for responsive css vertical timeline.
HTML for css timeline
<div class="timeline">
<div class="timeline__component">
<div class="timeline__date timeline__date--right">2001</div>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
</div>
<div class="timeline__component timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
Code With Random this is place for simple content with tutorial and many other things related to like, Programming, Web Development, iOS Development, Android Development, Projects etc . We are not solo Creator we are in team and we try to provide best to best content for our user.
</p>
</div>
<div class="timeline__component timeline__component--bg">
<h2 class="timeline__title">The first article</h2>
<p class="timeline__paragraph">
We publish our first original article, at <span class = "titol"><a href="https://www.codewithrandom.com/" target="_blank">Web dev content</a></span>.
</p>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
</div>
<div class="timeline__component">
<div class="timeline__date">2004</div>
</div>
<div class="timeline__component">
<div class="timeline__date timeline__date--right">2006</div>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
</div>
<div class="timeline__component timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
Code With Random this is place for simple content with tutorial and many other things related to like, Programming, Web Development, iOS Development, Android Development, Projects etc .
</p>
</div>
<div class="timeline__component timeline__component--bottom timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
Code With Random this is place for simple content with tutorial and many other things related to like, Programming, Web Development, iOS Development, Android Development, Projects etc .
</p>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
<div class="timeline__point timeline__point--bottom"></div>
</div>
<div class="timeline__component timeline__component--bottom">
<div class="timeline__date">2008</div>
</div>
</div>
<div class="timeline">
<div class="timeline__component">
<div class="timeline__date timeline__date--right">2014</div>
</div>
<div class="timeline__middle">
</div>
<div class="timeline__component timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
Code With Random this is place for simple content with tutorial and many other things related to like, Programming, Web Development, iOS Development, Android Development, Projects etc .
</p>
</div>
<div class="timeline__component timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
Code With Random this is place for simple content with tutorial and many other things related to like, Programming, Web Development, iOS Development, Android Development, Projects etc .
</p>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
</div>
<div class="timeline__component">
</div>
<div class="timeline__component">
<div class="timeline__date timeline__date--right">2017</div>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
</div>
<div class="timeline__component timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
In December, we reached our article number 200.
</p>
</div>
<div class="timeline__component timeline__component--bottom timeline__component--bg">
<h2 class="timeline__title">Codewithrandom</h2>
<p class="timeline__paragraph">
Code With Random this is place for simple content with tutorial and many other things related to like, Programming, Web Development, iOS Development, Android Development, Projects etc .
</p>
</div>
<div class="timeline__middle">
<div class="timeline__point"></div>
<div class="timeline__point timeline__point--bottom"></div>
</div>
<div class="timeline__component timeline__component--bottom">
<div class="timeline__date">2021</div>
</div>
</div>
This is all html structure for our css timeline. We know this code look so boring and lengthy so let’s give their css for looking awesome css timeline.
CSS for CSS responsive timeline
body {
background: #ffffff;
}
.timeline {
margin: 0 auto;
max-width: 750px;
padding: 25px;
display: grid;
grid-template-columns: 1fr 3px 1fr;
font-family: "Fira Sans", sans-serif;
color: #777777;
}
.timeline__component {
margin: 0 20px 20px 20px;
}
.timeline__component--bg {
padding: 1.5em;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 3px #106fb4;
border-radius: 10px;
}
/* LEAVE TILL LAST */
.timeline__component--bottom {
margin-bottom: 0;
}
.timeline__middle {
position: relative;
background: #d6d6d6;
}
.timeline__point {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15px;
height: 15px;
background: #3F8BC3;
border-radius: 50%;
}
/* LEAVE TILL LAST */
.timeline__point--bottom {
top: initial;
bottom: 0;
}
.timeline__date--right {
text-align: right;
color: #106fb4;
}
.timeline__title {
margin: 0;
font-size: 1.15em;
font-weight: bold;
color: #391472;
}
.timeline__paragraph {
line-height: 1.5;
}
.timeline__date {
color: #106fb4;
}
.titol {
font-style: italic;
}
This is all the css code that we use for creating our css timeline. Yeah, that’s css looks so long so see the output that gives motivation to code.
CSS responsive timeline Output
 |
| Output image 1 |
 |
| Output image 2 |
 |
| Output image 3 |
 |
| Output image 4 |
There is all 4 images of output of our css timeline, also we share all codepen links so you also easily see whole output. Also thank you for coming here and give a reading, read more article on our website related fronted web development.
Orignal codepen link: Click here
In this post we learn how to Create CSS responsive timeline with simple coding of html css. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
written by – codewithrandom/Anki
Check out more…..