Difference between revisions of "Team:SZMS 15 Shenzhen"

(Prototype team page)
 
Line 1: Line 1:
−
{{SZMS_15_Shenzhen}}
+
<html>
−
<html>
+
<style type="text/css">
−
<h2> Welcome to iGEM 2015! </h2>
+
@charset "UTF-8";
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
/*@font-face
 +
{
 +
font-family: NotoSansHans;
 +
src: url('../font-face/NotoSansHans-Thin.otf');
 +
}*/
 +
@media screen and (min-width:320px) and (max-width:780px) {
 +
#nav-div {
 +
width: 100%;
 +
        margin-left: -33px;
 +
}
 +
    .nav-li {
 +
        display:none;
 +
    }
 +
    .nav-button {
 +
        display: block;
 +
    } 
 +
    .sub{
 +
        width: 100%;
 +
        margin-bottom: 5px;
 +
    }
 +
    .sub-heading{
 +
        height:896px;
 +
    }
 +
}
  
−
<h4>Before you start: </h4>
+
@media screen and (min-width:780px) and (max-width:1000px) {
−
<p> Please read the following pages:</p>
+
#nav-div {
−
<ul>
+
width: 100%;
−
<li>  <a href="https://2015.igem.org/Requirements">Requirements page </a> </li>
+
}
−
<li> <a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
+
    .nav-li {
−
</ul>
+
        display: block;
 +
        width: 14.5%;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
   
 +
}
  
−
<div class="highlightBox">
 
−
<h4> Styling your wiki </h4>
 
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
 
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
 
−
</div>
 
  
−
<h4> Editing your wiki </h4>
+
@media screen and (min-width:1000px) {
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
#nav-div {
−
<p> <a href="https://2015.igem.org/wiki/index.php?title=Team:SZMS_15_Shenzhen&action=edit"> Click here to edit this page! </a></p>
+
width:1000px;
−
<p>See tips on how to edit your wiki on the <a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation</a> page.</p>
+
        margin-left: auto;
 +
        margin-right: auto;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 150px;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
}
  
 +
body{
 +
    margin: 0px;
 +
    padding: 0px;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    /*change if necessary*/
 +
   
 +
}
  
−
<h4>Templates </h4>
+
#heading{
−
<p> This year we have created templates for teams to use freely. More information on how to use and edit the templates can be found on the
+
    position: relative;
−
<a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation </a> page.</p>
+
    z-index: 1;
 +
    margin-bottom: 10px;
 +
    cursor:pointer;
 +
   
 +
}
  
 +
.nav-list{
 +
    display: block;
 +
    margin: 0px;
 +
}
  
−
<h4>Tips</h4>
+
.nav-li{
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
−
<ul>
+
    float: left;
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
    list-style-type: none;
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
    text-align: center;
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
    line-height: 2.6;
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
+
}
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
.nav-logo{
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2015.igem.org/Calendar_of_Events">iGEM 2015 calendar</a> </li>
+
    list-style-type: none;
−
<li>Have lots of fun! </li>
+
}
−
</ul>
+
.nav-list li a{
 +
    text-decoration: none;
 +
    display: block;
 +
    color: #FFFFFF;
 +
}
  
 +
.nav-list li a:hover{
 +
    color: #BBBBBB;
 +
}
  
−
<h4>Inspiration</h4>
+
#menubar{
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
    margin-top: 20px;
−
<ul>
+
    background-color: rgba(16, 38, 67, 0.7);
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
    height: 42px;
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
    width:100%;
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
    position: fixed;
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
    z-index: 3;
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
}
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
  
−
<h4> Uploading pictures and files </h4>
+
.nav-logo img{
−
<p> You can upload your pictures and files to the iGEM 2015 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
    width:200px;
−
When you upload, set the "Destination Filename" to <code>Team:YourOfficialTeamName/NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
    padding-top: 4px;
 +
    margin: 0px;
 +
}
 +
.nav-logo {
 +
    padding: 0px;
 +
    margin: 0px;
 +
    float: left;
 +
}
 +
#nav-div{
 +
    height:42px;
 +
    z-index: 3;
 +
    margin-top: px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    position: relative;
 +
    text-align: center;
 +
    color: aliceblue;
 +
}
 +
