Difference between revisions of "Team:Oxford/Timeline"

 
(75 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{:Team:Oxford/Templates/Navi}}
 
{{:Team:Oxford/Templates/Navi}}
−
<html>
 
−
<body>
 
−
 
−
<div class="container-fluid" style="padding-top: 20px;">
 
−
<div class="col-md-12"><h2>Timeline</h2>
 
−
<p>We're working hard.</p> 
 
−
</div>
 
−
  <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>
 
−
</body>
 
−
</html>
 
−
 
−
 
−
 
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<style media="screen" type="text/css">
−
<script type="text/javascript">
+
.timeline {
−
jQuery(document).ready(function($){
+
   list-style: none;
−
var $timeline_block = $('.cd-timeline-block');
+
   padding: 20px 0 20px;
−
 
+
−
//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>
+
−
 
+
−
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
+
−
<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 {
+
−
  0% {
+
−
    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.yellow {
−
  0% {
+
background-color: #f0ad4e !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.orange {
−
  0% {
+
background-color: #f63 !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.red {
−
  0% {
+
background-color: #c32 !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.purple {
−
  0% {
+
background-color: #a0a !important
−
    opacity: 0;
+
−
    -moz-transform: translateX(100px);
+
−
  }
+
−
  60% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(-20px);
+
−
  }
+
−
  100% {
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
@keyframes cd-bounce-2-inverse {
+
.timeline-badge.blue {
−
  0% {
+
background-color: #00a !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);
+
−
  }
+
 
}
 
}
−
</style></head><body>
+
</style>
 +
</head>
 
<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> <!-- cd-timeline-img -->
+
  
−
<div class="cd-timeline-content">
 
−
<h2>Title of section 1</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">Jan 14</span>
 
−
</div> <!-- cd-timeline-content -->
 
−
</div> <!-- cd-timeline-block -->
 
  
−
<div class="cd-timeline-block">
+
<div class="container">
−
<div class="cd-timeline-img cd-movie">
+
    <div class="page-header">
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
+
<div class="pageTitle pageTitleOrange">Timeline</div>
−
</div> <!-- cd-timeline-img -->
+
    </div>
 +
    <ul class="timeline">
  
−
<div class="cd-timeline-content">
+
        <li>
−
<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">
+
<img src="https://static.igem.org/mediawiki/2016/a/a2/T--Oxford--teamphot.jpeg" style="float:right; width:300px; border-radius: 50%;">
−
<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">
 
−
<h2>Title of section 3</h2>
 
−
<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>
 
−
<a href="#0" class="cd-read-more">Read more</a>
 
−
<span class="cd-date">Jan 24</span>
 
−
</div> <!-- cd-timeline-content -->
 
−
</div> <!-- cd-timeline-block -->
 
  
−
<div class="cd-timeline-block">
+
          <div class="timeline-badge green"></div>
−
<div class="cd-timeline-img cd-location">
+
          <div class="timeline-panel">
−
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
+
            <div class="timeline-heading">
−
</div> <!-- cd-timeline-img -->
+
              <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>
  
−
<div class="cd-timeline-content">
+
        <li class="timeline-inverted">
−
<h2>Title of section 4</h2>
+
<img src="https://static.igem.org/mediawiki/2016/2/2b/T--Oxford--bacteria.png" style="float:left; width:300px; margin-top:70px;">
−
<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="timeline-badge yellow"></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 -->
+
              <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>
  
−
<div class="cd-timeline-content">
+
        <li>
−
<h2>Final Section</h2>
+
<img src="https://static.igem.org/mediawiki/2016/4/49/T--Oxford--light.gif" style="float:right; width:300px; margin-right:100px;">
−
<p>This is the content of the last section</p>
+
 
−
<span class="cd-date">Feb 26</span>
+
          <div class="timeline-badge orange"></div>
−
</div> <!-- cd-timeline-content -->
+
          <div class="timeline-panel">
−
</div> <!-- cd-timeline-block -->
+
            <div class="timeline-heading">
−
</section> <!-- cd-timeline -->
+
              <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.
 +
 
 +
</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li>
 +
 
 +
<img src="https://static.igem.org/mediawiki/2016/2/27/T--Oxford--beads.png" 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">Test on chelators and beads</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>September 2016</small></p>
 +
            </div>
 +
            <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>
 +
 
 +
        <li class="timeline-inverted">
 +
 
 +
<img src="https://static.igem.org/mediawiki/2016/2/2a/T--Oxford--igem.png" style="float:left; width:300px; margin-left:100px;">
 +
 
 +
 
 +
          <div class="timeline-badge red"></div>
 +
          <div class="timeline-panel">
 +
            <div class="timeline-heading">
 +
              <h3 class="timeline-title">Wiki Freeze and the Giant Jamboree!</h3>
 +
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>October 2016</small></p>
 +
            </div>
 +
            <div class="timeline-body">
 +
              <p>We finalise our project and pitch our idea.</p>
 +
            </div>
 +
          </div>
 +
        </li>
 +
 
 +
    </ul>
 +
 
 +
<br><br><br>
 +
</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}}

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.