Difference between revisions of "Team:Worldshaper-XSHS"

 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<!doctype html>
+
<html>
−
<html lang="en-US">
+
    <link rel='stylesheet' type='text/css' href='http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css' />
−
<head>
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/bootstrap.min.css">
−
<meta charset="utf-8">
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/ionicons.min.css">
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/animate.css">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/slider.css">
−
<title>WorldshaperXSHS</title>
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/owl.carousel.css">
−
<link href="css/WorldshaperXHSHsinglePageTemplate.css" rel="stylesheet" type="text/css">
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/owl.theme.css">
−
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/jquery.fancybox.css">
−
<script>var __adobewebfontsappname__="dreamweaver"</script>
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/main.css">
−
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
+
    <link rel="stylesheet" type='text/css' href="http://igem2017.worldshaper.cn/XSHS/css/responsive.css">
−
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/vendor/modernizr-2.6.2.min.js"></script>
−
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.min.js"></script>
−
<!--[if lt IE 9]>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/owl.carousel.min.js"></script>
−
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/bootstrap.min.js"></script>
−
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/wow.min.js"></script>
−
     <![endif]-->
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/slider.js"></script>
−
</head>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script>
−
<body>
+
    <script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script>
−
<!-- Main Container -->
+
     <header id="top-bar" class="navbar-fixed-top animated-header">
−
<style>a {
+
        <div class="container">
−
text-decoration: none
+
            <div class="navbar-header">
−
}
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
−
body {
+
                    <span class="sr-only">Toggle navigation</span>
−
font-family: source-sans-pro;
+
                    <span class="icon-bar"></span>
−
background-color: #f2f2f2;
+
                    <span class="icon-bar"></span>
−
margin-top: 0px;
+
                    <span class="icon-bar"></span>
−
margin-right: 0px;
+
                </button>
−
margin-bottom: 0px;
+
                <div class="navbar-brand">
−
margin-left: 0px;
+
                    <a href="https://2017.igem.org/Team:Worldshaper-XSHS" >
−
font-style: normal;
+
                        worldshaper- <b>XSHS</b>
−
font-weight: 200;
+
                    </a>
−
}
+
                </div>
−
/* Container */
+
            </div>
−
.container {
+
            <nav class="collapse navbar-collapse navbar-right" role="navigation">
−
width: 90%;
+
                <div class="main-menu">
−
margin-left: auto;
+
                    <ul class="nav navbar-nav navbar-right">
−
margin-right: auto;
+
                        <li>
−
height: 1000px;
+
                            <a href="https://2017.igem.org/Team:Worldshaper-XSHS">Home</a>
−
background-color: #FFB100;
+
                        </li>
−
}
+
                        <li class="dropdown">
−
/* Navigation */
+
                            <a class="dropdown-toggle" data-toggle="dropdown">
−
header {
+
                                Team
−
width: 100%;
+
                                <span class="caret"></span>
−
height: 5%;
+
                            </a>
−
background-color: #FFB100;
+
                            <div class="dropdown-menu">
−
+
                                <ul>
−
}
+
                                    <li>
−
.logo {
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/aboutus.html">about us</a>
−
color: #fff;
+
                                    </li>
−
font-weight: bold;
+
                                    <li>
−
text-align: undefined;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/members.html">Members</a>
−
width: 10%;
+
                                    </li>
−
float: left;
+
                                    <li>
−
margin-top: 15px;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Collaborations">Collaborations</a>
−
margin-left: 25px;
+
                                    </li>
−
letter-spacing: 4px;
+
                                </ul>
−
}
+
                            </div>
−
nav {
+
                        </li>
−
float: right;
+
                        <li class="dropdown">
−
width: 50%;
+
                            <a class="dropdown-toggle" data-toggle="dropdown">
−
text-align: right;
+
                                Project
−
margin-right: 25px;
+
                                <span class="caret"></span>
−
}
+
                            </a>
