Difference between revisions of "Team:BGIC-Union/HP/Silver"

 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
  
 
<html>
 
<html>
 +
  <head>
 +
  <html>
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
Line 7: Line 9:
  
  
−
     <title>Team：BGIC-Union/HP.SILVER</title>
+
     <title>Team：BGIC-Union/Practices-Design</title>
  
 
   <head>
 
   <head>
Line 19: Line 21:
 
   <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">
−
<!-- main -->
+
  <!-- 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 -->
 
   <style type="text/css">
 
   <style type="text/css">
 
    
 
    
Line 298: Line 635:
 
   </style>
 
   </style>
 
    
 
    
−
   </head>
+
  <!-- 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>
 +
  <!-- 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    --> 
 +
  <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>
 +
  </head>
 +
 
  
 
  <body>
 
  <body>
Line 306: Line 870:
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
         <a class="navbar-brand" href="https://2017.igem.org/Team:BGIC-Union">BGIC-Union</a>
 
         <a class="navbar-brand" href="https://2017.igem.org/Team:BGIC-Union">BGIC-Union</a>
−
         </div><span></span>
+
         </div>
 
     <div>
 
     <div>
 
         <ul class="nav navbar-nav navbar-center">
 
         <ul class="nav navbar-nav navbar-center">
Line 318: Line 882:
 
                     <li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li>
 
                     <li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li>
−
<li><a href="https://2017.igem.org/Team:BGIC-Union/Sponsors">sponsors</a></li>
+
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li>
 
                             </ul>
 
                             </ul>
Line 330: Line 894:
 
                             <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">design</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/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/Demonstrate">demonstrate</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Demonstrate">demonstrate</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/References">references</a></li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 341: Line 906:
 
                         <li class="dropdown ">    <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                         <li class="dropdown ">    <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                             <ul class="dropdown-menu" role="menu">
 
                             <ul class="dropdown-menu" role="menu">
−
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments">experiments</a></li>
+
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments">protocols</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul>
Line 353: Line 918:
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li>
−
<li><a href="https://2017.igem.org/Team:BGIC-Union/Measurement">measurement</a></li>
+
 
  
 
                             </ul>
 
                             </ul>
Line 361: Line 926:
 
                           <li class="dropdown ">  <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                           <li class="dropdown ">  <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                             <ul class="dropdown-menu" role="menu">
 
                             <ul class="dropdown-menu" role="menu">
−
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design">timeline</a></li>
+
                             
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li>
−
<li><a href="https://2017.igem.org/Team:BGIC-Union/Gold_Integrated">integrated</a></li>
+
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li>
Line 370: Line 935:
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li>
 
                             </ul>
 
                             </ul>
 +
                        </li>
 +
<li class="dropdown ">
 +
                            <a href="https://2017.igem.org/Team:BGIC-Union/Model">Model </a>
 
                         </li>
 
                         </li>
 
<li class="dropdown ">
 
<li class="dropdown ">
Line 382: Line 950:
 
</nav>
 
</nav>
 
   
 
   
 +
<!-- BEGIN TIMELINE -->
 
 
 +
 +
</div> <!-- /END TIMELINE -->
 
 
 
<!-- +++++ Projects Section +++++ -->
 
<!-- +++++ Projects Section +++++ -->
Line 393: Line 964:
 
</br>
 
</br>
 
</br>
 
</br>
−
<h6>CCiC</h6>
+
<h3>CCiC</h3>
 
This summer, we participated in the CCiC (Conference of China IGEMer Community) which was held by a non-profit committee in China. It brought together many new and old IGEMers, professionals, scholars, students etc and provides a precious platform for academic exchanges in terms of synthetic biology. With sufficient preparation and confidence, we set foot in Fujian Agriculture and Forestry University where the forth CCIC was situated. With excitement, the knowledge feast started.
 
This summer, we participated in the CCiC (Conference of China IGEMer Community) which was held by a non-profit committee in China. It brought together many new and old IGEMers, professionals, scholars, students etc and provides a precious platform for academic exchanges in terms of synthetic biology. With sufficient preparation and confidence, we set foot in Fujian Agriculture and Forestry University where the forth CCIC was situated. With excitement, the knowledge feast started.
 
</br>
 
</br>
 
</br>
 
</br>
−
<div class=”row center”>
+
<div class="row center">
−
<img src= “https://static.igem.org/mediawiki/2017/8/8b/Bgic_ccic3.jpg”
+
<div class="col-md-4">
−
  width=”600px” />
+
<img src= "https://static.igem.org/mediawiki/2017/8/8b/Bgic_ccic3.jpg"
 +
  width="300px" />
  
