Difference between revisions of "Team:Oxford/Timeline"

 
(80 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{:Team:Oxford/Templates/Navi}}
 
{{:Team:Oxford/Templates/Navi}}
 
<html>
 
<html>
−
 
+
<head>
−
<header>
+
<style media="screen" type="text/css">
−
 
+
.timeline {
−
<style>
+
  list-style: none;
−
@import "bourbon";
+
  padding: 20px 0 20px;
−
 
+
  position: relative;
−
// variables - colors
+
  background-color: #eeef;  
−
 
+
−
$main-text: #7f8c97; // main text
+
−
$link: #acb7c0; // anchor tags
+
−
$background: #e9f0f5; // body background color
+
−
 
+
−
$color-1: #303e49; // blue dark
+
−
$color-2: #c03b44; // red
+
−
$color-3: #ffffff; // white
+
−
$color-4: #75ce66; // green
+
−
$color-5: #f0ca45; // yellow
+
−
 
+
−
// variables - fonts
+
−
 
+
−
$primary-font: 'Droid Serif', serif;
+
−
$secondary-font: 'Open Sans', sans-serif;
+
−
 
+
−
// mixins - rem fallback - credits: http://zerosixthree.se/
+
−
 
+
−
@function calculateRem($size) {
+
−
  $remSize: $size / 16px;
+
−
  @return $remSize * 1rem;
+
 
}
 
}
−
 
+
.timeline:before {
−
@mixin font-size($size) {
+
   top: 0;
−
   font-size: $size;
+
  bottom: 0;
−
   font-size: calculateRem($size);
+
  position: absolute;
 +
  content: " ";
 +
  width: 3px;
 +
  background-color: #808080;
 +
   left: 50%;
 +
  margin-left: -1.5px;
 
}
 
}
−
 
+
.timeline > li {
−
// mixins - border radius
+
  margin-bottom: 20px;
−
 
+
   position: relative;
−
@mixin border-radius($radius:.25em) {
+
−
   border-radius: $radius;
+
 
}
 
}
−
 
+
.timeline > li:before,
−
// layout - breakpoints
+
.timeline > li:after {
−
 
+
   content: " ";
−
$S:     320px; 
+
   display: table;
−
$M:     768px;   
+
−
$L:    1170px;   
+
−
 
+
−
// layout - media queries
+
−
 
+
−
@mixin MQ($canvas) {
+
−
   @if $canvas == S {
+
−
  @media only screen and (min-width: $S) { @content; }
+
−
  }
+
−
  @else if $canvas == M {
+
−
  @media only screen and (min-width: $M) { @content; }
+
−
   }
+
−
  @else if $canvas == L {
+
−
  @media only screen and (min-width: $L) { @content; }
+
−
  }
+
 
}
 
}
−
 
+
.timeline > li:after {
−
/* --------------------------------
+
  clear: both;
−
 
+
−
Primary style
+
−
 
+
−
-------------------------------- */
+
−
 
+
−
html * {
+
−
-webkit-font-smoothing: antialiased;
+
−
-moz-osx-font-smoothing: grayscale;
+
 
}
 
}
−
 
+
.timeline > li:before,
−
*, *:after, *:before {
+
.timeline > li:after {
−
@include box-sizing(border-box);
+
  content: " ";
 +
  display: table;
 
}
 
}
−
 
+
.timeline > li:after {
−
body {
+
  clear: both;
−
font: {
+
−
size: 100%;
+
−
family: $primary-font;
+
−
}
+
−
color: $main-text;
+
−
background-color: $background;
+
 
}
 
}
 +
.timeline > li > .timeline-panel {
 +
  width: 46%;
 +
  float: left;
 +
  border: 1px solid #d4d4d4;
 +
  border-radius: 2px;
 +
  padding: 20px;
 +
  position: relative;
 +
  background-color: #fff;
  
−
a {
 
−
color: $link;
 
−
text-decoration: none;
 
−
font-family: $secondary-font;
 
 
}
 
}
−
 