#nav-tem{
 +
    margin-left: auto;
 +
    z-index: 3;
 +
    margin-right: auto;
 +
    margin-top: 10px;
 +
}
 +
.nav-button {
 +
    float:left;
 +
}
 +
.nav-button img {
 +
    height:25px;
 +
    margin-top:9px;
 +
}
  
−
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
+
#leftbar_f{
 +
    width:100%;
 +
    height: 100%;
 +
    position: fixed;
 +
    z-index: 2;
 +
}
 +
.sub-heading{
 +
    margin-left: 5%;
 +
    width: 90%;
 +
    position: relative;
 +
    z-index: 1;
 +
   
 +
}
 +
.sub{
 +
    height:220px;
 +
    padding: 0px;
 +
    float: left;
 +
   
  
 +
}
 +
.subi{
 +
    margin-left: 2px;
 +
    margin-right:2px;
 +
    background-color: rgb(240,240,240);
 +
    height: 100%;
 +
    text-align: center;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    line-height: 1.3;
 +
    cursor:pointer;
 +
    overflow-y: hidden;
 +
    display:block;
 +
}
 +
.subi img{
 +
    margin-top:10px;
 +
    width: 80%;
 +
    max-width: 230px;
 +
    margin-bottom: 10px;
 +
   
 +
   
 +
   
 +
}
 +
.sub ul{
 +
    padding: 0px;
 +
    margin: 0px;
 +
}
 +
.bottombar {
 +
    width: 100%;
 +
    position:relative;
 +
    z-index: 1;
 +
    text-align: center;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
.buttom-intro{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    font-size: 70%;
 +
   
 +
   
 +
}
 +
.subi-f{
 +
    background-color: rgba(0, 62, 147, 0.6);
 +
    color: rgb(256,256,256);
 +
    position: relative;
 +
    bottom: -50px;
 +
    display: none;
 +
    height: 80px;
 +
    padding-top: 15px;
 +
    z-index: 2;
 +
}
 +
#b-intro{
 +
    position: relative;
 +
    width: 90%;
 +
    height: 50px;
 +
    margin: 15px;
 +
    background-color: rgb(235, 235, 235);
 +
    margin-left: 5%;
 +
    margin-right: 5%;
 +
    padding-bottom: 30px;
 +
    padding-top: 30px;
 +
}
 +
#b-intro-title{
 +
    vertical-align: middle;
 +
    padding:10px;
 +
    padding-left: 50px;
 +
    font-weight: bold;
 +
}
 +
.heading{
 +
    top: 50px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    background-color: rgba(225, 225, 225, 0.2);
 +
    padding: 5%;
 +
}
 +
.heading-text{
 +
    width: 50%;
 +
    float: left;
 +
   
 +
   
 +
}
 +
.heading-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.heading-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: right;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
.content1{
 +
    top: 0px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    padding: 5%;
 +
}
 +
.content1-text{
 +
    width: 50%;
 +
    float: right;
 +
   
 +
   
 +
}
 +
.content1-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.content1-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: left;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
.content2{
 +
    top: 0px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    padding: 5%;
 +
}
 +
.content2-text{
 +
    width: 50%;
 +
    float: left;
 +
   
 +
   
 +
}
 +
.content2-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.content2-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: right;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
@charset "UTF-8";
 +
/*@font-face
 +
{
 +
font-family: NotoSansHans;
 +
src: url('../font-face/NotoSansHans-Thin.otf');
 +
}*/
 +
@media screen and (min-width:320px) and (max-width:780px) {
 +
#nav-div {
 +
width: 100%;
 +
        margin-left: -33px;
 +
}
 +
    .nav-li {
 +
        display:none;
 +
    }
 +
    .nav-button {
 +
        display: block;
 +
    } 
 +
    .sub{
 +
        width: 100%;
 +
        margin-bottom: 5px;
 +
    }
 +
    .sub-heading{
 +
        height:896px;
 +
    }
 +
}
  
 +
@media screen and (min-width:780px) and (max-width:1000px) {
 +
#nav-div {
 +
width: 100%;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 14.5%;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
   
 +
}
  
−
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
 
 +
@media screen and (min-width:1000px) {
 +
#nav-div {
 +
width:1000px;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 150px;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
}
 +
 
 +
