<div class="timeline">
<div class="year">
<div class="inner">
<span>2016</span>
</div>
</div>
<ul class="days">
<li class="day">
<div class="events">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October (Monday)</div>
</div>
</li>
<li class="day">
<div class="events">
<p>Lorem dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October (Monday)</div>
</div>
</li>
<li class="day">
<div class="events">
<div class="day__img">
<img src="http://placehold.it/400x300" alt="" />
<p class="caption">
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="date">18 October (Monday)</div>
</div>
</li>
<li class="day">
<div class="events">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October (Monday)</div>
</div>
</li>
<li class="day">
<div class="events">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
<div class="date">18 October (Monday)</div>
</div>
</li>
<li class="day">
<div class="events">
<div class="day__img">
<img src="http://placehold.it/400x300" alt="" />
<p class="caption">
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="date">18 October (Monday)</div>
</div>
</li>
</ul>
<div class="year year--end">
<div class="inner">
<span>2017</span>
</div>
</div>
</div>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
font-family: georgia;
}
*, *:before, *:after {
box-sizing: inherit;
}
img {
max-width: 100%;
}
.timeline {
text-align: center;
.year {
display: inline-block;
font-size: 36px;
font-weight: bold;
position: relative;
span {
display: inline-block;
padding-bottom: 6px;
}
&:after {
content: "";
display: block;
width: 80%;
margin: auto;
height: 1px;
background: green;
}
&--end {
&:before {
content: "";
display: block;
width: 80%;
margin: auto;
height: 1px;
background: green;
}
&:after {
content: none;
}
}
}
.days {
list-style-type: none;
margin: 0;
padding: 0;
.day {
width: 100%;
float: left;
.events {
position: relative;
float: left;
border-right: 1px solid green;
padding: 30px;
text-align: right;
width: 50%;
&:after {
content: "";
width: 40%;
display: inline-block;
height: 1px;
background: green;
position: absolute;
right: 0;
}
.date {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
padding: 30px;
text-align: left;
color: green;
font-size: 24px;
white-space: nowrap;
}
.day__img {
margin-right: -30px;
position: relative;
overflow: hidden;
img {
display: block;
float: right;
}
.caption {
position: absolute;
margin: 0;
bottom: 0;
right: 0;
padding: 20px;
background: rgba(#000, 0.7);
color: #fff;
}
}
}
&:nth-child(odd) {
.events {
width: calc(50% + 1px);
float: right;
border-right: 0;
border-left: 1px solid green;
text-align: left;
&:after {
right: auto;
left: 0;
}
.date {
left: auto;
right: 100%;
text-align: right;
}
.day__img {
margin-right: auto;
margin-left: -30px;
img {
float: left;
}
.caption {
right: auto;
left: 0;
}
}
}
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.