Difference between revisions of "Team:SDU-CHINA/Design"

Line 2: Line 2:
 
<head>
 
<head>
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
−
<link rel="stylesheet" type="text/css" href="./css/frame.css" />
+
    <link rel="stylesheet" href="https://2018.igem.org/Team:SDU-CHINA/bootstrap337?action=raw&ctype=text/css">
−
<link rel="stylesheet" href="https://2018.igem.org/Team:SDU-CHINA/bootstrapcss?action=raw&ctype=text/css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+
  <script src="https://2018.igem.org/Team:SDU-China/jquery211?action=raw&ctype=text/javascript"></script>
−
<style>
+
  <script src="https://2018.igem.org/Team:SDU-China/bootjs?action=raw&ctype=text/javascript"></script>
−
li { list-style: none; }
+
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
−
a { text-decoration: none; }
+
    <style>
−
a:link, a:visited, a:active { color: white; }
+
    #contentSub, #footer-box, #catlinks, #search-controls, #p-logo,
−
a:hover { color: #c1d9ff; }
+
    #sideMenu, #menubar, .logo_2018, .printfooter, .firstHeading,.visualClear {
−
img { margin: 10px auto; } /*???*/
+
        display: none;
−
table { margin: 0 auto; }
+
    }
−
td { text-align: center }
+
 
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo,
+
    #top-section {   
−
#sideMenu, #menubar, .logo_2018, .printfooter, .firstHeading,.visualClear {display: none;}
+
        border: 0 none;
−
#top-section {   
+
        height: 14px;
−
    border: 0 none;
+
        z-index: 100;
−
    height: 14px;
+
        top: 0;
−
    z-index: 100;
+
        position: fixed;
−
    top: 0;
+
        width: 975px;  
−
    position: fixed;
+
        left: 50%;  
−
    width: 975px;  
+
        margin-left: -487px;
−
    left: 50%;  
+
    }
−
    margin-left: -487px;
+
−
}
+
  
 
     #globalWrapper, #content {
 
     #globalWrapper, #content {
Line 30: Line 28:
 
         border: 0px;
 
         border: 0px;
 
         background-color: transparent;
 
         background-color: transparent;
−
         margin-top: -18px;
+
         margin: 0px;
 
         padding: 0px;
 
         padding: 0px;
 
     }
 
     }
  
−
html, body, .wrapper {
+
    html, body, .wrapper {
−
    width: 100%;
+
        width: 100%;  
−
    height: 100%;
+
        height: 100%;  
−
    /*background-color: transparent;*/
+
        background-color: transparent;
−
}
+
    }
 +
li { list-style: none; }
 +
#menu a { text-decoration: none; }
 +
#menu a:link, a:visited, a:active { color: white;  }
 +
#menu a:hover { color: #c1d9ff; }
 +
 
 +
table { margin: 0 auto; }
 +
td { text-align: center }
 +
 
 
#content{
 
#content{
−
margin: 0px;
+
    margin-top: -22px;
−
padding: 0px;
+
    padding: 0px;
−
/*background-color: #E6E6F2;*/
+
    background-color: #E6E6F2;
 
         width: 100%;  
 
         width: 100%;  
 
         height: 100%;
 
         height: 100%;
Line 48: Line 54:
 
}
 
}
  
−
#header, #footer{
+
 
 +
#header, #footer {
 
