Timeline

A responsive and accessible way to display timeline information.

Month/year

Milestone

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis nunc sed augue lacus. Dis parturient montes nascetur ridiculus mus mauris.

Month/year

Milestone

Month/year

Milestone

Month/year

Milestone

Month/year

Milestone

Code

<style type="text/css">
	.timeline .timeline-item::after, .timeline .timeline-item::before {
	  clear: both;
	  content: '';
	  display: block;
	  width: 100%;
		}
	.timeline {
	  padding: 0 10px;
	  position: relative;
	  transition: all 0.25s ease-in;
	  width: 100%;
	}
	.timeline::before {
	  background: #85754d;
	  content: '';
	  height: 100%;
	  left: 50%;
	  position: absolute;
	  top: 0;
	  width: 3px;
	}
	.timeline::after {
	  clear: both;
	  content: '';
	  display: table;
	  width: 100%;
	}
	.timeline .timeline-item {
	  margin-bottom: 0;
	  position: relative;
	}
	.timeline .timeline-item .timeline-icon {
	  background: #85754d;
	  border-radius: 50%;
	  height: 50px;
	  left: 50%;
	  margin-left: -23px;
	  overflow: hidden;
	  position: absolute;
	  top: 0;
	  width: 50px;
	}
	.timeline .timeline-item .timeline-content {
	  padding: 10px;
	  text-align: right;
	  transition: all 0.25s ease-in;
	  width: 45%;
	  background: transparent;
	}
	.timeline .timeline-item .timeline-content p {
	  margin-bottom: 0;
	}
	.timeline .timeline-item .timeline-content .timeline-content-date {
		font-size: 20px;
	  margin-bottom: 0;
	}
	.timeline .timeline-item .timeline-content .timeline-content-month {
	  text-transform: uppercase;
	  font-weight: 400;
	}
	.timeline .timeline-item .timeline-content.right {
	  float: right;
	  text-align: left;
	}

	@media screen and (max-width: 39.9375em) {
	  .timeline {
		margin: 30px;
		padding: 0;
		width: 90%;
	  }
	  .timeline::before {
		left: 0;
	  }
	  .timeline .timeline-item .timeline-content {
		float: right;
		text-align: left;
		width: 90%;
	  }
	  .timeline .timeline-item .timeline-content::before, .timeline .timeline-item .timeline-content.right::before {
		border-left: 0;
		border-right: 7px solid #85754d;
		left: 10%;
		margin-left: -6px;
	  }
	  .timeline .timeline-item .timeline-icon {
		left: 0;
	  }
	}
</style>

<div class="timeline">
	<div class="timeline-item">
		<!----update the FontAwesome icon here---->
		<div class="timeline-icon"><i class="p-2 text-white fas fa-2x fa-cog">&nbsp;</i></div>
		<div class="timeline-content">
			<h3 class="timeline-content-date text-secondary">Month/year</h3>
			<h4 class="mt-2 text-uppercase">Milestone</h4>
			<p>Milestone description...</p>	
		</div>
	</div>

	<div class="timeline-item">
		<!----update the FontAwesome icon here---->
		<div class="timeline-icon"><i class="p-2 text-white fas fa-2x fa-cog">&nbsp;</i></div>
		<div class="timeline-content right">
		<h3 class="timeline-content-date text-secondary">Month/year</h3>
		<h4 class="mt-2 text-uppercase">Milestone</h4>
		<p>Milestone description...</p>
		</div>
	</div>

	<div class="timeline-item">
		<!----update the FontAwesome icon here---->
		<div class="timeline-icon"><i class="p-2 text-white fas fa-2x fa-cog">&nbsp;</i></div>
		<div class="timeline-content right">
		<h3 class="timeline-content-date text-secondary">Month/year</h3>
		<h4 class="mt-2 text-uppercase">Milestone</h4>
		<p>Milestone description...</p>
		</div>
	</div>

</div>