−
</br>
+
</div>
−
</br>
+
<div class="col-md-4">
−
<img src= “https://static.igem.org/mediawiki/2017/8/80/Bgic_ccic.jpg”width=”600px” />
+
<img src= "https://static.igem.org/mediawiki/2017/8/80/Bgic_ccic.jpg"width="300px" />
−
</br>
+
</div>
−
</br>
+
<div class="col-md-4">
−
<img src= “https://static.igem.org/mediawiki/2017/6/6a/Bgic_ccic2.jpg”
+
<img src= "https://static.igem.org/mediawiki/2017/6/6a/Bgic_ccic2.jpg"
−
  width=”600px” />
+
  width="300px" />
 +
</div>
 
</div>
 
</div>
 
</br>
 
</br>
Line 422: Line 995:
 
</br>
 
</br>
  
−
<h6>Meeting with SCUT-CHINA_B team</h6>
+
<h3>Meeting with SCUT-CHINA_B team</h3>
−
<div class=”row center”>
+
−
<img src= “https://static.igem.org/mediawiki/2017/c/c9/Bgic_huagong3.jpg”
+
−
width=”600px” />
+
−
 
+
 
</br>
 
</br>
 
</br>
 
</br>
−
<img src= “https://static.igem.org/mediawiki/2017/1/14/Bgic_huagong2.jpg”width=”600px” />
 
 
</br>
 
</br>
−
</br>
+
<div class="row center">
−
<img src= “https://static.igem.org/mediawiki/2017/3/35/Bgic_huagong1.jpg”
+
<div class="col-md-4">
−
  width=”600px” />
+
<img src= "https://static.igem.org/mediawiki/2017/c/c9/Bgic_huagong3.jpg"
 +
  width="300px" />
 
</div>
 
</div>
 +
<div class="col-md-4">
 +
<img src= "https://static.igem.org/mediawiki/2017/1/14/Bgic_huagong2.jpg"width="300px" />
 +
</div>
 +
<div class="col-md-4">
 +
<img src= "https://static.igem.org/mediawiki/2017/3/35/Bgic_huagong1.jpg"
 +
width="300px" />
 +
</div>
 +
</br></br></br></br>
 +
</div>
 +
</div>
 +
 +
 +
  
  
 
On 29th July, SCUT-CHINA_B team invited us to the South China University of Technology for a meeting. Both teams introduced their project to each other and questions and opinions had been raised during discussions. After meeting, SCUT-CHINA_B team kindly gave us a tour around the school campus. This was our pleasure to meeting them and have a chance to communicate with undergraduates team.
 
On 29th July, SCUT-CHINA_B team invited us to the South China University of Technology for a meeting. Both teams introduced their project to each other and questions and opinions had been raised during discussions. After meeting, SCUT-CHINA_B team kindly gave us a tour around the school campus. This was our pleasure to meeting them and have a chance to communicate with undergraduates team.
 +
></br></br></br></br>
 +
<h2>Public Engagement</h2>
 +
<div class="center" height="700px">
 +
<img src="https://static.igem.org/mediawiki/2017/b/bd/Publicbgic1.jpeg" height="500px" />
 +
 
</div>
 
</div>
 +
</br></br>Keeping track of all the things we have done, summarizing the things we have learnt, reflecting on our action and sharing our knowledge with the public make our project much more meaningful. We established an IGEM column within the official account of Shenzhen BGI-college on the Wechat platform in March. Since then, we have documented many of our stories.</br></br>
 +
More than half of the members of our team have participated in writing articles and publishing them after being revised by our instructor and advisors. Now we have 8 articles published, covering the status quo of lung cancer molecular diagnostics, iGEMers meet-ups, synthetic biology, iGEM competition judging and discussion on our project’s future prospective. </br></br>
 +
<div class="center" height="700px">
 +
<img src=" https://static.igem.org/mediawiki/2017/d/d5/Publicc2.jpg" height="500px" />
 
</div>
 
</div>
−
+
 
−
<!-- +++++ Footer Section +++++ -->
+
 
−
<section>
+
</br></br>
−
<div id="footer">
+
To promote and gain support for our project, we initiated crowdfunding at different platforms.
−
<div class="container">
+
At the beginning, we started small. We participated in the High School Crowdfunding Festival on the WeChat (Chinese Social Network) Platform and raised more than ￥9,360+additional rewards for popularity ￥316=￥9,676（approximately $1,500） within three days under the project name “A new lung cancer diagnosis method." Then we stated our mission and how we would accomplish them: "We want to create a bio-sensor  used with test paper to provide a harmless, efficient and precise lung cancer gene detection method, increasing the survival rate of the patients." </br></br>
−
<div class="row">
+
</br></br>We appreciated the help we received and designed a set of postcards to thank our supporters as well. </br></br>
−
<div class="col-lg-4">
+
Link: <a href=" https://m.eamaster.com/public-finance/raising-detail/113?from=timeline&isappinstalled=0">https://m.eamaster.com/public-finance/raising-detail/113?from=timeline&isappinstalled=0</a>
−
    <p>F12 BGI-College，146 Beishan Road，Yantian District 518083