−
header nav ul {
+
                            <div class="dropdown-menu">
−
list-style: none;
+
                                <ul>
−
float: right;
+
                                    <li>
−
}
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Background.html">Background</a>
−
nav ul li {
+
                                    </li>
−
float: left;
+
                                    <li>
−
color: #FFFFFF;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/design.html">Design</a>
−
font-size: 14px;
+
                                    </li>
−
text-align: left;
+
                                    <li>
−
margin-right: 25px;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Protocols-methods.html">Protocols and methods</a>
−
letter-spacing: 2px;
+
                                    </li>
−
font-weight: bold;
+
                                    <li>
−
transition: all 0.3s linear;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/result.html">Results</a>
−
}
+
                                    </li>
−
ul li a {
+
                                    <li>
−
color: #FFFFFF;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Future-plans.html">Future plans</a>
−
text-decoration: none;
+
                                    </li>
−
}
+
                                    <li>
−
ul li:hover a {
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Attributions">Attributions</a>
−
color: #2C9AB7;
+
                                    </li>
−
}
+
                                    <li>
−
.hero_header {
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/InterLab">Interlab</a>
−
color: #FFFFFF;
+
                                    </li>
−
text-align: center;
+
                                    <li>
−
margin-top: 0px;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Model">Model</a>
−
margin-right: 0px;
+
                                    </li>
−
margin-bottom: 0px;
+
                                    <li>
−
margin-left: 0px;
+
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Demonstrate">Demonstrate</a>
−
letter-spacing: 4px;
+
                                    </li>
−
}
+
−
/* Hero Section */
+
−
.hero {
+
−
background-color: #00C5FF;
+
−
padding-top: 150px;
+
−
padding-bottom: 150px;
+
  
−
}
+
                                </ul>
−
.hero1 {
+
                            </div>
−
background-color: #00C5FF;
+
                        </li>
−
padding-top: 150px;
+
                        <li>
−
padding-bottom: 150px;
+
                            <a href="https://2017.igem.org/Team:Worldshaper-XSHS/parts.html">Parts</a>
−
    height: 1000px;
+
                        </li>
 +
                        <li class="dropdown">
 +
                            <a class="dropdown-toggle" data-toggle="dropdown">
 +
                                HUMAN PRACTICES
 +
                                <span class="caret"></span>
 +
                            </a>
 +
                            <div class="dropdown-menu">
 +
                                <ul>
 +
                                    <li>
 +
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/HP/Silver">Silver</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/HP/Gold_Integrated">Integrated and Gold</a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Engagement">Engagement</a>
 +
                                    </li>
 +
                                </ul>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Applied_Design">Applied Design</a>
 +
                        </li>
 +
                        <li class="dropdown">
 +
                            <a class="dropdown-toggle" data-toggle="dropdown">
 +
                                Achievement
 +
                                <span class="caret"></span>
 +
                            </a>
 +
                            <div class="dropdown-menu">
 +
                                <ul>
 +
                                    <li>
 +
                                        <a href="https://2017.igem.org/Team:Worldshaper-XSHS/Medal-requirements.html">Medal requirements</a>
 +
                                    </li>
 +
                                </ul>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2017.igem.org/Team:Worldshaper-XSHS/safety.html">Safety</a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </nav>
 +
        </div>
 +
    </header>
  
−
}
+
    <section class="visual wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="200ms" >