body{
 +
    margin: 0px;
 +
    padding: 0px;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    /*change if necessary*/
 +
   
 +
}
 +
 
 +
#heading{
 +
    position: relative;
 +
    z-index: 1;
 +
    margin-bottom: 10px;
 +
    cursor:pointer;
 +
   
 +
}
 +
 
 +
.nav-list{
 +
    display: block;
 +
    margin: 0px;
 +
}
 +
 
 +
.nav-li{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    float: left;
 +
    list-style-type: none;
 +
    text-align: center;
 +
    line-height: 2.6;
 +
}
 +
.nav-logo{
 +
    list-style-type: none;
 +
}
 +
.nav-list li a{
 +
    text-decoration: none;
 +
    display: block;
 +
    color: #FFFFFF;
 +
}
 +
 
 +
.nav-list li a:hover{
 +
    color: #BBBBBB;
 +
}
 +
 
 +
#menubar{
 +
    background-color: rgba(16, 38, 67, 0.7);
 +
    height: 42px;
 +
    width:100%;
 +
    position: fixed;
 +
    z-index: 3;
 +
}
 +
 
 +
.nav-logo img{
 +
    width:200px;
 +
    padding-top: 4px;
 +
    margin: 0px;
 +
}
 +
.nav-logo {
 +
    padding: 0px;
 +
    margin: 0px;
 +
    float: left;
 +
}
 +
#nav-div{
 +
    height:42px;
 +
    z-index: 3;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    position: relative;
 +
}
 +
.nav-button {
 +
    float:left;
 +
}
 +
.nav-button img {
 +
    height:25px;
 +
    margin-top:9px;
 +
}
 +
 
 +
#leftbar_f{
 +
    width:100%;
 +
    height: 100%;
 +
    position: fixed;
 +
    z-index: 2;
 +
}
 +
.sub-heading{
 +
    margin-left: 5%;
 +
    width: 90%;
 +
    position: relative;
 +
    z-index: 1;
 +
   
 +
}
 +
.sub{
 +
    height:220px;
 +
    padding: 0px;
 +
    float: left;
 +
   
 +
 
 +
}
 +
.subi{
 +
    margin-left: 2px;
 +
    margin-right:2px;
 +
    background-color: rgb(240,240,240);
 +
    height: 100%;
 +
    text-align: center;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    line-height: 1.3;
 +
    cursor:pointer;
 +
    overflow-y: hidden;
 +
    display:block;
 +
}
 +
.subi img{
 +
    margin-top:10px;
 +
    width: 80%;
 +
    max-width: 230px;
 +
    margin-bottom: 10px;
 +
   
 +
   
 +
   
 +
}
 +
.sub ul{
 +
    padding: 0px;
 +
    margin: 0px;
 +
}
 +
.bottombar {
 +
    width: 100%;
 +
    position:relative;
 +
    z-index: 1;
 +
    text-align: center;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
.buttom-intro{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    font-size: 70%;
 +
   
 +
   
 +
}
 +
.subi-f{
 +
    background-color: rgba(0, 62, 147, 0.6);
 +
    color: rgb(256,256,256);
 +
    position: relative;
 +
    bottom: -50px;
 +
    display: none;
 +
    height: 80px;
 +
    padding-top: 15px;
 +
    z-index: 2;
 +
}
 +
#b-intro{
 +
    position: relative;
 +
    width: 90%;
 +
    height: 50px;
 +
    margin: 15px;
 +
    background-color: rgb(235, 235, 235);
 +
    margin-left: 5%;
 +
    margin-right: 5%;
 +
    padding-bottom: 30px;
 +
    padding-top: 30px;
 +
}
 +
#b-intro-title{
 +
    vertical-align: middle;
 +
    padding:10px;
 +
    padding-left: 50px;
 +
    font-weight: bold;
 +
}
 +
