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

Line 1: Line 1:
  
 
<html>
 
<html>
 +
  <head>
 +
  <html>
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
Line 11: Line 13:
 
   <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 class="center"{
 +
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{
−
   background-color: #FFFFFF; !important;
+
   background-color: #FFe4e1; !important;
 
}
 
}
  
  
−
+
.mainstyle
 +
{
 +
font-family: Comic Sans MS;
 +
}
 
html, body {
 
html, body {
−
     margin: 0 !important;
+
     margin: 0 ;
−
     padding: 0 !important;
+
     padding: 0 ;
−
 
+
 
}
 
}
 
body {
 
body {
−
   background-color: #FFFFFF;
+
   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>  
+
</nav>
 +
   
 
 
−
+
−
 
+
</div>
−
           
+
−
<div class="container mt pt" >
+
  <div class="container mt pt" >
 
 
 
<div id='groupparts PartsCollection' style='min-height:100px;width:700px;'><div style='width:300px;margin:2px;padding:20px;color:gray;border:1px solid gray'>Loading.....</div></div><script>$('#groupparts').load('/cgi/api/groupparts.cgi', { t:'iGEM17', g:'BGIC-Union' },function(){ $('#groupparts .tablesorter').tablesorter();} );</script>
 
<div id='groupparts PartsCollection' style='min-height:100px;width:700px;'><div style='width:300px;margin:2px;padding:20px;color:gray;border:1px solid gray'>Loading.....</div></div><script>$('#groupparts').load('/cgi/api/groupparts.cgi', { t:'iGEM17', g:'BGIC-Union' },function(){ $('#groupparts .tablesorter').tablesorter();} );</script>
Line 899: Line 1,049:
 
 
 
</section>
 
</section>
 +
</html>

Revision as of 03:42, 2 November 2017

Team：BGIC-Union

Loading.....


We create four Basic Biobricks regarding to T7-dCas9.
NT7-dCas9 BBa_K2371000
CT7-dCas9 BBa_K2371001
NT7 BBa_K2371002
CT7 BBa_K2371003

Description:


The first two Biobricks are the two split T7 polymerase sequence we adopted. We provide them for other team to leverage them through other methods. We choose the split site suggested by the team of Tiyun Han, Quan Chen and Haiyan Liu. [7]
The following two Biobricks are the sequence of T7 polymerase connected to dCas9 protein. The linker between split T7 polymerase and dCas9 is GGGGSGGGGS adopted by Peking University. A 6 X His-tag is added on C terminus of dCas9 in order to purify it.

We create seven composite Biobricks regarding to sgRNA.
We created a Biobrick for each of sgRNA and insert T7 promotor and T7 terminator before and after the sequence respectively in order to utilize them to transcribe sgRNA in vitro. The sequences are synthesize through Oligo DNA bridging designed by DNAworks. The detail of synthesis method is in the experiment.




Figure 1. The plasmid of sgRNA generator. The sgRNA generator Biobrick is composed of a T7 promotor, coding sequence for sgRNA and a T7 terminator.


sgRNA generator for EML4-ALK Variant A 23 BBa_K2371004
sgRNA generator for EML4-ALK Variant A 33 BBa_K2371005
sgRNA generator for EML4-ALK Variant A 83 BBa_K2371006
sgRNA generator for EML4-ALK Variant A 93 BBa_K2371007
sgRNA generator for EML4-ALK Variant B 70 BBa_K2371008
sgRNA generator for EML4-ALK Variant B 126 BBa_K2371009
sgRNA generator for EML4-ALK Variant B 147 BBa_K2371010

We create two supplemental composite biobricks for expression of GFP and RFP in cell free system.
pT7-eforRed BBa_K2371011
pT7-amilGFP BBa_K2371012
These two biobricks are composed of a T7 promotor with a coding sequence of GFP or RFP.




Figure 2. The plasmid of pT7-eforRED. pT7-eforRED is composed of a T7 promotor, an RBS and the coding sequence of RFP. This plasmid is used to act as report gene in our report system.
These two biobricks are supposed to cooperate with T7 PC report system in cell free system. The user need to conduct a PCR to linearize the part before reacting with T7 report system. When the split T7 polymerase reassemble, it will start transcription of GFP and RFP from these two plasmids.
We conducted enzyme check.(XbaI and SpeI)


Figure 4.RD check of eforRed and amliGFP. XbaI and SpeI were used. The expected length of both amliGFP and eforRed should be around 750bp.