[html]
<style>
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: fontawesome;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  opacity: 0.8;
/* fix buttons height, for twitter bootstrap */
  line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
  margin-left: 0.2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-star-1:before { content: '\f087'; } /* 's' */
.icon-address:before { content: '\f02c'; } /* 'l' */
.icon-down-circled:before { content: '\f01a'; } /* 'f' */
.icon-down-open:before { content: '\f055'; } /* 'd' */
.icon-up-open:before { content: '\f0c6'; } /* 'p' */
.icon-graduation-cap:before { content: '\f072'; } /* 'e' */
.icon-user:before { content: '\f19c'; } /* 'u' */
.icon-briefcase:before { content: '\f169'; } /* 'b' */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body > header {
width:100%;
position:fixed;
z-index:30;
background:#E0DCD9;
border-bottom:1px solid #d5d1cf;
box-shadow:0 1px 1px white;
top:0;
left:0;
}

body > header nav {
width:760px;
margin:0 auto;
overflow:hidden;
}
body > header nav ul {
margin:0 0 0 -65px;
padding:0;
text-align:center;
font-size: 0em;
    letter-spacing: 0px;
    word-spacing: 0px;
}
body > header nav li {
display:inline-block;
cursor:pointer;
border-left:1px solid #ebe7e4;
border-top:1px solid #E0DCD9;
box-shadow:-1px 0px 1px #d5d1cf;
padding:;
font-size:18px;
}
body > header nav li:hover {
background:#d5d1cf;
}
body > header nav li:first-child {
border-left:1px solid #E0DCD9;
box-shadow:-1px 0px 1px #E0DCD9;
text-shadow:1px 1px 1px #fff;
}
body > header nav li:active,body > header nav li.active {
color:white;
}
body > header nav li.all:active,body > header nav li.all.active {
text-shadow:1px 1px 1px #444;
}
body > header nav li.icon-address:active,body > header nav li.icon-address.active {
background:#0ED1E7;
border-left:1px solid #0cb4c6;
border-top:1px solid #0cb4c6;
box-shadow:none;
}
body > header nav li.icon-graduation-cap:active,body > header nav li.icon-graduation-cap.active {
background:#EB2690;
border-left:1px solid #bf1f75;
border-top:1px solid #bf1f75;
box-shadow:none;
}
body > header nav li.icon-briefcase:active,body > header nav li.icon-briefcase.active {
background:#E76B0E;
border-left:1px solid #B85307;
border-top:1px solid #B85307;
box-shadow:none;
}
body > header nav li.icon-star-1:active,body > header nav li.icon-star-1.active {
background:#5E6297;
border-left:1px solid #333;
border-top:1px solid #333;
box-shadow:none;
}
body > header nav li.icon-user:active,body > header nav li.icon-user.active {
background:#454545;
border-left:1px solid #333;
border-top:1px solid #333;
box-shadow:none;
}
body > header nav ul#nav_ctrl {
position:absolute;
top:0;
right:0;
}

div#timeline_container {
width:760px;
margin:40px auto;
position:relative;
}
div#timeline_container header {
position:relative;
z-index:20;
}
div#timeline_container header figure {
width:600px;
height:100px;
border-radius:;
border:5px solid #cdc9c6;
overflow:hidden;
display:block;
margin:0 auto;
}
div#timeline_container header figure img {
width:100%;           
}
div#timeline_container header h1 {
position:absolute;
top:20px;
right:80px;
font-family: 'Lobster', cursive;
font-size:2.8em;
text-shadow:2px 2px 1px #fff;
font-weight:normal;
}
div#timeline_container > ul {
position:relative;
width:4px;
background:#cdc9c6;
border-right:1px solid white;
margin:0 140px;
padding:6em 0 0;
list-style:none;         
}
div#timeline_container > ul:after {
content:"";
width:15px;
height:15px;
border-radius:50%;
background:#cdc9c6;
box-shadow:1px 1px 1px white;
position:absolute;
bottom:0;
left:-6px;
}
div#timeline_container > ul > li {
position:relative;
padding:.3em 0;
min-height:130px;
cursor:pointer;

-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
div#timeline_container > ul > li.hidden {
position:absolute;
top:-500px;
}
div#timeline_container > ul > li div {
position:absolute;
}
div#timeline_container > ul li > div.event_icn {
padding:0.3em;
font-size:1.7em;
border-radius:50%;
background:#ebe7e4;
border:3px solid #cdc9c6;
margin-left:-22px;
color:rgba(85,86,86,0.3);
box-shadow:1px 1px 1px white;

-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

div#timeline_container > ul > li:hover div.event_icn,div#timeline_container > ul li.active div.event_icn{color:white;}

div#timeline_container > ul > li.life_event div.event_icn { background:#bde3e7;}
div#timeline_container > ul li.life_event:hover div.event_icn,div#timeline_container > ul li.life_event.active div.event_icn {background:#0ED1E7}