.heading{
 +
    top: 50px;
 +
    height: 500px;
 +
    width: 90%;
 +
    z-index: 2;
 +
    position: relative;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
<style type="text/css">
 +
@charset "UTF-8";
 +
/*@font-face
 +
{
 +
font-family: NotoSansHans;
 +
src: url('../font-face/NotoSansHans-Thin.otf');
 +
}*/
 +
@media screen and (min-width:320px) and (max-width:780px) {
 +
#nav-div {
 +
width: 100%;
 +
        margin-left: -33px;
 +
}
 +
    .nav-li {
 +
        display:none;
 +
    }
 +
    .nav-button {
 +
        display: block;
 +
    } 
 +
    .sub{
 +
        width: 100%;
 +
        margin-bottom: 5px;
 +
    }
 +
    .sub-heading{
 +
        height:896px;
 +
    }
 +
}
 +
 
 +
@media screen and (min-width:780px) and (max-width:1000px) {
 +
#nav-div {
 +
width: 100%;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 14.5%;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
   
 +
}
 +
 
 +
 
 +
@media screen and (min-width:1000px) {
 +
#nav-div {
 +
width:1000px;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 150px;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
}
 +
 
 +
body{
 +
    margin: 0px;
 +
    padding: 0px;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    /*change if necessary*/
 +
   
 +
}
 +
 
 +
#heading{
 +
    position: relative;
 +
    z-index: 1;
 +
    margin-bottom: 10px;
 +
    cursor:pointer;
 +
   
 +
}
 +
 
 +
.nav-list{
 +
    display: block;
 +
    margin: 0px;
 +
}
 +
 
 +
.nav-li{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    float: left;
 +
    list-style-type: none;
 +
    text-align: center;
 +
    line-height: 2.6;
 +
}
 +
.nav-logo{
 +
    list-style-type: none;
 +
}
 +
.nav-list li a{
 +
    text-decoration: none;
 +
    display: block;
 +
    color: #FFFFFF;
 +
}
 +
 
 +
.nav-list li a:hover{
 +
    color: #BBBBBB;
 +
}
 +
 
 +
#menubar{
 +
    margin-top: 20px;
 +
    background-color: rgba(16, 38, 67, 0.7);
 +
    height: 42px;
 +
    width:100%;
 +
    position: fixed;
 +
    z-index: 3;
 +
}
 +
 
 +
.nav-logo img{
 +
    width:200px;
 +
    padding-top: 4px;
 +
    margin: 0px;
 +
}
 +
.nav-logo {
 +
    padding: 0px;
 +
    margin: 0px;
 +
    float: left;
 +
}
 +
#nav-div{
 +
    height:42px;
 +
    z-index: 3;
 +
    margin-top: px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    position: relative;
 +
    text-align: center;
 +
    color: aliceblue;
 +
}
 +
#nav-tem{
 +
    margin-left: auto;
 +
    z-index: 3;
 +
    margin-right: auto;
 +
    margin-top: 10px;
 +
}
 +
.nav-button {
 +
    float:left;
 +
}
 +
.nav-button img {
 +
    height:25px;
 +
    margin-top:9px;
 +
}
 +
 
 +
#leftbar_f{
 +
    width:100%;
 +
    height: 100%;
 +
    position: fixed;
 +
    z-index: 2;
 +
}
 +
.sub-heading{
 +
    margin-left: 5%;
 +
    width: 90%;
 +
    position: relative;
 +
    z-index: 1;
 +
   
 +
}
 +
.sub{
 +
    height:220px;
 +
    padding: 0px;
 +
    float: left;
 +
   
 +
 
 +
}
 +
.subi{
 +
    margin-left: 2px;
 +
    margin-right:2px;
 +
    background-color: rgb(240,240,240);
 +
    height: 100%;
 +
    text-align: center;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    line-height: 1.3;
 +
    cursor:pointer;
 +
    overflow-y: hidden;
 +
    display:block;
 +
}
 +
.subi img{
 +
    margin-top:10px;
 +
    width: 80%;
 +
    max-width: 230px;
 +
    margin-bottom: 10px;
 +
   
 +
   
 +
   
 +
}
 +
.sub ul{
 +
    padding: 0px;
 +
    margin: 0px;
 +
}
 +
