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

 
(3 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</title>
+
     <title>Team：BGIC-Union/Practices-Design</title>
  
 
   <head>
 
   <head>
 
    
 
    
−
  <!-- main -->
+
 
 +
  <!-- Bootstrap core CSS -->
 +
    <link href="https://2017.igem.org/Template:BGIC-Union/bootstrap-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<!-- animate -->
 +
<link href="https://2017.igem.org/Template:BGIC-Union/animate-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
  <!-- carousel -->
 +
  <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">
 +
  <!-- 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">
 
    
 
    
−
@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 23: Line 368:
 
         }
 
         }
  
 +
#bodyContent
 +
{
 +
margin-top：0px !important;
 +
}
  
−
#footer{
 
−
padding-botton:-60px;
 
−
}
 
  
 
#content{
 
#content{
Line 33: Line 379:
  
  
−
+
.mainstyle
 +
{
 +
font-family: Comic Sans MS;
 +
}
 
html, body {
 
html, body {
−
     margin: 0 !important;
+
     margin: 0 ;
−
     padding: 0 !important;
+
     padding: 0 ;
−
 
+
 
}
 
}
 
body {
 
body {
−
   background-color: #FFe4e1;
+
   background-color: #ffa07a;
−
   font-family: 'Montserrat', sans-serif;
+
  
 
     font-weight: 400;
 
     font-weight: 400;
−
line-height: 45px;
+
     font-size: 14px;
−
     font-size: 20px;
+
 
     color: #555;
 
     color: #555;
−
 
+
     ；
−
      
+
 
     -webkit-font-smoothing: antialiased;
 
     -webkit-font-smoothing: antialiased;
 
     -webkit-overflow-scrolling: touch;
 
     -webkit-overflow-scrolling: touch;
Line 53: Line 399:
  
 
/* Titles */
 
/* Titles */
−
h1, h2, h3, h4, h5, h6,p {
+
h1, h2, h3, h4, h5, h6 {
−
font-family: 'Montserrat', sans-serif;
+
font-family: Comic Sans MS;
−
     font-weight: 600;
+
     font-weight: 700;
 
     color: #333;
 
     color: #333;
−
line-height:30pt;
 
 
}
 
}
  
Line 63: Line 408:
 
font-size: 35px;
 
font-size: 35px;
 
margin-top: 30px;
 
margin-top: 30px;
−
margin-bottom: 50px;
+
margin-bottom: 30px;
 
}
 
}
  
  
  
−
/* Paragraph  Typographic */
+
 
 
p {
 
p {
−
     line-height: 50px;
+
     line-height: 28px;
−
     margin-bottom: 35px;
+
     margin-bottom: 25px;
 
     font-size: 16px;
 
     font-size: 16px;
 +
font-family: Comic Sans MS;
 
}
 
}
  
Line 116: Line 462:
 
}
 
}
  
 +
.copyrights{
 +
text-indent:-9999px;
 +
height:0;
 +
line-height:0;
 +
font-size:0;
 +
overflow:hidden;
 +
}
  
 
.navbar {
 
.navbar {
Line 122: Line 475:
 
}
 
}
  
−
top1 {
 
−
padding-top: -20px;
 
−
]
 
 
.navbar-inverse {
 
.navbar-inverse {
−
padding-bottom: 70px;
+
padding-bottom: 30px;
−
padding-top: 70px;
+
padding-top: 0;
 
}
 
}
  
Line 137: Line 487:
 
.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 145: Line 497:
 
.navbar-brand {
 
.navbar-brand {
 
font-weight: 700;
 
font-weight: 700;
−
font-size: 20px;
+
font-size: 40px;
 
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 173: Line 529:
 
padding-bottom: 50px;
 
padding-bottom: 50px;
 
}
 
}
−
.lr {
+
 
−
        PADDING-LEFT: 100PX;
+
−
        padding-right: 100px;
+
−
}
+
  
 
/* +++++ WRAP SECTIONS +++++ */
 
/* +++++ WRAP SECTIONS +++++ */
Line 195: Line 548:
 
#footer p {
 
#footer p {
 
color: white;
 
color: white;
 +
font-family: Comic Sans MS;
 
}
 
}
  
Line 280: Line 634:
 
}
 
}
 
   </style>
 
   </style>
−
 
 
    
 
    
−
  <!-- Bootstrap core CSS -->
 
