<header> <nav> <ul id="main_nav"> <li class="active all" data-title="all" title="All">All</li> <li class="icon-address active" data-title="life" title="Life Events"></li> <li class="icon-graduation-cap active" data-title="education" title="Education"></li> <li class="icon-briefcase active" data-title="work" title="Work"></li> <li class="icon-user active" data-title="user" title="Additional Info"></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="instructions_container"> Use Keys 'J' and 'K' to navigate through the timeline. </div> <div id="timeline_container"> <header> <figure> <img src="https://placeimg.com/480/480/poeple/sepia"> </figure> <h1>A short resume <br/> of Nicolas Slatiner</h1> </header> <ul> <li class="life_event active"> <div class="event_icn icon-address"></div> <div class="event_content"> <h2>The journey begins</h2> <p> At 6:32am, a healthy baby boy is born in Buenos Aires, Argentina. </p> </div> <div class="event_date"> 25/07/1982 </div> </li> <li class="life_event"> <div class="event_icn icon-address"></div> <div class="event_content"> <h2>Learning to code</h2> <p> Got my first PC for my 13<sup>th</sup> birthday. </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>Markup and little wheels</h2> <p> Joined the science class in Ohel Shem High school, with emphasis on Computer Science and Robotics. There I built the school's first site in HTML and a little robot that extinguishes a small candle. </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>10-4</h2> <p> Recruited to the IDF (Israeli Defense Force). There I learned how to command a tank and a platoon's medical department. </p> </div> <div class="event_date"> 07/2000 - 07/2003 </div> </li> <li class="work_event"> <div class="event_icn icon-briefcase"></div> <div class="event_content"> <h2>Nature Creation</h2> <p> Retail marketing intern of Nature Creation®, Chicago USA. <br/>in charge of sales. </p> </div> <div class="event_date"> 09/2004 - 02/2005 </div> </li> <li class="life_event"> <div class="event_icn icon-address"></div> <div class="event_content"> <h2>See the world</h2> <p> Bought a good pair of hiking shoes and decided to travel through South America. Met my future wife on a beautiful beach in north-east Brasil. </p> </div> <div class="event_date"> 02/2005 - 09/2005 </div> </li> <li class="work_event"> <div class="event_icn icon-briefcase"></div> <div class="event_content"> <h2>Partner Comunications</h2> <p> Data department team manager at Partner Comunications, Israel. Responsible for a team of 20 people, VIP client liaison, Software Q&A. </p> </div> <div class="event_date"> 09/2005 - 08/2008 </div> </li> <li class="education_event"> <div class="event_icn icon-graduation-cap"></div> <div class="event_content"> <h2>Higher learning</h2> <p> Communication and administration studies at the Open University of Isreal. </p> </div> <div class="event_date"> 09/2005 - 07/2008 </div> </li> <li class="life_event"> <div class="event_icn icon-address"></div> <div class="event_content"> <h2>See the world #2</h2> <p> The 'traveling bug' is rooted deep in me. Traveled through India and Nepal. </p> </div> <div class="event_date"> 08/2008 - 12/2008 </div> </li> <li class="life_event"> <div class="event_icn icon-address"></div> <div class="event_content"> <h2>Home is where the heart is</h2> <p> Gathered some nerve and decided to move to Brasil for romantic related reasons. </p> </div> <div class="event_date"> 28/12/2008 </div> </li> <li class="education_event"> <div class="event_icn icon-graduation-cap"></div> <div class="event_content"> <h2>Web mastery</h2> <p> Web master course with emphasis on development at WebBH, Belo Horizonte, MG, Brasil. </p> </div> <div class="event_date"> 05/2009-02/2011 </div> </li> <li class="work_event"> <div class="event_icn icon-briefcase"></div> <div class="event_content"> <h2>Oliver art bar</h2> <p> Founded and managed the Oliver Art Bar, in Belo Horizonte, MG, Brasil, where I was responsible over a team of 8 and a lot of beer. </p> </div> <div class="event_date"> 07/2009 - 01/2011 </div> </li> <li class="work_event"> <div class="event_icn icon-briefcase"></div> <div class="event_content"> <h2>Freelance Developer</h2> <p> Got my first paying web job. Developing templates for Revolutions, Israel. </p> </div> <div class="event_date"> 08/2009 </div> </li> <li class="life_event"> <div class="event_icn icon-address"></div> <div class="event_content"> <h2>Love is all you need.</h2> <p> Married the love of my life. </p> </div> <div class="event_date"> 28/05/2010 </div> </li> <li class="work_event"> <div class="event_icn icon-briefcase"></div> <div class="event_content"> <h2>Front end developer</h2> <p> Joined Domínio Público Comunicação. An advertising agency in Belo Horizonte, MG, Brasil. </p> </div> <div class="event_date"> 04/2011 - Today </div> </li> <li class="user_event"> <div class="event_icn icon-user"></div> <div class="event_content"> <h2>Virtual Identities</h2> <ul> <li><a href="https://www.facebook.com/slatiner" target="_blank">Facebook</a></li> <li><a href="https://br.linkedin.com/pub/nicolas-slatiner/45/610/385/en" target="_blank">LinkedIn</a></li> <li><a href="http://be.net/slatiner/frame" target="_blank" >Behance</a></li> <li><a href="https://codepen.io/slatiner" target="_blank">Codepen</a></li> </ul> </div> <div class="event_date"> </div> </li> <li class="user_event"> <div class="event_icn icon-user"></div> <div class="event_content"> <h2>Additional information</h2> <ul> <li>Civil status: Married</li> <li>Nationalities: Argentinian, Israel</li> <li>Residency: Brazilian</li> <li>Languages: English, Portuguese, Spanish, Hebrew</li> </ul> </div> <div class="event_date"> </div> </li> <li class="user_event"> <div class="event_icn icon-user"></div> <div class="event_content"> <h2>Contact Information</h2> <ul> <li>Phone: +55 31 8816-5008</li> <li>Address: R.Espanha, 571, Sabará - MG, 34590-340, Brazil</li> <li>E-mail: <a href="mailto:nslatiner@gmail.com" target="_blank">nslatiner@gmail.com</a></li> </ul> </div> <div class="event_date"> </div> </li> </ul> </div> <div id="info_container"> i </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> @import url('https://fonts.googleapis.com/css?family=Lobster'); @font-face { font-family: 'fontello'; src: url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.eot"); src: url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.eot?#iefix") format('embedded-opentype'), url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.woff") format('woff'), url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.ttf") format('truetype'), url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.svg#fontello") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fontello'; src: url("data:application/octet-stream;base64,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") format('woff'), url("data:application/octet-stream;base64,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A0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwEUUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCg0FBCuzEBMFBCtZsgQoCUVSRLMKDwYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAA==") format('truetype'); } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'fontello'; 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: '\73'; } /* 's' */ .icon-address:before { content: '\6c'; } /* 'l' */ .icon-down-circled:before { content: '\66'; } /* 'f' */ .icon-down-open:before { content: '\64'; } /* 'd' */ .icon-up-open:before { content: '\70'; } /* 'p' */ .icon-graduation-cap:before { content: '\65'; } /* 'e' */ .icon-user:before { content: '\75'; } /* 'u' */ .icon-briefcase:before { content: '\62'; } /* 'b' */ * { -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body { background:#ebe7e4; color:#6d6b6a; font-size:13px; font-family:helvetica,arial,sans-serif; overflow-y:scroll; } 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:960px; 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:1.2em; 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:960px; margin:120px auto; position:relative; } div#timeline_container header { position:relative; z-index:20; } div#timeline_container header figure { width:200px; height:200px; border-radius:50%; border:5px solid #cdc9c6; overflow:hidden; display:block; margin:0 auto; } div#timeline_container header figure img { height: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 auto; 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:230px; 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:400px; 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; } 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:nth-child(odd) div.event_content { right:-470px; } div#timeline_container > ul > li:nth-child(even) div.event_content { left:-470px; text-align:right } div#timeline_container > ul > li div.event_content:before { content:""; position:absolute; width:20px; height:20px; border-bottom:1px solid #DDDBDA; border-left:1px solid #DDDBDA; top:3em; background:#ebe7e4; margin-top:8px; background:white; } div#timeline_container > ul > li:nth-child(odd) div.event_content:before { left:-11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } div#timeline_container > ul > li:nth-child(even) div.event_content:before { right:-11px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } 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; } 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; width:180px; text-align:right; 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; } 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#timeline_container > ul > li:nth-child(odd) div.event_date {right:60px;} div#timeline_container > ul > li:nth-child(even) div.event_date {left:60px;} 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; } div#info_container:hover { opacity:0.9; } footer { width:960px; margin:2em auto; color:#999; } footer a { color:#444; } footer a.icon-down-circled { text-decoration:none; } //=====================================// //======== Font license info =========// //=====================================// /* ## Entypo Copyright (C) 2012 by Daniel Bruce Author: Daniel Buce License: SIL (http://scripts.sil.org/OFL) Homepage: http://www.entypo.com ## Font Awesome Copyright (C) 2012 by Dave Gandy Author: Dave Gandy License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/) Homepage: https://fortawesome.github.com/Font-Awesome/ ## Web Symbols Copyright (c) 2011 by Just Be Nice studio. All rights reserved. Author: Just Be Nice studio License: SIL (http://scripts.sil.org/OFL) Homepage: http://www.justbenicestudio.com/studio/websymbols/ */ //=====================================// $('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); } } Навигация по записям Interactive Book Set of medical icons
English 
Russian