Difference between revisions of "Team:UCL/Collaborations"

Line 5: Line 5:
 
<head>
 
<head>
  
 +
<script>
  
 +
  $(function () {
 +
  $('.content').myTooltip({
 +
    speed: 200,
 +
    closeOnClick: true
 +
  });
 +
 
 +
});
 +
 +
 +
 +
$.fn.myTooltip = function ( options ) {
 +
 
 +
 
 +
  var defaults = {
 +
    speed: 650,
 +
    closeOnClick: false,
 +
    tooltipClass: 'tooltip'
 +
  };
 +
 
 +
  var settings = $.extend( {}, defaults, options );
 +
 
 +
  var $this = $(this),
 +
      $tooltip = $this.find('.'+settings.tooltipClass);
 +
 
 +
 
 +
  setPosition();
 +
  $(window).resize(function () {
 +
    setPosition();
 +
  });
 +
 
 +
 
 +
  $this.mouseenter(function () {
 +
    $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 +
  }).mouseleave(function () {
 +
    $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 +
  });
 +
 
 +
  if(settings.closeOnClick) {
 +
    $tooltip.click(function () {
 +
      $(this).stop(true, true).fadeOut(settings.speed);
 +
    });
 +
  }
 +
 
 +
 
 +
  function setPosition() {
 +
    $tooltip.css({top: $this.height(), left: -150});
 +
  }
 +
 
 +
};
 +
 +
</script>
 +
 +
<script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 +
<script>
 +
smoothScroll.init({
 +
speed: 1000,
 +
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callbackBefore: function ( toggle, anchor ) {},
 +
callbackAfter: function ( toggle, anchor ) {}
 +
});
 +
</script>
 
<style>
 
<style>
  
  
−
.hide {
+
.mainmenu {background-color: #fff !important;}
−
  display: none;
+
.menu-items a {color: #493C54;}
−
}
+
.buttonblack {background-color: #22343C; border-color: #22343C; }
 +
a.buttonblack { color: #fff !important; font-size: 12px;}
 +
.buttonblack:hover {border-color: #22343C; color: #22343C !important;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#header2 {
 +
 
 +
width: 100%;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
margin: 0 auto;
 +
min-height: 100%;
 +
height: auto;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
 
 +
 
 +
}
 +
 
 +
 
  
 
#header2:before
 
#header2:before
 
{
 
{
 
content: "";
 
content: "";
−
     background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg
+
     background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg');
−
');
+
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-attachment: fixed !important;
 
   background-attachment: fixed !important;
−
   -webkit-background-size: cover;
+
   -webkit-background-size: 100% 140%;
−
  -moz-background-size: cover;
+
background-position: 0 -100px;
−
  -o-background-size: cover;
+
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 600, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.6)));
−
  background-size: cover;
+
−
-webkit-box-sizing: border-box;
+
−
-moz-box-sizing: border-box;
+
−
box-sizing: border-box;
+
 
     position: absolute;
 
     position: absolute;
 
     top: 0;
 
     top: 0;
Line 33: Line 120:
 
padding: 0;
 
padding: 0;
 
     width: 100%;
 
     width: 100%;
−
     height: 3000px;
+
     height: 100%;
 +
padding-bottom: 100px;
 
overflow: hidden;
 
overflow: hidden;
 
display: block;
 
display: block;
−
border: none;
+
border: none;}
  
−
}
+
#mobilebackground {
 +
  background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg');
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.1)));
  
−
 
−
 
−
#mobilebackground {
 
−
  background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg
 
−
');
 
 
     top: 0;
 
     top: 0;
 
     right: 0;
 
     right: 0;
Line 65: Line 150:
  
  
 +
#wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1; overflow: auto;
 +
  
  
−
#header2 {
+
}
−
width: 100%;
+
 
−
position: relative;
+
#submenu {width: 100%; margin-top: 20px; text-align: center; position: relative; z-index: 999999;}
−
padding: 0;
+
 
−
top: 0;
+
#text {margin-top: 50px; z-index: 9999; height: auto;}
−
bottom: 0;
+
 
−
left: 0;
+
 
−
letter-spacing: 1.1px;
+
.blockk h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; background-color: #418E69; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.75;
−
font-family: Raleway;
+
transition-property: opacity;
−
margin: 0 auto;
+
    transition-duration: 1s;
−
min-height: 100%;
+
    transition-timing-function: ease; }
−
height: auto;
+
 
−
vertical-align: middle;
+
.blockk {position: relative; width: 100%; height: auto;}
−
padding-bottom: 100px;
+
 
−
margin-bottom: -10px;
+
.blockk:hover h2 {opacity: 1 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 
 +
.blockk:hover img, .blockk:hover .latesimage {opacity: 0.9 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 
 +
#wraplates img:hover {opacity: 1 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease;}
 +
 
 +
.blockk {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b; width: 100%; overflow: auto;
 
}
 
}
  
 +
#wraplatescolumn1 {width: 47%; float: left; padding-right: 2%;}
  
−
#menu2 {top: 0px; left: 100px; position: relative; width: 21%; float: left; z-index: 99;}
+
#wraplatescolumn2 {width: 50%; float: right;
  
 +
}
  
−
#menu3 {top: 0px; left: 100px; position: relative; width: 21%; float: left; z-index: 99; display: none; }
 
−
#wrapper {width: 100%; padding-top: 100px; position: relative; margin: 0 auto; height: 100%;}
 
  
−
#protocolcontent {width: 60%; top: 24px; position: relative; float: right; background: none; right: 100px; padding-bottom: 100px; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.7))); height: 100%;  }
 
  
 +
#wraplates img {width: 100%; border-radius: 10px; opacity: 0.8;
 +
}
  
−
.protcl { background-color: #fff;  border-radius: 15px; border: 15px #fff solid; padding: 20px; position: relative; height: 100%;}
 
  
  
  
−
.protcl h4 {text-decoration: none; font-size: 14px; border-bottom: 0px; margin: 0 auto; padding: 0;}
+
#text a, .blockk a {color: #418E69; font-weight: bold; text-decoration: none;}
−
.protcl h4 li {font-weight: normal; padding: 2px;}
+
#text a:hover, .blockk a:hover {color: #418E69; font-weight: bold; text-decoration: none;}
−
.protcl h4 ol {font-weight: normal;}
+
#text a:visited, .blockk a:visited {color: #418E69; font-weight: bold; text-decoration: none;}
−
.protcl img {width: 100%; height: auto;}
+
  
 +
.content .tooltip {
 +
  background-color: #fff;
 +
border: 1px #22343C solid;
 +
  border-radius: 4px;
 +
  padding: 3px;
 +
  position: absolute;
 +
  width: 300px;
 +
  z-Index: 99999;
 +
  display: none;
 +
letter-spacing: 1px;
 +
line-height: 1;
 +
font-size: 11px;
 +
}
  
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
  
−
#protocolcontent h2 {text-decoration: none; border-bottom: 0px; font-size: 18px; font-family: Raleway; text-transform: uppercase; letter-spacing: 4px; text-align: center;}
+
.content {
 +
  position: relative;
 +
}
  
 +
.content {color: #d67166;}
  
−
.title {margin-left: 30px; padding-left: 20px; margin: 0; padding: 0; color: #000; font-family: League Script; font-size: 64px;}
+
.bigtitle {width: 74%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_Circlegreen.png'); text-align: center; line-height: 2;
 +
    background-position: top center; background-repeat: no-repeat; background-size: contain; padding: 13%; position: relative; margin-bottom: 100px; color: #22343C;}
  
 +
.bigtitle a {color: #22343C; text-decoration: none;}
  
−
#menu2 ul, #menu3 ul {list-style: none; margin: 0; padding: 0;  margin-top: -20px; }
+
.title2 {font-family: League Script; font-size: 380%; line-height: 1;}
−
#menu2 ul li, #menu3 ul li {background-color: rgba(255, 255, 255, 0.8); list-style: none; padding-top: 7px; padding-bottom: 7px; margin-bottom: 10px; margin-top: -4px; opacity: 0.6; color: #000; padding-left: 13px; font-family: Raleway;
+
−
letter-spacing: 1.1px; font-size: 14px;   border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0);  cursor: pointer; display: block; }
+
  
 +
.titlecircle {width: 100%; margin: 0 auto; padding-top: 14%;}
  
−
#menu2 ul li:hover, #menu3 ul li:hover {opacity: 0.7;    transition-property: opacity;
+
.arrow {font-size: 50px;}
−
    transition-duration: 1s;
+
−
    transition-timing-function: ease; color: #000; -webkit-transition: color ease-in-out 150ms;}
+
  
−
li.selected {background: #fff; border: 2px solid !important; border-color: #22343C; color: #22343C; opacity: 1 !important; animation: selectedappear 1s ease-in 0s 1;
+
 
−
-webkit-animation: selectedappear 1s ease-in 0s 1; font-size: 15px;
+
.buttonblack {
 +
text-transform: uppercase;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 4px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;  
 +
  transition-timing-function: ease;
 +
            color: #FFFFFF;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
 
 +
.latesimage {background: #fff; display: block; padding: 5px 8px; border: 1px solid; border-color: #22343C; border-radius: 10px; line-height: 1.5; letter-spacing: 0.8; font-weight: bold; margin-top: 5px; opacity: 0.7; margin-bottom: 40px;
 
}
 
}
  
−
@-webkit-keyframes selectedappear {0% {opacity: 0.7;} 100% {opacity: 1;}}
+
@media(max-width:1280px){
  
−
li.selected:hover {background: #fff; opacity: 1 !important; border: 2px solid !important; border-color: #22343C !important; color: #22343C !important;}
+
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
 +
.buttonblack {padding: 5px 11px;}
 +
 
 +
.blockk {line-height: 1.8;}
 +
#wraplatescolumn1 {width: 55%; float: left; padding-right: 2%;}
 +
#wraplatescolumn2 {width: 43%; float: right;}
 +
.latesimage {margin-bottom: 20px;}
  
  
  
−
@media(max-width:1152px){.title {font-size: 56px;}
 
−
#menu2 {left: 80px; width: 22%;}
 
−
#protocolcontent {right: 80px; width: 61%;}
 
 
}
 
}
  
  
−
@media(max-width:1024px){ .title {font-size: 50px;} .protcl {padding: 12px;} #menu2 {left: 70px;}
+
 
−
#protocolcontent {right: 70px;}
+
 
−
#mobilebackground {display:block;}
+
@media(max-width:1152px){
 +
 
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 90%;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
.blockk {line-height: 1.6;}
 +
 
 +
}
 +
 
 +
 
 +
@media(max-width:1024px){  
 +
.bigtitle {width: 58%; font-size: 13px;}
 +
.titlecircle {padding-top: 15%; width: 808;}
 +
#wrapper {top: 100px; width: 88%; margin: 0 auto; overflow-x: hidden;}
 +
.blockk {margin-left: 1%; width: 99%;}
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 
#header2:before {background-image: none;}
 
#header2:before {background-image: none;}
 +
#mobilebackground {display: block;}
 +
.constructs {font-size: 15px;}
 +
 +
#wraplatescolumn2 .latesimage {margin-bottom: 35px;}
 +
 +
 +
 +
}
 +
 +
@media(max-width:960px){
 +
 +
.bigtitle {font-size: 13px; width: 60%; padding: 15%;}
 +
.buttonblack {padding: 5px 5px;}
 +
#submenu {width: 100%;}
 +
.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
 +
.constructs {text-align: center;}
 +
.blockk {line-height: 1.5;}
 +
.latesimage {font-size: 13px;}
 +
 
}
 
}
  
−
@media(max-width:960px){ #menu2 ul li {font-size: 13px; padding-top: 5px; padding-bottom: 5px;} .protcl h4 {font-size: 13px;} .protcl {padding: 8px;} #mobilebackground {opacity: 0.9;} }
 
  
 +
@media(max-width:910px){
 +
}
  
−
@media(max-width:910px){ #menu2 {left: 45px; width: 24%;}
+
@media(max-width:850px){  
−
#protocolcontent {right: 45px; width: 63%;} .title {font-size: 46px;}
+
a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 +
.buttonblack {padding: 4px 3px;}
 +
.constructs img {min-width: 80% !important;}
 +
.blockk {font-size: 13px;}
  
  
−
  }
 
  
−
@media(max-width:830px){ #menu2 {left: 35px;}
 
−
#protocolcontent {right: 35px;} .protcl {border-radius: 10px;} #mobilebackground {opacity: 0.8;}
 
−
#menu2 ul li {padding-top: 3px; padding-bottom: 3px;
 
−
padding-left: 10px; padding-right: 10px; opacity: 0.8;} li.selected, li.selected:hover {border: 1px solid !important;}
 
  
 
}
 
}
  
−
@media(max-width: 768px){#wrapper {padding-top: 50px;}
 
−
.title {font-size: 56px;} .protcl {padding-top: 25px;} .protcl h4 { line-height: 1.3;}
 
  
 +
 +
@media(max-width: 768px){
 +
.bigtitle {font-size: 13px; padding: 20%; width: 60%;}
 +
.bigtitle p { font-size: 13px; margin-top: -20px !important;}
 +
.titlecircle {width: 100%; padding-top: 8%;}
 +
a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
#wraplatescolumn2 .latesimage {margin-bottom: 60px;}
  
  
Line 166: Line 348:
  
  
−
@media(max-width:680px){.protcl {padding-top: 35px;} #menu2 ul li {padding-left: 5px;} .protcl h4 ul {margin: 0;}}
 
  
−
@media(max-width:620px){ #menu2 {left: 20px; width: 27%;}
 
−
#protocolcontent {right: 20px; width: 63%;} .protcl {padding: 35 5 5 5;} #protocolcontent h2 {font-size: 16px; letter-spacing: 3px;}
 
  
−
.protcl img {width: 100% !important; height: auto !important;}
+
@media(max-width:680px){
 +
#wrapper {width: 100%;}
 +
.blockk {margin-left: 5%; width: 90%;}
 +
.constructs {font-size: 13px;}
 +
.bigtitle p { font-size: 13px; }
 +
.titlecircle {width: 90%; padding-top: 10%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
 
 +
 
  
 
}
 
}
  
−
@media(max-width:530px) { #menu2 {left: 10px; width: 28%;}}
+
@media(max-width:640px){  
−
@media(max-width:520px){ #menu3 {width: 80%; left: 10%; display: inline;} #menu2 {display: none;} #menu3 ul li {padding-left: 5px; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; opacity: 0.8; font-size: 13px;}
+
.title2 {font-size: 420%;}
−
#protocolcontent {width: 80%; right: 10%;}   }
+
#submenu {width: 80%; margin: 0 auto;}
 +
#wraplatescolumn2 .latesimage {margin-bottom: 150px;}
 +
.latesimage {font-size: 12px;}
 +
 
 +
 
 +
 
 +
}
 +
 
 +
 
 +
@media(max-width: 600px) {
 +
#wraplatescolumn1 {width: 90%; float: none; padding-right: 0;}
 +
#wraplatescolumn2 {width: 90%; float: none;}
 +
.blockk {margin-left: 10%; width: 90%;}
 +
.blockk h2 { width: 85%; font-size: 18px !important;}
 +
#wraplatescolumn2 .latesimage, #wraplatescolumn1 .latesimage {margin-bottom: 20px;}
 +
 
 +
}
 +
 
 +
@media(max-width:530px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
 +
.title2 {font-size: 400%;}
 +
.titlecircle {width: 100%; padding-top: 12%;}
 +
 
 +
 
 +
}
 +
 
 +
@media(max-width: 480px) {
 +
#submenu {width: 90%; margin: 0 auto;}
 +
.title2 {font-size: 380%;}
 +
 
 +
 
 +
 
 +
 
 +
}
 +
 
 +
@media(max-width: 430px) {
 +
.title2 {font-size: 360%;}
 +
.titlecircle {width: 100%; padding-top: 14%;}
 +
.bigtitle {padding: 18%; width: 66%;}
 +
}
 +
 
 +
@media(max-width: 380px) {
 +
 
 +
.titlecircle {width: 100%; padding-top: 18%;}
 +
.title2 {font-size: 320%;}
 +
 
 +
.bigtitle {padding: 15%; width: 70%; opacity: 1; }
 +
 
 +
#mobilebackground {-webkit-mask-image: none; opacity: 0.7;
 +
}
 +
 
 +
 
 +
}
 +
 
 +
 
 +
@media(max-width: 360px) {
 +
 
 +
.buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
 +
}
 +
 
 +
 
 +
 
 
</style>
 
</style>
 
</head>
 
</head>
−
<body>
 
  
 
<div id="mobilebackground"></div>
 
<div id="mobilebackground"></div>
  
−
<div id="header2">
+
<div id="header2">
  
−
     
 
 
<div id="wrapper">
 
<div id="wrapper">
  
−
<div id="menu2">
+
<div class="bigtitle">
−
<p class="title">Protocols</p>
+
<div class="titlecircle"><span class="title2">Collaborations</span> <br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a></span>
−
            <ul class="cos">
+
−
          <li id="item1">Restriction digestion</li>
+
−
            <li id="item2">Ligation</li>
+
−
  <li id="item3">Transformation</li>
+
−
            <li id="item4">Agarose gel electrophoresis</li>
+
−
            <li id="item5">2 part assembly with gel extraction</li>
+
−
    <li id="item6">Polymerase Chain Reaction</li>
+
−
            <li id="item7">Gibson Assembly</li>
+
−
    <li id="item8">Agar plate preparation</li>
+
−
      <li id="item9">IPTG-induced protein expression</li>
+
−
    <li id="item10">Spectrophotometric assays</li>
+
−
            <!--  <li id="item11">...</li>
+
−
                <li id="item12">...</li>
+
−
                <li id="item13">...</li> -->
+
  
  
−
            </ul>
 
  
−
        </div>
+
</div> </div>  
  
 +
<div class="blockk">
 +
<!--GENERAL SUMMARY HERE -->
 +
</div>
  
−
<div id="menu3">
+
<div id="submenu" style="padding-top: 150px;">
−
<p class="title">Protocols</p>
+
        <a data-scroll data-options='{ "easing": "linear" }' href="#lates" class="buttonblack">Science Museum Lates</a>  
−
            <ul class="cos">
+
       
−
              <a href="#digestion"><li id="item1">Restriction digestion</li></a>
+
<a data-scroll data-options='{ "easing": "linear" }' href="#showcase" class="buttonblack">SynBio Showcase</a>
−
                <a href="#ligation"><li id="item2">Ligation</li></a>
+
−
              <a href="#transformation"><li id="item3">Transformation</li></a>
+
−
                <a href="#gel"><li id="item4">Agarose gel electrophoresis</li></a>
+
−
                <a href="#gelextraction"><li id="item5">2 part assembly with gel extraction</li></a>
+
−
                <a href="#pcr"><li id="item6">Polymerase Chain Reaction</li></a>
+
−
                <a href="#gibson"><li id="item7">Gibson Assembly</li></a>
+
−
                <a href="#plates"><li id="item8">Agar plate preparation</li></a>
+
−
                <a href="#iptg"><li id="item9">IPTG-induced protein expression</li></a>
+
−
                <a href="#assays"><li id="item10">Spectrophotometric assays</li></a>
+
−
            <!--  <li id="item11">...</li>
+
−
                <li id="item12">...</li>
+
−
                <li id="item13">...</li> -->
+
  
  
−
            </ul>
+
  <!--
 +
  <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a> -->
  
−
        </div>
+
</div>
  
−
<div id="protocolcontent">
 
−
<div class="default-text"></div>
 
−
   
 
  
−
        <div class="about-item1 hide">
 
  
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="lates" style="padding-top: 150px;"> . </span> </h2>
 +
 +
<div id="wraplates">
 +
<div id="wraplatescolumn1">
  
−
          <div class="protcl" id="digestion"> <h2>Restriction digestion</h2>
 
−
<h4>
 
−
<ol>
 
−
<li>Prepare restriction digestion mixture:
 
−
<ul><b>IDT gBlocks</b></ul>
 
−
<ul>- 10 ul of DNA (10 ng/ul)</ul>
 
−
<ul>- 2 ul of 10 x 2.1 buffer</ul>
 
−
<ul>- 0.3 ul of EcoR1</ul>
 
−
<ul>- 0.3 ul of Pst1</ul>
 
−
<ul>- 7.4 ul of milliQ H2O</ul><br/>
 
  
−
<ul><b>Other digestions</b></ul>
 
−
<ul>- Required amount of DNA</ul>
 
−
<ul>- 1 ul of 10 x 2.1 buffer</ul>
 
−
<ul>- 0.3 ul of EcoR1</ul>
 
−
<ul>- 0.3 ul of Pst1</ul>
 
−
<ul>- add milliQ H2O up to 10 ul</ul>
 
−
<ul>(if using total volume greater than 10ul, increase the amount of buffer accordingly)</ul><br/>
 
  
−
</li>
 
−
<li>Incubate at 37C for an hour</li>
 
−
<li> Heat inactivate by incubating at 80C for 20 minutes</li>
 
−
<li>Run a sample of digested DNA on a gel in order to confirm digestion:
 
−
<ul>- 2 ul of DNA</ul>
 
−
<ul>- 1 ul of 6 x Gel Loading Dye</ul>
 
−
<ul>- 3 ul of milliQ H2O</ul>
 
−
</li>
 
−
<li>If digestion is confirmed, proceed to ligation </li>
 
−
</ol>
 
−
</h4>
 
 
</div>
 
</div>
  
−
        </div>
 
−
     
 
  
−
<div class="about-item2 hide">
 
−
         
 
−
<div id="ligation" class="protcl"> <h2>Ligation</h2>
 
−
<h4>
 
−
<ol>
 
−
<li> Calculate the amount of insert DNA required to maintain 1:3 backbone:insert molar ratio using formula below. For standard ligations use 50 ng of vector DNA, increase the amounts of DNA if unsuccessful.<br/>
 
−
<!--<img src="https://static.igem.org/mediawiki/2015/9/9a/UCL_ligationformula.png.png">--> </li>
 
  
−
$$Insert\:Mass\:in\:ng = 3\times  \bigg[\frac{Insert\:Length\:in\:bp}{Vector\:Length\:in\:bp}\bigg] \times Vector\:Mass\:in\:ng$$
 
  
−
<li> Prepare the ligation mixture:
+
<div id="wraplatescolumn2">
−
<ul> - required amount of insert DNA</ul>
+
−
<ul> - required amount of vector DNA </ul>
+
−
<ul> - 1 ul of T4 ligase </ul>
+
−
<ul> - 2 ul of 10 x ligase buffer </ul>
+
−
<ul> - add milliQ H2O up to 20 ul</ul>
+
−
</li>
+
−
<li>Incubate at 16C for 30 minutes</li>
+
−
<li>Heat inactivate by incubating at 80C for 20 minutes</li>
+
−
<li>Keep on ice until ready to proceed with transformation protocol</li>
+
−
+
−
</ol>
+
  
 +
 +
</div>
 +
</div>
 
</div>
 
</div>
−
        </div>
 
  
  
−
        <div class="about-item3 hide">
+
<br/><br/>
−
          <div id="transformation" class="protcl"><h2>Transformation </h2>
+
−
<h4>
+
−
<ol>
+
−
<li>(If using part from the distribution: resuspend the DNA in 10 ul of MiliQ water, making sure that it turns red. Wait 10 minutes before adding the DNA to cells)</li>
+
−
<li>Put a tube of NEB DH 5 alpha <i>E. coli</i> cells on ice and wait until they thaw completely. Divide the cells into 50 ul aliquotes. </li>
+
−
<li>Add 1 ul of plasmid DNA to 50 ul of cells. </li>
+
−
<li>Mix by carefully flicking the tube. Do not vortex or pipette in and out! </li>
+
−
<li>Place the mixture on ice for 30 minutes. </li>
+
−
<li>Heat shock the cells at 42 °C for 30 seconds and immediately put on back on ice.</li>
+
−
<li>Keep cells on ice for next 5 minutes. Do not mix. </li>
+
−
<li>Pipette 950 ul of SOC media kept at room temperature into the mixture. If SOC is not available, use LB. <br/>
+
−
<li>Incubate the mixture at 37 °C for 60 minutes </li>
+
−
<li>Prepare plates with appropriate antibiotics. Bring plates to room temperature before plating. Use 2 plates per transformation reaction. </li>
+
−
<li>Plate 200 ul of cells on one plate.
+
−
<li>Pellet the remaining cells and resuspend in 200ul of LB.</li>
+
−
<li> Plate the remaining cells on second plate.</li>
+
−
<li>Incubate plates overnight at 37 °C. </li>
+
−
</ol>
+
−
</div>
+
−
        </div>
+
  
  
−
<div class="about-item4 hide">
 
  
−
<div id="gel" class="protcl"><h2>Agarose gel electrophoresis</h2>
+
  </div></div>
−
<h4>
+
 
−
<ol>
+
 
−
<li>Measure 0.50 g of agarose</li>
+
 
−
<li>Measure 50 ml of 1x TAE buffer using measuring cylinder</li>
+
 
−
<li> Add agarose and TAE buffer to conical flask and gently mix</li>
+
 
−
<li>Microwave the flask for 1 min</li>
+
 
−
<li>Wait for the mixture to cool down slightly before proceeding</li>
+
 
−
<li>Add 10 ul of 10mg/ml ethidium bromide solution and mix</li>
+
 
−
<li>Assemble the casting tray and pour the gel into it</li>
+
<!---
−
<li>Wait around 30 minutes until gel gets solidified</li>
+
 
−
<li>Put the gel into the gel chamber and pour 1x TAE buffer until it is fully covered </li>
+
 
−
<li>Load 6 ul of DNA ladder to the first well.
+
OLD TEXT
−
<li>Prepare the samples by adding appropriate volume of 6x gel loading dye and load them</li>
+
 
−
<li>Assemble the gel chamber and run the gel for 40 minutes at 120V</li>
+
<h2>UCL Academy </h2>
−
<li>Visualise the gel using the gel visualizer</li>
+
<p> With hopes of engaging the high school students of UCL Academy with synthetic biology, we´ll be teaching them about our iGEM project and lab protocols as well as working with them on their very first synthetic biology project throughout the summer.</p>
−
</ol>
+
 
−
</div>
+
<h2>Headstart Summer School </h2>
 +
<p> We shared the joy of synthetic biology and iGEM with the A Level students from all over UK attending the UCL Headstart Biochemical Engineering Summer School at a reception and formal dinner.</p>
 +
 
 +
-->
 +
 
 
</div>
 
</div>
  
−
<div class="about-item5 hide">
 
−
<div id="gelextraction" class="protcl"><h2>Assembly of 2 parts using gel extraction</h2>
 
−
<h4>
 
−
<ol>
 
−
<li>Digest at least 500 ng of each part according to the restriction digestion</li>
 
−
<li>Run the digested DNA on the gel according to gel electrophoresis protocol</li>
 
−
<li>Identify the parts that you want to ligate on a gel and cut the bands out using razor blade</li>
 
−
<li>Purify the excised bands using the commercial kit according to the manufacturer's instructions</li>
 
−
<li>Quantify the DNA yield using DNA nanodrop</li>
 
−
<li>Proceed to ligation</li>
 
  
−
</ol>
+
</div>
−
</h4>
+
−
</div></div>
+
  
−
<div class="about-item6 hide">
+
</div> </div> </div>
−
<div id="pcr" class="protcl"><h2>Polymerase Chain Reaction</h2>
+
−
<h4>
+
−
<ol>
+
−
<li>Prepare the PCR mix:
+
−
<ul>- 12.5 ul of 2 x Q5 PCR master mix</ul>
+
−
<ul>- 1.25 ul of 10 uM forward primer</ul>
+
−
<ul>- 1.25 ul of 10 uM reverse primer</ul>
+
−
<ul>- 2 ng of DNA to be PCRed</ul>
+
−
<ul>- add milliQ H2O up to 25 </ul>
+
−
</li>
+
−
<li> Set up the PCR cycles according to the following rules:
+
−
<ul><b>Initial denaturation</b></ul>
+
−
<ul>- 98C for 30 seconds</ul>
+
  
−
<ul><b>35 cycles</b></ul>
+
</body>
−
<ul>- 98C for 10 seconds</ul>
+
−
<ul>- 30 seconds at primer melting temperature</ul>
+
−
<ul>- 72C for 30sec/kb of PCRed fragment</ul>
+
−
 
+
−
<ul><b>Final extension</b></ul>
+
−
<ul>- 72C for 2 minutes</ul>
+
−
<ul>- Hold at 4C</ul>
+
−
</li>
+
−
<li>Confirm the PCR by running 2 ul of the product on the gel according to the gel electrophoresis protocol</li>
+
−
</ol>
+
−
</div></div>
+
  
 +
</html>
  
  
−
<div class="about-item7 hide">
 
−
<div id="gibson" class="protcl"><h2>Gibson Assembly</h2>
 
  
−
<h4>
 
−
<ol>
 
−
<li>When designing the gBlock fragments for Gibson Assembly, make sure that the fragments have ~20 bp overlap and that first and last insert fragment have ~20 bp overlap with respective ends of PSB1C3 </li>
 
−
<li>Convert the concentration of vector and inserts from ng/ul to pmol/ul using the following formula:<br>
 
−
<img src="https://static.igem.org/mediawiki/2015/8/85/UCL_Screenshot_2015-08-06_at_15.26.47.png" style="width: 259px; height: 54px;"></li>
 
−
<li>Prepare the Gibson Assembly mixture:
 
−
<ul> - 0.08 pmol of each insert</ul>
 
−
<ul> - 0.04 pmol of vector </ul>
 
−
<ul> - 10 ul of Gibson Assembly mix </ul>
 
−
<ul> - add milliQ H2O up to 20 ul </ul></li>
 
−
<li>Incubate the reaction at 50C for 15 minutes. Following incubation, put samples on ice. </li>
 
−
<li>Proceed to transformation protocol. Use 2 ul of the Gibson Assembly reaction mixture for transformation</li>
 
  
−
</ol>
 
−
</div></div>
 
  
−
<div class="about-item8 hide">
 
−
<div id="plates" class="protcl"><h2>Agar plate preparation</h2>
 
  
−
<ol>
 
  
−
</ol>
 
  
−
</div></div>
 
  
−
<div class="about-item9 hide">
 
−
<div id="iptg" class="protcl"><h2>IPTG-induced protein expression</h2>
 
−
<h4>
 
−
<ol>
 
  
−
<li>On the afternoon before the induction, start seed culture with appropriate antibiotic from glycerol stock and leave to incubate overnight at 37C shaking</li>
+
<!---
−
<li>The next morning, use 2 µl of seed culture to inoculate 100 ml of fresh media with appropriate antibiotic in shaker flask and grow until an OD600 nm of 0.4-0.6 is reached</li>
+
−
<li>If necessary, prepare these in the meantime :
+
−
<ul>- 50 ml stock of  lysis buffer (25 mM TRIS-Cl, 2 mM EDTA, pH 7.6):
+
−
<li> weight 0.151g of Tris base</li>
+
−
<li>add 45 ml of water</li>
+
−
<li>titrate with HCL to pH 7.6</li>
+
−
<li>fill up to 50 ml with water</li>
+
−
<li>add 29.2 mg of EDTA</li></ul>
+
−
<ul>- IPTG 100 mM stocks: (23.8 mg IPTG per 1ml ddH2O )</ul>
+
−
<li>When culture reaches OD of 0.4-0.6, add IPTG to a final concentration of 1 mM (=100ul of 100 mM stock)</li>
+
−
<li>Incubate induced culture at 30 °C for 4 hours</li>
+
−
<li>Split the culture into 4 falcon tubes (~25 ml each) and harvest the pellets by centrifugation for 20mins at max speed</li>
+
−
<li>Resuspend each pellet in 2 ml of  lysis buffer, lyse by sonication (10 cycles of 10 sec with 10 sec breaks)</li>
+
−
<li>Centrifuge 20 min at max speed.</li>
+
−
<li>Transfer all supernatants to separate tube</li>
+
−
<li>Measure the concentration of protein in supernatant using Bradford Assay</li>
+
−
<li>Store in the freezer</li>
+
  
 +
<p>In iGEM it is all about collaborating! Throughout the summer we have been in contact with multiple iGEM teams from all over the world to improve our projects, benefit from one another's ideas and also because working together is always more fun.</p>
 +
<div>
 +
<br>
 +
<h2 style="margin-top:1%">UCL iGEM Bootcamp Mini Jamboree </h2>
  
 +
<p>In collaboration with the London Biohackspace and Birkbeck College, we hosted an intensive, gruelling bootcamp that enlightened the attendees about various biobrick assembly protocols, biohacking, automation, and softwares associated with synthetic biology. The bootcamp culminated in a fascinating mini Jamboree, which featured all our iGEM projects, wiki and modeling tutorials, and even a DIY Spectrophotometer made in 1 week!  </p>
  
 +
<br>
  
−
</ol></h4>
+
<h2 style="margin-top:1%">London iGEM Meet-up</h2>
−
</div></div>
+
<p>iGEM teams around London met up on 31<sup>st</sup> of July at Birkbeck and presented the current progress of their research projects to each other, followed by a poster session and time for socialising. The teams involved were: UCL, Birkbeck, London Biohackspace, Westminster and Kent. </p>
  
 +
<br>
  
−
<div class="about-item10 hide">
+
<h2 style="margin-top:1%">2014 Aalto-Helsinki Team: Blue-Light-Response Element</h2>
−
<div id="assays" class="protcl"><h2>Spectrophotometric assays</h2>
+
<p>In order to use our constructs as personalised treatment devices, we collaborated with the Aalto-Helsinki team to use the blue-light-response element they created in 2014. The idea is to have a handheld/mobile device that can emit blue light and induce expression of out constructs when needed.</p>
−
<h4>
+
−
<ol>
+
−
- Assay for tryptophan hydroxylase (<b>BBa_K1598002</b>) activity: <a href="https://static.igem.org/mediawiki/2015/c/cb/UCL_BBa_K1598002_Assay.pdf">download protocol</a>
+
  
−
</ol>
+
<br>
−
</h4>
+
−
</div></div>
+
  
 +
<h2 style="margin-top:1%">UCL iGEM 2015 Collaboration survey</h2>
 +
<p>This year UCL iGEM team has prepared an ambitious survey to to get the public's perception on synthetic biology, genetic engineering and probiotics. As survey was translated into 5 different languages including Spanish, French, Portuguese and German we have collaborated with iGEM teams from all around the world to collect as many data as possible as well as see how people's opinion on these topics varies from country to country.</p>
 +
<p>All our collaborators received a badge to express our gratitude for the joint collaboration.The teams that collaborated with us were:</p>
 +
<ul>
 +
<li>Brasil-USP iGEM</li>
 +
<li>Bordeaux iGEM</li>
 +
<li>Macquarie iGEM</li>
 +
<li>UNSW iGEM</li>
 +
</ul>
  
 +
<br>
  
−
</div></div></div>
+
<h2 style="margin-top:1%">2015 Oxford Team: short video assays on Synthetic biology and Health</h2>
 +
<p> In August 2015, members of the Oxford and UCL iGEM teams met up in London to get a grasp of the way people perceive Synthetic Biology applications in healthcare. The discussions worked as a platform for a collaboration between the Manchester-Graz, UCL and Oxford teams. In this joint initiative, they were able to gather some exciting new ideas on how to better develop an iGEM project that targets health conditions such as urinary tract infections (UTIs), schizophrenia and other mental health conditions such as anxiety and depression.</p>
  
 +
<br>
  
 +
<h2 style="margin-top:1%">2015 Paris-Bettencourt Team: Rhizi database</h2>
 +
<p> We joined the Rhizi graphical database created by the Paris-Bettencourt team and received a pretty collaboration badge as a token for our appreciation.</p>
 
</body>
 
</body>
 +
iGEM's NOTES ABOUT COLLABORATION
 +
<p>
 +
Sharing and collaboration are core values of iGEM. We encourage you to reach out and work with other teams on difficult problems that you can more easily solve together.
 +
</p>
  
−
<script type="text/x-mathjax-config">
+
<div class="highlightBox">
−
MathJax.Hub.Config({
+
−
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
+
−
});
+
−
</script>
+
−
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
  
−
<script type="text/javascript">
+
<h4> Which other teams can we work with? </h4>
−
$('.cos li').click(function(e) {
+
<p>
−
  var $this = $(this),
+
You can work with any other team in the competition, including software, hardware, high school and other tracks. You can also work with non-iGEM research groups, but they do not count towards the <a hreef="https://2015.igem.org/Judging/Awards#Medals">iGEM team collaboration gold medal criterion</a>.
−
      $id = $this.attr('id'),
+
</p>
−
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');
+
−
 
+
−
  $('.default-text').addClass('hide');
+
−
  $('.about-' + $id).removeClass('hide');
+
−
  $('div[class*=about]').not($class).addClass('hide');
+
−
$($this).addClass('selected');
+
−
$('li').not($this).removeClass('selected');
+
  
−
});
+
<p>
 +
In order to meet the gold medal criteria on helping another team, you must complete this page and detail the nature of your collaboration with another iGEM team.
 +
</p>
 +
</div>
  
−
</script>
+
<p>
−
</html>
+
Here are some suggestions for projects you could work on with other teams:
 +
</p>
 +
 
 +
<ul>
 +
<li> Improve the function of another team's BioBrick Part or Device</li>
 +
<li> Characterize another team's part </li>
 +
<li> Debug a construct </li>
 +
<li> Model or simulating another team's system </li>
 +
<li> Test another team's software</li>
 +
<li> Help build and test another team's hardware project</li>
 +
<li> Mentor a high-school team</li>
 +
</ul>
 +
 
 +
<div style="height:50px;">
 +
</div>
 +
</body>
 +
</head>
 +
-->

Revision as of 18:21, 7 September 2015

'