+
</br></br>
−
                                    </br> Shenzhen，Guangdong Province, China，Asia
+
Besides this event, we also started crowdfunding on indiegogo （IGG）and received $210</br>.
−
                                </br>Phone:+86-755-36307888
+
Link:<a href="https://www.generosity.com/medical-fundraising/help-with-the-detection-of-lung-cancer--3">https://www.generosity.com/medical-fundraising/help-with-the-detection-of-lung-cancer--3</a></br></br>
−
                                </br>Email: info@genomics.cn
+
 
−
</br>Fax:+86-755-36307273</p>
+
<div class="center" height="700px">
−
</p>
+
<img src=" https://static.igem.org/mediawiki/2017/b/b7/Publicc3.jpg" height="500px" />
−
</div><!-- /col-lg-4 -->
+
</div>
−
+
 
−
<div class="col-lg-4">
+
 
−
+
 
−
<p>
+
 
−
+
</br></br><h3>Postcards:</h3></br>
−
<a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">Applied Design</a><br/>
+
These are all photos taken in our lab or hand-drawn lab-related pictures. Our logo is printed on all postcards as well. </br></br>
−
<a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">Entreprenuership</a><br/>
+
<div class="center" height="700px">
−
<a href="https://2017.igem.org/Team:BGIC-Union/Gold_Integrated">Integrated HP</a><br/>
+
<img src=" https://static.igem.org/mediawiki/2017/9/95/Public444.jpg" height="500px" />
−
                      <a href="https://2017.igem.org/Team:BGIC-Union/Engagement">Education & Public Engagement</a><br/>
+
</div>.
−
  <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 -->
+
</br></br>Then we went to the largest crowdfunding website in China, zhongchou.com, and more detailedly documented our project. The goal has been set at ¥30,000 (approximately )
−
+
$4，500). So far we have raised more than ¥8,000. </br></br>
−
<div class="col-lg-4">
+
When presenting our project, we started with the introduction of synthetic biology first. Next, we moved to discuss EML4-ALK and the improved paired-dCas9 system. Then we touched a little bit on the design of the test paper. Finally, we introduced the team members and clearly listed how we would use the money we get. More than 110 people have supported us, many leaving encouraging short comments for us. </br></br>
−
<h4>BGIC-COLLEGE 2017</h4>
+
 
−
<img src="https://static.igem.org/mediawiki/2017/d/de/Repute-logo-light.png" width="60px" height="72px"></img>
+
Link: <a href="http://www.zhongchou.com/deal-show/id-722200">http://www.zhongchou.com/deal-show/id-722200</a>
−
<p></br><i class="fa-twitter">TWITTER:@BGIC-Union</i> </p>
+
</br></br>
−
+
Describing our project in a vivid and understandable way to those unfamiliar with synthetic biology is not an easy task. When trying to do this, we realized we did not understand the whole project as well as we thought. So here comes the question, by how much can high school students get involved in this competition themselves, especially the design part? How much can they really absorb and how far can they reach? How much help should they receive from the advisors? Do the time they spend on learning really match what they receive? These are all good questions to be considered, and we asked them on Zhihu (China’s quora). </br></br>
−
</div><!-- /col-lg-4 -->
+
</br></br><h3>ICG-12</h3></br></br>
−
+
We luckily got a chance to attend pop science carnival in ICG-12 (The 12th International Conference on Genomics) held in Shenzhen, China. One of our team members gave a presentation on “omics for all" section which introduced what is iGEM to the public. The presentation also discussed what was our project, what we had done and what we were doing at that time. In the end, we advised teenagers to try to know what their dream career actually are and be prepared for the future. (Screenshot from the live)
−
</div>
+
<div class="row center">
−
</div>
+
 
−
</div>
+
<img src="https://static.igem.org/mediawiki/2017/e/e7/Xiaoqiicg.jpg" width="600px">
−
</section>
+
</div>
 +
</br></br></br></br></br>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> </section>
 +
 +
 +
 
 +
 
 
 
  
Line 484: Line 1,085:
 
    
 
    
 
   </body>
 
   </body>
−
 
−
 
−
 
−
     
 
  
 
</html>
 
</html>

Latest revision as of 01:09, 2 November 2017

Team：BGIC-Union/Practices-Design

Academic discussions



CCiC