−
.cover {
+
        <img src="https://static.igem.org/mediawiki/2017/d/d2/T-worldshaper-XSHS-00001.jpeg" alt="" class="bg-stretch" />   
−
background-color: #CFCFCF;
+
    </section>
−
padding-top: 150px;
+
−
padding-bottom: 150px;
+
−
}
+
−
.light {
+
−
font-weight: bold;
+
−
color: #717070;
+
−
}
+
−
.tagline {
+
−
text-align: center;
+
−
color: #FFFFFF;
+
−
margin-top: 4px;
+
−
font-weight: lighter;
+
−
text-transform: uppercase;
+
−
letter-spacing: 1px;
+
−
font-size: 50px;
+
−
}
+
−
.HUANGNAN {
+
−
text-align: center;
+
−
color: #000000;
+
−
margin-top: 4px;
+
−
font-weight: lighter;
+
−
text-transform: uppercase;
+
−
letter-spacing: 1px;
+
−
font-size: 50px;
+
−
}
+
−
.emmm {
+
−
background-color: #FFB100;
+
−
padding-top: 150px;
+
−
padding-bottom: 150px;
+
−
}
+
−
/* About Section */
+
−
.about {
+
−
background-color: #ffffFF;
+
−
padding-top: 150px;
+
−
padding-bottom: 150px;
+
−
}
+
−
.light {
+
−
font-weight: bold;
+
−
color: #717070;
+
−
}
+
−
.tagline {
+
−
text-align: center;
+
−
color: #FFFFFF;
+
−
margin-top: 4px;
+
−
font-weight: lighter;
+
−
text-transform: uppercase;
+
−
letter-spacing: 1px;
+
−
}
+
−
/* Stats Gallery */
+
−
.stats {
+
−
color: #717070;
+
−
margin-bottom: 5px;
+
−
}
+
−
.gallery {
+
−
clear: both;
+
−
display: inline-block;
+
−
width: 100%;
+
−
background-color: #FFFFFF;
+
−
/* [disabled]min-width: 400px;
+
−
*/
+
−
padding-bottom: 35px;
+
−
padding-top: 0px;
+
−
margin-top: -5px;
+
−
margin-bottom: 0px;
+
−
}
+
−
.thumbnail {
+
−
width: 25%;
+
−
text-align: center;
+
−
float: left;
+
−
margin-top: 35px;
+
−
}
+
−
.gallery .thumbnail h4 {
+
−
margin-top: 5px;
+
−
margin-right: 5px;
+
−
margin-bottom: 5px;
+
−
margin-left: 5px;
+
−
color: #52BAD5;
+
−
}
+
−
.gallery .thumbnail p {
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
color: #A3A3A3;
+
−
}
+
−
/* Parallax Section */
+
−
.banner {
+
−
background-color: #2D9AB7;
+
−
background-image: url(../images/parallax.png);
+
−
height: 400px;
+
−
background-attachment: fixed;
+
−
background-size: cover;
+
−
background-repeat: no-repeat;
+
−
}
+
−
.parallax {
+
−
color: #FFFFFF;
+
−
text-align: right;
+
−
padding-right: 100px;
+
−
padding-top: 110px;
+
−
letter-spacing: 2px;
+
−
margin-top: 0px;
+
−
}
+
−
.parallax_description {
+
−
color: #FFFFFF;
+
−
text-align: right;
+
−
padding-right: 100px;
+
−
width: 30%;
+
−
float: right;
+
−
font-weight: lighter;
+
−
line-height: 23px;
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
}
+
−
/* More info */
+
−
footer {
+
−
background-color: #FFFFFF;
+
−
padding-bottom: 35px;
+
−
}
+
−
.footer_column {
+
−
width: 50%;
+
−
text-align: center;
+
−
padding-top: 30px;
+
−
float: left;
+
−
}
+
−
footer .footer_column h3 {
+
−
color: #B3B3B3;
+
−
text-align: center;
+
−
}
+
−
footer .footer_column p {
+
−
color: #717070;
+
−
background-color: #FFFFFF;
+
−
}
+
−
.cards {
+
−
width: 100%;
+
−
height: auto;
+
−
max-width: 400px;
+
−
max-height: 200px;
+
−
}
+
−
.cute {
+
−
width: 100%;
+
−
height: auto;
+
−
max-width: 1920px;
+
−
max-height: 1080px;
+
−
}
+
−
footer .footer_column p {
+
−
padding-left: 30px;
+
−
padding-right: 30px;
+
−
text-align: justify;
+
−
line-height: 25px;
+
−
font-weight: lighter;
+
−
margin-left: 20px;
+
−
margin-right: 20px;
+
−
}
+
−
.button {
+
−
width: 200px;
+
−
margin-top: 40px;
+
−
margin-right: auto;
+
−
margin-bottom: auto;
+
−
margin-left: auto;
+
−
padding-top: 20px;
+
−
padding-right: 10px;
+
−
padding-bottom: 20px;
+
−
padding-left: 10px;
+
−
text-align: center;
+
−
vertical-align: middle;
+
−
border-radius: 0px;
+
−
text-transform: uppercase;
+
−
font-weight: bold;
+
−
letter-spacing: 2px;
+
−
border: 3px solid #FFFFFF;
+
−
color: #FFFFFF;
+
−
transition: all 0.3s linear;
+
−
}
+
−
.button:hover {
+
−
background-color: #FEFEFE;
+
−
color: #C4C4C4;
+
−
cursor: pointer;
+
−
}
+
−
.copyright {
+
−
text-align: center;
+
−
padding-top: 20px;
+
−
padding-bottom: 20px;
+
−
background-color: #FFB100;
+
−
color: #FFFFFF;
+
−
text-transform: uppercase;
+
−
font-weight: lighter;
+
−
letter-spacing: 2px;
+
−
border-top-width: 2px;
+
−
}
+
−
.footer_banner {
+
−
background-color: #B3B3B3;
+
−
padding-top: 60px;
+
−
padding-bottom: 60PX;
+
−
margin-bottom: 0px;
+
−
background-image: url(../images/pattern.png);
+
−
background-repeat: repeat;
+
−
}
+
−
footer {
+
−
display: inline-block;
+
−
}
+
−
.hidden {
+
−
display: none;
+
−
}
+
  