−
    <link href="https://2017.igem.org/Template:BGIC-Union/bootstrap-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
−
<!-- animate -->
 
−
<link href="https://2017.igem.org/Template:BGIC-Union/animate-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
−
  <!-- carousel -->
 
−
  <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">
 
−
 
−
  <!-- main -->
 
−
    <link href="https://2017.igem.org/Team:BGIC-Union/finalcss/main-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
−
  <!-- slider -->
 
−
  <style type="text/css">
 
−
 
−
  /* Section Slider
 
−
========================================================= */
 
−
 
−
/* Carousel Slider
 
−
============================================== */
 
−
#slider_part {
 
−
    height: 900px;
 
−
    width: 100%;
 
−
    overflow: hidden;
 
−
background-color: #f2f2f2;
 
−
}
 
−
 
−
.carousel-caption {
 
−
    top: 30%;
 
−
    margin-top: -70px;
 
−
    text-shadow: none!important;
 
−
    left: 9%;
 
−
    right: 10%;
 
−
    -webkit-transition: all.3s ease 0s;
 
−
    -o-transition: all.3s ease 0s;
 
−
    transition: all.3s ease 0s;
 
−
    text-align: center;
 
−
}
 
−
 
−
.carousel-caption h3 {
 
−
    text-shadow: none;
 
−
    font-size: 70px;
 
−
    line-height: 92px;
 
−
    font-weight: 300;
 
−
    margin: 0 0px;
 
−
    transition-delay: .3s;
 
−
    -webkit-transition-delay: .3s;
 
−
    -o-transition-delay: .3s;
 
−
    text-transform: capitalize!important;
 
−
}
 
−
 
−
.carousel-caption p {
 
−
    font-size: 46px;
 
−
    line-height: 62px;
 
−
    font-weight: 500;
 
−
    color: #fff;
 
−
    transition-delay: .3s;
 
−
    -moz-transition-delay: .3s;
 
−
    -o-transition-delay: .3s;
 
−
    margin: 40px 0px;
 
−
    text-transform: uppercase;
 
−
font-family: Comic Sans MS;
 
−
}
 
−
 
−
.carousel-caption img {
 
−
    border: 2px solid#fff;
 
−
    padding: 10px 10px 10px 20px;
 
−
}
 
−
 
−
.line {
 
−
    width: 100px;
 
−
    height: 5px;
 
−
    color: #222;
 
−
    margin: 0px auto;
 
−
}
 
−
 
−
.carousel-caption p i {
 
−
    font-size: 7px;
 
−
    margin: 0px 3px;
 
−
    position: relative;
 
−
    top: -3px;
 
−
}
 
−
 
−
.carousel .item {
 
−
    -webkit-transition: opacity .3s;
 
−
    -moz-transition: opacity .3s;
 
−
    -ms-transition: opacity .3s;
 
−
    -o-transition: opacity .3s;
 
−
    transition: opacity .3s;
 
−
}
 
−
 
−
.btn-featured {
 
−
    text-decoration: none;
 
−
    position: relative;
 
−
    -webkit-transition: all .3s ease-in-out;
 
−
    -o-transition: all .3s ease-in-out;
 
−
    transition: all .3s ease-in-out;
 
−
    background: transparent;
 
−
    border-radius: 2px;
 
−
    z-index: 1;
 
−
    font-weight: 500;
 
−
    font-size: 18px;
 
−
    line-height: 20px;
 
−
    padding: 15px 40px !important;
 
−
    text-transform: uppercase;
 
−
    margin-top: 20px;
 
−
    margin-right: 10px;
 
−
}
 
−
 
−
.carousel-control.left,.carousel-control.right {
 
−
    background-image: none !important;
 
−
    background-repeat: no-repeat !important;
 
−
}
 
−
 
−
.carousel-control {
 
−
    width: 4% !important;
 
−
}
 
−
 
−
.carousel-caption img {
 
−
    height: auto;
 
−
}
 
−
 
−
.carousel-indicators {
 
−
    bottom: 100px;
 
−
    width: 10%;
 
−
    left: 45%;
 
−
    margin: 0 auto;
 
−
    bottom: 30%;
 
−
}
 
−
 
−
.carousel-indicators li {
 
−
    width: 20px !important;
 
−
    height: 20px !important;
 
−
    border: 2px solid #FFF !important;
 
−
    margin: 0px !important;
 
−
    border-radius: 50%;
 
−
}
 