.bottombar {
 +
    width: 100%;
 +
    position:relative;
 +
    z-index: 1;
 +
    text-align: center;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
.buttom-intro{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    font-size: 70%;
 +
   
 +
   
 +
}
 +
.subi-f{
 +
    background-color: rgba(0, 62, 147, 0.6);
 +
    color: rgb(256,256,256);
 +
    position: relative;
 +
    bottom: -50px;
 +
    display: none;
 +
    height: 80px;
 +
    padding-top: 15px;
 +
    z-index: 2;
 +
}
 +
#b-intro{
 +
    position: relative;
 +
    width: 90%;
 +
    height: 50px;
 +
    margin: 15px;
 +
    background-color: rgb(235, 235, 235);
 +
    margin-left: 5%;
 +
    margin-right: 5%;
 +
    padding-bottom: 30px;
 +
    padding-top: 30px;
 +
}
 +
#b-intro-title{
 +
    vertical-align: middle;
 +
    padding:10px;
 +
    padding-left: 50px;
 +
    font-weight: bold;
 +
}
 +
.heading{
 +
    top: 50px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    background-color: rgba(225, 225, 225, 0.2);
 +
    padding: 5%;
 +
}
 +
.heading-text{
 +
    width: 50%;
 +
    float: left;
 +
   
 +
   
 +
}
 +
.heading-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.heading-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: right;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
.content1{
 +
    top: 0px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    padding: 5%;
 +
}
 +
.content1-text{
 +
    width: 50%;
 +
    float: right;
 +
   
 +
   
 +
}
 +
.content1-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.content1-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: left;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
.content2{
 +
    top: 0px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    padding: 5%;
 +
}
 +
.content2-text{
 +
    width: 50%;
 +
    float: left;
 +
   
 +
   
 +
}
 +
.content2-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.content2-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: right;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
@charset "UTF-8";
 +
/*@font-face
 +
{
 +
font-family: NotoSansHans;
 +
src: url('../font-face/NotoSansHans-Thin.otf');
 +
}*/
 +
@media screen and (min-width:320px) and (max-width:780px) {
 +
#nav-div {
 +
width: 100%;
 +
        margin-left: -33px;
 +
}
 +
    .nav-li {
 +
        display:none;
 +
    }
 +
    .nav-button {
 +
        display: block;
 +
    } 
 +
    .sub{
 +
        width: 100%;
 +
        margin-bottom: 5px;
 +
    }
 +
    .sub-heading{
 +
        height:896px;
 +
    }
 +
}
 +
 
 +
@media screen and (min-width:780px) and (max-width:1000px) {
 +
#nav-div {
 +
width: 100%;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 14.5%;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
   
 +
}
 +
 
 +
 
 +
@media screen and (min-width:1000px) {
 +
#nav-div {
 +
width:1000px;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
}
 +
    .nav-li {
 +
        display: block;
 +
        width: 150px;
 +
    }
 +
    .nav-button {
 +
        display: none;
 +
    }
 +
    .sub{
 +
        width: 25%;
 +
    }
 +
    .sub-heading{
 +
        height:224px;
 +
    }
 +
}
 +
 
 +
body{
 +
    margin: 0px;
 +
    padding: 0px;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    /*change if necessary*/
 +
   
 +
}
 +
 
 +
#heading{
 +
    position: relative;
 +
    z-index: 1;
 +
    margin-bottom: 10px;
 +
    cursor:pointer;
 +
   
 +
}
 +
 
 +
.nav-list{
 +
    display: block;
 +
    margin: 0px;
 +
}
 +
 
 +
.nav-li{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    float: left;
 +
    list-style-type: none;
 +
    text-align: center;
 +
    line-height: 2.6;
 +
}
 +
.nav-logo{
 +
    list-style-type: none;
 +
}
 +
.nav-list li a{
 +
    text-decoration: none;
 +
    display: block;
 +
    color: #FFFFFF;
 +
}
 +
 
 +
.nav-list li a:hover{
 +
    color: #BBBBBB;
 +
}
 +
 
 +
#menubar{
 +
    background-color: rgba(16, 38, 67, 0.7);
 +
    height: 42px;
 +
    width:100%;
 +
    position: fixed;
 +
    z-index: 3;
 +
}
 +
 
 +
.nav-logo img{
 +
    width:200px;
 +
    padding-top: 4px;
 +
    margin: 0px;
 +
}
 +
.nav-logo {
 +
    padding: 0px;
 +
    margin: 0px;
 +
    float: left;
 +
}
 +
#nav-div{
 +
    height:42px;
 +
    z-index: 3;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    position: relative;
 +
}
 +