background: linear-gradient(to right, #005AB5, #007500);
 
background: linear-gradient(to right, #005AB5, #007500);
 
background: -webkit-linear-gradient(to right, #005AB5, #007500);
 
background: -webkit-linear-gradient(to right, #005AB5, #007500);
Line 57: Line 64:
 
padding: 1% 0%;
 
padding: 1% 0%;
 
         margin: 0 0px !important;
 
         margin: 0 0px !important;
−
     
 
−
}
 
−
.sub-title{
 
−
background: linear-gradient(to right, #005AB5, #007500);
 
−
background: -webkit-linear-gradient(to right, #005AB5, #007500);
 
−
background: -moz-linear-gradient(to right, #005AB5, #007500);
 
−
background: -o-linear-gradient(to right, #005AB5, #007500);
 
−
float: left;
 
−
width: 100%;
 
−
padding: 1% 0%;
 
−
        margin: 0 0px !important;
 
−
        transform: translateY(80%);
 
−
        text-align: center;
 
−
        font: 25px sans-serif;
 
−
        color:white;
 
−
}
 
−
 
−
 
−
#section {
 
−
/*background-color: #E6E6F2;*/
 
−
float: left;
 
−
width: 100%;
 
−
padding: 0% 0%;
 
−
        margin: 0 0px !important;
 
−
        position:relative;
 
 
}
 
}
  
Line 90: Line 72:
 
display: block !important;
 
display: block !important;
 
}
 
}
 +
#logo img {  width:150px; margin-top:15px;} /*???*/
 +
 +
#menu a { text-decoration: none; }
 +
#menu a:link, a:visited, a:active { color: white; }
 +
#menu a:hover { color: #c1d9ff; }
 
#menu {
 
#menu {
−
float: right;
+
    float: right;
−
position:relative;
+
    position: relative;
−
transform: translateY(-10%);
+
    transform: translateY(-10%);
−
margin-right: 1%;
+
    margin-right: 1%;
−
display: block !important;
+
    display: block !important;
−
        z-index:1
+
 
}
 
}
−
#menu ul{position:relative; z-index:9999;}
 
 
#menu li {
 
#menu li {
−
float: left;
+
    float: left;
−
position: relative;
+
    position: relative;
−
padding:2% 0%;
+
    padding:2% 0%;
 +
   
 
}
 
}
−
#menu li a { font: 25px sans-serif;   /*font-weight: lighter;*/   padding: 15px; }
+
#menu li a { font: 18px sans-serif; font-weight: bolder;  padding: 15px; }
 
#menu ul li ul {
 
#menu ul li ul {
−
background-color: #336666;
+
    background-color: #336666;
−
opacity: 0.8 ;
+
    opacity: 0.8   ;
−
display: none;
+
    display: none;
−
position: absolute;
+
    position: absolute;
−
margin: 0;
+
    margin: 0;
−
padding: 10% 0;
+
    padding: 10% 0;
 +
    font-weight: lighter !important;
 
}
 
}
 
#menu ul li ul li { font-size: 10px;  padding: 5%; }
 
#menu ul li ul li { font-size: 10px;  padding: 5%; }
 
#menu li:hover ul, .menu li.over ul { display: block; }
 
#menu li:hover ul, .menu li.over ul { display: block; }
 +
 +
  
 
#footer { height: 180px;  color: white; }
 
#footer { height: 180px;  color: white; }
Line 121: Line 110:
 
float: left;
 
float: left;
 
margin-left: 15px;
 
margin-left: 15px;
−
/*margin-top: 2px;*/
+
margin-top: 2px;
 
}
 
}
 
#address {
 
#address {
Line 138: Line 127:
 
}
 
}
  
−
/*#section {clear: both;}*/
+
 
 +
 
 +
#section {clear: both;
 +
width:100%;
 +
margin-top:-20px;
 +
padding: 133px auto 0 auto;
 +
overflow: hidden;
 +
background-color:white !important;}
 +
 
 
#main-title {
 
#main-title {
−
        font-weight: lighter;
+
font-size: 45px;
 
color: #4b5ea4;
 
color: #4b5ea4;
−
        font-size:3em;
+
font-family: sans-serif;  
−
font-family: sans-serif;
+
text-align: center;
−
        transform: translateY(60%);
+
font-weight: lighter;
−
/*margin: 0px 0px 0px 0px;
+
margin: 0;
−
padding: 0px 0px 0px 0px;*/
+
padding: 30px 0px 0px 0px;
 +
margin: 0px 67px 0px 65px;
 
}
 
}
−
 
−
#main-titile-text { text-align: center; }
 
 
.sublinks { text-align: center; }
 
.sublinks { text-align: center; }
 