+
.timeline > li > .timeline-panel:before {
−
img {
+
  position: absolute;
−
max-width: 100%;
+
  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: " ";
 
}
 
}
−
 
+
.timeline > li > .timeline-panel:after {
−
h1, h2 {
+
  position: absolute;
−
font-family: $secondary-font;
+
  top: 27px;
−
font-weight: bold;
+
  right: -14px;
 +
  display: inline-block;
 +
  border-top: 14px solid transparent;
 +
  border-left: 14px solid #fff;
 +
  border-right: 0 solid #fff;
 +
  border-bottom: 14px solid transparent;
 +
  content: " ";
 
}
 
}
−
 
+
.timeline > li > .timeline-badge {
−
/* --------------------------------  
+
  color: #fff;
−
 
+
  width: 50px;
−
Modules - reusable parts of our design
+
  height: 50px;
−
 
+
  line-height: 50px;
−
-------------------------------- */
+
  font-size: 1.4em;
−
 
+
  text-align: center;
−
.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 */
+
  position: absolute;
−
width: 90%;
+
  top: 16px;
−
max-width: $L; // breakpoints inside partials > _layout.scss
+
  left: 50%;
−
margin: 0 auto;
+
  margin-left: -25px;
−
 
+
  background-color: #999999;
−
&::after { /* clearfix */
+
  z-index: 100;
−
content: '';
+
  border-top-right-radius: 50%;
−
display: table;
+
  border-top-left-radius: 50%;
−
clear: both;
+
  border-bottom-right-radius: 50%;
−
}
+
  border-bottom-left-radius: 50%;
 
}
 
}
−
 
+
.timeline > li.timeline-inverted > .timeline-panel {
−
/* --------------------------------
+
  float: right;
−
 
+
−
Main components
+
−
 
+
−
-------------------------------- */
+
−
 
+
−
header {
+
−
height: 200px;
+
−
line-height: 200px;
+
−
text-align: center;
+
−
background: $color-1;
+
−
 
+
−
h1 {
+
−
color: $color-3;
+
−
@include font-size(18px);
+
−
}
+
−
 
+
−
@include MQ(L) {
+
−
height: 300px;
+
−
line-height: 300px;
+
−
 
+
−
h1 {
+
−
@include font-size(24px);
+
−
}
+
−
}
+
 
}
 
}
−
 
+
.timeline > li.timeline-inverted > .timeline-panel:before {
−
#cd-timeline {
+
  border-left-width: 0;
−
position: relative;
+
  border-right-width: 15px;
−
padding: 2em 0;
+
  left: -15px;
−
margin: {
+
  right: auto;
−
top: 2em;
+
−
bottom: 2em;
+
−
}
+
−
 
+
−
&::before {
+
−
/* this is the vertical line */
+
−
content: '';
+
−
position: absolute;
+
−
top: 0;
+
−
left: 18px;
+
−
height: 100%;
+
−
width: 4px;
+
−
background: darken($background, 5%);
+
−
}
+
−
 
+
−
@include MQ(L) {
+
−
margin: {
+
−
top: 3em;
+
−
bottom: 3em;
+
−
}
+
−
 
+
−
&::before {
+
−
left: 50%;
+
−
margin-left: -2px;
+
−
}
+
−
}
+
 
}
 
}
−
 
+
.timeline > li.timeline-inverted > .timeline-panel:after {
−
.cd-timeline-block {
+
  border-left-width: 0;
−
position: relative;
+
  border-right-width: 14px;
−
margin: 2em 0;
+
  left: -14px;
−
@include clearfix;
+
  right: auto;
−
 
+
−
&:first-child {
+
−
margin-top: 0;
+
−
}
+
−
 
+
−
&:last-child {
+
−
margin-bottom: 0;
+
−
}
+
−
 
+
−
@include MQ(L) {
+
−
margin: 4em 0;
+
−
 
+
−
&:first-child {
+
−
margin-top: 0;
+
−
}
+
−
 
+
−
&:last-child {
+
−
margin-bottom: 0;
+
−
}
+
−
}
+
 
}
 
}
−
 
