Difference between revisions of "Team:SZMS 15 Shenzhen"

 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<style type="text/css">
+
<head>
−
@charset "UTF-8";
+
    <meta charset="UTF-8">
−
/*@font-face
+
    <link href="https://2015.igem.org/Template:SZMS_15_Shenzhen/indexcss?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
−
{
+
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
−
font-family: NotoSansHans;
+
     <link rel="shortcut icon" href="index-gallery/icon.png" type="image/x-icon" />
−
src: url('../font-face/NotoSansHans-Thin.otf');
+
     <title>Title</title>
−
}*/
+
</head>
−
@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;
+
−
<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);
+
−
}
+
−
#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;
+
−
}
+
−
</style>
+
−
 
+
 
<body>   
 
<body>   
−
 
+
<div id="menubar">
 +
        <div id="nav-div">
 +
            <ul class="nav-list">
 +
                <li class="nav-li"><a href="https://2015.igem.org/Team:SZMS_15_Shenzhen">Homepage</a></li>
 +
                <li class="nav-li"><a href="https://2015.igem.org/Team:SZMS_15_Shenzhen/project">Project</a></li>
 +
                <li class="nav-li"><a href="https://2015.igem.org/Team:SZMS_15_Shenzhen/interlab">Interlab</a></li>
 +
<li class="nav-li"><a href="https://2015.igem.org/Team:SZMS_15_Shenzhen/Practices">Practice</a></li>
 +
                <li class="nav-li"><a href="https://2015.igem.org/Team:SZMS_15_Shenzhen/gallery">Gallery</a></li>
 +
                <li class="nav-li"><a href="https://2015.igem.org/Team:SZMS_15_Shenzhen/teamintro">About us</a></li>
 +
            </ul> 
 +
        </div>
 +
    </div>
 
     <div id="content">
 
     <div id="content">
 
         <div class="heading">
 
         <div class="heading">
−
            <div class="heading-text">
+
<img src="https://static.igem.org/mediawiki/2015/1/14/SZMS2015_frt.png">
−
                <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>
−
        <div class="content1">
+
            <div class="sub-heading">
−
            <div class="content1-pic">
+
                <div class="sub">
 +
                    <div class="subi" id="sub-i" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/project';" onmouseover="subif_mouseover('subif1')" onmouseout="subif_mouseout('subif1')">
 +
                       
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Project description</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif1" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 
                 </div>
 
                 </div>
−
            <div class="content1-text">
+
                <div class="sub">
−
                <div class="content1-text-title">“The Ugly Duckling”</div>
+
                    <div class="subi" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/interlab';" onmouseover="subif_mouseover('subif2')" onmouseout="subif_mouseout('subif2')">
−
                <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>
+
                        <br>
−
            </div>
+
                        <font size="+1" style="font-weight:bold;">Our Interlab</font><br><font size="-1"></font>
−
        </div>
+
                        <div class="subi-f" id="subif2" >
−
        <div class="content2">
+
                            Click here to find more
−
            <div class="content2-text">
+
                        </div>
−
                <div class="content2-text-title">“The Fox and the Grape”</div>
+
                    </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>
+
                <div class="sub">
−
            <div class="content2-pic">
+
                    <div class="subi" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/gallery';" onmouseover="subif_mouseover('subif3')" onmouseout="subif_mouseout('subif3')">
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Gallery</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif3" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 
                 </div>
 
                 </div>
−
         </div>
+
                <div class="sub">
 +
                    <div class="subi" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/Experiments';" onmouseover="subif_mouseover('subif4')" onmouseout="subif_mouseout('subif4')">
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Experiments</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif4" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
         <div class="sub-heading">
 +
                <div class="sub">
 +
                    <div class="subi" id="sub-i" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/Parts';" onmouseover="subif_mouseover('subif5')" onmouseout="subif_mouseout('subif5')">
 +
                       
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Part Description</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif5" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="sub">
 +
                    <div class="subi" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/Practices';" onmouseover="subif_mouseover('subif6')" onmouseout="subif_mouseout('subif6')">
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Human Practice</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif6" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="sub">
 +
                    <div class="subi" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/Collaborations';" onmouseover="subif_mouseover('subif7')" onmouseout="subif_mouseout('subif7')">
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Collaborations</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif7" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="sub">
 +
                    <div class="subi" onclick="window.location = 'https://2015.igem.org/Team:SZMS_15_Shenzhen/Attributions';" onmouseover="subif_mouseover('subif8')" onmouseout="subif_mouseout('subif8')">
 +
                        <br>
 +
                        <font size="+1" style="font-weight:bold;">Attributions</font><br><font size="-1"></font>
 +
                        <div class="subi-f" id="subif8" >
 +
                            Click here to find more
 +
                        </div>
 +
                    </div>
 +
     
 +
                </div>
 +
            </div>  
 
     </div>
 
     </div>
−
<div id="b-intro">
+
    <div id="b-intro">
 
         <div id="b-intro-title">
 
         <div id="b-intro-title">
−
             <a href="https://2015.igem.org/Team:SZMS_15_Shenzhen/InterLab" >Our InterLab</a>
+
             Shenzhen Middle School, Shenzhen, Guangdong, China.
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <div class="bottombar">
 
     <div class="bottombar">
−
         <font class="buttom-intro" color="#555555">Introduction</font>
+
         <font class="buttom-intro" color="#555555">Homepage Team:SZMS 15 Shenzhen</font>
 
     </div>
 
     </div>
 
</body>
 
</body>
 +
    <script language="javascript" type="text/javascript">
 +
        var subifobj;
 +
        function subif_mouseover(Object){
 +
            subifobj = Object;
 +
            document.getElementById(subifobj).style.display = "block";
 +
  };
  
 +
        function subif_mouseout(Object){
 +
            subifobj = Object;
 +
            document.getElementById(subifobj).style.display = "none";
 +
  };
 +
    </script>
 
</html>
 
</html>

Latest revision as of 03:18, 19 September 2015

Title


Project description
Click here to find more

Our Interlab
Click here to find more

Gallery
Click here to find more

Experiments
Click here to find more

Part Description
Click here to find more

Human Practice
Click here to find more

Collaborations
Click here to find more

Attributions
Click here to find more
Shenzhen Middle School, Shenzhen, Guangdong, China.
Homepage Team:SZMS 15 Shenzhen