.nav-button {
 +
    float:left;
 +
}
 +
.nav-button img {
 +
    height:25px;
 +
    margin-top:9px;
 +
}
 +
 
 +
#leftbar_f{
 +
    width:100%;
 +
    height: 100%;
 +
    position: fixed;
 +
    z-index: 2;
 +
}
 +
.sub-heading{
 +
    margin-left: 5%;
 +
    width: 90%;
 +
    position: relative;
 +
    z-index: 1;
 +
   
 +
}
 +
.sub{
 +
    height:220px;
 +
    padding: 0px;
 +
    float: left;
 +
   
 +
 
 +
}
 +
.subi{
 +
    margin-left: 2px;
 +
    margin-right:2px;
 +
    background-color: rgb(240,240,240);
 +
    height: 100%;
 +
    text-align: center;
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    line-height: 1.3;
 +
    cursor:pointer;
 +
    overflow-y: hidden;
 +
    display:block;
 +
}
 +
.subi img{
 +
    margin-top:10px;
 +
    width: 80%;
 +
    max-width: 230px;
 +
    margin-bottom: 10px;
 +
   
 +
   
 +
   
 +
}
 +
.sub ul{
 +
    padding: 0px;
 +
    margin: 0px;
 +
}
 +
.bottombar {
 +
    width: 100%;
 +
    position:relative;
 +
    z-index: 1;
 +
    text-align: center;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
.buttom-intro{
 +
    font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
 +
    font-size: 70%;
 +
   
 +
   
 +
}
 +
.subi-f{
 +
    background-color: rgba(0, 62, 147, 0.6);
 +
    color: rgb(256,256,256);
 +
    position: relative;
 +
    bottom: -50px;
 +
    display: none;
 +
    height: 80px;
 +
    padding-top: 15px;
 +
    z-index: 2;
 +
}
 +
#b-intro{
 +
    position: relative;
 +
    width: 90%;
 +
    height: 50px;
 +
    margin: 15px;
 +
    background-color: rgb(235, 235, 235);
 +
    margin-left: 5%;
 +
    margin-right: 5%;
 +
    padding-bottom: 30px;
 +
    padding-top: 30px;
 +
}
 +
#b-intro-title{
 +
    vertical-align: middle;
 +
    padding:10px;
 +
    padding-left: 50px;
 +
    font-weight: bold;
 +
}
 +
.heading{
 +
    top: 50px;
 +
    height: 500px;
 +
    width: 90%;
 +
    z-index: 2;
 +
    position: relative;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    background-color: rgba(16, 38, 67, 0.2);
 +
}
 +
</style>
 +
 
 +
<body> 
 +
<div id="menubar">
 +
        <div id="nav-div">
 +
            <div id="nav-tem">
 +
            Welcome! We're from SZMS 15 Shenzhen. 
 +
        </div> 
 +
        </div>
 +
   
 +
    </div>
 +
    <div id="content">
 +
        <div class="heading">
 +
            <div class="heading-text">
 +
                <div class="heading-text-title">Project Description</div>
 +
                <div class="heading-text-content">&nbsp;&nbsp;&nbsp;&nbsp;Our project serves as real live models of different stories from various cultures. Our genetically engineered E. coli bacteria is able to perform a series of reactions visibly and distinctively in order to represent the plot in different stories. We have chose three particular stories to be the basis of our project: “The Ugly Duckling”, “The Fox and the Grapes”, and “Houyi Shoots the Sun”. All of these stories are well known by people. Our ultimate purpose of our project is to further publicise the idea of bioengineering as well as serve as an educational model for the young to observe and experience.
 +
