<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<div class="row justify-content-center mt-4 pt-3">
<div class="col-xl-10">
<ul class="timeline mb-0">
<li>
<div class="date bg-light">
<h5 class="text-uppercase mb-0 fs-16">Year 2021</h5>
</div>
<div class="card">
<div class="card-body">
<div class="event-content">
<div class="timeline-date bg-primary text-center rounded float-end">
<h3 class="text-white mb-0 fs-17">11</h3>
<p class="mb-0 text-white-50">Jun</p>
</div>
<div class="timeline-text">
<h3 class="fs-17">Timeline Event One</h3>
<p class="mb-0 mt-2 pt-1 text-muted">Codezillaye For You , it's he;p you.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="date bg-light">
<h5 class="text-uppercase mb-0 fs-16">Year 2021</h5>
</div>
<div class="card">
<div class="card-body">
<div class="event-content">
<div class="timeline-date bg-primary text-center rounded float-end">
<h3 class="text-white mb-0 fs-17">16</h3>
<p class="mb-0 text-white-50">Feb</p>
</div>
<div class="timeline-text">
<h3 class="fs-17">Timeline Event Two</h3>
<p class="mb-0 mt-2 pt-1 text-muted">Codezillaye For You , it's he;p you.</p>
<div class="d-flex flex-wrap align-items-start event-img mt-3 gap-2">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtare2.png" alt="" class="img-fluid rounded" width="60">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="" class="img-fluid rounded" width="60">
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="date bg-light">
<h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
</div>
<div class="card">
<div class="card-body">
<div class="event-content">
<div class="timeline-date bg-primary text-center rounded float-end">
<h3 class="text-white mb-0 fs-17">28</h3>
<p class="mb-0 text-white-50">Feb</p>
</div>
<div class="timeline-text">
<h3 class="fs-17">Timeline Event Three</h3>
<p class="mb-0 mt-2 pt-1 text-muted">Codezillaye For You , it's he;p you.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="date bg-light">
<h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
</div>
<div class="card">
<div class="card-body">
<div class="event-content">
<div class="timeline-date bg-primary text-center rounded float-end">
<h3 class="text-white mb-0 fs-17">25</h3>
<p class="mb-0 text-white-50">May</p>
</div>
<div class="timeline-text">
<h3 class="fs-17">Timeline Event Four</h3>
<p class="mb-0 mt-2 pt-1 text-muted">Codezillaye For You , it's he;p you.</p>
<button type="button" class="btn btn-success btn-rounded waves-effect waves-light mt-4">See more detail</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="date bg-light">
<h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
</div>
<div class="card">
<div class="card-body">
<div class="event-content">
<div class="timeline-date bg-primary text-center rounded float-end">
<h3 class="text-white mb-0 fs-17">30</h3>
<p class="mb-0 text-white-50">May</p>
</div>
<div class="timeline-text">
<h3 class="fs-17">Timeline Event Five</h3>
<p class="mb-0 mt-2 pt-1 text-muted">Codezillaye For You , it's he;p you.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="date bg-light">
<h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
</div>
<div class="card">
<div class="card-body">
<div class="event-content">
<div class="timeline-date bg-primary text-center rounded float-end">
<h3 class="text-white mb-0 fs-17">31</h3>
<p class="mb-0 text-white-50">May</p>
</div>
<div class="timeline-text">
<h3 class="fs-17">Timeline Event End</h3>
<p class="mb-0 mt-2 pt-1 text-muted">Codezillaye For You , it's he;p you.</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin-top: 20px;
background: #fff;
}
.card-body {
/* background-color: #201f26; */
}
.card .event-content {
padding: 1rem;
background-color: #222;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.card .event-content h3 {
text-decoration: underline;
color: #f3f5f3;
}
.card .event-content p {
color: #f3f5f3;
}
.card button {
padding: 1rem;
background-color: aqua;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.timeline {
display: grid;
grid-template-columns: .25rem 1fr;
grid-auto-columns: max-content;
column-gap: 2rem;
list-style: none;
}
.timeline::before {
content: "";
grid-column: 1;
grid-row: 1 / span 20;
background: #f44336;
}
.timeline li {
grid-column: 2;
margin-inline: 1.5rem;
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;
}
.timeline li:not(:last-child) {
margin-bottom: 2rem;
}
.timeline li .date {
height: 3rem;
margin-inline: -1.5rem;
text-align: center;
color: #fff;
display: grid;
place-content: center;
position: relative;
border-radius: 1.5rem 0 0 1.5rem;
}
.timeline li .date::before {
content: "";
width: 1.8rem;
aspect-ratio: 1;
background: #f44336;
position: absolute;
top: 100%;
clip-path: polygon(0 0, 100% 0, 0 100%);
right: 0;
}
.timeline li .date::after {
content: "";
display: block;
position: absolute;
width: 14px;
height: 14px;
background: #663b6c;
border-radius: 15px;
z-index: 1;
top: 50%;
transform: translate(50%, -50%);
right: calc(100% + 2rem + .125rem);
}
.timeline li .title {
position: relative;
padding-inline: 1.5rem;
overflow: hidden;
padding-block-start: 1.5rem;
padding-block-end: 1rem;
font-weight: 500;
}
.timeline li .descr {
position: relative;
padding-inline: 1.5rem;
padding-block-end: 1.5rem;
font-weight: 300;
}
@media (min-width: 40rem) {
.timeline {
grid-template-columns: 1fr .25rem 1fr;
}
.timeline::before {
grid-column: 2;
}
.timeline li:nth-child(odd) {
grid-column: 1;
}
.timeline li:nth-child(odd) .date {
border-radius: 0 1.5rem 1.5rem 0;
}
.timeline li:nth-child(odd) .date::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}
.timeline li:nth-child(odd) .date::after {
transform: translate(-50%, -50%);
left: calc(100% + 2rem + .125rem);
}
.timeline li:nth-child(even) {
grid-column: 3;
}
.timeline li:nth-child(2) {
grid-row: 2 / 4;
}
}
.timeline .timeline-date {
width: 54px;
height: 85px;
display: inline-block;
padding: 8px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
z-index: 1;
}
h5, h6 {
color: #201f26 !important;
}