Difference between revisions of "Dev/Timeline"

Line 1: Line 1:
 
<html>
 
<html>
 
<!-- Shamelessly stolen from http://codepen.io/christian-fei/pen/BJily -->
 
 
 
<link rel="stylesheet" type="text/css" href="https://2016.igem.org/HQ:CSS/Timeline?action=raw&ctype=text/css">
 
<link rel="stylesheet" type="text/css" href="https://2016.igem.org/HQ:CSS/Timeline?action=raw&ctype=text/css">
  
<!-- Each event is wrapper inside an anchor with the class 'event' -->
+
<div id="tl-year-container">
  <!-- The i-tag inside the anchor creates the little arrow beside an event (see v1.0) -->
+
  
 +
<div id="tl-line"></div>
  
<h1 class='padd'>v2.0</h1>
+
<div class="tl-month-container" id="tl-may">
<ul class='timeline'>
+
<h1 class="tl-month-name">May</h1>
  <li class="year first">2013</li>
+
  <li class='event offset-first'>
+
    Something amazing happened today, but it's a secret
+
  </li>
+
  <li class='event' href="#">
+
    Timeline.css is <b>dynamic</b>, <b>responsive</b> and optimized to <b>demonstrate events</b> in your life in a <b>simple and clear</b> way
+
  </li>
+
  <li class="event">
+
    <a href="http://christian-fei.com" title="christian fei">
+
    made with &lt;3 by <img src="https://s3-eu-west-1.amazonaws.com/cf.img/var/face.svg" alt="christian fei"/>
+
    </a>
+
  </li>
+
  <li class="event">
+
  <a href="http://codepen.io/christian-fei/pen/BJily">
+
    Open source project on codepen.io
+
    <img src="http://davidwalsh.name/demo/codepenLogo.png" alt=""/>
+
  </a>
+
  </li>
+
  <li class='event'>
+
    Look, a sleepy kitten: <br/>
+
    <img src="http://ih2.redbubble.net/image.10311838.0354/flat,550x550,075,f.jpg"/>
+
    <a href='http://ih2.redbubble.net/image.10311838.0354/flat,550x550,075,f.jpg'>&copy;</a>
+
  </li>
+
  <li class="year">2012</li>
+
<li class="event offset-first">
+
<p>To infinity  ... </p>
+
    <img class='centered' src="http://upload.wikimedia.org/wikipedia/en/7/75/Buzz-lightyear-toy-story-3-wallpaper.jpg" alt=""/>
+
<a href='http://upload.wikimedia.org/wikipedia/en/7/75/Buzz-lightyear-toy-story-3-wallpaper.jpg'>&copy;</a>
+
</li>
+
<li class="event">
+
<p>... and beyond!</p>
+
    <img class='centered' src="http://brandstyle.com.br/wp-content/uploads/2012/05/Woody-7.jpg" alt=""/>
+
<a href='http://brandstyle.com.br/wp-content/uploads/2012/05/Woody-7.jpg'>&copy;</a>
+
</li>
+
</ul>
+
  
 +
Cat ipsum dolor sit amet. If it fits, i sits swat at dog, or destroy couch, or curl up on your pillow, yet shake treat bag jump off balcony, onto stranger's head. Stare at ceiling eat and than sleep on your face refuse to leave cardboard box so spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for white cat sleeps on a black shirt yet my left donut is missing, as is my right wake up human for food at 4am. Intently sniff hand climb a tree, wait for a fireman jump to fireman then scratch his face spit up on light gray carpet instead of adjacent linoleum. Chase red laser dot asdflkjaertvlkjasntvkjn (sits on keyboard) but purr for no reason and roll on the floor purring your whiskers off, stick butt in face brown cats with pink ears lounge in doorway. Rub face on owner.
 +
</div>
 +
</div>
 
</html>
 
</html>

Revision as of 20:23, 9 December 2015

May

Cat ipsum dolor sit amet. If it fits, i sits swat at dog, or destroy couch, or curl up on your pillow, yet shake treat bag jump off balcony, onto stranger's head. Stare at ceiling eat and than sleep on your face refuse to leave cardboard box so spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for white cat sleeps on a black shirt yet my left donut is missing, as is my right wake up human for food at 4am. Intently sniff hand climb a tree, wait for a fireman jump to fireman then scratch his face spit up on light gray carpet instead of adjacent linoleum. Chase red laser dot asdflkjaertvlkjasntvkjn (sits on keyboard) but purr for no reason and roll on the floor purring your whiskers off, stick butt in face brown cats with pink ears lounge in doorway. Rub face on owner.