.sublinks h2 {
 
.sublinks h2 {
Line 155: Line 151:
 
margin: 20px 40px;
 
margin: 20px 40px;
 
}
 
}
−
.sublinks a:link, .sublinks a:visited, .sublinks a:active, .p-top a:link, .p-top a:visited, .p-top a:active { color: #4b5ea4;  font-family: sans-serif;  font-weight: lighter; }
+
.sublinks a:link, .sublinks a:visited, .sublinks a:active, .p-top a:link, .p-top a:visited, .p-top a:active { color: #8298ec;  font-family: sans-serif;  font-weight: lighter; }
−
/*.sub-title {
+
.sub-title {
 
font-family: sans-serif;
 
font-family: sans-serif;
 
color: white;
 
color: white;
 
text-align: center;
 
text-align: center;
−
}*/
+
}
 
.conteudo {
 
.conteudo {
−
margin: 0 auto;
+
    width:100%;
−
max-width: 1800px;
+
    max-width: 1800px;
−
background-color: white;
+
    background-color: white;
 
     line-height: 1.5;
 
     line-height: 1.5;
 
     clear: both;
 
     clear: both;
 +
 +
margin-top:-22px;
 
}
 
}
−
.paragraghs { padding: 4% 8%;  font-family: sans-serif; }
 
 
.p-top {
 
.p-top {
−
        text-align:center;
 
 
color: #4b5ea4;
 
color: #4b5ea4;
 +
text-align: center;
 
margin-top: 5px;
 
margin-top: 5px;
 
font: 25px sans-serif;
 
font: 25px sans-serif;
 
transform: translateY(80%);
 
transform: translateY(80%);
 
}
 
}
−
#section li { list-style: decimal; }
+
 
 +
.panel-default > .panel-heading {
 +
    color: #333;
 +
    border-color: #ddd;
 +
}
 +
 
 +
 
 +
p {
 +
    text-align: justify;
 +
    text-justify: inter-word;
 +
    font-family: 'Calibri', sans-serif;
 +
}
 +
p {
 +
    font-family: 'Open Sans', sans-serif;
 +
    font-weight: 400 !important;
 +
    font-size: 18px !important;
 +
    line-height: 1.5;
 +
    margin-bottom: 20px;
 +
}
 +
h4 {
 +
    font-family: 'Josefin Sans', sans-serif !important;
 +
    font-size: 30px !important;
 +
}
 +
.some-padding {
 +
    padding-top: 20px;
 +
}
 +
 
 +
h4{
 +
display: inline-block;
 +
display:-webkit-inline-block; /* Safari, Chrome, and Opera */
 +
    display: -moz-inline-block;/* Firefox */
 +
    display: -o-inline-block;
 +
}
 +
 
 +
@media screen and (max-width: 600px) {
 +
         
 +
      }
 +
 
 +
#header{
 +
width: 100%;
 +
    height:95px;  /* header的高度一定要是固定值*/
 +
    position:fixed;
 +
    top:0px;
 +
    left:0px;
 +
clear:both;
 +
z-index: 3;
 +
}
 +
#footer{
 +
    width: 100%;
 +
    height:200px;  /* footer的高度一定要是固定值*/
 +
    position:absolute;
 +
    bottom:0px;
 +
    left:0px;
 +
    color: white;
 +
}
 +
.body{
 +
  clear:both;
 +
  overflow: hidden;
 +
  padding-bottom: 180px;
 +
  padding-top: 95px;
 +
  /*保证footer是相对于container位置绝对定位*/
 +
    position:relative; 
 +
    width:100%;
 +
    min-height:100%;
 +
    /*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/ 
 +
    box-sizing: border-box;
 +
-moz-box-sizing:border-box; /* Firefox */
 +
-webkit-box-sizing:border-box; /* Safari */
 +
}
 +
 
 +
.paragraphs{
 +
  padding: 0 200px 0 200px; 
 +
  font-family: sans-serif;
 +
  text-align: center;
 +
}
 +
.paragraphs img{
 +
  position: relative;
 +
  display: inline-block;
 +
  margin: 10px 10px;
 +
}
 +
 
 +