−
 
−
.carousel-control.left span {
 
−
    padding: 15px;
 
−
}
 
−
 
−
.slides-control .carousel-control i {
 
−
    line-height: 36px;
 
−
    font-size: 32px;
 
−
    padding-top: 6px;
 
−
    -moz-transition: all 500ms ease;
 
−
    -webkit-transition: all 500ms ease;
 
−
    -ms-transition: all 500ms ease;
 
−
    -o-transition: all 500ms ease;
 
−
    transition: all 500ms ease;
 
−
    border-radius: 50%;
 
−
    width: 50px;
 
−
    height: 50px;
 
−
}
 
−
 
−
.slides-control .carousel-control {
 
−
    position: absolute;
 
−
    width: 240px;
 
−
    top: 45%;
 
−
    z-index: 10;
 
−
}
 
−
 
−
.carousel-control.left {
 
−
    left: -15px;
 
−
}
 
−
 
−
.carousel-control.right {
 
−
    right: 0px;
 
−
}
 
−
 
−
.carousel-control.left {
 
−
    width: 120px;
 
−
    height: 40px;
 
−
}
 
−
 
−
.carousel-control.right {
 
−
    width: 120px;
 
−
    height: 40px;
 
−
}
 
−
 
−
.overlay-slide {
 
−
    background: #000;
 
−
    height: 65%;
 
−
    width: 100%;
 
−
}
 
−
 
−
.overlay-slide img {
 
−
    opacity: 1;
 
−
    width: 100%;
 
−
    height: auto;
 
−
}
 
−
 
−
/*-- Animation --*/
 
−
 
−
.carousel .item.active .animated2 {
 
−
    -webkit-animation: lightSpeedIn 1s ease-in 200ms both;
 
−
    animation: lightSpeedIn 1s ease-in 200ms both;
 
−
}
 
−
 
−
.carousel .item.active .animated3 .animated4 {
 
−
    -webkit-animation: bounceInLeft 1s ease-in-out 500ms both;
 
−
    animation: bounceInLeft 1s ease-in-out 500ms both;
 
−
}
 
−
.animated4 {color:#4169E1
 
−
}
 
−
.img{
 
−
-webkit-filter: brightness(1);
 
−
}
 
−
 
−
  </style>
 
 
   <!-- script -->
 
   <!-- script -->
 
   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 
   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
Line 719: Line 863:
 
   </head>
 
   </head>
  
−
  <body>
+
 
 +
<body>
 
<div class="column_full_size top1">
 
<div class="column_full_size top1">
 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
Line 737: 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 749: 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" >design</a></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/Result">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 760: 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 769: Line 915:
 
 
 
                             <ul class="dropdown-menu" role="menu">
 
                             <ul class="dropdown-menu" role="menu">
−
                               <li><a href="https://2017.igem.org/Team:BGIC-Union/Parts #BasicParts">basic parts</a></li>
+
                               <li><a href="https://2017.igem.org/Team:BGIC-Union/Basic_Parts">basic parts</a></li>
−
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts #CompositeParts">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 #Collection">parts collection</a></li>
+
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li>
  
  
Line 780: 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/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>
Line 789: 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 799: Line 948:
 
     </div>
 
     </div>
 
     </div>
 
     </div>
−
</nav> <!-- Slider start -->
+
</nav>
−
   
+
   
 +
<!-- BEGIN TIMELINE -->
 +
 +
 +
</div> <!-- /END TIMELINE -->
 
 
 
<!-- +++++ Projects Section +++++ -->
 
<!-- +++++ Projects Section +++++ -->
Line 912: Line 1,065:
 
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>
 
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>
 
</br></br><h3>ICG-12</h3></br></br>
 
</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.
+
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 class="row center">
 +
 
 +
<img src="https://static.igem.org/mediawiki/2017/e/e7/Xiaoqiicg.jpg" width="600px">
 +
</div>
 +
</br></br></br></br></br>
 +
 
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div> </section>
 
</div> </section>
−
<!-- +++++ Footer Section +++++ -->
+
−
<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>
+
−
+
−
</div><!-- /col-lg-4 -->
+
−
+
−
<div class="col-lg-4">
+
−
+
−
+
−
+
−
<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>
+
−
</section>
+
 
 
  
Line 960: 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)