Difference between revisions of "Team:HZAU-China/Improve"

(Prototype team page)
 
 
(20 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
{{HZAU-China}}
+
{{HZAU-China/Bootstrap}}
 
<html>
 
<html>
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 +
    <link href="bootstrap.min.css" rel="stylesheet">
 +
    <!-- 导航栏CSS -->
 +
    <style type="text/css">
 +
        #sideMenu,
 +
        #top_title,
 +
        #team_submenu {
 +
            display: none;
 +
        }
  
−
<div class="column full_size judges-will-not-evaluate">
+
        #HQ_page p {
−
<h3>★  ALERT! </h3>
+
            margin: 0 !important;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
        }
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
        #content {
 +
            padding: 0px;
 +
            width: 100%;
 +
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
−
<div class="clear"></div>
+
        #bodyContent h1,
 +
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
 +
        #team_name {
 +
            display: none
 +
        }
  
−
<div class="column full_size">
+
        .global_wrapper {
−
<h1>Improve</h1>
+
            padding: 0px 0px 0px 0px;
−
<p>For teams seeking to improve upon a previous part or project, you should document all of your work on this page. Please remember to include all part measurement and characterization data on the part page on the Registry. Please include a link to your improved part on this page.</p>
+
        }
  
−
<h3>Gold Medal Criterion #2</h3>
+
        #top_menu_14 {
−
<p><b>Standard Tracks:</b> Create a new part that has a functional improvement upon an existing BioBrick part. The sequences of the new and existing parts must be different. You must perform experiments with both parts to demonstrate this improvement.  Document the experimental characterization on the Part's Main Page on the Registry for both the existing and new parts. Both the new and existing Main Page of each Part’s Registry entry must reference each other. Submit a sample of the new part to the Registry.
+
            height: 16px;
 +
        }
  
−
The existing part must NOT be from your 2018 part number range and must be different from the part documented in bronze #4.
+
        * {
 +
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            list-style-type: none;
 +
            text-decoration: none !important;
 +
        }
  
−
<br><br>
+
        body {
−
<b>Special Tracks:</b> Improve the function of an existing iGEM project (that your current team did not originally create) and display your achievement on your wiki.</p>
+
            margin: 0;
 +
            padding: 0;
 +
            background-color: #F3F3F3;
 +
            font-size: 16px;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
            letter-spacing: 0;
 +
            color: #FFFFFF;
 +
        }
  
 +
        .daohang {
 +
            background-color: #323643;
 +
            position: relative;
 +
            color: #ffffff;
 +
            height: 64px;
 +
            top: -2px;
 +
        }
  
