Posted in
5110
5:16 am, October 6, 2021
Vertical Timeline in CSS and HTML Only no javascript
Description
This is a vertical timeline with alternating left and right items, crossing over with the date and the time line item. The great thing about this timeline is that it does not require any javascript and relies only on HTML and CSS
Vertical Timeline in CSS and HTML Only no javascript Demo
View Demo Full Screen View Demo New Tab
Vertical Timeline in CSS and HTML Only no javascript Code
HTML
<div class="container">
<h1>Timeline with HTML and CSS</h1>
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="point"></div>
<div class="date">
<h4>January 2019</h4>
</div>
</li>
<li>
<div class="content">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="point"></div>
<div class="date">
<h4>January 2019</h4>
</div>
</li>
<li>
<div class="content">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="point"></div>
<div class="date">
<h4>January 2019</h4>
</div>
</li>
<li>
<div class="content">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="point"></div>
<div class="date">
<h4>January 2019</h4>
</div>
</li>
<li>
<div class="content">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="point"></div>
<div class="date">
<h4>January 2019</h4>
</div>
</li>
<li>
<div class="content">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="point"></div>
<div class="date">
<h4>January 2019</h4>
</div>
</li>
</ul>
</div>
</div>
CSS
.container {
padding: 20px 0;
}
.container h1 {
text-align: center;
}
.timeline {
position: relative;
margin: 0 auto;
width: 90%;
}
.timeline ul li {
margin-bottom: 50px;
list-style-type: none;
display: flex;
flex-direction: row;
align-items: center;
}
.point {
min-width: 20px;
height: 20px;
background-color: #be9fe1;
border-radius: 100%;
z-index: 2;
border: 3px #333333 solid;
position: relative;
left: 1px;
}
@media (max-width: 800px) {
.point {
min-width: 15px;
height: 15px;
}
html, body {
font-size: 15px;
}
}
@media (max-width: 650px) {
html, body {
font-size: 14px;
}
.point {
min-width: 12px;
height: 12px;
}
}
@media (max-width: 450px) {
html, body {
font-size: 10px;
}
p {
padding: 10px !important;
}
}
.timeline ul li .content {
width: 50%;
padding: 0 20px;
}
.timeline ul li:nth-child(odd) .content {
padding-left: 0;
}
.timeline ul li:nth-child(odd) .date {
padding-right: 0;
}
.timeline ul li:nth-child(even) .content {
padding-right: 0;
}
.timeline ul li:nth-child(even) .date {
padding-left: 0;
}
.timeline ul li .date {
width: 50%;
padding: 0 20px;
font-weight: normal;
}
.timeline ul li .date h4 {
background-color: #e1ccec;
width: 100px;
text-align: center;
padding: 5px 10px;
border-radius: 10px;
}
.timeline ul li .content h3 {
padding: 10px 20px;
background-color: #be9fe1;
margin-bottom: 0;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.timeline ul li .content p {
padding: 10px 20px;
background-color: #e1d9ec;
margin-top: 0;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.timeline ul li:nth-child(even) {
flex-direction: row-reverse;
}
.timeline ul li:nth-child(even) .date h4 {
float: right
}
.timeline::before {
content: "";
position: absolute;
height: 100%;
width: 3px;
left: 50%;
background-color: #333333;
}
.timeline ul li .content p {
padding: 20px 20px;
background-color: #e1d9ec;
margin-top: 0;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: #222;
}
.timeline ul li .date h4 {
background-color: #e1ccec;
width: 100px;
text-align: center;
padding: 5px 10px;
border-radius: 10px;
color: #111;
}
External Link for Vertical Timeline in CSS and HTML Only no javascript
Add Comment
Other Items in timeline
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript