Difference between revisions of "Team:BGIC-Union/InterLab"

Line 1: Line 1:
  
<html>
 
  <head>
 
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
    
 
    
Line 7: Line 5:
  
  
     <title>Team:BGIC-Union/Practices-Design</title>
+
     <title>Safety</title>
  
 
   <head>
 
   <head>
 
    
 
    
 +
        <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
 +
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500' rel='stylesheet' type='text/css'>
  
 
   <!-- Bootstrap core CSS -->
 
   <!-- Bootstrap core CSS -->
Line 19: Line 19:
 
   <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&amp;ctype=text/css" rel="stylesheet">
   <!-- light -->
+
    
<style type="text/css">
+
/* fixed line holder */
+
.timelineLight .timeline_line {c
+
margin-top:50px;
+
margin-bottom:10px;
+
width:900px;
+
}
+
.timelineLight
+
{color: #fff;
+
background: #ffe4e1;}
+
/* full (including months that are not shown) line holder */
+
.timelineLight .t_line_holder {
+
height:80px;
+
background:url('https://static.igem.org/mediawiki/2017/3/35/Line.jpg') repeat-x 0px 39px;
+
}
+
 
+
/* 2 months are stored in one view */
+
.timelineLight .t_line_view {
+
height:20px;
+
width:900px;
+
}
+
 
+
/* holder for year number */
+
.timelineLight h3.t_line_year {
+
margin:0;
+
color:#545454;
+
}
+
 
+
/* holder for 1 month (constist of nodes and month caption) - we use borders to separate months thats why it has width 2px less then 50% */
+
.timelineLight .t_line_m {
+
margin-top:35px;
+
height:10px;
+
border-left:1px solid #545454;
+
border-right:1px solid #545454;
+
width:448px;
+
}
+
 
+
/* month on the right side - has left set at 459 so border would overlap border from first element (to evade duplicated borders) */
+
.timelineLight .t_line_m.right {
+
left:449px;
+
width:449px;
+
}
+
 
+
/* month caption */
+
.timelineLight h4.t_line_month {
+
margin:-30px 0 0;
+
color:#545454;
+
}
+
 
+
/* used in responsive layout when only one month is shown (it is span containing year) */
+
.t_line_month_year {
+
display:none;
+
}
+
 
+
/* node on the timeline */
+
.timelineLight a.t_line_node {
+
text-decoration:none;
+
padding:38px 0 4px;
+
height:10px;
+
font-size:12px;
+
top:-25px;
+
background:url('https://static.igem.org/mediawiki/2017/2/2a/Dot.png') no-repeat center 24px;
+
color:#141817;
+
}
+
.timelineLight a.t_line_node:hover {
+
background:url('https://static.igem.org/mediawiki/2017/6/65/Dot-rollover.png') no-repeat center 24px;
+
}
+
.timelineLight a.t_line_node.active {
+
background:url('https://static.igem.org/mediawiki/2017/d/d7/Dot-selected.png') no-repeat center 24px;
+
}
+
 
+
/* node description */
+
.timelineLight .t_node_desc {
+
background: rgba(26,134,172,0.9);
+
top:0;
+
color:#fff;
+
padding:1px 5px;
+
}
+
 
+
/* descriptions on right side go from right to left */
+
.timelineLight .t_node_desc.pos_right {
+
right:0;
+
}
+
 
+
/* line arrow left */
+
.timelineLight #t_line_left {
+
cursor:pointer;
+
left:-30px;
+
top:30px;
+
width:14px;
+
height:19px;
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left top;
+
}
+
 
+
.timelineLight #t_line_left:hover {
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left bottom;
+
}
+
 
+
/* line arrow right */
+
.timelineLight #t_line_right {
+
cursor:pointer;
+
right:-30px;
+
top:30px;
+
width:14px;
+
height:19px;
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right top;
+
}
+
 
+
.timelineLight #t_line_right:hover {
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right bottom;
+
}
+
.timelineLight {
+
display:none;
+
}
+
 
+
/* items container */
+
.timelineLight .timeline_items {
+
padding:10px 0;
+
}
+
 
+
/* single item (margines set from javascript) */
+
.timelineLight .item {
+
height:380px;
+
text-align:center;
+
+
color: #fff;
+
background: #f7dae7;
+
+
-moz-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
+
-webkit-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
+
box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
+
width:200px;
+
}
+
 
+
/* ----- content - non-plugin elements ----- */
+
.timelineLight .item img {
+
margin-top:0;
+
width:200px;
+
}
+
 
+
.timelineLight .item span{
+
display:block;
+
margin:0px 20px 10px;
+
height:150px;
+
}
+
.timelineLight .item .read_more {
+
padding:2px 8px 2px 10px;
+
font-family:Comic Sans MS;
+
font-size:20px;
+
float:right;
+
color:#ffffff;
+
background: rgba(0,0,0,0.35);
+
cursor:pointer;
+
}
+
.timelineLight .item .read_more:hover {
+
background:rgb(26,134,172);
+
}
+
/* ----------------------------------------- */
+
 
+
/* item details (margines set from javascript) */
+
.timelineLight .item_open {
+
height:380px;
+
background:url('../images/timeline/light/background.jpg') repeat;
+
position:relative;
+
color:#545454;
+
z-index:2;
+
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
+
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
+
box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
+
width:490px;
+
+
}
+
 
+
/* item details content wrapper (used for animation - shuld have same width as .item_open) */
+
.timelineLight .item_open_cwrapper {
+
width:490px;
+
}
+
 
+
/* ----- content - non-plugin elements ----- */
+
.timelineLight .timeline_open_content {
+
padding:20px;
+
}
+
 
+
.timelineLight .item_open h2 {
+
margin-top:10px;
+
padding-top:0;
+
font-size:28px;
+
}
+
.timelineLight .item_open .t_close {
+
position:absolute;
+
top:10px;
+
right:10px;
+
padding:2px 8px 2px 10px;
+
font-family: Comic Sans MS;
+
font-size:20px;
+
color:#ffffff;
+
background: rgba(0,0,0,0.25);
+
cursor:pointer;
+
}
+
.timelineLight .item_open .t_close:hover {
+
background:rgb(26,134,172);
+
}
+
/* ----------------------------------------- */
+
 
+
/* left/right controles */
+
.timelineLight .t_controles {
+
margin:10px auto;
+
text-align:center;
+
}
+
.timelineLight .t_left,
+
.timelineLight .t_right {
+
display:inline-block;
+
height:50px;
+
width:29px;
+
margin:10px;
+
cursor:pointer;
+
}
+
.timelineLight .t_left, 
+
.timelineLight .t_left:hover:active {
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left top;
+
}
+
.timelineLight .t_left:hover {
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left bottom;
+
}
+
 
+
.timelineLight .t_right,
+
.timelineLight .t_right:hover:active{
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right top;
+
}
+
 
+
.timelineLight .t_right:hover {
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right bottom;
+
}
+
 
+
/* -----------------------------------------------------------------------*/
+
/* ------------------------------ RESPONSIVE -----------------------------*/
+
/* -----------------------------------------------------------------------*/
+
 
+
 
+
 
+
/* --- 768px --- */
+
@media screen and (max-width:980px) {
+
+
.timelineLight .timeline_line {
+
width:680px;
+
}
+
+
.timelineLight .t_line_view {
+
width:680px;
+
}
+
+
.timelineLight .t_line_m {
+
width: 338px;
+
}
+
.timelineLight .t_line_m.right {
+
left: 339px;
+
width: 339px;
+
}
+
}
+
 
+
 
+
/* --- 610px --- */
+
@media screen and (max-width:767px) {
+
+
.timelineLight .timeline_line {
+
width:530px;
+
}
+
+
.timelineLight .t_line_view {
+
width:1060px;
+
}
+
+
.timelineLight .t_line_m {
+
width: 528px;
+
}
+
.timelineLight .t_line_m.right {
+
left: 530px;
+
width: 528px;
+
}
+
.timelineLight .t_line_year {
+
opacity:0;
+
filter:alpha(opacity=0)
+
}
+
.timelineLight .t_line_month_year {
+
display:inline;
+
}
+
+
.timelineLight .t_line_node span {
+
+
}
+
.timelineLight .t_node_desc {
+
font-size:8px;
+
}
+
.timelineLight .t_node_desc.pos_right {
+
right:auto;
+
left:0;
+
}
+
}
+
 
+
 
+
/* --- 300px --- */
+
@media screen and (max-width:
+
 
+
) {
+
.timelineLight .timeline_line {
+
width:240px;
+
}
+
+
.timelineLight .t_line_view {
+
width:480px;
+
}
+
+
.timelineLight .t_line_m {
+
width: 238px;
+
}
+
.timelineLight .t_line_m.right {
+
left: 240px;
+
width: 238px;
+
}
+
+
.timelineLight .item_open {
+
width:280px;
+
height:390px;
+
}
+
.timelineLight .item_open_cwrapper {
+
width:280px;
+
}
+
}
+
 
+
 
+
 
+
 
+
</style>
+
  
 
   <!-- main -->
 
   <!-- main -->
 
   <style type="text/css">
 
   <style type="text/css">
 
    
 
    
 
+
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
 
#top_title,#sideMenu { display: none !important; }
 
#top_title,#sideMenu { display: none !important; }
 
         #content {
 
         #content {
Line 366: Line 33:
 
         }
 
         }
  
#bodyContent
+
 
{
+
margin-top:0px !important;
+
}
+
  
  
Line 377: Line 41:
  
  
.mainstyle
+
{
+
font-family: Comic Sans MS;
+
}
+
 
html, body {
 
html, body {
     margin: 0 ;
+
     margin: 0 !important;
     padding: 0 ;
+
     padding: 0 !important;
 
}
 
}
 
body {
 
body {
   background-color: #ffa07a;
+
   background-color: #FFe4e1;
  
+
   font-family: 'Montserrat', sans-serif;
 
     font-weight: 400;
 
     font-weight: 400;
 
     font-size: 14px;
 
     font-size: 14px;
Line 398: Line 59:
 
/* Titles */
 
/* Titles */
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
font-family: Comic Sans MS;
+
font-family: 'Montserrat', sans-serif;
 
     font-weight: 700;
 
     font-weight: 700;
 
     color: #333;
 
     color: #333;
Line 411: Line 72:
  
  
 
+
/* Paragraph &amp; Typographic */
 
p {
 
p {
 
     line-height: 28px;
 
     line-height: 28px;
 
     margin-bottom: 25px;
 
     margin-bottom: 25px;
 
     font-size: 16px;
 
     font-size: 16px;
font-family: Comic Sans MS;
 
 
}
 
}
  
Line 474: Line 134:
  
 
.navbar-inverse {
 
.navbar-inverse {
padding-bottom: 30px;
+
padding-bottom: 70px;
padding-top: 0;
+
padding-top: 70px;
 
}
 
}
  
Line 485: Line 145:
 
.navbar-inverse .navbar-nav > li > a {
 
.navbar-inverse .navbar-nav > li > a {
 
color: white;
 
color: white;
 
 
}
 
}
 
  
 
.navbar-inverse .navbar-nav > li > a:hover {
 
.navbar-inverse .navbar-nav > li > a:hover {
Line 495: Line 153:
 
.navbar-brand {
 
.navbar-brand {
 
font-weight: 700;
 
font-weight: 700;
font-size: 40px;
+
font-size: 20px;
 
letter-spacing: 2px;
 
letter-spacing: 2px;
backgroud: white;
 
 
}
 
}
  
 
.navbar-inverse .navbar-brand {
 
.navbar-inverse .navbar-brand {
 
color: white;
 
color: white;
background-color: #FFA07A;
 
 
 
}
 
}
  
 
.navbar-inverse .navbar-toggle {
 
.navbar-inverse .navbar-toggle {
 
border-color: transparent;
 
border-color: transparent;
font-size: 12px;
 
 
}
 
}
  
Line 546: Line 200:
 
#footer p {
 
#footer p {
 
color: white;
 
color: white;
font-family: Comic Sans MS;
 
 
}
 
}
  
Line 633: Line 286:
 
   </style>
 
   </style>
 
    
 
    
  <!-- script -->
 
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 
  <script type="text/javascript">
 
  /*
 
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 
*
 
* Uses the built in easing capabilities added In jQuery 1.1
 
* to offer multiple easing options
 
*
 
* TERMS OF USE - jQuery Easing
 
*
 
* Open source under the BSD License.
 
*
 
* Copyright © 2008 George McGinley Smith
 
* All rights reserved.
 
*
 
* Redistribution and use in source and binary forms, with or without modification,
 
* are permitted provided that the following conditions are met:
 
*
 
* Redistributions of source code must retain the above copyright notice, this list of
 
* conditions and the following disclaimer.
 
* Redistributions in binary form must reproduce the above copyright notice, this list
 
* of conditions and the following disclaimer in the documentation and/or other materials
 
* provided with the distribution.
 
*
 
* Neither the name of the author nor the names of contributors may be used to endorse
 
* or promote products derived from this software without specific prior written permission.
 
*
 
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 
* OF THE POSSIBILITY OF SUCH DAMAGE.
 
*
 
*/
 
 
// t: current time, b: begInnIng value, c: change In value, d: duration
 
jQuery.easing['jswing'] = jQuery.easing['swing'];
 
 
jQuery.extend( jQuery.easing,
 
{
 
def: 'easeOutQuad',
 
swing: function (x, t, b, c, d) {
 
//alert(jQuery.easing.default);
 
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 
},
 
easeInQuad: function (x, t, b, c, d) {
 
return c*(t/=d)*t + b;
 
},
 
easeOutQuad: function (x, t, b, c, d) {
 
return -c *(t/=d)*(t-2) + b;
 
},
 
easeInOutQuad: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t + b;
 
return -c/2 * ((--t)*(t-2) - 1) + b;
 
},
 
easeInCubic: function (x, t, b, c, d) {
 
return c*(t/=d)*t*t + b;
 
},
 
easeOutCubic: function (x, t, b, c, d) {
 
return c*((t=t/d-1)*t*t + 1) + b;
 
},
 
easeInOutCubic: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 
return c/2*((t-=2)*t*t + 2) + b;
 
},
 
easeInQuart: function (x, t, b, c, d) {
 
return c*(t/=d)*t*t*t + b;
 
},
 
easeOutQuart: function (x, t, b, c, d) {
 
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 
},
 
easeInOutQuart: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 
},
 
easeInQuint: function (x, t, b, c, d) {
 
return c*(t/=d)*t*t*t*t + b;
 
},
 
easeOutQuint: function (x, t, b, c, d) {
 
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 
},
 
easeInOutQuint: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 
return c/2*((t-=2)*t*t*t*t + 2) + b;
 
},
 
easeInSine: function (x, t, b, c, d) {
 
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 
},
 
easeOutSine: function (x, t, b, c, d) {
 
return c * Math.sin(t/d * (Math.PI/2)) + b;
 
},
 
easeInOutSine: function (x, t, b, c, d) {
 
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 
},
 
easeInExpo: function (x, t, b, c, d) {
 
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 
},
 
easeOutExpo: function (x, t, b, c, d) {
 
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 
},
 
easeInOutExpo: function (x, t, b, c, d) {
 
if (t==0) return b;
 
if (t==d) return b+c;
 
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 
},
 
easeInCirc: function (x, t, b, c, d) {
 
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 
},
 
easeOutCirc: function (x, t, b, c, d) {
 
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 
},
 
easeInOutCirc: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 
},
 
easeInElastic: function (x, t, b, c, d) {
 
var s=1.70158;var p=0;var a=c;
 
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 
if (a < Math.abs(c)) { a=c; var s=p/4; }
 
else var s = p/(2*Math.PI) * Math.asin (c/a);
 
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 
},
 
easeOutElastic: function (x, t, b, c, d) {
 
var s=1.70158;var p=0;var a=c;
 
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 
if (a < Math.abs(c)) { a=c; var s=p/4; }
 
else var s = p/(2*Math.PI) * Math.asin (c/a);
 
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 
},
 
easeInOutElastic: function (x, t, b, c, d) {
 
var s=1.70158;var p=0;var a=c;
 
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 
if (a < Math.abs(c)) { a=c; var s=p/4; }
 
else var s = p/(2*Math.PI) * Math.asin (c/a);
 
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 
},
 
easeInBack: function (x, t, b, c, d, s) {
 
if (s == undefined) s = 1.70158;
 
return c*(t/=d)*t*((s+1)*t - s) + b;
 
},
 
easeOutBack: function (x, t, b, c, d, s) {
 
if (s == undefined) s = 1.70158;
 
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 
},
 
easeInOutBack: function (x, t, b, c, d, s) {
 
if (s == undefined) s = 1.70158;
 
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 
},
 
easeInBounce: function (x, t, b, c, d) {
 
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 
},
 
easeOutBounce: function (x, t, b, c, d) {
 
if ((t/=d) < (1/2.75)) {
 
return c*(7.5625*t*t) + b;
 
} else if (t < (2/2.75)) {
 
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 
} else if (t < (2.5/2.75)) {
 
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 
} else {
 
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 
}
 
},
 
easeInOutBounce: function (x, t, b, c, d) {
 
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 
}
 
});
 
 
/*
 
*
 
* TERMS OF USE - EASING EQUATIONS
 
*
 
* Open source under the BSD License.
 
*
 
* Copyright © 2001 Robert Penner
 
* All rights reserved.
 
*
 
* Redistribution and use in source and binary forms, with or without modification,
 
* are permitted provided that the following conditions are met:
 
*
 
* Redistributions of source code must retain the above copyright notice, this list of
 
* conditions and the following disclaimer.
 
* Redistributions in binary form must reproduce the above copyright notice, this list
 
* of conditions and the following disclaimer in the documentation and/or other materials
 
* provided with the distribution.
 
*
 
* Neither the name of the author nor the names of contributors may be used to endorse
 
* or promote products derived from this software without specific prior written permission.
 
*
 
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 
* OF THE POSSIBILITY OF SUCH DAMAGE.
 
*
 
*/
 
</script>
 
 
    
 
    
 
   <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&amp;ctype=text/javascript"></script>
  <!-- SLIDER_TIMELINE -->
 
<script type="text/javascript" src="https://2017.igem.org/Template:BGIC-Union/timeline-js?action=raw&amp;ctype=text/javascript"></script>
 
<script type="text/javascript">
 
  
$(window).load(function() {
 
// dark
 
$('.timelineLight').timeline({
 
openTriggerClass : '.read_more',
 
startItem : '15/08/2012'
 
});
 
});
 
</script>
 
 
  <!-- hover    -->   
 
  <!-- hover    -->   
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&amp;ctype=text/javascript"></script>
 
   </head>
 
   </head>
 
 
  <body>
 
  <body>
 
<div class="column_full_size top1">
 
<div class="column_full_size top1">
Line 891: Line 323:
 
                             <ul class="dropdown-menu" >
 
                             <ul class="dropdown-menu" >
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li>
<li><a href="https://2017.igem.org/Team:BGIC-Union/Design”></a>design</li>
+
<li><a href="https://2017.igem.org/Team:BGIC-Union/Design"></a>design</li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Model">model</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Model">model</a></li>
Line 942: Line 374:
 
     </div>
 
     </div>
 
</nav>
 
</nav>
+
<!-- +++++ Projects Section +++++ -->
<!-- BEGIN TIMELINE -->
+
+
<div class="timelineLight tl">
+
<div class="item" data-id="04/06/2017" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit...">
+
<a href="#" class="image_rollover_bottom">
+
<img src="images/thumbnails/1.jpg" alt="" />
+
</a>
+
<h2>Team Gathering</h2>
+
<p>1+1+1+1+1+1+1+1+1+1+1+1>12</br>
+
Having been through a month of number theory online learning and intense brain storming, the team settled the basic scheme for the project and met up at Shenzhen BGI-college for the first time.
+
 
+
</p>
+
<span></span>
+
<div class="read_more" data-id="22/03/2012">Read more</div>
+
<div class="timeline_open_content">
+
<h2></h2>
+
</div>
+
</div>
+
 
 
<div class="item" data-id="12/06/2017" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit...">
+
<div class="container pt">
<a href="#" class="image_rollover_bottom">
+
<div class="row mt">
<img src="images/thumbnails/2.jpg" alt="" />
+
<div>
</a>
+
</br></br></br>We are excited to have a chance to participate in the Fourth International Interlaboratory Study as a team in IGEM, 2017 and contribute our data as part of the GFP measurement. Interlab study requires us to transform eight plasmids into DH5α E.coli cell in order to measure OD 600 and Fluorescence of them as the time passes by. </br></br>
<h2>JUNE, 12</h2>
+
<h4>Calibration:</h4> </br>
<span></span><div class="read_more" data-id="12/06/2012">Read more</div>
+
1.Mea sure the Abs600 of both the LUDOX-S40 and water to obtain the correction factor.
</div>
+
</br>
<div class="item_open" data-id="12/06/2017">
+
2.Measure the fluorescence of a series of diluted fluorescein to draw the fluorescein standard curve.
<div class="timeline_open_content">
+
</br>
<h2></h2>
+
<h4>Cell Measurement Procedure:</h4>
</div>
+
</br></br>
</div>
+
1. At first, we transform eight plasmids into DH5α E. Coli cell which include Positive control, Negative Control, D1-D6. After 12 hours, we pick one colony from each plate and inoculate each into a 50ml Falcon tube. </br></br>
+
2. After a 12 hours incubation, we measure the primary OD600 and dilute bacteria solution into an OD600 of 0.02. </br></br>
<div class="item" data-id="21/06/2017" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit...">
+
3. Finally, we measure the OD600 and Fluorescein every 2 hours and record the data into table.
<a href="#" class="image_rollover_bottom">
+
<img src="images/thumbnails/3.jpg" alt="" />
+
</a>
+
<h2>JUNE, 21</h2>
+
<span></span><div class="read_more" data-id="21/06/2012">Read more</div>
+
</div>
+
<div class="item_open" data-id="21/06/2017">
+
<div class="timeline_open_content">
+
<h2></h2>
+
</div>
+
</div>
+
  
 +
<div class="row center">
 +
<div class="col-md-6">
 +
<img src="https://static.igem.org/mediawiki/2017/c/c6/BGICINTERLAB1.jpg"width="500px"/>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="https://static.igem.org/mediawiki/2017/c/c6/BGICINTERLAB1.jpg"width="500px"/>
 +
</div>
 +
</div>
 +
<div class="row center">
 +
<div class="col-md-6">
 +
<img src="https://static.igem.org/mediawiki/2017/1/17/Interlab3bgic.jpg"width="500px"/>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="https://static.igem.org/mediawiki/2017/a/a4/Bgicinterlab4.jpg"width="500px"/>
 +
</div><div class="row center">
 +
<div class="col-md-6">
 +
<img src="https://static.igem.org/mediawiki/2017/0/0a/Bgicinterlab5.jpg"width="500px"/>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="https://2017.igem.org/File:Bgicinterlab6.jpg"width="500px"/>
 +
</div>
 +
 +
</div>
  
 
 
  
+
 
+
 
+
 
+
 
+
 
+
<h4>Observations</h4> </br></br>
+
1. It takes us much time to dilute the bacteria solution to the OD600 of 0.02. So the exact value of the concentration of bacteria solution may be incorrect. </br>
+
2. As a team composed of high school students, sometimes we feel confused in understanding the procedures and the theory behind the instructions. </br>
+
3. Since our data is very different compared to other teams’, maybe there are some improper operations or other mistakes in our study. </br>
</div> <!-- /END TIMELINE -->
+
</br></br>
+
Finally, we sincerely appreciate BGI for permitting us to use the plate reader.
<!-- +++++ Projects Section +++++ -->
+
+
 
<div class="container pt">
+
<div class="row mt centered">
+
<div class="col-lg-4">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/a/ad/Port01.png" width="400px" height="300px"></img></a>
+
<p>EXTRACT </p>
+
</div>
+
<div class="col-lg-4">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/2/29/Port02.png" width="400px" height="300px"></img></a>
+
<p>CENTRIFUGE</p>
+
</div>
+
<div class="col-lg-4">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/6/6e/Port03.png" width="400px" height="300px"></img></a>
+
<p>ctDNA AMPLIFICATION</p>
+
</div>
+
</div><!-- /row -->
+
<div class="row mt centered">
+
<div class="col-lg-4">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/c/ce/Port04.png" width="400px" height="300px"></img></a>
+
<p>DETECTION</p>
+
</div>
+
<div class="col-lg-4">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/2/2a/Port05.png" width="400px" height="300px"></img></a>
+
<p>SIGNALING</p>
+
</div>
+
<div class="col-lg-4">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/6/67/Port06.png" width="400px" height="300px"></img></a>
+
<p>TEST CHIP</p>
+
 
</div>
 
</div>
 
</div><!-- /row -->
 
</div><!-- /row -->
Line 1,070: Line 467:
 
 
 
</div>
 
</div>
 +
</div>
 
</div>
 
</div>
 
 
 +
 +
    <!-- Bootstrap core JavaScript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
    <script src="assets/js/bootstrap.min.js"></script>
 +
  </body>
 +
</html>
 +
 +
        <!-- END PAGE CONTENT -->
 +
 +
<!-- +++++ Footer Section +++++ -->
 +
 +
<div id="footer">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-lg-4">
 +
    <p>F12 BGI-College,146 Beishan Road,Yantian District 518083
 +
                                    </br> Shenzhen,Guangdong Province, China,Asia
 +
                                </br>Phone:+86-755-36307888
 +
                                </br>Email: info@genomics.cn
 +
</br>Fax:+86-755-36307273</p>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
 +
<p>
 +
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">Applied Design</a><br/>
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">Entreprenuership</a><br/>
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Gold_Integrated">Integrated HP</a><br/>
 +
                      <a href="https://2017.igem.org/Team:BGIC-Union/Engagement">Education & Public Engagement</a><br/>
 +
  <a href="https://2017.igem.org/Team:BGIC-Union/Model">Model</a><br/>
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Evaluation">EVALUATION</a>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
<h4>BGIC-COLLEGE 2017</h4>
 +
<img src="https://static.igem.org/mediawiki/2017/d/de/Repute-logo-light.png" width="60px" height="72px"></img>
 +
<p></br><i class="fa-twitter">TWITTER:@BGIC-Union</i> </p>
 +
 +
</div><!-- /col-lg-4 -->
 +
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
  
 
    
 
    

Revision as of 01:56, 1 November 2017

   <meta charset="utf-8">
  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">


   <title>Safety</title>
  <head>
  
       <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
       <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500' rel='stylesheet' type='text/css'>
   <link href="https://2017.igem.org/Template:BGIC-Union/bootstrap-css?action=raw&ctype=text/css" rel="stylesheet">

<link href="https://2017.igem.org/Template:BGIC-Union/animate-css?action=raw&ctype=text/css" rel="stylesheet">

 <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&ctype=text/css" rel="stylesheet">
  <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&ctype=text/css" rel="stylesheet">
 
  <style type="text/css">
  

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

  1. top_title,#sideMenu { display: none !important; }
       #content {
           width: 100%;
           margin: 0;
           padding: 0;
           
       }



  1. content{
  background-color: #FFe4e1; !important;

}


html, body {

   margin: 0 !important;
   padding: 0 !important;

} body {

 	background-color: #FFe4e1;
 	font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: #555;
   ;
   -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;

}

/* Titles */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif;

   font-weight: 700;
   color: #333;

}

h1 { font-size: 35px; margin-top: 30px; margin-bottom: 30px; }


/* Paragraph & Typographic */ p {

   line-height: 28px;
   margin-bottom: 25px;
   font-size: 16px;

}

.centered {

   text-align: center;

}

/* Links */ a {

   color: #20B2AA;
   word-wrap: break-word;
   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
   transition: color 0.1s ease-in, background 0.1s ease-in;

}

a:hover, a:focus {

   color: #7b7b7b;
   text-decoration: none;
   outline: 0;

}

a:before, a:after {

   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
   transition: color 0.1s ease-in, background 0.1s ease-in;

}

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;

}

.copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; }

.navbar { text-transform: uppercase; margin-bottom: 0px; }

.navbar-inverse { padding-bottom: 70px; padding-top: 70px; }

.navbar-inverse { background-color: #FFA07A; border-color: #FA8072; }

.navbar-inverse .navbar-nav > li > a { color: white; }

.navbar-inverse .navbar-nav > li > a:hover { color: #222222; }

.navbar-brand { font-weight: 700; font-size: 20px; letter-spacing: 2px; }

.navbar-inverse .navbar-brand { color: white; }

.navbar-inverse .navbar-toggle { border-color: transparent; }

.progress-bar-theme {

 background-color: 	#FFA07A;

}


/* Helpers */

.mt { margin-top: 40px; margin-bottom: 40px; }

.pt { padding-top: 50px; padding-bottom: 50px; }


/* +++++ WRAP SECTIONS +++++ */

  1. ww {

padding-top: 0px; padding-bottom: 70px; background-color: #f2f2f2; }


  1. footer {

background-color: #ADD8E6; padding-top: 50px; padding-bottom: 50px; }

  1. footer p {

color: white; }

  1. footer h4 {

color: white; text-transform: uppercase; padding-bottom: 20px; }


/* +++++ Color Wraps / Blog Page +++++ */

  1. grey {

padding-top: 60px; padding-bottom: 60px; background-color: #f2f2f2; }

  1. white {

padding-top: 60px; padding-bottom: 60px; background-color: #ffffff; }


/* Blog Date*/ bd { font-size: 12px; text-transform: uppercase; color: #d2d2d2; font-weight: 700; }

/* Blog Author*/ ba { font-size: 12px; text-transform: uppercase; }

/* Blog Quote */ .bq { font-size: 22px; padding-top: 30px; }

/* Blog Tags */ bt { font-size: 12px; }

/* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */ /* Effects also are controled by hover.zoom.js */ .zoom {

   display:block; 
   position:relative; 
   overflow:hidden; 
   background:transparent url(Bgic_loader.gif) no-repeat center;

}


   .zoomOverlay {
       position:absolute;
       top:0; left:0;
       bottom:0; right:0;
       display:none;
       background-image:url(../img/zoom.png);
       background-repeat:no-repeat;
       background-position:center;
   }

.zoom2 { opacity: 1; }

.zoom2:hover { opacity: 0.5; }

/* glyphicon Configuration */

.glyphicon { font-size: 40px; color: #1abc9c; }

  </style>
 
 
  <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&ctype=text/javascript"></script>
 <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&ctype=text/javascript"></script>
  <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&ctype=text/javascript"></script>
  </head>
<body>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

</nav>

</br></br></br>We are excited to have a chance to participate in the Fourth International Interlaboratory Study as a team in IGEM, 2017 and contribute our data as part of the GFP measurement. Interlab study requires us to transform eight plasmids into DH5α E.coli cell in order to measure OD 600 and Fluorescence of them as the time passes by. </br></br>

Calibration:

</br>

1.Mea sure the Abs600 of both the LUDOX-S40 and water to obtain the correction factor. </br> 2.Measure the fluorescence of a series of diluted fluorescein to draw the fluorescein standard curve. </br>

Cell Measurement Procedure:

</br></br> 1. At first, we transform eight plasmids into DH5α E. Coli cell which include Positive control, Negative Control, D1-D6. After 12 hours, we pick one colony from each plate and inoculate each into a 50ml Falcon tube. </br></br> 2. After a 12 hours incubation, we measure the primary OD600 and dilute bacteria solution into an OD600 of 0.02. </br></br> 3. Finally, we measure the OD600 and Fluorescein every 2 hours and record the data into table.

<img src="BGICINTERLAB1.jpg"width="500px"/>

<img src="BGICINTERLAB1.jpg"width="500px"/>

<img src="Interlab3bgic.jpg"width="500px"/>

<img src="Bgicinterlab4.jpg"width="500px"/>

<img src="Bgicinterlab5.jpg"width="500px"/>




Observations

</br></br>

1. It takes us much time to dilute the bacteria solution to the OD600 of 0.02. So the exact value of the concentration of bacteria solution may be incorrect. </br> 2. As a team composed of high school students, sometimes we feel confused in understanding the procedures and the theory behind the instructions. </br> 3. Since our data is very different compared to other teams’, maybe there are some improper operations or other mistakes in our study. </br> </br></br> Finally, we sincerely appreciate BGI for permitting us to use the plate reader.




   <script src="assets/js/bootstrap.min.js"></script>
 </body>

</html>



 </body>



</html>