This summer, we participated in the CCiC (Conference of China IGEMer Community) which was held by a non-profit committee in China. It brought together many new and old IGEMers, professionals, scholars, students etc and provides a precious platform for academic exchanges in terms of synthetic biology. With sufficient preparation and confidence, we set foot in Fujian Agriculture and Forestry University where the forth CCIC was situated. With excitement, the knowledge feast started.



At the beginning of the meeting, Dr Ling and Dr Zhang Haoqian from blue SPAR made the opening speech. Then they discussed over the concern that how our students of biology major adapt themselves in such a rapidly developing society in which knowledge changes everyday and find their own future. During the three-day-meeting with a tight timetable, teams from around the national gave a speech with PPT in showing of their IGEM projects. After that, it came to the defense part where particular professional scholars would judge and evaluate our projects. In presentation, we began to get nervous at first, but it faded quickly. In the defense of King l.c., our project was confirmed, which also ensure our confidence in success. At the same time, each team brought posters and promote their projects to visitors. We were inspired by the superb ideas of other teams which widened our scope of knowledge and horizons.
Delighted and honored, professor Kenneth A.O from IGEM HP and professor King L.C. was invited to participate in the meeting. They told apart the classification of HP and answered the confusion about bio-safety. Researchers like Lou Chunbo and Fu Xiongfei also shared many valuable experiences with us. These let us stand on the shoulders of giants and see the wonderful world of science.
Together with our team members, we believe that the success isn’t far away!

Meeting with SCUT-CHINA_B team








On 29th July, SCUT-CHINA_B team invited us to the South China University of Technology for a meeting. Both teams introduced their project to each other and questions and opinions had been raised during discussions. After meeting, SCUT-CHINA_B team kindly gave us a tour around the school campus. This was our pleasure to meeting them and have a chance to communicate with undergraduates team. >



Public Engagement



Keeping track of all the things we have done, summarizing the things we have learnt, reflecting on our action and sharing our knowledge with the public make our project much more meaningful. We established an IGEM column within the official account of Shenzhen BGI-college on the Wechat platform in March. Since then, we have documented many of our stories.

More than half of the members of our team have participated in writing articles and publishing them after being revised by our instructor and advisors. Now we have 8 articles published, covering the status quo of lung cancer molecular diagnostics, iGEMers meet-ups, synthetic biology, iGEM competition judging and discussion on our project’s future prospective.



To promote and gain support for our project, we initiated crowdfunding at different platforms. At the beginning, we started small. We participated in the High School Crowdfunding Festival on the WeChat (Chinese Social Network) Platform and raised more than ￥9,360+additional rewards for popularity ￥316=￥9,676（approximately $1,500） within three days under the project name “A new lung cancer diagnosis method." Then we stated our mission and how we would accomplish them: "We want to create a bio-sensor used with test paper to provide a harmless, efficient and precise lung cancer gene detection method, increasing the survival rate of the patients."



We appreciated the help we received and designed a set of postcards to thank our supporters as well.

Link: https://m.eamaster.com/public-finance/raising-detail/113?from=timeline&isappinstalled=0

Besides this event, we also started crowdfunding on indiegogo （IGG）and received $210
. Link:https://www.generosity.com/medical-fundraising/help-with-the-detection-of-lung-cancer--3



Postcards:


These are all photos taken in our lab or hand-drawn lab-related pictures. Our logo is printed on all postcards as well.

.

Then we went to the largest crowdfunding website in China, zhongchou.com, and more detailedly documented our project. The goal has been set at ¥30,000 (approximately ) $4，500). So far we have raised more than ¥8,000.

When presenting our project, we started with the introduction of synthetic biology first. Next, we moved to discuss EML4-ALK and the improved paired-dCas9 system. Then we touched a little bit on the design of the test paper. Finally, we introduced the team members and clearly listed how we would use the money we get. More than 110 people have supported us, many leaving encouraging short comments for us.

Link: http://www.zhongchou.com/deal-show/id-722200

Describing our project in a vivid and understandable way to those unfamiliar with synthetic biology is not an easy task. When trying to do this, we realized we did not understand the whole project as well as we thought. So here comes the question, by how much can high school students get involved in this competition themselves, especially the design part? How much can they really absorb and how far can they reach? How much help should they receive from the advisors? Do the time they spend on learning really match what they receive? These are all good questions to be considered, and we asked them on Zhihu (China’s quora).



ICG-12



We luckily got a chance to attend pop science carnival in ICG-12 (The 12th International Conference on Genomics) held in Shenzhen, China. One of our team members gave a presentation on “omics for all" section which introduced what is iGEM to the public. The presentation also discussed what was our project, what we had done and what we were doing at that time. In the end, we advised teenagers to try to know what their dream career actually are and be prepared for the future. (Screenshot from the live)