<div class="timeline">
<div class="entry">
<div class="title">
<h3>2014 - Present</h3>
<p>Title, Company</p>
</div>
<div class="body">
<p>Voluptatibus veniam ea reprehenderit atque reiciendis non laborum adipisci ipsa pariatur omnis.</p>
<ul>
<li>Rerum sit libero possimus amet excepturi</li>
<li>Exercitationem enim dolores sunt praesentium dolorum praesentium</li>
<li>Modi aut dolores dignissimos sequi sit ut aliquid molestias deserunt illo</li>
</ul>
</div>
</div>
<div class="entry">
<div class="title">
<h3>2010 - Present</h3>
<p>Title, Company</p>
</div>
<div class="body">
<p>Voluptatibus veniam ea reprehenderit atque reiciendis non laborum adipisci ipsa pariatur omnis.</p>
<ul>
<li>Rerum sit libero possimus amet excepturi</li>
<li>Exercitationem enim dolores sunt praesentium dolorum praesentium</li>
<li>Modi aut dolores dignissimos sequi sit ut aliquid molestias deserunt illo</li>
</ul>
</div>
</div>
<div class="entry">
<div class="title">
<h3>2009 - 2010</h3>
<p>Title, Company</p>
</div>
<div class="body">
<p>Voluptatibus veniam ea reprehenderit atque reiciendis non laborum adipisci ipsa pariatur omnis.</p>
<ul>
<li>Rerum sit libero possimus amet excepturi</li>
<li>Exercitationem enim dolores sunt praesentium dolorum praesentium</li>
<li>Modi aut dolores dignissimos sequi sit ut aliquid molestias deserunt illo</li>
</ul>
</div>
</div>
<div class="entry">
<div class="title">
<h3>2006 - 2008</h3>
<p>Title, Company</p>
</div>
<div class="body">
<p>Voluptatibus veniam ea reprehenderit atque reiciendis non laborum adipisci ipsa pariatur omnis.</p>
<ul>
<li>Rerum sit libero possimus amet excepturi</li>
<li>Exercitationem enim dolores sunt praesentium dolorum praesentium</li>
<li>Modi aut dolores dignissimos sequi sit ut aliquid molestias deserunt illo</li>
</ul>
</div>
</div>
</div>
$container-shadow: 0.5rem 0.5rem 2rem 0 rgba(black, 0.2);
$gutter: 30px;
$border-width: 4px;
$dot-diameter: 8px;
body {
background: linear-gradient(55deg,#4E75B9 30%,#5CBF98 90%);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100vw;
margin: 0;
padding: 12vh 100px;
font-family: 'Source Sans Pro', arial, sans-serif;
font-weight: 300;
color: #333;
box-sizing: border-box;
* {
box-sizing: border-box;
}
}
.timeline {
width:100%;
max-width:800px;
background:#fff;
padding: 100px 50px;
position: relative;
box-shadow: $container-shadow;
&:before {
content: '';
position: absolute;
top: 0px;
left:calc(33% + 15px); //$gutter/2
bottom: 0px;
width: $border-width;
background: #ddd;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.entry {
clear: both;
text-align: left;
position: relative;
.title {
margin-bottom: .5em;
float: left;
width: 33%;
padding-right: $gutter;
text-align: right;
position: relative;
&:before {
content: '';
position: absolute;
width: $dot-diameter;
height: $dot-diameter;
border: $border-width solid salmon;
background-color:#fff;
border-radius:100%;
top: 15%;
right: -$dot-diameter;
z-index: 99;
}
h3 {
margin: 0;
font-size: 120%;
}
p {
margin: 0;
font-size: 100%;
}
}
.body {
margin: 0 0 3em;
float: right;
width: 66%;
padding-left: $gutter;
p {
line-height: 1.4em;
&:first-child {
margin-top: 0;
font-weight: 400;
}
}
ul {
color:#aaa;
padding-left: 0;
list-style-type: none;
li:before {
content: "–";
margin-right: .5em;
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.