div#timeline_container > ul > li.education_event div.event_icn { background:#eb98c5}
div#timeline_container > ul > li.education_event:hover div.event_icn,div#timeline_container > ul li.education_event.active div.event_icn { background:#EB2690}

div#timeline_container > ul > li.work_event div.event_icn { background:#e7b793}
div#timeline_container > ul > li.work_event:hover div.event_icn,div#timeline_container > ul li.work_event.active div.event_icn { background:#E76B0E}

div#timeline_container > ul > li.user_event div.event_icn {background:#A2A2A2}
div#timeline_container > ul > li.user_event:hover div.event_icn,div#timeline_container > ul li.user_event.active div.event_icn { background:#454545}

div#timeline_container > ul > li.portfolio_event div.event_icn {
background:#5E6297
}
div#timeline_container > ul > li.portfolio_event:hover div.event_icn,div#timeline_container > ul li.portfolio_event.active div.event_icn { background:#5E6297}

div#timeline_container > ul > li div.event_content {
width:480px;
padding:1em 2em 1.3em;
border:1px solid #DDDBDA;
border-radius:10px;
top:-2em;
opacity:0.3;
background:white;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
        left: 57px;
}
div#timeline_container > ul > li div.event_content a{color:#999;}

div#timeline_container > ul > li:hover div.event_content,div#timeline_container > ul li.active div.event_content {
opacity:1;
}

div#timeline_container > ul > li div.event_content:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: -20px;
margin-top: 8px;
background: #cdc9c6;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
z-index: -5;
}

div#timeline_container > ul > li div.event_content h2 {
margin:0.3em 0;
padding:0;
text-transform:capitalize;
font-size:1.4em;
}
div#timeline_container > ul > li div.event_content p {
margin:0;
padding:0;
line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}

div#timeline_container > ul > li div.event_content ul {
margin:0;
padding:0;
list-style:none;
line-height:1.5em;
}

div#timeline_container > ul > li div.event_date {
top:1em;
text-align:left;
font-size:1.2em;
text-shadow:1px 1px 1px white;
opacity:0.3;
font-weight:bold;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
margin-left: -170px;
display: block;
width: 120px;
}
div#timeline_container > ul > li div.event_date a {
margin:0;
padding:0;
line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}
div#timeline_container > ul > li:nth-child(even) div.event_date {text-align:left;}

div#timeline_container > ul > li:hover div.event_date,div#timeline_container > ul li.active div.event_date {opacity:0.9;}

div#instructions_container {
position:fixed;
padding:2em;
width:300px;
bottom:2em;
right:2em;
line-height:1.4em;
background:#FDFDBD;
border-radius:10px;
border:1px solid #DDDBDA;
z-index:40;
font-size:0.9em;
color:black;
line-height:1.6em;
}
div#info_container{
position:fixed;
bottom:2em;
right:2em;
border-radius:50%;
color:#ebe7e4;
background:#6d6b6a;
opacity:0.3;
cursor:pointer;
width:22px;
font-size:14px;
height:22px;
padding-top:2px;
text-align:center;
font-family:'lobster','cursive';
display:none;
}

</style>
<script>
$('nav ul#main_nav').on('click','li',function(){
var $type=$(this).attr('data-title');
$('nav ul#main_nav li').removeClass('active')
if ($type=='all') {
    $('nav ul#main_nav li').addClass('active');
    $('div#timeline_container >ul> li').removeClass('hidden');
    $('div#timeline_container >ul> li').removeClass('active');
    $($('div#timeline_container >ul> li')[0]).addClass('active');
} else {
    $(this).addClass('active');
    $('div#timeline_container >ul> li').addClass('hidden');
    $('div#timeline_container >ul> li.'+$type+'_event').removeClass('hidden');
    $('div#timeline_container >ul> li').removeClass('active');
    $($('div#timeline_container >ul> li.'+$type+'_event')[0]).addClass('active');
}
   
});

$(document).on('scroll',function(){
$('div#instructions_container').fadeOut('fast');
$('div#info_container').fadeIn('fast');
});
$(document).on('click','div#info_container',function(){
$('div#instructions_container').fadeIn('fast');
$('div#info_container').fadeOut('fast');
});

$(document).on('click','li.icon-down-open',function(){
scrollToNext();
});

$(document).on('click','li.icon-up-open',function(){
scrollToPrev();
});

$(document).on('keypress',function(e){
if(e.which==106) {
    scrollToNext();
} else if(e.which==107) {
    scrollToPrev();
}
});

$('div#timeline_container').on('click','li', function(){
showNext($(this));
});

function showNext(li){
var $itms=$('div#timeline_container li');
$itms.removeClass('active');
$(li).addClass('active');
$('html,body').stop().animate({ scrollTop: $(li).offset().top-$(li).height()}, 500,function(){
    $('html,body').stop();
});
}

