Difference between revisions of "Team:Oxford/Timeline"

Line 1: Line 1:
 
{{:Team:Oxford/Templates/Navi}}
 
{{:Team:Oxford/Templates/Navi}}
−
 
−
 
−
 
−
 
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<style media="screen" type="text/css">
−
<script src="//jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>
+
.timeline {
−
<script src="https://2016.igem.org/Template:Oxford/jQuery"></script>
+
  list-style: none;
−
<script type="text/javascript">
+
   padding: 20px 0 20px;
−
jQuery(document).ready(function($){
+
−
var $timeline_block = $('.cd-timeline-block');
+
−
 
+
−
//hide timeline blocks which are outside the viewport
+
−
$timeline_block.each(function(){
+
−
if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
+
−
$(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
+
−
}
+
−
});
+
−
 
+
−
//on scolling, show/animate timeline blocks when enter the viewport
+
−
$(window).on('scroll', function(){
+
−
$timeline_block.each(function(){
+
−
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
+
−
$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
+
−
}
+
−
});
+
−
});
+
−
});
+
−
</script>
+
−
 
+
−
<style class="cp-pen-styles">/* --------------------------------
+
−
 
+
−
Primary style
+
−
 
+
−
-------------------------------- */
+
−
html * {
+
−
  -webkit-font-smoothing: antialiased;
+
−
  -moz-osx-font-smoothing: grayscale;
+
−
}
+
−
 
+
−
*, *:after, *:before {
+
−
  -webkit-box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
  box-sizing: border-box;
+
−
}
+
−
 
+
−
body {
+
−
  font-size: 100%;
+
−
  font-family: "Droid Serif", serif;
+
−
  color: #7f8c97;
+
−
  background-color: #e9f0f5;
+
−
}
+
−
 
+
−
a {
+
−
  color: #acb7c0;
+
−
  text-decoration: none;
+
−
   font-family: "Open Sans", sans-serif;
+
−
}
+
−
 
+
−
img {
+
−
  max-width: 100%;
+
−
}
+
−
 
+
−
h1, h2 {
+
−
  font-family: "Open Sans", sans-serif;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
/* --------------------------------
+
−
 
+
−
Modules - reusable parts of our design
+
−
 
+
−
-------------------------------- */
+
−
.cd-container {
+
−
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
+
−
  width: 90%;
+
−
  max-width: 1170px;
+
−
  margin: 0 auto;
+
−
}
+
−
.cd-container::after {
+
−
  /* clearfix */
+
−
  content: '';
+
−
  display: table;
+
−
  clear: both;
+
−
}
+
−
 
+
−
/* --------------------------------
+
−
 
+
−
Main components
+
−
 
+
−
-------------------------------- */
+
−
header {
+
−
  height: 200px;
+
−
  line-height: 200px;
+
−
  text-align: center;
+
−
  background: #303e49;
+
−
}
+
−
header h1 {
+
−
  color: #ffffff;
+
−
  font-size: 18px;
+
−
  font-size: 1.125rem;
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  header {
+
−
    height: 300px;
+
−
    line-height: 300px;
+
−
  }
+
−
  header h1 {
+
−
    font-size: 24px;
+
−
    font-size: 1.5rem;
+
−
  }
+
−
}
+
−
 
+
−
#cd-timeline {
+
 
   position: relative;
 
   position: relative;
−
  padding: 2em 0;
 
−
  margin-top: 2em;
 
−
  margin-bottom: 2em;
 
 
}
 
}
−
#cd-timeline::before {
+
.timeline:before {
−
   /* this is the vertical line */
+
   top: 0;
−
   content: '';
+
   bottom: 0;
 
   position: absolute;
 
   position: absolute;
−
   top: 0;
+
   content: " ";
−
   left: 18px;
+
   width: 3px;
−
   height: 100%;
+
   background-color: #eeeeee;
−
   width: 4px;
+
   left: 50%;
−
   background: #d7e4ed;
+
   margin-left: -1.5px;
 
}
 
}
−
@media only screen and (min-width: 1170px) {
+
.timeline > li {
−
   #cd-timeline {
+
   margin-bottom: 20px;
−
    margin-top: 3em;
+
−
    margin-bottom: 3em;
+
−
  }
+
−
  #cd-timeline::before {
+
−
    left: 50%;
+
−
    margin-left: -2px;
+
−
  }
+
−
}
+
−
 
+
−
.cd-timeline-block {
+
 
   position: relative;
 
   position: relative;
−
  margin: 2em 0;
 
 
}
 
}
−
.cd-timeline-block::after {
+
.timeline > li:before,
−
  clear: both;
+
.timeline > li:after {
−
   content: "";
+
   content: " ";
 
   display: table;
 
   display: table;
 
}
 
}
−
.cd-timeline-block:first-child {
+
.timeline > li:after {
−
   margin-top: 0;
+
   clear: both;
 
}
 
}
−
.cd-timeline-block:last-child {
+
.timeline > li:before,
−
   margin-bottom: 0;
+
.timeline > li:after {
 +
   content: " ";
 +
  display: table;
 
}
 
}
−
@media only screen and (min-width: 1170px) {
+
.timeline > li:after {
−
  .cd-timeline-block {
+
   clear: both;
−
    margin: 4em 0;
+
−
  }
+
−
  .cd-timeline-block:first-child {
+
−
    margin-top: 0;
+
−
   }
+
−
  .cd-timeline-block:last-child {
+
−
    margin-bottom: 0;
+
−
  }
+
 
}
 
}
−
 
+
.timeline > li > .timeline-panel {
−
.cd-timeline-img {
+
   width: 46%;
−
   position: absolute;
+
   float: left;
−
   top: 0;
+
   border: 1px solid #d4d4d4;
−
  left: 0;
+
   border-radius: 2px;
−
   width: 40px;
+
   padding: 20px;
−
  height: 40px;
+
−
   border-radius: 50%;
+
−
  box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+
−
}
+
−
.cd-timeline-img img {
+
−
  display: block;
+
−
  width: 24px;
+
−
   height: 24px;
+
 
   position: relative;
 
   position: relative;
−
   left: 50%;
+
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
−
  top: 50%;
+
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
−
  margin-left: -12px;
+
−
   margin-top: -12px;
+
 
}
 
}
−
.cd-timeline-img.cd-picture {
+
.timeline > li > .timeline-panel:before {
−
   background: #75ce66;
+
   position: absolute;
 +
  top: 26px;
 +
  right: -15px;
 +
  display: inline-block;
 +
  border-top: 15px solid transparent;
 +
  border-left: 15px solid #ccc;
 +
  border-right: 0 solid #ccc;
 +
  border-bottom: 15px solid transparent;
 +
  content: " ";
 
}
 
}
−
.cd-timeline-img.cd-movie {
+
.timeline > li > .timeline-panel:after {
−
  background: #c03b44;
+
   position: absolute;
−
}
+
   top: 27px;
−
.cd-timeline-img.cd-location {
+
   right: -14px;
−
  background: #f0ca45;
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  .cd-timeline-img {
+
−
    width: 60px;
+
−
    height: 60px;
+
−
    left: 50%;
+
−
    margin-left: -30px;
+
−
    /* Force Hardware Acceleration in WebKit */
+
−
    -webkit-transform: translateZ(0);
+
−
    -webkit-backface-visibility: hidden;
+
−
  }
+
−
  .cssanimations .cd-timeline-img.is-hidden {
+
−
    visibility: hidden;
+
−
  }
+
−
  .cssanimations .cd-timeline-img.bounce-in {
+
−
    visibility: visible;
+
−
    -webkit-animation: cd-bounce-1 0.6s;
+
−
    -moz-animation: cd-bounce-1 0.6s;
+
−
    animation: cd-bounce-1 0.6s;
+
−
  }
+
−
}
+
−
 
+
−
@-webkit-keyframes cd-bounce-1 {
+
−
  0% {
+
−
    opacity: 0;
+
−
    -webkit-transform: scale(0.5);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: scale(1.2);
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: scale(1);
+
−
  }
+
−
}
+
−
@-moz-keyframes cd-bounce-1 {
+
−
  0% {
+
−
    opacity: 0;
+
−
    -moz-transform: scale(0.5);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -moz-transform: scale(1.2);
+
−
  }
+
−
  100% {
+
−
    -moz-transform: scale(1);
+
−
  }
+
−
}
+
−
@keyframes cd-bounce-1 {
+
−
  0% {
+
−
    opacity: 0;
+
−
    -webkit-transform: scale(0.5);
+
−
    -moz-transform: scale(0.5);
+
−
    -ms-transform: scale(0.5);
+
−
    -o-transform: scale(0.5);
+
−
    transform: scale(0.5);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: scale(1.2);
+
−
    -moz-transform: scale(1.2);
+
−
    -ms-transform: scale(1.2);
+
−
    -o-transform: scale(1.2);
+
−
    transform: scale(1.2);
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: scale(1);
+
−
    -moz-transform: scale(1);
+
−
    -ms-transform: scale(1);
+
−
    -o-transform: scale(1);
+
−
    transform: scale(1);
+
−
  }
+
−
}
+
−
.cd-timeline-content {
+
−
   position: relative;
+
−
   margin-left: 60px;
+
−
   background: #ffffff;
+
−
  border-radius: 0.25em;
+
−
  padding: 1em;
+
−
  box-shadow: 0 3px 0 #d7e4ed;
+
−
}
+
−
.cd-timeline-content::after {
+
−
  clear: both;
+
−
  content: "";
+
−
  display: table;
+
−
}
+
−
.cd-timeline-content h2 {
+
−
  color: #303e49;
+
−
}
+
−
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
+
−
  font-size: 13px;
+
−
  font-size: 0.8125rem;
+
−
}
+
−
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
+
 
   display: inline-block;
 
   display: inline-block;
 +
  border-top: 14px solid transparent;
 +
  border-left: 14px solid #fff;
 +
  border-right: 0 solid #fff;
 +
  border-bottom: 14px solid transparent;
 +
  content: " ";
 
}
 
}
−
.cd-timeline-content p {
+
.timeline > li > .timeline-badge {
−
   margin: 1em 0;
+
   color: #fff;
−
   line-height: 1.6;
+
  width: 50px;
 +
  height: 50px;
 +
   line-height: 50px;
 +
  font-size: 1.4em;
 +
  text-align: center;
 +
  position: absolute;
 +
  top: 16px;
 +
  left: 50%;
 +
  margin-left: -25px;
 +
  background-color: #999999;
 +
  z-index: 100;
 +
  border-top-right-radius: 50%;
 +
  border-top-left-radius: 50%;
 +
  border-bottom-right-radius: 50%;
 +
  border-bottom-left-radius: 50%;
 
}
 
}
−
.cd-timeline-content .cd-read-more {
+
.timeline > li.timeline-inverted > .timeline-panel {
 
   float: right;
 
   float: right;
−
  padding: .8em 1em;
 
−
  background: #acb7c0;
 
−
  color: #ffffff;
 
−
  border-radius: 0.25em;
 
 
}
 
}
−
.no-touch .cd-timeline-content .cd-read-more:hover {
+
.timeline > li.timeline-inverted > .timeline-panel:before {
−
   background-color: #bac4cb;
+
   border-left-width: 0;
 +
  border-right-width: 15px;
 +
  left: -15px;
 +
  right: auto;
 
}
 
}
−
.cd-timeline-content .cd-date {
+
.timeline > li.timeline-inverted > .timeline-panel:after {
−
   float: left;
+
   border-left-width: 0;
−
   padding: .8em 0;
+
   border-right-width: 14px;
−
   opacity: .7;
+
   left: -14px;
 +
  right: auto;
 
}
 
}
−
.cd-timeline-content::before {
+
.timeline-badge.primary {
−
   content: '';
+
   background-color: #2e6da4 !important;
−
  position: absolute;
+
−
  top: 16px;
+
−
  right: 100%;
+
−
  height: 0;
+
−
  width: 0;
+
−
  border: 7px solid transparent;
+
−
  border-right: 7px solid #ffffff;
+
 
}
 
}
−
@media only screen and (min-width: 768px) {
+
.timeline-badge.success {
−
  .cd-timeline-content h2 {
+
   background-color: #3f903f !important;
−
    font-size: 20px;
+
−
    font-size: 1.25rem;
+
−
  }
+
−
  .cd-timeline-content p {
+
−
    font-size: 16px;
+
−
    font-size: 1rem;
+
−
   }
+
−
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
+
−
    font-size: 14px;
+
−
    font-size: 0.875rem;
+
−
  }
+
 
}
 
}
−
@media only screen and (min-width: 1170px) {
+
.timeline-badge.warning {
−
  .cd-timeline-content {
+
   background-color: #f0ad4e !important;
−
    margin-left: 0;
+
−
    padding: 1.6em;
+
−
    width: 45%;
+
−
  }
+
−
  .cd-timeline-content::before {
+
−
    top: 24px;
+
−
    left: 100%;
+
−
    border-color: transparent;
+
−
    border-left-color: #ffffff;
+
−
   }
+
−
  .cd-timeline-content .cd-read-more {
+
−
    float: left;
+
−
  }
+
−
  .cd-timeline-content .cd-date {
+
−
    position: absolute;
+
−
    width: 100%;
+
−
    left: 122%;
+
−
    top: 6px;
+
−
    font-size: 16px;
+
−
    font-size: 1rem;
+
−
  }
+
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
+
−
    float: right;
+
−
  }
+
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
+
−
    top: 24px;
+
−
    left: auto;
+
−
    right: 100%;
+
−
    border-color: transparent;
+
−
    border-right-color: #ffffff;
+
−
  }
+
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
+
−
    float: right;
+
−
  }
+
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
+
−
    left: auto;
+
−
    right: 122%;
+
−
    text-align: right;
+
−
  }
+
−
  .cssanimations .cd-timeline-content.is-hidden {
+
−
    visibility: hidden;
+
−
  }
+
−
  .cssanimations .cd-timeline-content.bounce-in {
+
−
    visibility: visible;
+
−
    -webkit-animation: cd-bounce-2 0.6s;
+
−
    -moz-animation: cd-bounce-2 0.6s;
+
−
    animation: cd-bounce-2 0.6s;
+
−
  }
+
 
}
 
}
−
 
+
.timeline-badge.danger {
−
@media only screen and (min-width: 1170px) {
+
  background-color: #d9534f !important;
−
  /* inverse bounce effect on even content blocks */
+
−
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
+
−
    -webkit-animation: cd-bounce-2-inverse 0.6s;
+
−
    -moz-animation: cd-bounce-2-inverse 0.6s;
+
−
    animation: cd-bounce-2-inverse 0.6s;
+
−
  }
+
 
}
 
}
−
@-webkit-keyframes cd-bounce-2 {
+
.timeline-badge.info {
−
   0% {
+
   background-color: #5bc0de !important;
−
    opacity: 0;
+
−
    -webkit-transform: translateX(-100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(20px);
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@-moz-keyframes cd-bounce-2 {
+
.timeline-title {
−
   0% {
+
   margin-top: 0;
−
    opacity: 0;
+
   color: inherit;
−
    -moz-transform: translateX(-100px);
+
−
   }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(20px);
+
−
  }
+
−
  100% {
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@keyframes cd-bounce-2 {
+
.timeline-body > p,
−
  0% {
+
.timeline-body > ul {
−
    opacity: 0;
+
   margin-bottom: 0;
−
    -webkit-transform: translateX(-100px);
+
−
    -moz-transform: translateX(-100px);
+
−
    -ms-transform: translateX(-100px);
+
−
    -o-transform: translateX(-100px);
+
−
    transform: translateX(-100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(20px);
+
−
    -moz-transform: translateX(20px);
+
−
    -ms-transform: translateX(20px);
+
−
    -o-transform: translateX(20px);
+
−
    transform: translateX(20px);
+
−
   }
+
−
  100% {
+
−
    -webkit-transform: translateX(0);
+
−
    -moz-transform: translateX(0);
+
−
    -ms-transform: translateX(0);
+
−
    -o-transform: translateX(0);
+
−
    transform: translateX(0);
+
−
  }
+
−
}
+
−
@-webkit-keyframes cd-bounce-2-inverse {
+
−
  0% {
+
−
    opacity: 0;
+
−
    -webkit-transform: translateX(100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(-20px);
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: translateX(0);
+
−
  }
+
−
}
+
−
@-moz-keyframes cd-bounce-2-inverse {
+
−
  0% {
+
−
    opacity: 0;
+
−
    -moz-transform: translateX(100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(-20px);
+
−
  }
+
−
  100% {
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@keyframes cd-bounce-2-inverse {
+
.timeline-body > p + p {
−
   0% {
+
   margin-top: 5px;
−
    opacity: 0;
+
−
    -webkit-transform: translateX(100px);
+
−
    -moz-transform: translateX(100px);
+
−
    -ms-transform: translateX(100px);
+
−
    -o-transform: translateX(100px);
+
−
    transform: translateX(100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(-20px);
+
−
    -moz-transform: translateX(-20px);
+
−
    -ms-transform: translateX(-20px);
+
−
    -o-transform: translateX(-20px);
+
−
    transform: translateX(-20px);
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: translateX(0);
+
−
    -moz-transform: translateX(0);
+
−
    -ms-transform: translateX(0);
+
−
    -o-transform: translateX(0);
+
−
    transform: translateX(0);
+
−
  }
+
 
}
 
}
−
</style></head><body>
+
</style>
 +
</head>
 
<body>
 
<body>
−
<header>
+
<div class="container">
−
<h1>Responsive Vertical Timeline</h1>
+
    <div class="page-header">
−
</header>
+
        <h1 id="timeline">Timeline</h1>
−
 
+
    </div>
−
<section id="cd-timeline" class="cd-container">
+
    <ul class="timeline">
−
<div class="cd-timeline-block">
+
        <li>
−
<div class="cd-timeline-img cd-picture">
+
          <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
+
          <div class="timeline-panel">
−
</div> <!-- cd-timeline-img -->
+
            <div class="timeline-heading">
−
 
+
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
−
<div class="cd-timeline-content">
+
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
−
<h2>Title of section 1</h2>
+
            </div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
+
            <div class="timeline-body">
−
<a href="#0" class="cd-read-more">Read more</a>
+
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
−
<span class="cd-date">Jan 14</span>
+
            </div>
−
</div> <!-- cd-timeline-content -->
+
          </div>
−
</div> <!-- cd-timeline-block -->
+
        </li>
−
 
+
        <li class="timeline-inverted">
−
<div class="cd-timeline-block">
+
          <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
−
<div class="cd-timeline-img cd-movie">
+
          <div class="timeline-panel">
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
+
            <div class="timeline-heading">
−
</div> <!-- cd-timeline-img -->
+
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
−
 
+
            </div>
−
<div class="cd-timeline-content">
+
            <div class="timeline-body">
−
<h2>Title of section 2</h2>
+
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
+
              <p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
−
<a href="#0" class="cd-read-more">Read more</a>
+
            </div>
−
<span class="cd-date">Jan 18</span>
+
          </div>
−
</div> <!-- cd-timeline-content -->
+
        </li>
−
</div> <!-- cd-timeline-block -->
+
        <li>
−
 
+
          <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
−
<div class="cd-timeline-block">
+
          <div class="timeline-panel">
−
<div class="cd-timeline-img cd-picture">
+
            <div class="timeline-heading">
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
+
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
−
</div> <!-- cd-timeline-img -->
+
            </div>
−
 
+
            <div class="timeline-body">
−
<div class="cd-timeline-content">
+
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
−
<h2>Title of section 3</h2>
+
            </div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
+
          </div>
−
<a href="#0" class="cd-read-more">Read more</a>
+
        </li>
−
<span class="cd-date">Jan 24</span>
+
        <li class="timeline-inverted">
−
</div> <!-- cd-timeline-content -->
+
          <div class="timeline-panel">
−
</div> <!-- cd-timeline-block -->
+
            <div class="timeline-heading">
−
 
+
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
−
<div class="cd-timeline-block">
+
            </div>
−
<div class="cd-timeline-img cd-location">
+
            <div class="timeline-body">
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
+
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
−
</div> <!-- cd-timeline-img -->
+
            </div>
−
 
+
          </div>
−
<div class="cd-timeline-content">
+
        </li>
−
<h2>Title of section 4</h2>
+
        <li>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
+
          <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
−
<a href="#0" class="cd-read-more">Read more</a>
+
          <div class="timeline-panel">
−
<span class="cd-date">Feb 14</span>
+
            <div class="timeline-heading">
−
</div> <!-- cd-timeline-content -->
+
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
−
</div> <!-- cd-timeline-block -->
+
            </div>
−
 
+
            <div class="timeline-body">
−
<div class="cd-timeline-block">
+
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
−
<div class="cd-timeline-img cd-location">
+
              <hr>
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
+
              <div class="btn-group">
−
</div> <!-- cd-timeline-img -->
+
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
−
 
+
                  <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
−
<div class="cd-timeline-content">
+
                </button>
−
<h2>Title of section 5</h2>
+
                <ul class="dropdown-menu" role="menu">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
+
                  <li><a href="#">Action</a></li>
−
<a href="#0" class="cd-read-more">Read more</a>
+
                  <li><a href="#">Another action</a></li>
−
<span class="cd-date">Feb 18</span>
+
                  <li><a href="#">Something else here</a></li>
−
</div> <!-- cd-timeline-content -->
+
                  <li class="divider"></li>
−
</div> <!-- cd-timeline-block -->
+
                  <li><a href="#">Separated link</a></li>
−
 
+
                </ul>
−
<div class="cd-timeline-block">
+
              </div>
−
<div class="cd-timeline-img cd-movie">
+
            </div>
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
+
          </div>
−
</div> <!-- cd-timeline-img -->
+
        </li>
−
 
+
        <li>
−
<div class="cd-timeline-content">
+
          <div class="timeline-panel">
−
<h2>Final Section</h2>
+
            <div class="timeline-heading">
−
<p>This is the content of the last section</p>
+
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
−
<span class="cd-date">Feb 26</span>
+
            </div>
−
</div> <!-- cd-timeline-content -->
+
            <div class="timeline-body">
−
</div> <!-- cd-timeline-block -->
+
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
−
</section> <!-- cd-timeline -->
+
            </div>
 +
          </div>
 +
        </li>
 +
        <li class="timeline-inverted">
 +
          <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
    </ul>
 +
</div>
 
</body>
 
</body>
−
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+
</html>
−
<script>jQuery(document).ready(function ($) {
+
−
    var $timeline_block = $('.cd-timeline-block');
+
−
    $timeline_block.each(function () {
+
−
        if ($(this).offset().top > $(window).scrollTop() + $(window).height() * 0.75) {
+
−
            $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
+
−
        }
+
−
    });
+
−
    $(window).on('scroll', function () {
+
−
        $timeline_block.each(function () {
+
−
            if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
+
−
                $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
+
−
            }
+
−
        });
+
−
    });
+
−
});
+
−
//# sourceURL=pen.js
+
−
</script>
+
−
</body></html>
+
 
{{:Team:Oxford/footer}}
 
{{:Team:Oxford/footer}}

Revision as of 15:07, 27 September 2016

iGEM Oxford 2016 - Cure for Copper

Timeline

  • Mussum ipsum cacilds

    11 hours ago via Twitter

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

  • Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

    Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.

  • Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

  • Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

  • Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

  • Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

  • Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.