−
/* Mobile */
+
    <section id="about">
−
@media (max-width: 320px) {
+
        <div class="container">
−
.logo {
+
            <div class="row">
−
width: 100%;
+
                <div class="col-md-6 col-sm-6">
−
text-align: center;
+
                    <div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms">
−
margin-top: 13px;
+
                        <h2>Abstract</h2>
−
margin-right: 0px;
+
                        <p>
−
margin-bottom: 0px;
+
                          Hometown Hangzhou is widely known by water- related UNESCO World Heritages – West Lake and Grand Canal, however, severe water pollution problem caused by many reasons also exist. Hence, we hope to provide an easy-operating and low-cost tool for public to monitor water quality around.  
−
margin-left: 0px;
+
                        </p>
−
}
+
                        <p>
−
.container header nav {
+
                            We designed a portable water quality bio-detector prototype based on E.coli strains which were constructed to detect dissolved oxygen, phosphorus or nitrogen in water respectively. The oxygen sensitive vgb promoter and a GFP reporter constitute Oxygen detector 1.0. To enhance the expression of GFP, version 2.0 contains a vgb promoter, a T7 RNA polymerase gene, a T7 promoter and a GFP gene. For nitrogen, the PyeaR promoter was used to response to different concentrations of nitrate, nitrite and nitric, with a BFP reporter gene. For phosphate, a plasmid consisting of an ‘external phosphate sensing promoter’ to sense the phosphate concentration and a RFP gene to report.  
−
margin-top: 0px;
+
                        </p>
−
margin-right: 0px;
+
                    </div>
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
width: 100%;
+
−
float: none;
+
−
display: none;
+
−
}
+
−
header nav ul {
+
−
}
+
−
nav ul li {
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
width: 100%;
+
−
text-align: center;
+
−
}
+
−
.text_column {
+
−
width: 100%;
+
−
text-align: justify;
+
−
padding-top: 0px;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
}
+
−
.thumbnail {
+
−
width: 100%;
+
−
}
+
−
.footer_column {
+
−
width: 100%;
+
−
margin-top: 0px;
+
−
}
+
−
.parallax {
+
−
text-align: center;
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
padding-top: 40%;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
width: 100%;
+
−
font-size: 18px;
+
−
}
+
−
.parallax_description {
+
−
padding-top: 0px;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
width: 90%;
+
−
margin-top: 25px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 12px;
+
−
float: none;
+
−
text-align: center;
+
−
}
+
−
.banner {
+
−
background-color: #2D9AB7;
+
−
background-image: none;
+
−
}
+
−
.tagline {
+
−
margin-top: 20px;
+
−
line-height: 22px;
+
−
}
+
−
.hero_header {
+
−
padding-left: 10px;
+
−
padding-right: 10px;
+
−
line-height: 22px;
+
−
text-align: center;
+
−
}
+
−
}
+
  
−
/* Small Tablets */
+
                </div>