function scrollToNext() {
var $itms=$('div#timeline_container > ul > li');
var $current=$itms.index($('div#timeline_container li.active'));

if ($($itms[$current+1]).length>0 && !$($itms[$current+1]).hasClass('hidden')) {
    $itms.removeClass('active');
    $($itms[$current+1]).addClass('active');
    $('html,body').stop().animate({ scrollTop: $($itms[$current+1]).offset().top-$($itms[$current+1]).height()}, 500);
} else {
    $('html,body').stop().animate({ scrollTop: $(document).height()}, 500);
}
}
function scrollToPrev() {
var $itms=$('div#timeline_container > ul > li');
var $current=$itms.index($('div#timeline_container li.active'));

if ($($itms[$current-1]).length>0 && !$($itms[$current-1]).hasClass('hidden')) {
    $itms.removeClass('active');
    $($itms[$current-1]).addClass('active');
    $('html,body').stop().animate({ scrollTop: $($itms[$current-1]).offset().top-$($itms[$current-1]).height()}, 500);
} else {
    $('html,body').stop().animate({ scrollTop: 0}, 500);
}
}

</script>

<header>
<nav>
    <ul id="main_nav">
    <li class="active all" data-title="all" title="Весь список">All</li>
    <li class="icon-address active" data-title="life" title="Настоящее"></li>
    <li class="icon-graduation-cap active" data-title="education" title="Прошлое"></li>
    <li class="icon-briefcase active" data-title="work" title="Альта"></li>
    <li class="icon-user active" data-title="user" title="Незавершенное"></li>
   
    </ul>
    <ul id="nav_ctrl">
    <li class="icon-up-open" data-title="Next"></li>
    <li class="icon-down-open" data-title="Previous"></li>
    </ul>
</nav>
</header>

<div id="timeline_container">
<header>
    <figure>
    <img src="https://wallpaper.dog/large/20514532.jpg">
    </figure>
    <h1>Хронология <br/> персонажа такого-то</h1>
</header>
<ul>
    <li class="life_event active">
    <div class="event_icn icon-address"></div>
    <div class="event_content">
        <h2>001 Король-лягушонок или <a href="#">Железный Генрих</a></h2>
        <p>
        В стародавние времена, когда заклятья ещё помогали, жил-был на свете король; все дочери были у него красавицы, но самая младшая была так прекрасна, что даже солнце, много видавшее на своем веку, и то удивлялось, сияя на её лице.

        </p>

    </div>
    <div class="event_date">
        25/07/99999
                        <a href="#">Persones</a>, <a href="">Persones</a>,<a href="">Persones</a>
    </div>
    </li>

    <li class="life_event">
    <div class="event_icn icon-address"></div>
    <div class="event_content">
        <h2>002 Дружба кошки и мышки</h2>
        <p>
        Кошка познакомилась с мышкой и столько пела ей про свою великую любовь и дружбу, что мышка наконец согласилась поселиться с нею в одном доме и завести общее хозяйство. "Да, вот к зиме нужно бы нам наготовить припасов, а не то голодать придется, - сказала кошка. - Ты, мышка, не можешь ведь всюду ходить. Того гляди, кончишь тем, что в мышеловку угодишь."
        </p>
    </div>
    <div class="event_date">
        25/07/1995
    </div>
    </li>

    <li class="education_event">
    <div class="event_icn icon-graduation-cap"></div>
    <div class="event_content">
        <h2>003 Дитя Марии (Приемыш Богоматери)</h2>
        <p>
        На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
        </p>
    </div>
    <div class="event_date">
        01/09/1997
    </div>
    </li>

    <li class="work_event">
    <div class="event_icn icon-briefcase"></div>
    <div class="event_content">
        <h2>004 Сказка о том, кто ходил страху учиться</h2>
        <p>
        Один отец жил с двумя сыновьями. Старший был умен, сметлив, и всякое дело у него спорилось в руках, а младший был глуп, непонятлив и ничему научиться не мог.<br>
Люди говорили, глядя на него: "С этим отец еще не оберется хлопот!" Когда нужно было сделать что-нибудь, все должен был один старший работать; но зато он был робок, и когда его отец за чем-нибудь посылал позднею порой, особливо ночью, и если к тому же дорога проходила мимо кладбища или иного страшного места, он отвечал: "Ах, нет, батюшка, не пойду я туда! Уж очень боязно мне."
        </p>
    </div>
    <div class="event_date">
        07/2000 - 07/2003
    </div>
    </li>

<li class="user_event">
    <div class="event_icn icon-user"></div>
    <div class="event_content">
        <h2>005 Волк и семеро козлят</h2>
        <p>
        Жила-была старая коза. Было у ней семеро козлят, и она их так любила, как может любить своих детей только мать. Раз собралась она идти в лес, корму принести; вот созвала она всех своих семерых деток и говорит:
        </p>
    </div>
    <div class="event_date">
Дата
    </div>
    </li>

    <li class="education_event">
    <div class="event_icn icon-graduation-cap"></div>
    <div class="event_content">
        <h2>003 Дитя Марии (Приемыш Богоматери)</h2>
        <p>
        На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
        </p>
    </div>
    <div class="event_date">
        01/09/1997
    </div>
    </li>

</ul>
</div>

<!-- of #timeline_container -->

[/html]