+
.timeline-title {
−
.cd-timeline-img {
+
  margin-top: 0;
−
position: absolute;
+
  color: inherit;
−
top: 0;
+
}
−
left: 0;
+
.timeline-body > p,
−
width: 40px;
+
.timeline-body > ul {
−
height: 40px;
+
  margin-bottom: 0;
−
border-radius: 50%;
+
}
−
box-shadow: 0 0 0 4px $color-3, inset 0 2px 0 rgba(#000, .08), 0 3px 0 4px rgba(#000, .05) ;
+
.timeline-body > p + p {
−
 
+
  margin-top: 5px;
−
img {
+
−
display: block;
+
−
width: 24px;
+
−
height: 24px;
+
−
position: relative;
+
−
left: 50%;
+
−
top: 50%;
+
−
margin-left: -12px;
+
−
margin-top: -12px;
+
−
}
+
−
 
+
−
&.cd-picture {
+
−
background: $color-4;
+
−
}
+
−
 
+
−
&.cd-movie {
+
−
background: $color-2;
+
−
}
+
−
 
+
−
&.cd-location {
+
−
background: $color-5;
+
−
}
+
−
 
+
−
@include MQ(L) {
+
−
width: 60px;
+
−
height: 60px;
+
−
left: 50%;
+
−
margin-left: -30px;
+
−
 
+
−
/* Force Hardware Acceleration in WebKit */
+
−
-webkit-transform: translateZ(0);
+
−
-webkit-backface-visibility: hidden;
+
−
 
+
−
.cssanimations &.is-hidden {
+
−
visibility: hidden;
+
−
}
+
−
 
+
−
.cssanimations &.bounce-in {
+
−
visibility: visible;
+
−
@include animation(cd-bounce-1 .6s);
+
−
}
+
−
}
+
 
}
 
}
  
−
@include keyframes(cd-bounce-1) {
+
.timeline-badge.green {
−
0% {
+
background-color: #3f903f !important
−
opacity: 0;
+
−
@include transform(scale(.5));
+
−
}
+
−
 
+
−
60% {
+
−
opacity: 1;
+
−
@include transform(scale(1.2));
+
−
}
+
−
 
+
−
100% {
+
−
@include transform(scale(1));
+
−
}
+
 
}
 
}
 +
.timeline-badge.yellow {
 +
background-color: #f0ad4e !important
 +
}
 +
.timeline-badge.orange {
 +
background-color: #f63 !important
 +
}
 +
.timeline-badge.red {
 +
background-color: #c32 !important
 +
}
 +
.timeline-badge.purple {
 +
background-color: #a0a !important
 +
}
 +
.timeline-badge.blue {
 +
background-color: #00a !important
 +
}
 +
</style>
 +
</head>
 +
<body>
  
−
.cd-timeline-content {
+
<div id="banner" style="background-image: url(https://static.igem.org/mediawiki/2016/thumb/0/0d/Timeline.png/800px-Timeline.png);"></div>
−
position: relative;
+
−
margin-left: 60px;
+
−
background: $color-3;
+
−
@include border-radius;
+
−
padding: 1em;
+
−
box-shadow: 0 3px 0 darken($background, 5%);
+
−
@include clearfix;
+
  
−
h2 {
 
−
color: $color-1;
 
−
}
 
  
−
p, .cd-read-more, .cd-date {
+
<div class="container">
−
@include font-size(13px);
+
    <div class="page-header">
−
}
+
<div class="pageTitle pageTitleOrange">Timeline</div>
 +
    </div>
 +
    <ul class="timeline">
  
−
.cd-read-more, .cd-date {
+
        <li>
−
display: inline-block;
+
−
}
+
  
−
p {
+
<img src="https://static.igem.org/mediawiki/2016/a/a2/T--Oxford--teamphot.jpeg" style="float:right; width:300px; border-radius: 50%;">
−
margin: 1em 0;
+
−
line-height: 1.6;
+
−
}
+
  
−
.cd-read-more {
 
−
float: right;
 
−
padding: .8em 1em;
 
−
background: $link;
 
−
color: $color-3;
 
−
@include border-radius;
 
  
−
.no-touch &:hover {
+
          <div class="timeline-badge green"></div>
−
background-color: lighten($link, 5%);
+
          <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>
  
−
.cd-date {
+
        <li class="timeline-inverted">
−
float: left;
+
<img src="https://static.igem.org/mediawiki/2016/2/2b/T--Oxford--bacteria.png" style="float:left; width:300px; margin-top:70px;">
−
padding: .8em 0;
+
−
opacity: .7;
+
−
}
+
  
−
&::before {
 
−
content: '';
 
−
position: absolute;
 
−
top: 16px;
 
−
right: 100%;
 
−
height: 0;
 
−
width: 0;
 
−
border: 7px solid transparent;
 
−
border-right: 7px solid $color-3;
 
−
}
 
  
−
@include MQ(M) {
 
−
h2 {
 
−
@include font-size(20px);
 
−
}
 
  
−
p {
+
          <div class="timeline-badge yellow"></div>
−
@include font-size(16px);
+
          <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>
  
−
.cd-read-more, .cd-date {
+
        <li>
−
@include font-size(14px);
+
<img src="https://static.igem.org/mediawiki/2016/4/49/T--Oxford--light.gif" style="float:right; width:300px; margin-right:100px;">
−
}
+
−
}
+
  
−
@include MQ(L) {
+
          <div class="timeline-badge orange"></div>
−
margin-left: 0;
+
          <div class="timeline-panel">
−
padding: 1.6em;
+
            <div class="timeline-heading">
−
width: 45%;
+
              <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>
  
−
&::before {
+
        <li class="timeline-inverted">
−
top: 24px;
+
−
left: 100%;
+
−
border-color: transparent;
+
−
border-left-color: $color-3;
+
−
}
+
  
−
.cd-read-more {
+
<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%;">
−
float: left;
+
−
}
+
  
−
.cd-date {
+
          <div class="timeline-badge red"></div>
−
position: absolute;
+
          <div class="timeline-panel">
−
width: 100%;
+
            <div class="timeline-heading">
−
left: 122%;
+
              <h3 class="timeline-title">Literature review</h3>
−
top: 6px;
+
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>April 2016</small></p>
−
@include font-size(16px);
+
            </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>
  
−
.cd-timeline-block:nth-child(even) & {
+
        <li>
−
float: right;
+
<img src="https://static.igem.org/mediawiki/2016/8/87/T--Oxford--wdsg.jpeg" style="float:right; width:300px; border-radius: 50%;">
  
−
&::before {
 
−
top: 24px;
 
−
left: auto;
 
−
right: 100%;
 
−
border-color: transparent;
 
−
border-right-color: $color-3;
 
−
}
 
  
−
.cd-read-more {
 
−
float: right;
 
−
}
 
  
−
.cd-date {
+
          <div class="timeline-badge purple"></div>
−
left: auto;
+
          <div class="timeline-panel">
−
right: 122%;
+
            <div class="timeline-heading">
−
text-align: right;
+
              <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>
  
−
.cssanimations &.is-hidden {
+
        <li class="timeline-inverted">
−
visibility: hidden;
+
<img src="https://static.igem.org/mediawiki/2016/8/8f/T--Oxford--lego.png" style="float:left; width:300px;">
−
}
+
  
−
.cssanimations &.bounce-in {
 
−
visibility: visible;
 
−
@include animation(cd-bounce-2 .6s);
 
−
}
 
−
}
 
−
}
 
  
−
@include MQ(L) {
 
−
/* inverse bounce effect on even content blocks */
 
−
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
 
−
@include animation(cd-bounce-2-inverse .6s);
 
−
}
 
−
}
 
  
−
@include keyframes(cd-bounce-2) {
 
−
0% {
 
−
opacity: 0;
 
−
@include transform(translateX(-100px));
 
−
}
 
  
−
60% {
 
−
opacity: 1;
 
−
@include transform(translateX(20px));
 
−
}
 
  
−
100% {
+
          <div class="timeline-badge blue"></div>
−
@include transform(translateX(0));
+
          <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>
  
−
@include keyframes(cd-bounce-2-inverse) {
+
        <li>
−
0% {
+
<img src="https://static.igem.org/mediawiki/2016/8/8d/T--Oxford--tubes.jpg" style="float:right; width:300px; margin-right:100px;">
−
opacity: 0;
+
−
@include transform(translateX(100px));
+
−
}
+
  
−
60% {
 
−
opacity: 1;
 
−
@include transform(translateX(-20px));
 
−
}
 
  
−
100% {
 
−
@include transform(translateX(0));
 
−
}
 
−
}
 
−
</style>
 
  
−
<script type="text/javascript">
+
          <div class="timeline-badge green"></div>
−
jQuery(document).ready(function($){
+
          <div class="timeline-panel">
−
var $timeline_block = $('.cd-timeline-block');
+
            <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>
  
−
//hide timeline blocks which are outside the viewport
+
        <li class="timeline-inverted">
−
$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
+
<img src="https://static.igem.org/mediawiki/2016/0/0a/T--Oxford--microscope.jpeg" style="float:left; width:300px; margin-left:100px;">
−
$(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>
+
  
−
</header>
 
  
−
<body>
+
          <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="container-fluid" style="padding-top: 20px;">
+
</p>
−
<div class="col-md-12"><h2>Timeline</h2>
+
            </div>
−
<p>We're working hard.</p> 
+
          </div>
−
</div>
+
         </li>
−
  <div class="col-md-12">
+
−
    <h2 >Project Selection</h2>
+
−
         <p>
+
−
        To be considered for the Oxford iGEM team, we each had to write a short statement explaining why we would make good team members. The previous years' team selected us based on this, and after the Christmas break, we arrived in January as a team of 11!
+
−
            <br />
+
−
        From January to March, we were brainstorming potential projects - first, individuals pitched short ideas and we discussed these as a team to exclude some initial ones based on feasibility or originality, taking into account previous iGEM projects. By February, we had narrowed down to 3 projects, and split into small sub teams to conduct more extensive feasibility studies into each of these. By March, we all decided to devote our efforts to the project addressing Wilson's Disease.
+
−
  <br />
+
−
Throughout the March and April we researched Wilson's disease, probiotic treatments and copper chelation proteins. We also considered how we would want to regulate these chelators and how we would like the bacteria to be delivered. We resolved to consult the public of their views on synthetic biology and probiotic delivery and we would work towards addressing their concerns.
+
−
        </p>
+
−
</div>
+
−
</div>
+
  
 +
        <li>
  
−
<header>
+
<img src="https://static.igem.org/mediawiki/2016/2/27/T--Oxford--beads.png" style="float:right; width:300px; margin-right:100px;">
−
<h1>Responsive Vertical Timeline</h1>
+
−
</header>
+
  
−
<section id="cd-timeline" class="cd-container">
 
−
<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 1</h2>
+
          <div class="timeline-panel">
−
<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-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 14</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-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/2a/T--Oxford--igem.png" style="float:left; width:300px; margin-left: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 red"></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">Wiki Freeze and the Giant Jamboree!</h3>
−
<span class="cd-date">Jan 24</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-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">
+
<br><br><br>
−
<h2>Title of section 4</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>
+
−
<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">
+
−
<h2>Title of section 5</h2>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
+
−
<a href="#0" class="cd-read-more">Read more</a>
+
−
<span class="cd-date">Feb 18</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
−
 
+
−
<div class="cd-timeline-block">
+
−
<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">
+
−
<h2>Final Section</h2>
+
−
<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>
−
 
+
</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.