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

(Prototype team page)
 
 
(32 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;
 +
        }
  
 +
        #HQ_page p {
 +
            margin: 0 !important;
 +
        }
  
−
<div class="column full_size judges-will-not-evaluate">
+
        #content {
−
<h3>★  ALERT! </h3>
+
            padding: 0px;
−
<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>
+
            width: 100%;
−
<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>
+
            margin-top: 0px;
−
</div>
+
            margin-left: 0px;
 +
        }
  
 +
        #bodyContent h1,
 +
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
−
<div class="clear"></div>
+
        #team_name {
 +
            display: none
 +
        }
  
 +
        .global_wrapper {
 +
            padding: 0px 0px 0px 0px;
 +
        }
  
 +
        #top_menu_14 {
 +
            height: 16px;
 +
        }
  
−
<div class="column full_size">
+
        * {
−
<h1>Demonstrate</h1>
+
            margin: 0;
−
<h3>Gold Medal Criterion #4</h3>
+
            padding: 0;
 +
            list-style: none;
 +
            list-style-type: none;
 +
            text-decoration: none !important;
 +
        }
  
−
<p>
+
        body {
−
Teams that can show their system working under real world conditions are usually good at impressing the judges in iGEM. To achieve gold medal criterion #4, convince the judges that your project works. There are many ways in which your project working could be demonstrated, so there is more than one way to meet this requirement. This gold medal criterion was introduced in 2016, so check our what 2016 teams did to achieve their gold medals!
+
            margin: 0;
−
</p>
+
            padding: 0;
 +
            background-color: #F3F3F3;
 +
            font-size: 16px;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
            letter-spacing: 0;
 +
            color: #FFFFFF;
 +
        }
  
−
<p>
+
        .daohang {
−
Please see the <a href="https://2018.igem.org/Judging/Medals">2018 Medals Page</a> for more information.
+
            background-color: #323643;
−
</p>
+
            position: relative;
 +
            color: #ffffff;
 +
            height: 64px;
 +
            top: -2px;
 +
        }
  
 +
        .logo-daohang {
 +
            height: 64px;
 +
            left: 10%;
 +
            float: left;
 +
            position: relative;
 +
        }
  
−
</div>
+
        .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: 200px;
 +
            /* 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 {
 +
            line-height: 55px;
 +
            font-weight: bold;
 +
            height:auto;
 +
            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;
 +
            height:auto;
 +
            /* 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;
 +
            height:auto;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 24px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
       
 +
        table {
 +
            color: #3B3B3B;
 +
        }
 +
 +
        .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>Our project goal is to induce pyroptosis in tumor cells through
 +
                    translocating a pyroptosis-associated protein GSDMD by <i>Salmonella</i>. Expression of the N-terminal of
 +
                    GSDMD fused with eGFP (eGFP-GSDMD-N275) is under the control of the promoter P<sub>tet</sub> in Δ<i>sifA</i>
 +
                    Salmonella. Hela GSDMD KO (knockout) cell line were infected with Δ<i>sifA</i> <i>Salmonella</i>. Inducer anhydrotetracycline (ATc) (16μg/mL) was added 3 h after infection. Microscopy shows that eGFP-GSDMD-N275 located in cytoplasm after 5 min of induction and  pyroptosis was triggered after 30 min of induction (<b>Figure 1</b>). By counting the population of ruptured cells, a 1.96 fold-change was demonstrated between the induced group and the control group (<b>Figure 2</b>). So, the pyroptosis of host cell in the induced group was triggered by eGFP-GSDMD-N275 as expected. These results demonstrate that we successfully achieved the goal of our project!!! </p>
 +
 +
            </div>
 +
            <div id="float02">
 +
                <div style="width: 90%; margin: auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/b/b3/T--HZAU-China--basicPart4.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 1.</b>  Hela GSDMD KO cells were infected by <i>Salmonella</i> Δ<i>sifA</i> SL1344 containing high copy number plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photographs were captured 5 min, 30 min, and 90 min after induction, respectively. </p>
 +
                <div style="width: 40%; margin: 30px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/1/16/T--HZAU-China--Demonstrate2.png" width=100% alt="">
 +
                </div>
 +
                <p><b>Figure 2.</b> Ruptured cells in a field of view were counted (n=8).</p><br>   
 +
                <p>In these experiments, the choice of MOI (multiplicity of infection) and infection time were directed by <a href="https://2018.igem.org/Team:HZAU-China/Model">Modeling</a>.</p>           
 +
            </div>         
 +
        </div>
 +
        <!-- 侧边 -->
 +
        <div class="cebian">
 +
            <!-- 滚动菜单栏 -->
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Description">
 +
                <span class="biaoti">Description</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/Design">
 +
                <span class="biaoti">Design</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/Results">
 +
                <span class="biaoti">Results</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">Demonstrate</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">neirongyi</p>
 +
                <p class="daohanger">neironger</p>
 +
                <p class="daohanger">neirongsan</p> -->
 +
                <a>
 +
                    <span>Back&nbsp;to&nbsp;Top</span>
 +
                </a>
 +
            </div>
 +
            <div class="daohangyi" style="height:20px">
 +
            </div>
 +
            <!-- 滚动菜单栏 -->
 +
        </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 02:41, 18 October 2018

Our project goal is to induce pyroptosis in tumor cells through translocating a pyroptosis-associated protein GSDMD by Salmonella. Expression of the N-terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) is under the control of the promoter Ptet in ΔsifA Salmonella. Hela GSDMD KO (knockout) cell line were infected with ΔsifA Salmonella. Inducer anhydrotetracycline (ATc) (16μg/mL) was added 3 h after infection. Microscopy shows that eGFP-GSDMD-N275 located in cytoplasm after 5 min of induction and pyroptosis was triggered after 30 min of induction (Figure 1). By counting the population of ruptured cells, a 1.96 fold-change was demonstrated between the induced group and the control group (Figure 2). So, the pyroptosis of host cell in the induced group was triggered by eGFP-GSDMD-N275 as expected. These results demonstrate that we successfully achieved the goal of our project!!!

Figure 1. Hela GSDMD KO cells were infected by Salmonella ΔsifA SL1344 containing high copy number plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photographs were captured 5 min, 30 min, and 90 min after induction, respectively.

Figure 2. Ruptured cells in a field of view were counted (n=8).


In these experiments, the choice of MOI (multiplicity of infection) and infection time were directed by Modeling.

Description Design Results
Demonstrate
Back to Top