−
</div>
+
        .logo-daohang {
 +
            height: 64px;
 +
            left: 10%;
 +
            float: left;
 +
            position: relative;
 +
        }
  
 +
        .daohang a {
 +
            display: block;
 +
            text-decoration: none;
 +
        }
  
 +
        .daohang .shade {
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 160px;
 +
            top: 64px;
 +
            left: 0;
 +
            z-index: 1;
 +
            background-color: #EEEEEE;
 +
            box-shadow: 0 5px 15px #CCCCCC;
 +
            display: none;
 +
            border-bottom: #ffffff solid 1px;
 +
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
 +
        }
 +
 +
        .daohang .caidan {
 +
            position: absolute;
 +
            top: 0;
 +
            right: 10%;
 +
            margin: 0;
 +
            z-index: 2;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 730px;
 +
            float: right;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
 +
 +
        .daohang .caidan>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 224px;
 +
        }
 +
 +
        .daohang .shortName {
 +
            width: 110px;
 +
        }
 +
 +
        .daohang .longName {
 +
            width: 170px;
 +
        }
 +
 +
        .daohang .nav_head {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            color: #ffffff;
 +
            font-size: 16px !important;
 +
        }
 +
 +
        .daohang .xsjPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
 +
        }
 +
 +
        .daohang .xjtPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
 +
        }
 +
 +
        .daohang a:hover span {
 +
            transform: rotateY(180deg);
 +
            -webkit-transform: rotateY(180deg);
 +
            -moz-transform: rotateY(180deg);
 +
            -o-transform: rotateY(180deg);
 +
            -ms-transform: rotateY(180deg);
 +
            transition: all 0.5s ease-in-out;
 +
            -webkit-transition: all 0.5s ease-in-out;
 +
            -moz-transition: all 0.5s ease-in-out;
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
 +
        .daohang .item {
 +
            font-size: 16px;
 +
            height: 40px;
 +
            line-height: 40px;
 +
            color: #333333;
 +
            position: relative;
 +
        }
 +
 +
        .daohang .caidan:hover {
 +
            height: 264px;
 +
            transition: height 0.3s;
 +
        }
 +
 +
        .daohang .caidan:hover+.shade {
 +
            display: block;
 +
        }
 +
 +
        .daohang .caidan>li.hiLight:hover {
 +
            background-color: #ffffff;
 +
        }
 +
 +
        .daohang .caidan>li:hover .nav_head {
 +
            background-color: #EA0D04;
 +
        }
 +
 +
        .daohang .caidan>li:hover .item {}
 +
 +
 +
        .daohang .shortName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 +
        .daohang .shortName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #f51720;
 +
        }
 +
 +
        .daohang .longName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 +
        .daohang .longName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #f51720;
 +
        }
 +
 +
        @media screen and (max-width: 1200px) {
 +
            .logo-daohang {
 +
                left: 3%;
 +
            }
 +
 +
            .daohangyi {
 +
                font-size: 12px;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 880px) {
 +
 +
            .daohang .caidan {
 +
                right: 0;
 +
                width: 100%;
 +
            }
 +
 +
            .logo-daohang {
 +
                display: none;
 +
            }
 +
 +
            .daohang .shortName {
 +
                width: 15vw;
 +
            }
 +
 +
            .daohang .longName {
 +
                width: 25vw;
 +
            }
 +
 +
            .daohangyi img {
 +
                display: none;
 +
            }
 +
 +
            .daohang .longName .item:before {
 +
                width: 150px;
 +
                left: 20px;
 +
            }
 +
 +
            .daohang .longName .item:hover:after {
 +
                width: 150px;
 +
                left: 20px;
 +
            }
 +
        }
 +
    </style>
 +
    <!-- 内容CSS -->
 +
    <style class="text/css">
 +
        .clearfix:after {
 +
            content: ".";
 +
            display: block;
 +
            height: 0;
 +
            clear: both;
 +
            visibility: hidden;
 +
 +
        }
 +
 +
        .neirong {
 +
            width: 100%;
 +
            height: auto;
 +
            background-color: #F3F3F3;
 +
        }
 +
 +
        .zhengwen {
 +
            width: 80%;
 +
            /* height: auto; */
 +
            margin: 20px 40px 0 0;
 +
            /* right: 2%; */
 +
            /* top: 90px; */
 +
            padding: 50px 3%;
 +
            float: right;
 +
            /* position: relative; */
 +
            background-color: #FFF;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border: 2px solid black; */
 +
            /* border-radius: 3px; */
 +
            /* overflow: hidden; */
 +
            /* display: block; */
 +
            /* font-family: Arial, Verdana, Sans-serif; */
 +
        }
 +
 +
        .cebian {
 +
            width: 180px;
 +
            /* height: 80vh; */
 +
            float: left;
 +
            /* left: 1vw; */
 +
            top: 150px;
 +
            position: fixed;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border:2px solid black */
 +
            /* background-color: #323643 */
 +
        }
 +
 +
        .zhengwen p{
 +
            text-align: justify !important;
 +
            font-family:  'Times New Roman',Helvetica,'Open Sans',  Arial, sans-serif !important;
 +
            color: #3B3B3B;
 +
            font-size: 26px !important;
 +
            padding-right: 20px;
 +
        }
 +
 +
        .daimg {
 +
            width: 100%;
 +
            height: auto;
 +
            margin: 20px 0;
 +
            box-shadow: 0 1px 3px #676767;
 +
        }
 +
 +
        .h1 {
 +
            height: 80px;
 +
            line-height: 80px;
 +
            font-weight: bold;
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 40px;
 +
            color: #3B3B3B;
 +
            border-bottom: 2px solid #676767;
 +
            margin-bottom: 20px;
 +
        }
 +
 +
        .h2 {
 +
            height: 40px;
 +
            line-height: 40px;
 +
            font-weight: bold;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 30px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
 +
        .h3 {
 +
            height: 30px;
 +
            line-height: 30px;
 +
            font-weight: bold;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 24px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
 +
        .zhengwen .tuandui_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 520px;
 +
            overflow: hidden;
 +
        }
 +
 +
        .tuandui_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 +
        .zhengwen .laoshi_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 430px;
 +
        }
 +
 +
        .laoshi_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 +
        .duiyuan {
 +
            margin: 20px 0;
 +
            /* border: 1px solid red; */
 +
        }
 +
 +
        .laoshi {
 +
            margin: 20px 0;
 +
        }
 +
 +
        .duiyuan img {
 +
            width: 100%;
 +
            height: auto;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 +
        .laoshi img {
 +
            width: 100%;
 +
            height: 50vh;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 +
        .duiyuan .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 +
        .laoshi .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 +
        .duiyuan .jieshao {
 +
            width: 100%;
 +
            height: 200px;
 +
            background-color: #f6eee0;
 +
            border-bottom: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            /* border-bottom-left-radius: 5px;
 +
            border-bottom-right-radius: 5px; */
 +
        }
 +
 +
        .duiyuan .jieshao .saohua {
 +
            padding: 10px 4px 0px 4px !important;
 +
            color: black;
 +
            font-family: Arial;
 +
            font-style: italic;
 +
            font-size: 15px !important;
 +
            list-style-type: none;
 +
            text-align: justify;
 +
            line-height: 18px;
 +
        }
 +
    </style>
 +
    <!-- 滚动菜单栏CSS -->
 +
    <style>
 +
        #float01 {}
 +
   
 +
            #float02 {}
 +
   
 +
            div.floatCtro {
 +
                width: 100%;
 +
                /* height: auto; */
 +
                margin: 0;
 +
                position: relative;
 +
                background: #fff;
 +
   
 +
            }
 +
   
 +
            .daohangyi {
 +
                display: block;
 +
                width: 100%;
 +
                /* height: auto; */
 +
                /* text-align: left !important; */
 +
                color: #ffffff !important;
 +
                font-size: 16px;
 +
                padding:0;
 +
                background-color: #323643;
 +
                border-bottom: 1px solid black;
 +
                padding:0 3%;
 +
                text-decoration: none !important;
 +
            }
 +
   
 +
            div.floatCtro .daohanger {
 +
                width: 100%;
 +
                text-align: left !important;
 +
                height: auto;
 +
                line-height: 25px;
 +
                font-family: Arial;
 +
                font-size: 14px !important;
 +
                color: #676767;
 +
                margin: 0;
 +
                padding:10px 8%;
 +
                cursor: pointer;
 +
                background: #fff;
 +
            }
 +
   
 +
            div.floatCtro a {
 +
                display: inline-block;
 +
                display: none;
 +
                width: 100%;
 +
                height: 40px;
 +
                padding:10px 8%;
 +
                /* margin: 10px 0 0 0; */
 +
                background: #FFF;
 +
                color: #000 !important;
 +
                vertical-align: middle;
 +
                cursor: pointer;
 +
            }
 +
   
 +
            div.floatCtro a span {
 +
                display: block;
 +
                height: auto;
 +
                text-align: left !important;
 +
                line-height: 18px;
 +
                font-family: Arial;
 +
                font-size: 16px;
 +
            }
 +
   
 +
            div.floatCtro a:hover {
 +
                /* background: #76b39d; */
 +
                color: #EA0D04 !important;
 +
                zoom: 1;
 +
            }
 +
   
 +
            /* .cebian a:hover {
 +
                color: #f6eee0 !important;
 +
            } */
 +
   
 +
            div.floatCtro .daohanger:hover {
 +
                /* background: #76b39d; */
 +
                color: #1fa67a;
 +
                text-decoration: underline !important;
 +
            }
 +
   
 +
            div.floatCtro .daohanger.cur {
 +
                /* background: #1fa67a; */
 +
                color: #1fa67a;
 +
            }
 +
   
 +
            .biaoti {
 +
                display: inline-block;
 +
                margin: 8px 0;
 +
                /* width: 50%; */
 +
                /* margin-left: 6%; */
 +
                /* text-align: center; */
 +
                text-decoration: none !important;
 +
            }
 +
   
 +
            .daohangyi img {
 +
                display: inline-block;
 +
                width: 12px;
 +
                height: 12px;
 +
                vertical-align: middle;
 +
                background-size: 100% 100%;
 +
   
 +
            }
 +
            .cebian div:hover img{
 +
                transform: rotateY(180deg);           
 +
                -webkit-transform: rotateY(180deg);           
 +
                -moz-transform: rotateY(180deg);           
 +
                -o-transform: rotateY(180deg);           
 +
                -ms-transform: rotateY(180deg);
 +
                transition: all 0.5s ease-in-out;           
 +
                -webkit-transition: all 0.5s ease-in-out;           
 +
                -moz-transition: all 0.5s ease-in-out;           
 +
                -o-transition: all 0.5s ease-in-out;
 +
            }
 +
            .cebian a:hover img{
 +
                transform: rotate(360deg);           
 +
                -webkit-transform: rotate(360deg);           
 +
                -moz-transform: rotate(360deg);           
 +
                -o-transform: rotate(360deg);           
 +
                -ms-transform: rotate(360deg);
 +
                transition: all 0.5s ease-in-out;           
 +
                -webkit-transition: all 0.5s ease-in-out;           
 +
                -moz-transition: all 0.5s ease-in-out;           
 +
                -o-transition: all 0.5s ease-in-out;
 +
            }
 +
   
 +
            @media screen and (max-width: 1200px) {           
 +
             
 +
                .cebian {
 +
                width: 15%;
 +
                }
 +
   
 +
                .zhengwen {
 +
                margin: 20px 20px 0 0;
 +
   
 +
                .daohangyi {
 +
                    font-size: 14px;
 +
                }
 +
                .daohangyi img {
 +
                    display: none;
 +
                } 
 +
            }
 +
   
 +
            @media screen and (max-width: 900px) {
 +
   
 +
                .daohangyi img {
 +
                    display: none;
 +
                } 
 +
               
 +
                .laoshi img {
 +
                    height: 30vh;
 +
                }
 +
            }
 +
    </style>
 +
    <!-- 折叠框CSS -->
 +
    <style>
 +
        .collapseDiv {
 +
              color: #333;
 +
              border-radius: 4px;
 +
              background-color: #F3F3F3;
 +
              border: 1px solid transparent;
 +
              border-color: #ddd;
 +
              box-shadow: 0 1px 1px #F3F3F3;
 +
              margin-top: 5px;
 +
              margin-bottom: 0;
 +
            }
 +
            .collapseDiv label {
 +
              cursor: pointer;
 +
              font-size: 24px  !important;
 +
              /* font-weight: bold; */
 +
              color: green  !important;
 +
              border-color: #F3F3F3  !important;
 +
              padding: 5px 15px 5px 18px  !important;
 +
              background-color: #f5f5f5  !important;
 +
              margin: 0  !important;
 +
              border-radius: 5px  !important;
 +
            }
 +
   
 +
            #zhedie-toggle1,
 +
            #zhedie-toggle2,
 +
            #zhedie-toggle3,
 +
            #zhedie-toggle4 {
 +
                display: none;
 +
            }
 +
   
 +
            #zhedie1,
 +
            #zhedie2,
 +
            #zhedie3,
 +
            #zhedie4 {
 +
                display: none;
 +
                font-size: 18px;
 +
                padding: 0 50px 0 50px;
 +
                width: 100%;
 +
                margin: 0;
 +
                color: black;
 +
            }
 +
   
 +
            #zhedie-toggle1:checked+#zhedie1,
 +
            #zhedie-toggle2:checked+#zhedie2,
 +
            #zhedie-toggle3:checked+#zhedie3,
 +
            #zhedie-toggle4:checked+#zhedie4 {
 +
                display: block;
 +
            }
 +
   
 +
           
 +
   
 +
   
 +
            .collapse_body {
 +
              background-color: #fff;
 +
              position: relative;
 +
              height: 0;
 +
              overflow: hidden;
 +
              -webkit-transition-timing-function: ease;
 +
              -o-transition-timing-function: ease;
 +
              transition-timing-function: ease;
 +
              -webkit-transition-duration: .35s;
 +
              -o-transition-duration: .35s;
 +
              transition-duration: .35s;
 +
              -webkit-transition-property: height, visibility;
 +
              -o-transition-property: height, visibility;
 +
              transition-property: height, visibility
 +
            }
 +
            .collapse_content {
 +
              font-size: 20px;
 +
              border-top: 1px solid #ddd;
 +
              background-color: #fff;
 +
              padding: 15px;
 +
            }
 +
    </style>
 +
 +
</head>
 +
 +
<body>
 +
    <!-- 导航栏 -->
 +
    <nav class="daohang">
 +
        <a href="https://2018.igem.org/Team:HZAU-China"><img src="https://static.igem.org/mediawiki/2018/7/75/T--HZAU-China--logo-nav.png"
 +
                class="logo-daohang"></a>
 +
        <ul class="caidan">
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
 +
                    <span>Project</span>
 +
                    <span class="xsjPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Wetlab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">InterLab</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
 +
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Drylab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
 +
            </li>
 +
            <li class="hiLight longName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Human&nbsp;Practices</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>About Us</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Parts</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Basic_Part">Basic</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
 +
            </li>
 +
        </ul>
 +
        <div class="shade"></div>
 +
    </nav>
 +
    <!-- 内容 -->
 +
    <div class="neirong clearfix">
 +
        <!-- 正文 -->
 +
        <div class="zhengwen">
 +
            <div id="float01" class="cur">
 +
                <p>We gave the surface display system a new function through displaying a RGD motif on
 +
                    the Lpp-OmpA which contains a signal sequence, the N-terminal of the lipoprotein (Lpp) and the residual 46-159 amino acids of the OmpA. In addition, lipoprotein performs the function of targeting to the outer membrane and OmpA constructs an anchor on the outer membrane. RGD motif can specifically bind to αvβ3, a biomarker of cancer cells such as melanoma, neuroblastoma, glioma and adenocarcinoma<sup>1</sup>. We determined the surface display site on the third loop of Lpp-OmpA through homology modelling (<b>Figure 1</b>). This part is under the control of <i>lac</i> promoter. </p>
 +
                <div style="width: 30%; margin: 0px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/5/5f/T--HZAU-China--Improve1.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 1</b>. The homology modelling result of Lpp-OmpA-RGD. Red arrow shows the location of RGD motif. </p><br>
 +
            </div>
 +
            <div id="float02">
 +
                <p>Microscopy shows that Lpp-OmpA-RGD overexpressed in <i>E. coli</i> induced by 0.1mM IPTG can bind to αvβ3-positive MDA-MB-231 cell (<b>Figure 2</b>), but cannot bind to αvβ3-negative MCF7 cell (<b>Figure 3</b>). We also use BBa_J36850 as a control. This strain cannot bind to Vβ3-positive MDA-MB-231 cell line (<b>Figure 4</b>) and αvβ3-negative MCF7 cell line (<b>Figure 5</b>). These results suggest that we successfully improved the part <a href="http://parts.igem.org/Part:BBa_J36850">BBa_J36850</a>. </p>
 +
                <div style="width: 90%; margin: 0px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/b/b1/T--HZAU-China--Improve2.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 2</b>. αvβ3-positive MDA-MB-231 cell line was incubated with <i>E. coli</i> which constitutively expressed RFP and contained BBa_J36850. This improved part expressed RGD motif under the control of
 +
                    <i>lac</i> promoter. </p>
 +
                <div style="width: 90%; margin: 0px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/c/cf/T--HZAU-China--Improve3.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 3</b>. αvβ3-negative MCF7 cell line was incubated with <i>E. coli</i> which constitutively expressed RFP and contained BBa_J36850. This improved part expressed RGD motif under the control of <i>lac</i> promoter.</p>
 +
                <div style="width: 90%; margin: 0px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/f/f7/T--HZAU-China--Improve4.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 4</b>. αvβ3-positive MDA-MB-231 cell line was incubated with <i>E. coli</i> which constitutively expressed RFP and contained BBa_J36850.</p>
 +
                <div style="width: 90%; margin: 0px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/c/ce/T--HZAU-China--Improve5.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 5</b>. αvβ3-negative MCF7 cell line was incubated with <i>E. coli</i> which constitutively expressed RFP and contained BBa_J36850. </p>
 +
                <div class="collapseDiv">
 +
                    <label for="zhedie-toggle3">Method</label>
 +
                    <input type="checkbox" id="zhedie-toggle3" />
 +
                    <div id="zhedie3" class="text-success text-left">
 +
                        <b>Preparation of Cells for Infection</b><br>
 +
                        1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture incubator.<br>
 +
                        2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow
 +
                        overnight.<br>
 +
                        <b>Preparation of Bacteria</b><br>
 +
                        1. Grow bacterial cells overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking
 +
                        incubator (200 rpm).<br>
 +
                        2. Subculture bacterial cells by transferring 300 μL of the overnight culture into 5 mL of LB in a
 +
                        loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log
 +
                        phase.<br>
 +
                        3. Pellet 1 mL of the bacterial cells subculture by centrifugation at 1000 g in a microfuge for 2
 +
                        min at room temperature.<br>
 +
                        4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br>
 +
                        <b>Infection</b><br>
 +
                        1. Aspirate media and rinse the monolayer twice with PBS.<br>
 +
                        2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture
 +
                        supernatant.<br>
 +
                        3. Incubate for 2 h at 37 °C in 5% CO<sub>2</sub>.<br>
 +
                        4. Aspirate media and wash<br>
 +
                        5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO<sub>2</sub> for 2
 +
                        h.<br>
 +
                        6. Replace GM with fresh GM containing 20 μg/mL gentamicin for 1 h.<br>
 +
                        7.Add 16 μg/mL ATc for remainder of experiment.<br>
 +
                        Observation is taken after 5 min, 30 min, 90 min.<br><br>
 +
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div id="float03">
 +
                <div class="h1">Reference</div>
 +
                <p>1. Park, S. H. et al. RGD Peptide Cell-Surface Display Enhances the Targeting and Therapeutic
 +
                    Efficacy of Attenuated Salmonella-mediated Cancer Therapy. Theranostics 6, 1672-1682,
 +
                    doi:10.7150/thno.16135 (2016).
 +
 +
 +
                </p>
 +
 +
            </div>
 +
        </div>
 +
        <!-- 侧边 -->
 +
        <div class="cebian">
 +
            <!-- 滚动菜单栏 -->
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Experiments">
 +
                <span class="biaoti">Experiments</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <div class="daohangyi">
 +
                <span class="biaoti">Improve</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
 +
            </div>
 +
            <div class="floatCtro">
 +
                <!-- <p class="daohanger">Calibration</p>
 +
                <p class="daohanger">Cell Measurement</p>
 +
                <p class="daohanger">Summary</p> -->
 +
                <a>
 +
                    <span>Back&nbsp;to&nbsp;Top</span>
 +
                </a>
 +
            </div>
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/InterLab">
 +
                <span class="biaoti">InterLab</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Notebook">
 +
                <span class="biaoti">Notebook</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <!-- 滚动菜单栏 -->
 +
        </div>
 +
    </div>
 +
 +
    <!-- 滚动菜单栏jQuery -->
 +
    <script src="jquery.js" type="text/javascript"></script>
 +
    <script>
 +
        $(function () {
 +
            var AllHet = $(window).height();
 +
            var mainHet = $('.floatCtro').height();
 +
            var fixedTop = (AllHet - mainHet) / 2
 +
            //  $('div.floatCtro').css({top:fixedTop+'px'});
 +
            $('div.floatCtro p').click(function () {
 +
                var ind = $('div.floatCtro p').index(this) + 1;
 +
                var topVal = $('#float0' + ind).offset().top;
 +
                $('body,html').animate({ scrollTop: topVal }, 1000)
 +
            })
 +
            $('div.floatCtro a').click(function () {
 +
                $('body,html').animate({ scrollTop: 0 }, 1000)
 +
            })
 +
            $(window).scroll(scrolls)
 +
            scrolls()
 +
            function scrolls() {
 +
                var f1, f2, f3, bck;
 +
                var fixRight = $('div.floatCtro p');
 +
                var blackTop = $('div.floatCtro a')
 +
                var sTop = $(window).scrollTop();
 +
                fl = $('#float01').offset().top;
 +
                f2 = $('#float02').offset().top;
 +
                f3 = $('#float03').offset().top;
 +
 +
                if (sTop <= f2 - 100) {
 +
                    blackTop.fadeOut(300).css('display', 'none')
 +
                }
 +
                else {
 +
                    blackTop.fadeIn(300).css('display', 'block')
 +
                }
 +
 +
                if (sTop >= fl) {
 +
                    fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
                if (sTop >= f2 - 100) {
 +
                    fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
                if (sTop >= f3 - 100) {
 +
                    fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
 +
            }
 +
        })
 +
    </script>
 +
    <!-- 滚动菜单栏jQuery -->
 +
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 03:40, 18 October 2018

We gave the surface display system a new function through displaying a RGD motif on the Lpp-OmpA which contains a signal sequence, the N-terminal of the lipoprotein (Lpp) and the residual 46-159 amino acids of the OmpA. In addition, lipoprotein performs the function of targeting to the outer membrane and OmpA constructs an anchor on the outer membrane. RGD motif can specifically bind to αvβ3, a biomarker of cancer cells such as melanoma, neuroblastoma, glioma and adenocarcinoma1. We determined the surface display site on the third loop of Lpp-OmpA through homology modelling (Figure 1). This part is under the control of lac promoter.

Figure 1. The homology modelling result of Lpp-OmpA-RGD. Red arrow shows the location of RGD motif.


Microscopy shows that Lpp-OmpA-RGD overexpressed in E. coli induced by 0.1mM IPTG can bind to αvβ3-positive MDA-MB-231 cell (Figure 2), but cannot bind to αvβ3-negative MCF7 cell (Figure 3). We also use BBa_J36850 as a control. This strain cannot bind to Vβ3-positive MDA-MB-231 cell line (Figure 4) and αvβ3-negative MCF7 cell line (Figure 5). These results suggest that we successfully improved the part BBa_J36850.

Figure 2. αvβ3-positive MDA-MB-231 cell line was incubated with E. coli which constitutively expressed RFP and contained BBa_J36850. This improved part expressed RGD motif under the control of lac promoter.

Figure 3. αvβ3-negative MCF7 cell line was incubated with E. coli which constitutively expressed RFP and contained BBa_J36850. This improved part expressed RGD motif under the control of lac promoter.

Figure 4. αvβ3-positive MDA-MB-231 cell line was incubated with E. coli which constitutively expressed RFP and contained BBa_J36850.

Figure 5. αvβ3-negative MCF7 cell line was incubated with E. coli which constitutively expressed RFP and contained BBa_J36850.

Preparation of Cells for Infection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacterial cells overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacterial cells by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the bacterial cells subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 2 h at 37 °C in 5% CO2.
4. Aspirate media and wash
5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO2 for 2 h.
6. Replace GM with fresh GM containing 20 μg/mL gentamicin for 1 h.
7.Add 16 μg/mL ATc for remainder of experiment.
Observation is taken after 5 min, 30 min, 90 min.

Reference

1. Park, S. H. et al. RGD Peptide Cell-Surface Display Enhances the Targeting and Therapeutic Efficacy of Attenuated Salmonella-mediated Cancer Therapy. Theranostics 6, 1672-1682, doi:10.7150/thno.16135 (2016).

Experiments
Improve
Back to Top
InterLab Notebook