Difference between revisions of "Team:TCFSH Taiwan"

 
(177 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
{{TCFSH_Taiwan}}
 +
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
 
<head>
 
<head>
 +
<meta charset="UTF-8">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
 +
 
<style type="text/css">
 
<style type="text/css">
        #home_logo, #sideMenu { display:none; }
+
#sideMenu, #top_title {display:none;}
#sideMenu, #top_title, .patrollink  {display:none;}
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
body {background-color:white; }
body {background-color:white; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }}
+
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
.content{
+
 
            background-color: lightblue;
+
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
 
 +
}
 +
 
 +
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
    font-style: normal;
 
}
 
}
 
body{
 
body{
        margin:0;
+
    margin:auto;
     }
+
     background:rgb(51,51,51);
div{
+
    line-height:1;
background-color: black;
+
}
 +
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 
}
 
}
.TCFSH_Taiwan{
 
                left:15px;
 
                position:relative;
 
                top: 10px;
 
    } 
 
    .main-container{
 
                    background:rgb(230, 236, 255);
 
                    position:fixed;
 
                    width:100vw;
 
                    height:auto;
 
                    z-index:999;
 
                    }
 
  
 
+
/*大圖*/
    .dropbtn{
+
@media screen and (min-width: 768px) {
                  margin-top:5px;
+
  .img-container{
 +
    height:100vh ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
.bigphoto{
 +
      margin: auto;
 +
      margin-top: 60px;
 +
      display: block;
 +
    }
 
}
 
}
     .dropdown:hover .dropdown-content{
+
@media screen and (orientation: portrait) {
                  display: block;
+
     .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 
}
 
}
  
 
+
/*box*/
 +
.HP_image{
 +
    opacity:0.5;
 +
}
 +
.HP_image:hover{
 +
    opacity:4;
 +
}
 +
.img-box1{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:20%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-top:3%;
 +
    margin-bottom:3%;
 +
    }
 +
.img-box1-1{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:4%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-top:3%;
 +
    margin-bottom:3%;
 +
    }
 +
.img-box1-2{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:4%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-top:3%;
 +
    margin-bottom:3%;
 +
    } 
 
      
 
      
    .dropbtn span:after{
+
.img-box2{
width: 0;
+
    width:210px;
height: 0;
+
    height:210px;
border: 0.313em solid transparent;  
+
    border:2px solid #F3F7F7;
border-bottom: none;
+
    border-radius:10px;
border-top-color:black;
+
    overflow:hidden;
content: '';
+
    margin-left:29%;
vertical-align: middle;
+
    margin-top:7vh;
display: inline-block;
+
    float:left;
position: relative;
+
    color:white;
right: -0.313em; /* 5 */
+
    font-size:18pt;
                text-decoration:none !important;
+
    font-weight:bold;
                list-style-type:none !important;            
+
    margin-bottom:30px;
              }
+
    }
 +
.img-box3{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:9%;
 +
    margin-top:7vh;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-bottom:30px;
 +
    }
  
  .dropdown{
 
      float:left;
 
      text-decoration:none !important;
 
      list-style-type:none !important;
 
      }
 
    ul>.dropdown>a{
 
                color:black !important;
 
                list-style-type:none !important;
 
                text-decoration:none !important;
 
                text-align:left;
 
              }
 
    li .dropdown{
 
                display: inline-block;
 
                }
 
               
 
      .dropdown  a, .dropbtn {
 
                      display: inline-block;
 
                      text-align: center;
 
                      text-color: black;
 
                      padding-right: 10px;
 
                      margin-right: 10px;
 
                      text-decoration: none !important;   
 
                    }
 
.main-menu{
 
      position:relative;
 
      list-style-type: none !important;
 
      margin-right:1px;
 
      display:block;
 
      float:right !important;
 
      font-weight:400 !important;
 
      font-size:20px;
 
      font-family:"Open Sans",serif,sans-serif;
 
      }
 
  
 +
.text{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:40px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    opacity:none !important;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text1{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text2{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text3{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:60px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text4{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:53px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text5{
 +
    position:absolute;
 +
    margin-top:80px;
 +
    margin-left:65px;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
  
                /*下拉式menu*/
+
/*overview*/
 
+
    .dropdown a:hover, .dropdown:hover .dropbtn{
+
                                            color:red !important;
+
                                            }
+
  
 
+
.overviewHP{
    .dropdown-content{  
+
     color:#F3F7F7;
                      display:none;
+
    text-align:justify;
                      background: rgb(157, 136, 210);
+
    text-indent:2em;
                      position:absolute;
+
    padding:10px;
                      width:auto !important;
+
     font-size:15pt !important;
                     
+
}
                    }
+
     .dropdown-content a{
+
                        color: white;
+
                        padding:15px;
+
                        text-decoration: none;
+
                        display: block;
+
                        text-align:left !important;
+
                        size:1em;
+
                        }
+
                       
+
      
+
    .dropdown-content a:hover{
+
                              color: red;
+
                              }
+
 
+
    .bigphoto{
+
    margin: auto;
+
    display: block;
+
    }                        
+
  
 
.title{
 
.title{
 
     font-size:25pt !important;
 
     font-size:25pt !important;
     color:rgb(0, 206, 255);
+
     color:#ffd11a;
     border-left:3px solid rgb(0, 206, 255);
+
    text-shadow:1px 1px 10px rgb(153, 153, 255);
     padding-left:600px !important;   
+
     border-left:3px ;
     margin-top:20px;
+
     padding-left:450px !important;   
 +
     margin-top:0px;
 
     margin-bottom:10px;
 
     margin-bottom:10px;
 
     font-weight:bold;
 
     font-weight:bold;
 
}
 
}
 
+
.content{
.abstract{
+
     font-size:15pt !important;
     color:#F3F7F7;
+
 
     text-align:justify;
 
     text-align:justify;
     text-indent:2em;
+
     color:white !important;
     padding-left:200px;
+
     padding-left:40px;
    padding-right:200px;
+
     padding-top:0px;
     padding-top:10px;
+
     padding-bottom:15px;
     padding-bottom:10px;
+
    font-size:20pt !important;
+
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
<body>
 
<div class="main-container">
 
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan">
 
<img src="https://static.igem.org/mediawiki/2017/5/53/TEAM_name_logo_Tcfsh_new.png" class="TCFSH_Taiwan" width="20%">
 
</a>
 
      <ul class="main-menu" id="menu"  style="list-style-image: none;">
 
        <li class="dropdown"><a href="https://2017.igem.org/Team:TCFSH_Taiwan"  class="dropbtn">Home</a></li>
 
       
 
        <li class="dropdown">
 
            <a href="#" class="dropbtn"><span class="menu_sign">Project</span></a>
 
                  <div class="dropdown-content">
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">Description</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Design">Design</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Experiments">Experiments</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Notebook">Notebook</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/InterLab">InterLab</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Contribution">Contribution</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Model</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Proof">Results</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Demonstrate">Demonstrate</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Improve">Improve</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Attributions">Attributions</a></div>
 
                  </div>
 
        </li>
 
 
                 
 
        <li class="dropdown">
 
            <a href="#" class="dropbtn"><span class="menu_sign">Awards</span></a>
 
                  <div class="dropdown-content">
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Applied_Design">Applied Design</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Entrepreneurship">Entrepreneurship</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Hardware">Hardware</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Measurement">Measurement</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Model</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Plant">Plant</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Software">Software</a></div>
 
                  </div>
 
        </li>
 
       
 
        <li class="dropdown">
 
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Parts" class="dropbtn"><span class="menu_sign">Parts</span></a>
 
                  <div class="dropdown-content">
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">Basic Parts</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Composite_Part">Composite Parts</a></div>
 
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Part_Collection">Part Collection</a></div>
 
                  </div>
 
        </li>
 
  
       
+
<body>
        <li class="dropdown">
+
<h1>
            <a href="#" class="dropbtn"><span class="menu_sign">Human Practices</span></a>
+
    <div class="img-container">
                  <div class="dropdown-content">
+
        <img src="https://static.igem.org/mediawiki/2017/2/28/Bigphoto.png" class="bigphoto" width="60%">
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">Silver HP</a></div>
+
    </div>
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Gold_Integrated">Integrated and Gold</a></div>
+
<div style="width:80%;margin:auto;margin-bottom:5%;">
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Engagement">Public Engagement</a></div>
+
<div>
                  </div>
+
      <p class="title">Abstract</p>
        </li>
+
      <p class="content">DETECOLI—a word we created by combining “detection” and “<span style="font-style:italic;">E. coli</span>”—changes color in environments of excess sunlight or high temperatures. The detection should be visualized by discriminating the alteration of three chromoproteins (cjBlue, RFP, BFP) expressed by <span style="font-style:italic;">E. coli</span> with the regulatory circuit of temperature and UV light. We aim to build up a quantitative experiment for observing the color of <span style="font-style:italic;">E. coli</span>. For the practical application we aim to place <span style="font-style:italic;">E. coli</span> on stickers and attach the stickers on the product before delivery, thus able to monitor the whole process of transportation. DETECOLI alerts consumers to possible deterioration or contamination by changing color, and serves as a guarantee of quality.</p>
 
+
       
+
       
+
        <li class="dropdown">
+
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Team" class="dropbtn"><span class="menu_sign">Team</span></a>
+
                  <div class="dropdown-content">
+
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Team">Team</a></div>
+
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Collaborations">Collaborations</a></div>                     
+
                  </div>
+
        </li>
+
 
+
      <li class="dropdown">
+
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Safety" class="dropbtn">Safety</a>             
+
        </li>
+
       
+
    </ul>
+
 
</div>
 
</div>
</body>
 
 
<body>
 
<div
 
<img src="https://static.igem.org/mediawiki/2017/5/59/Big_Logo_overview_tcfsh_new.jpeg" class="bigphoto" width="100%">
 
</img>
 
  
<p class="title">Overview</p>
 
  <p class="abstract">Logistic has played an important role in our daily life. However, how can we make sure that our goods are delivered under safe environment? TCFSH_Taiwan iGEM team has designed a brand-new kind of sticker. By changing its color, it can tell whether your goods are delivered under guaranteed environment or not.</p>
 
 
</div>
 
</div>
</body>
 
 
 
  
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">
 +
        <div class="img-box1">
 +
            <div class="text">Description</div>
 +
            <img src="https://static.igem.org/mediawiki/2017/b/b2/Project_design.jpeg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 +
   
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">
 +
        <div class="img-box1-1">     
 +
            <div class="text1">Human<br>Practice</br></div>
 +
            <img src="https://static.igem.org/mediawiki/2017/e/e3/JasonHP.jpeg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
  
 +
   
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">
 +
        <div class="img-box1-2">
 +
            <div class="text2">Parts</div>
 +
            <img src="https://static.igem.org/mediawiki/2017/f/fa/Parts_home.jpeg" width="100%" height="100%" class="HP_image">
 +
        </div>
 +
    </a>
 +
</h1>
 +
</body>
 
</html>
 
</html>
 +
{{TCFSH_Taiwan_footer}}

Latest revision as of 05:13, 15 December 2017

Abstract

DETECOLI—a word we created by combining “detection” and “E. coli”—changes color in environments of excess sunlight or high temperatures. The detection should be visualized by discriminating the alteration of three chromoproteins (cjBlue, RFP, BFP) expressed by E. coli with the regulatory circuit of temperature and UV light. We aim to build up a quantitative experiment for observing the color of E. coli. For the practical application we aim to place E. coli on stickers and attach the stickers on the product before delivery, thus able to monitor the whole process of transportation. DETECOLI alerts consumers to possible deterioration or contamination by changing color, and serves as a guarantee of quality.

Description
Human
Practice
Parts