−
@media (min-width: 321px)and (max-width: 767px) {
+
                <div class="col-md-6 col-sm-6">
−
.logo {
+
                    <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
−
width: 100%;
+
                        <img src="https://static.igem.org/mediawiki/2017/f/f1/T-worldshaper-XSHS-k010.png" alt="" />
−
text-align: center;
+
                    </div>
−
margin-top: 13px;
+
                </div>
−
margin-right: 0px;
+
            </div>
−
margin-bottom: 0px;
+
        </div>
−
margin-left: 0px;
+
    </section>
−
color: #043745;
+
 
−
}
+
    <footer>
−
.container header nav {
+
        <div class="container">
−
margin-top: 0px;
+
            <div class="foot-box">
−
margin-right: 0px;
+
                <ul class="clearfix">
−
margin-bottom: 0px;
+
                    <li class="foot-box-c1">
−
margin-left: 0px;
+
                        <img src="https://static.igem.org/mediawiki/2017/7/71/T-worldshaper-XSHS-logoxshs.jpeg" alt="" />
−
width: 100%;
+
                    </li>
−
float: none;
+
                    <li class="foot-box-c2">
−
overflow: auto;
+
                        <img src="https://static.igem.org/mediawiki/2017/c/ce/T-worldshaper-igemlogo.jpeg" alt="" />
−
display: inline-block;
+
                    </li>
−
background: #52bad5;
+
                    <li class="foot-box-c3">
−
}
+
                        <p>Worldshaper-XSHS, Xiaoshan High School</p>
−
header nav ul {
+
                        <p>
−
padding: 0px;
+
                            Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China
−
float: none;
+
                        </p>
−
}
+
                    </li>
−
nav ul li {
+
                    <li class="foot-box-c4">
−
margin-top: 0px;
+
                        <img src="https://static.igem.org/mediawiki/2017/3/32/T-Worldshaper-XSHS-weixin.jpeg" alt="" />
−
margin-right: 0px;
+
                    </li>
−
margin-bottom: 0px;
+
                </ul>
−
margin-left: 0px;
+
            </div>
−
width: 100%;
+
        </div>
−
text-align: center;
+
    </footer>
−
padding-top: 8px;
+
−
padding-bottom: 8px;
+
−
}
+
−
.text_column {
+
−
width: 100%;
+
−
text-align: left;
+
−
padding-top: 0px;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
}
+
−
.thumbnail {
+
−
width: 100%;
+
−
}
+
−
.footer_column {
+
−
width: 100%;
+
−
margin-top: 0px;
+
−
}
+
−
.parallax {
+
−
text-align: center;
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
padding-top: 40%;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
width: 100%;
+
−
font-size: 18px;
+
−
}
+
−
.parallax_description {
+
−
padding-top: 0px;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
margin-top: 30%;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
float: none;
+
−
width: 100%;
+
−
text-align: center;
+
−
}
+
−
.thumbnail {
+
−
width: 50%;
+
−
}
+
−
.parallax {
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
padding-right: 0px;
+
−
padding-bottom: 0px;
+
−
padding-left: 0px;
+
−
padding-top: 20%;
+
−
}
+
−
.parallax_description {
+
−
margin-top: 0px;
+
−
margin-right: 0px;
+
−
margin-bottom: 0px;
+
−
margin-left: 0px;
+
−
width: 100%;
+
−
padding-top: 30px;
+
−
}
+
−
.banner {
+
−
padding-left: 20px;
+
−
padding-right: 20px;
+
−
}
+
−
.footer_column {
+
−
width: 100%;
+
−
}
+
−
}
+
  
−
/* Small Desktops */
 
−
@media (min-width: 768px) and (max-width: 1096px) {
 
−
.text_column {
 
−
width: 100%;
 
−
}
 
−
.thumbnail {
 
−
width: 50%;
 
−
}
 
−
.text_column {
 
−
width: 100%;
 
−
margin-top: 0px;
 
−
margin-right: 0px;
 
−
margin-bottom: 0px;
 
−
margin-left: 0px;
 
−
padding-top: 0px;
 
−
padding-right: 0px;
 
−
padding-bottom: 0px;
 
−
padding-left: 0px;
 
−
}
 
−
.banner {
 
−
margin-top: 0px;
 
−
padding-top: 0px;
 
−
}
 
−
}
 
