Skip to content

Instantly share code, notes, and snippets.

@joekenpat

joekenpat/content_with_timeline.html

Created June 8, 2021 17:13
Show Gist options
  • Save joekenpat/88cd641521aadcd93673c279a49324c1 to your computer and use it in GitHub Desktop.
Save joekenpat/88cd641521aadcd93673c279a49324c1 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Timeline with Html and css
Raw
content_with_timeline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Timeline with Html and css</title>
<style>
.indicator-icon {
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1779ba;
display: flex;
align-items: center;
justify-content: center;
}
.indicator-icon-inner {
border-radius: 50%;
width: 0.5rem;
height: 0.5rem;
background-color: #9ac8e8;
}
.indicator-vline {
border-left: 1px solid #1779ba;
border-right: 1px solid #1779ba;
margin-top: -1em !important;
height: 100%;
padding: 0;
width: 0;
margin: 0 auto;
}
.flex-container {
display: flex;
flex-direction: row;
align-items: stretch;
max-width: 50rem;
}
.flex-col {
padding: 0.2em;
}
.no-wrap {
flex: 0 0 auto;
}
.timeline-title {
margin: 0 0.2em 0.3em;
}
.timeline-content {
padding: 0 0.3em;
}
</style>
</head>
<body>
<main>
<div class="flex-container">
<div class="flex-col">
<div class="indicator-icon">
<div class="indicator-icon-inner"></div>
</div>
<div class="indicator-vline"></div>
</div>
<div class="flex-col no-wrap">
<h3 class="timeline-title">May 22, 2021</h3>
</div>
<div class="flex-col">
<h3 class="timeline-title">Update Name</h3>
<p class="timeline-content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste
reprehenderit repellendus, inventore excepturi quibusdam aperiam
necessitatibus magni aliquid. Recusandae at labore facere quidem
tenetur quod rem cumque accusamus nostrum nobis? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Molestiae, similique numquam
tempore impedit nostrum reprehenderit atque tenetur debitis soluta
minus distinctio consectetur! Laudantium, corrupti harum qui
perspiciatis sed unde voluptatum. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quasi autem nulla et, distinctio,
architecto veritatis molestiae impedit quos sapiente sunt ipsa. Ea
quasi necessitatibus voluptas aut architecto accusamus eligendi
magni.
</p>
</div>
</div>
<div class="flex-container">
<div class="flex-col">
<div class="indicator-icon">
<div class="indicator-icon-inner"></div>
</div>
<div class="indicator-vline"></div>
</div>
<div class="flex-col no-wrap">
<h3 class="timeline-title">May 22, 2021</h3>
</div>
<div class="flex-col">
<h3 class="timeline-title">Update Name</h3>
<p class="timeline-content">
architecto veritatis molestiae impedit quos sapiente sunt ipsa. Ea
quasi necessitatibus voluptas aut architecto accusamus eligendi
magni.
</p>
</div>
</div>
<div class="flex-container">
<div class="flex-col">
<div class="indicator-icon">
<div class="indicator-icon-inner"></div>
</div>
<div class="indicator-vline"></div>
</div>
<div class="flex-col no-wrap">
<h3 class="timeline-title">May 22, 2021</h3>
</div>
<div class="flex-col">
<h3 class="timeline-title">Update Name</h3>
<p class="timeline-content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste
reprehenderit repellendus, inventore excepturi quibusdam aperiam
necessitatibus magni aliquid. Recusandae at labore facere quidem
perspiciatis sed unde voluptatum. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quasi autem nulla et, distinctio,
architecto veritatis molestiae impedit quos sapiente sunt ipsa. Ea
quasi necessitatibus voluptas aut architecto accusamus eligendi
magni.
</p>
</div>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment