Difference between revisions of "Team:Oxford/Timeline"

 
(71 intermediate revisions by 4 users not shown)
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;
+
   background-color: #eeef;  
−
  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: #808080;
−
   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%;
+
   background-color: #fff;  
−
  top: 50%;
+
−
  margin-left: -12px;
+
−
  margin-top: -12px;
+
−
}
+
−
.cd-timeline-img.cd-picture {
+
−
   background: #75ce66;
+
−
}
+
−
.cd-timeline-img.cd-movie {
+
−
  background: #c03b44;
+
−
}
+
−
.cd-timeline-img.cd-location {
+
−
  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 {
+
.timeline > li > .timeline-panel:before {
−
   0% {
+
   position: absolute;
−
    opacity: 0;
+
  top: 26px;
−
    -moz-transform: scale(0.5);
+
   right: -15px;
−
   }
+
   display: inline-block;
−
   60% {
+
  border-top: 15px solid transparent;
−
    opacity: 1;
+
   border-left: 15px solid #ccc;
−
    -moz-transform: scale(1.2);
+
   border-right: 0 solid #ccc;
−
   }
+
  border-bottom: 15px solid transparent;
−
   100% {
+
   content: " ";
−
    -moz-transform: scale(1);
+
−
   }
+
 
}
 
}
−
@keyframes cd-bounce-1 {
+
.timeline > li > .timeline-panel:after {
−
  0% {
+
   position: absolute;
−
    opacity: 0;
+
   top: 27px;
−
    -webkit-transform: scale(0.5);
+
   right: -14px;
−
    -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-title {
−
   content: '';
+
   margin-top: 0;
−
  position: absolute;
+
   color: inherit;
−
  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-body > p,
−
  .cd-timeline-content h2 {
+
.timeline-body > ul {
−
    font-size: 20px;
+
   margin-bottom: 0;
−
    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-body > p + p {
−
  .cd-timeline-content {
+
  margin-top: 5px;
−
    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;
+
−
  }
+
 
}
 
}
  
−
@media only screen and (min-width: 1170px) {
+
.timeline-badge.green {
−
  /* inverse bounce effect on even content blocks */
+
background-color: #3f903f !important
−
  .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.yellow {
−
  0% {
+
background-color: #f0ad4e !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-badge.orange {
−
  0% {
+
background-color: #f63 !important
−
    opacity: 0;
+
−
    -moz-transform: translateX(-100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(20px);
+
−
  }
+
−
  100% {
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@keyframes cd-bounce-2 {
+
.timeline-badge.red {
−
  0% {
+
background-color: #c32 !important
−
    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);
+
−
  }
+
 
}
 
}
−
@-webkit-keyframes cd-bounce-2-inverse {
+
.timeline-badge.purple {
−
  0% {
+
background-color: #a0a !important
−
    opacity: 0;
+
−
    -webkit-transform: translateX(100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(-20px);
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@-moz-keyframes cd-bounce-2-inverse {
+
.timeline-badge.blue {
−
  0% {
+
background-color: #00a !important
−
    opacity: 0;
+
−
    -moz-transform: translateX(100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(-20px);
+
−
  }
+
−
  100% {
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@keyframes cd-bounce-2-inverse {
+
</style>
−
  0% {
+
</head>
−
    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>
+
 
<body>
 
<body>
−
<header>
 
−
<h1>Responsive Vertical Timeline</h1>
 
−
</header>
 
  
−
<section id="cd-timeline" class="cd-container">
+
<div id="banner" style="background-image: url(https://static.igem.org/mediawiki/2016/thumb/0/0d/Timeline.png/800px-Timeline.png);"></div>
−
<div class="cd-timeline-block">
+
 
−
<div class="cd-timeline-img cd-picture">
+
 
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
+
<div class="container">
−
</div> <!-- cd-timeline-img -->
+
    <div class="page-header">
 +
<div class="pageTitle pageTitleOrange">Timeline</div>
 +
    </div>
 +
    <ul class="timeline">
 +
 
 +
        <li>
 +
 
 +
<img src="https://static.igem.org/mediawiki/2016/a/a2/T--Oxford--teamphot.jpeg" style="float:right; width:300px; border-radius: 50%;">
 +
 
 +
 
 +
          <div class="timeline-badge green"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Forming a team</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>December 2015</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>The iGEM team from last year organised the selection of the current team and we all met for the first time. Over the Christmas vacation we began to brainstorm potential ideas and talked to the public to identify issues that people wanted to be addressed.</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="timeline-inverted">
 +
<img src="https://static.igem.org/mediawiki/2016/2/2b/T--Oxford--bacteria.png" style="float:left; width:300px; margin-top:70px;">
 +
 
 +
 
 +
 
 +
          <div class="timeline-badge yellow"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Idea evaluation</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>January 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>We begin to investigate the feasibility of 3 potential ideas: tackling antibiotic resistance through bacterial conjugation, developing a probiotic treatment for Wilson’s Disease, and using a molecular circadian clock system for diurnal hormone release.
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li>
 +
<img src="https://static.igem.org/mediawiki/2016/4/49/T--Oxford--light.gif" style="float:right; width:300px; margin-right:100px;">
 +
 
 +
          <div class="timeline-badge orange"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Idea to the vote</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>March 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>Based on public desire for novel medical treatments, we decide that our track will be therapeutics and we confirm that our final project will investigate a probiotic treatment for Wilson’s Disease.
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="timeline-inverted">
 +
 
 +
<img src="https://static.igem.org/mediawiki/2016/2/23/T--Oxford--garry.jpeg" style="float:left; width:300px; margin-left:100px; border-radius: 50%;">
 +
 
 +
          <div class="timeline-badge red"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Literature review</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>April 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>We meet with Dr Garry Brown, a medical lecturer with prior experience in the treatment of Wilson’s Disease. He confirms that lack of innovation with regards to the development of novel treatments has resulted in the continued use of medicines that patients are dissatisfied with. Following this, we begin an in-depth literature review to determine how we might develop a probiotic treatment based on the expression of copper-chelating proteins.
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li>
 +
<img src="https://static.igem.org/mediawiki/2016/8/87/T--Oxford--wdsg.jpeg" style="float:right; width:300px; border-radius: 50%;">
 +
 
 +
 
 +
 
 +
          <div class="timeline-badge purple"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Insight from patients' perspective</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>May 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>We talk to Valerie Wheater, treasurer of the Wilson's Disease Support Group and Wilson's Disease patient. She highlights 3 main limitations associated with current treatments: side effects, high dosage frequency, and price. She expresses the general desire among patients for a longer term treatment. We alter our project design to address these concerns; most significantly, we decide to use copper-sensitive promoters to drive expression.
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="timeline-inverted">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8f/T--Oxford--lego.png" style="float:left; width:300px;">
 +
 
 +
 
 +
 
 +
 
 +
 
 +
          <div class="timeline-badge blue"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Dry Lab & Human Practices starts</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>June 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>We begin modelling our system and alter certain aspects of our genetic circuitry in response to initial predictions, this includes designing feedback iterations of our initial promoters. </p><p>In addition, we begin outreach activities and host summer school events.
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li>
 +
<img src="https://static.igem.org/mediawiki/2016/8/8d/T--Oxford--tubes.jpg" style="float:right; width:300px; margin-right:100px;">
 +
 
 +
 
 +
 
 +
          <div class="timeline-badge green"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Wet Lab starts</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>July 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>Work begins in the lab, as we start to clone our constructs.
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="timeline-inverted">
 +
 
 +
<img src="https://static.igem.org/mediawiki/2016/0/0a/T--Oxford--microscope.jpeg" style="float:left; width:300px; margin-left:100px;">
 +
 
 +
 
 +
          <div class="timeline-badge yellow"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Sensitivity measurement of promoters</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>August 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>We start collecting data on the sensitivity of our promoters using spectrophotometry, flow cytometry, and microscopy.
  
−
<div class="cd-timeline-content">
+
</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>
−
<a href="#0" class="cd-read-more">Read more</a>
+
        </li>
−
<span class="cd-date">Jan 14</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
  
−
<div class="cd-timeline-block">
+
        <li>
−
<div class="cd-timeline-img cd-movie">
+
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
+
−
</div> <!-- cd-timeline-img -->
+
  
−
<div class="cd-timeline-content">
+
<img src="https://static.igem.org/mediawiki/2016/2/27/T--Oxford--beads.png" style="float:right; width:300px; margin-right:100px;">
−
<h2>Title of section 2</h2>
+
−
<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>
+
−
<a href="#0" class="cd-read-more">Read more</a>
+
−
<span class="cd-date">Jan 18</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
  
−
<div class="cd-timeline-block">
 
−
<div class="cd-timeline-img cd-picture">
 
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
 
−
</div> <!-- cd-timeline-img -->
 
  
−
<div class="cd-timeline-content">
+
          <div class="timeline-badge orange"></div>
−
<h2>Title of section 3</h2>
+
          <div class="timeline-panel">
−
<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 class="timeline-heading">
−
<a href="#0" class="cd-read-more">Read more</a>
+
              <h3 class="timeline-title">Test on chelators and beads</h3>
−
<span class="cd-date">Jan 24</span>
+
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>September 2016</small></p>
−
</div> <!-- cd-timeline-content -->
+
            </div>
−
</div> <!-- cd-timeline-block -->
+
            <div class="timeline-body">
 +
              <p>We carry out copper assays to characterise the chelation ability of our copper-chelating proteins. We also carry out bead experimentation following discussions with patients over a possible delivery method for our bacteria.</p>
 +
            </div>
 +
          </div>
 +
        </li>
  
−
<div class="cd-timeline-block">
+
        <li class="timeline-inverted">
−
<div class="cd-timeline-img cd-location">
+
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
+
−
</div> <!-- cd-timeline-img -->
+
  
−
<div class="cd-timeline-content">
+
<img src="https://static.igem.org/mediawiki/2016/2/2a/T--Oxford--igem.png" style="float:left; width:300px; margin-left:100px;">
−
<h2>Title of section 4</h2>
+
−
<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>
+
−
<a href="#0" class="cd-read-more">Read more</a>
+
−
<span class="cd-date">Feb 14</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
  
−
<div class="cd-timeline-block">
 
−
<div class="cd-timeline-img cd-location">
 
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
 
−
</div> <!-- cd-timeline-img -->
 
  
−
<div class="cd-timeline-content">
+
          <div class="timeline-badge red"></div>
−
<h2>Title of section 5</h2>
+
          <div class="timeline-panel">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
+
            <div class="timeline-heading">
−
<a href="#0" class="cd-read-more">Read more</a>
+
              <h3 class="timeline-title">Wiki Freeze and the Giant Jamboree!</h3>
−
<span class="cd-date">Feb 18</span>
+
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>October 2016</small></p>
−
</div> <!-- cd-timeline-content -->
+
            </div>
−
</div> <!-- cd-timeline-block -->
+
            <div class="timeline-body">
 +
              <p>We finalise our project and pitch our idea.</p>
 +
            </div>
 +
          </div>
 +
        </li>
  
−
<div class="cd-timeline-block">
+
    </ul>
−
<div class="cd-timeline-img cd-movie">
+
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
+
−
</div> <!-- cd-timeline-img -->
+
  
−
<div class="cd-timeline-content">
+
<br><br><br>
−
<h2>Final Section</h2>
+
</div>
−
<p>This is the content of the last section</p>
+
−
<span class="cd-date">Feb 26</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
−
</section> <!-- cd-timeline -->
+
 
</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}}

Latest revision as of 16:29, 18 October 2016

iGEM Oxford 2016 - Cure for Copper

Timeline

  • Forming a team

    December 2015

    The iGEM team from last year organised the selection of the current team and we all met for the first time. Over the Christmas vacation we began to brainstorm potential ideas and talked to the public to identify issues that people wanted to be addressed.

  • Idea evaluation

    January 2016

    We begin to investigate the feasibility of 3 potential ideas: tackling antibiotic resistance through bacterial conjugation, developing a probiotic treatment for Wilson’s Disease, and using a molecular circadian clock system for diurnal hormone release.

  • Idea to the vote

    March 2016

    Based on public desire for novel medical treatments, we decide that our track will be therapeutics and we confirm that our final project will investigate a probiotic treatment for Wilson’s Disease.

  • Literature review

    April 2016

    We meet with Dr Garry Brown, a medical lecturer with prior experience in the treatment of Wilson’s Disease. He confirms that lack of innovation with regards to the development of novel treatments has resulted in the continued use of medicines that patients are dissatisfied with. Following this, we begin an in-depth literature review to determine how we might develop a probiotic treatment based on the expression of copper-chelating proteins.

  • Insight from patients' perspective

    May 2016

    We talk to Valerie Wheater, treasurer of the Wilson's Disease Support Group and Wilson's Disease patient. She highlights 3 main limitations associated with current treatments: side effects, high dosage frequency, and price. She expresses the general desire among patients for a longer term treatment. We alter our project design to address these concerns; most significantly, we decide to use copper-sensitive promoters to drive expression.

  • Dry Lab & Human Practices starts

    June 2016

    We begin modelling our system and alter certain aspects of our genetic circuitry in response to initial predictions, this includes designing feedback iterations of our initial promoters.

    In addition, we begin outreach activities and host summer school events.

  • Wet Lab starts

    July 2016

    Work begins in the lab, as we start to clone our constructs.

  • Sensitivity measurement of promoters

    August 2016

    We start collecting data on the sensitivity of our promoters using spectrophotometry, flow cytometry, and microscopy.

  • Test on chelators and beads

    September 2016

    We carry out copper assays to characterise the chelation ability of our copper-chelating proteins. We also carry out bead experimentation following discussions with patients over a possible delivery method for our bacteria.

  • Wiki Freeze and the Giant Jamboree!

    October 2016

    We finalise our project and pitch our idea.