</div>
 +
            </div>
 +
            <div class="content1-pic">
 +
            </div>
 +
        </div>
 +
        <div class="content1">
 +
            <div class="content1-pic">
 +
                </div>
 +
            <div class="content1-text">
 +
                <div class="content1-text-title">“The Ugly Duckling”</div>
 +
                <div class="content1-text-content">&nbsp;&nbsp;&nbsp;&nbsp;The E.coli we constructed is able to gradually turn from colourless to green in a lactose included culture medium. The working mechanism is described in the following: constitutive promoter express lacI protein continuously. lacI protein binds with the lactose contained in the culture medium when there is a fair amount of lactose. Plac, a promoter that is oppressed by lacI protein will not be inhibited due to the lack of lacI protein, because lacI protein all binds with lactose. Plac will promote the expression of C0051, which is a kind of cI protein that exists in λ bacteriophage. The expression of C0051 will constantly inhibit the promoter R0051. As time elapse, the lactose in the culture medium will be gradually consumed, leaving no more lactose to bind with lacI protein, which will oppress the Plac promoter R0010, causing the end to the expression C0051. Because of the LVA tail, the remaining C0051 will be degraded, With the lack of C0051, the promoter R0051 will no longer be inhibited. The promoter R0051 can express GFP (green fluorescence protein), causing the E. coli to turn green.</div>
 +
            </div>
 +
        </div>
 +
        <div class="content2">
 +
            <div class="content2-text">
 +
                <div class="content2-text-title">“The Fox and the Grape”</div>
 +
                <div class="content2-text-content">&nbsp;&nbsp;&nbsp;&nbsp;The system we created contains two kinds of E. coli bacteria, one represents the fox and the other represents the grapes. The working mechanism is described in the following: under the stimulation of L-arabinose, the plasmid in the E. coli representing the fox starts to transcript C0071, which produced rhlR, a quorum sensing signal factor that leads to the working of R0071 in the plasmid of the E. coli representing the grapes. Then, with the transcription of C0061 in the E. coli representing the grapes, LuxR starts to produce continuously. LuxR stimulates the promoter R0062 and starts its promotion, which results in the expression of E0422 and produce enhanced cyan fluorescence protein (ECFP); at the same time, it represses the expression of R0063, which stops the E. coli representing the grapes from giving out the scent of bananas.</div>
 +
            </div>
 +
            <div class="content2-pic">
 +
                </div>
 +
        </div>
 +
    </div>
 +
    <div class="bottombar">
 +
        <font class="buttom-intro" color="#555555">Introduction</font>
 +
    </div>
 +
</body>
  
 
</html>
 
</html>

Revision as of 16:19, 14 July 2015

Project Description
    Our project serves as real live models of different stories from various cultures. Our genetically engineered E. coli bacteria is able to perform a series of reactions visibly and distinctively in order to represent the plot in different stories. We have chose three particular stories to be the basis of our project: “The Ugly Duckling”, “The Fox and the Grapes”, and “Houyi Shoots the Sun”. All of these stories are well known by people. Our ultimate purpose of our project is to further publicise the idea of bioengineering as well as serve as an educational model for the young to observe and experience.
“The Ugly Duckling”
    The E.coli we constructed is able to gradually turn from colourless to green in a lactose included culture medium. The working mechanism is described in the following: constitutive promoter express lacI protein continuously. lacI protein binds with the lactose contained in the culture medium when there is a fair amount of lactose. Plac, a promoter that is oppressed by lacI protein will not be inhibited due to the lack of lacI protein, because lacI protein all binds with lactose. Plac will promote the expression of C0051, which is a kind of cI protein that exists in λ bacteriophage. The expression of C0051 will constantly inhibit the promoter R0051. As time elapse, the lactose in the culture medium will be gradually consumed, leaving no more lactose to bind with lacI protein, which will oppress the Plac promoter R0010, causing the end to the expression C0051. Because of the LVA tail, the remaining C0051 will be degraded, With the lack of C0051, the promoter R0051 will no longer be inhibited. The promoter R0051 can express GFP (green fluorescence protein), causing the E. coli to turn green.
“The Fox and the Grape”
    The system we created contains two kinds of E. coli bacteria, one represents the fox and the other represents the grapes. The working mechanism is described in the following: under the stimulation of L-arabinose, the plasmid in the E. coli representing the fox starts to transcript C0071, which produced rhlR, a quorum sensing signal factor that leads to the working of R0071 in the plasmid of the E. coli representing the grapes. Then, with the transcription of C0061 in the E. coli representing the grapes, LuxR starts to produce continuously. LuxR stimulates the promoter R0062 and starts its promotion, which results in the expression of E0422 and produce enhanced cyan fluorescence protein (ECFP); at the same time, it represses the expression of R0063, which stops the E. coli representing the grapes from giving out the scent of bananas.
Introduction