−
</style>
 
−
<div class="container">
 
−
  <!-- Navigation -->
 
−
  <header> <a href="">
 
−
        <h4 class="logo">WorldshaperXSHS</h4>
 
−
    </a>
 
−
    <nav>
 
−
      <ul>
 
−
        <li><a href="Untitled-2.html">HOME</a></li>
 
−
        <li><a href="2.html">TEAM</a></li>
 
−
        <li> <a href="#contact">PROJECT</a></li>
 
−
        <li> <a href="#contact">PARTS</a></li>
 
−
        <li> <a href="#contact">SAFETY</a></li>
 
−
        <li> <a href="#contact">HP</a></li>
 
−
        <li> <a href="#contact">AWARDS</a></li>
 
−
      </ul>
 
−
    </nav>
 
−
  </header>
 
−
  <img src="images/worldshaperXSHSfengmian.jpg" alt="" width="1920" height="1080" class="cute"/>
 
−
  <!-- Hero Section -->
 
−
  <section class="hero" id="hero">
 
−
    <h5 class="tagline">E.coli:oxygen is delicious!</h5>
 
−
  </section>
 
−
  <!-- About Section -->
 
−
  <section class="about" id="about">
 
−
  <h5 class="HUANGNAN">BACKGROUND</h5>
 
−
    <h2 class="hidden">About</h2>
 
−
 
 
−
  </section>
 
−
    <a href="2.html">
 
−
    <section class="emmm" id="emmm">
 
−
  <h5 class="HUANGNAN">TEAM</h5>
 
−
    <h2 class="hidden">emmm</h2>
 
−
  </section>
 
−
  </a>
 
−
  <!-- Stats Gallery Section -->
 
−
  <!-- Parallax Section -->
 
−
  <section class="hero" id="hero">
 
−
    <h5 class="tagline">PROJECT</h5>
 
−
  </section>
 
−
  <!-- About Section -->
 
−
  <section class="about" id="about">
 
−
  <h5 class="HUANGNAN">PARTS</h5>
 
−
    <h2 class="hidden">About</h2>
 
−
 
 
−
  </section>
 
−
    <section class="emmm" id="emmm">
 
−
  <h5 class="HUANGNAN">SAFETY</h5>
 
−
    <h2 class="hidden">emmm</h2>
 
−
 
 
−
  </section>
 
−
  <section class="hero" id="hero">
 
−
    <h5 class="tagline">HP</h5>
 
−
  </section>
 
−
  <!-- About Section -->
 
−
  <section class="about" id="about">
 
−
  <h5 class="HUANGNAN">AWARDS</h5>
 
−
    <h2 class="hidden">About</h2>
 
−
  </section>
 
−
  <div class="copyright">&copy;2017 - <strong>IGEM worldshaperxshs</strong></div>
 
−
</div>
 
−
<!-- Main Container Ends -->
 
−
</body>
 
 
</html>
 
</html>

Latest revision as of 11:38, 1 November 2017

Abstract

Hometown Hangzhou is widely known by water- related UNESCO World Heritages – West Lake and Grand Canal, however, severe water pollution problem caused by many reasons also exist. Hence, we hope to provide an easy-operating and low-cost tool for public to monitor water quality around.

We designed a portable water quality bio-detector prototype based on E.coli strains which were constructed to detect dissolved oxygen, phosphorus or nitrogen in water respectively. The oxygen sensitive vgb promoter and a GFP reporter constitute Oxygen detector 1.0. To enhance the expression of GFP, version 2.0 contains a vgb promoter, a T7 RNA polymerase gene, a T7 promoter and a GFP gene. For nitrogen, the PyeaR promoter was used to response to different concentrations of nitrate, nitrite and nitric, with a BFP reporter gene. For phosphate, a plasmid consisting of an ‘external phosphate sensing promoter’ to sense the phosphate concentration and a RFP gene to report.

  • Worldshaper-XSHS, Xiaoshan High School

    Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China