<div class="wrapper">
<div class="timelineBox">
<div class="timelineHeader">
<h3>Timeline</h3>
<span>WORK EXPERIENCE</span>
</div>
<div class="timelineBody">
<ul class="timeline">
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Jun 2015 to Jan 2017</div>
<div class="timelineWork">On-site Network Support Enginner<small>OmniPrime Marketing, inc.</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Jan 2014 to May 2015</div>
<div class="timelineWork">IT Support / Web Designer & Developer<small>IT.Resources Corporation (ITRC)</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Nov 2012 to Oct 2014</div>
<div class="timelineWork">OJT Graphic Artist / IT Support<small>Lima Gulf Industrial Trading</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Oct 2006 to Present</div>
<div class="timelineWork">Art Direction, Graphic Design, Web Development<small>Independent / Freelance</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Jun 2015 to Jan 2017</div>
<div class="timelineWork">On-site Network Support Enginner<small>OmniPrime Marketing, inc.</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Jan 2014 to May 2015</div>
<div class="timelineWork">IT Support / Web Designer & Developer<small>IT.Resources Corporation (ITRC)</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Nov 2012 to Oct 2014</div>
<div class="timelineWork">OJT Graphic Artist / IT Support<small>Lima Gulf Industrial Trading</small></div>
</li>
<li>
<div class="timelineDot"></div>
<div class="timelineDate">Oct 2006 to Present</div>
<div class="timelineWork">Art Direction, Graphic Design, Web Development<small>Independent / Freelance</small></div>
</li>
</ul>
</div>
</div>
</div>
<div class="ajay">
<a href="https://codepen.io/AjayRawatCodepen/" target="_blank">See more pens</a>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
box-sizing: inherit;
font-family: Lato, sans-serif;
font-size: 62.5%;
line-height: 1.5;
}
body {
font-family: inherit;
font-size: 1.6rem;
font-weight: normal;
line-height: inherit;
background: #efefef;
}
.wrapper {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.timelineBox {
width: 350px;
height: auto;
overflow: hidden;
margin: 5rem auto;
background: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.02);
}
.timelineHeader {
padding: 3rem 2rem;
background: #e91e63;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 4px 0 rgba(0, 0, 0, 0.02);
position: relative;
z-index: 3;
}
.timelineHeader h3 {
font-family: inherit;
font-size: 2rem;
letter-spacing: 0.1rem;
color: #fff;
font-weight: normal;
margin: 0;
}
.timelineHeader h3 + span {
font-size: 1.2rem;
letter-spacing: 0.2rem;
font-weight: normal;
color: #fff;
}
.timelineBody {
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
.timelineBody .timeline {
padding: 3rem 2rem !important;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 2;
}
.timelineBody .timeline:before {
content: '';
position: absolute;
width: 4px;
background: #fff;
top: 0;
right: auto;
left: 25px;
height: 100%;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.085), 0 1px 0 rgba(0, 0, 0, 0.02);
}
.timelineBody .timeline li {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 2rem;
position: relative;
}
.timelineBody .timeline .timelineDot {
height: 1.5rem;
width: 1.5rem;
background: #fff;
border-radius: 2rem;
flex: 0 0 1.5rem;
margin-right: auto;
margin-top: 6px;
box-shadow: 0 0 8px #56cb5f;
}
.timelineBody .timeline .timelineDot::after {
content: '';
position: absolute;
top: 9px;
left: 3px;
height: 9px;
width: 9px;
background: #56cb5f;
border-radius: 50%;
}
.timelineBody .timeline .timelineDate {
font-size: 1.2rem;
flex: 0 0 80px;
padding: 0.2rem;
}
.timelineBody .timeline .timelineWork {
font-family: inherit;
font-size: 1.4rem;
margin-left: auto;
flex: 0 0 170px;
}
.timelineBody .timeline .timelineWork small {
display: block;
color: #bdbdbd;
}
.timelineBody::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
.timelineBody::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
.timelineBody::-webkit-scrollbar-thumb {
background-color: #e91e63;
}
.ajay {
font-family: sans-serif;
font-size: 14px;
position: fixed;
right: 20px;
bottom: 10px;
}
.ajay a {
text-decoration: none;
color: #333;
}
.ajay a:hover {
text-decoration: underline;
color: #000;
}