.paragraphs a:visited { color:#5a3428;text-decoration: none;}
 +
.paragraphs a:hover { color:#80ddbf;text-decoration: none;}
 +
 
 
</style>
 
</style>
  
Line 184: Line 264:
 
<body>
 
<body>
  
−
<div id="header">
+
<div class="body">
−
<!--LOGO LINK--->
+
  <div id="header">
−
<div id="logo"><a href="https://2018.igem.org/Team:SDU-CHINA"><img src="https://static.igem.org/mediawiki/2018/e/ec/T--SDU-CHINA--Logo0.svg" alt="LOGO" /></a></div>
+
  <!--LOGO LINK--->
−
<div id="menu">
+
  <div id="logo"><a href="https://2018.igem.org/Team:SDU-CHINA"><img src="https://static.igem.org/mediawiki/2018/7/72/T--SDU-China--duihui.jpg" alt="LOGO" /></a></div>
−
<ul>
+
  <div id="menu">
−
<li>
+
    <ul>
−
<a href="#">PROJECT &#9662;</a>
+
            <li>
−
<ul>
+
                <a href="#">PROJECT &#9662;</a>
−
<!--links-->
+
                <ul>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Description">Description</a></li>
+
                    <!--links-->
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Design">Design</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Description">Description</a></li>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Results">Results</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Design">Design</a></li>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Demonstrate">Demonstrate</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Results">Results</a></li>
−
</ul>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Demonstrate">Demonstrate</a></li>
−
</li>
+
                </ul>
−
<li>
+
            </li>
−
<a href="#">WETLAB &#9662;</a>
+
            <li>
−
<ul>
+
                <a href="#">WETLAB &#9662;</a>
−
<!--links-->
+
                <ul>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Experiments">Protocols</a></li>
+
                    <!--links-->
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Notebook">Notebook</a></li>
+
                    <li><a href="#">Protocols</a></li>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Safety">Safety</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Notebook">Notebook</a></li>
−
</ul>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Safety">Safety</a></li>
−
</li>
+
                </ul>
−
<li>
+
            </li>
−
<a href="#">DRYLAB &#9662;</a>
+
            <li>
−
<ul>
+
                <a href="#">DRYLAB &#9662;</a>
−
<!--links-->
+
                <ul>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Model">Model</a></li>
+
                    <!--links-->
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Hardware">Hardware</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Model">Model</a></li>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Software">Software</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Hardware">Hardware</a></li>
−
</ul>
+
                </ul>
−
</li>
+
            </li>
−
<li>
+
            <li>
−
<a href="#">TEAM &#9662;</a>
+
                <a href="#">TEAM &#9662;</a>
−
<ul>
+
                <ul>
−
<!--links-->
+
                    <!--links-->
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Team">Members</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Team">Members</a></li>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Attributions">Attributoins</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Attributions">Attributoins</a></li>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Collaborations">Collaborations</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Collaborations">Collaborations</a></li>
−
</ul>
+
                </ul>
−
</li>
+
            </li>
−
<!--links-->
+
            <!--links-->
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/InterLab">INTERLAB</a></li>
+
            <li><a href="https://2018.igem.org/Team:SDU-CHINA/InterLab">INTERLAB</a></li>
−
<li><a href="#">PARTS &#9662;</a>
+
            <li><a href="#">PARTS &#9662;</a>
−
<ul>
+
            <ul>
−
<!--links-->
+
                    <!--links-->
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Basic_Part">Part</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Parts">Parts</a></li>
−
                                        <li><a href="https://2018.igem.org/Team:SDU-CHINA/Improve">Improve</a></li>
+
 
−
</ul>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Improve">Improve</a></li>
−
</li>
+
                   
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Human_Practices">HUMAN PRACTICES &#9662;</a>
+
                </ul>
−
<ul>
+
                </li>
−
<!--links-->
+
            <li><a href="https://2018.igem.org/Team:SDU-CHINA/Human_Practices">HUMAN PRACTICES &#9662;</a>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Human_Practices#silver">Silver</a></li>
+
            <ul>
−
<li><a href="https://2018.igem.org/Team:SDU-CHINA/Human_Practices#integrated">Gold & Integrated</a></li>
+
                    <!--links-->
−
                                        <li><a href="https://2018.igem.org/Team:SDU-CHINA/Engagement">Engagement</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Human_Practices#Silver">Silver</a></li>
−
</ul>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Human_Practices#integrated">Gold & Integrated</a></li>
−
</li>
+
                    <li><a href="https://2018.igem.org/Team:SDU-CHINA/Public_Engagement">Engagement</a></li>
−
</ul>
+
                </ul>
−
</div>
+
                </li>
 +
        </ul>
 +
  </div>
 
</div>
 
</div>
  
  
−
<div id="section">
+
<div class="conteudo">
−
    <div class="main-title">Design</div>
+
 
 +
<h1>Light Senser</h1>
 +
<h3>CCAS-CCAR System</h3>
 +
<h3>Opto T7 Polymerase</h3>
 +
<div class="p-top"><a href="#header">&#x25b2; top</a></div>
 +
<h1>Toggle Switch</h1>
 +
<div class="p-top"><a href="#header">&#x25b2; top</a></div>
 +
<h1>Fermentation</h1>
 +
<div class="p-top"><a href="#header">&#x25b2; top</a></div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
−
    <div class="sub-title">Light Senser</div>
 
−
    <div class="conteudo">
 
−
    <div class="paragraghs">
 
−
    <h3>CCAS-CCAR System</h3>
 
−
    <h3>Opto T7 Polymerase</h3>
 
−
    <div class="p-top"><a href="#header">&#x25b2; top</a></div>
 
−
    </div>
 
−
    </div>
 
−
   
 
−
    <div class="sub-title">Toggle Switch</div>
 
−
    <div class="conteudo">
 
−
    <div class="paragraghs">
 
−
    <div class="p-top"><a href="#header">&#x25b2; top</a></div>
 
−
    </div>
 
−
    </div>
 
−
   
 
−
    <div class="sub-title">Fermentation</div>
 
−
    <div class="conteudo">
 
−
    <div class="paragraghs">
 
−
    <div class="p-top"><a href="#header">&#x25b2; top</a></div>
 
−
    </div>
 
−
    </div>
 
 
</div>
 
</div>
  
  
 
<div id="footer">
 
<div id="footer">
−
    <div id="sponsors">
+
  <div id="sponsors">
−
        <img src="https://static.igem.org/mediawiki/2018/a/ab/T--SDU-CHINA--Sponsors0.svg" alt="SPONSORS" usemap="#Map-Sponsors" />
+
    <h2>SPONSORS</h2>
−
        <map name="Map-Sponsors" class="Map-Sponsors">
+
    <!--LOGO LINK-->
−
            <area title="SDU" href="http://www.lifesci.sdu.edu.cn/" shape="rect" coords="0,0,247,60" />
+
    <img src="https://static.igem.org/mediawiki/2018/a/ab/T--SDU-CHINA--Sponsors0.svg" alt="SPONSORS" usemap="#Map-Sponsors" />
−
            <area title="MATHWOAR" href="https://www.mathworks.com/" shape="rect" coords="247,0,440,60" />
+
    <map name="Map-Sponsors" class="Map-Sponsors">
−
        </map>
+
      <area title="SDU" href="http://www.lifesci.sdu.edu.cn/" shape="rect" coords="0,0,247,60" />
−
    </div>
+
      <area title="MATHWOAR" href="https://www.mathworks.com/" shape="rect" coords="247,0,440,60" />
−
    <!--<div id="address">
+
    </map>
−
        <h2>ADDRESS</h2>
+
  </div>
−
<p>Shandong University</p>
+
  <div id="address">
−
<p>School of Life Sciences</p>
+
    <h2>ADDRESS</h2>
−
<p>Qingdao, Shandong, China</p>
+
    <p>Shandong University</p>
−
    </div>-->
+
    <p>School of Life Sciences</p>
−
    <div id="contact">
+
    <p>Qingdao, Shandong, China</p>
−
        <h3>CONTACT US</h3>
+
  </div>
−
        <div><a href="mailto:sdubioigem@163.com">mailto:sdubioigem@163.com</a></div>
+
  <div id="contact">
−
        <div><a href="https://www.instagram.com/sdubiochina_2018/">www.instagram.com/sdubiochina_2018/</a></div>
+
  <h2>CONTACT US</h2>
−
 
+
  <!--LOGO LINK-->
−
        <!--<img src="https://static.igem.org/mediawiki/2018/f/f3/T--SDU-CHINA--ContactUs0.svg" alt="CONTACT US" usemap="#Map-Contact" />
+
    <img src="https://static.igem.org/mediawiki/2018/f/f3/T--SDU-CHINA--ContactUs0.svg" alt="CONTACT US" usemap="#Map-Contact" />
−
        <map name="Map-Contact" id="Map-Contanct">
+
    <map name="Map-Contact" id="Map-Contanct">
−
            <area title="E-mail" href="mailto:sdubioigem@163.com" shape="rect" coords="0,0,88,65" />
+
      <area title="E-mail" href="mailto:sdubioigem@163.com" shape="rect" coords="0,0,88,65" />
−
    <area title="Instagram" href="https://www.instagram.com/sdubiochina_2018/" shape="rect" coords="88,0,155,65" />
+
      <area title="Instagram" href="https://www.instagram.com/sdubiochina_2018/" shape="rect" coords="88,0,155,65" />
−
        </map>-->
+
    </map>
−
    </div>
+
  </div>
 
</div>
 
</div>
 +
</div>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:03, 9 October 2018

Light Senser

CCAS-CCAR System

Opto T7 Polymerase

▲ top

Toggle Switch

▲ top

Fermentation

▲ top