Difference between revisions of "Team:NCTU Formosa/Design"

Line 1: Line 1:
 
{{Team:NCTU_Formosa/navigation}}
 
{{Team:NCTU_Formosa/navigation}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
−
<!--    匯入jQuery    -->
+
<style tpe=text/css>
−
<link href='https://2015.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css' rel="stylesheet">
+
 
−
<script type="text/javascript" src="https://2015.igem.org/Team:NCTU_Formosa/source/project_side_nav?
+
body{
−
action=raw&ctype=text/javascript"></script>
+
background-color:#ffffff;
−
<style type="text/css">
+
}
−
body {
+
.project{
−
color:#fff;
+
width:90vw;
−
margin:0;
+
padding-left:60px;
−
padding:0;
+
background-color:#ffffff;
−
background:#3a4044;
+
padding-bottom:15vh;
 
}
 
}
−
* {
+
.side{
−
margin:0;
+
height:100vh;
−
padding:0;
+
width:60px;
 +
position:fixed;
 +
background-color:#000;
 +
z-index:99;
 +
left:0vw;
 +
}
 +
.Background{
 +
position:relative;
 +
text-align: center;
 +
padding-top:5vh;
 +
text-shadow:3px 3px 3px #cccccc;
 
}
 
}
−
/*    插入背景圖片    */
+
#image1 img{
−
    .p01{
+
max-width:92vw;
−
background-image:url(https://static.igem.org/mediawiki/2015/c/c0/NCTU_Formosa_metal_Style_background.jpg);
+
width:92vw;
−
        background-repeat: no-repeat;
+
width:expression(document.body.clientWidth>92vw?"92vw":"auto");
−
background-position:center;
+
overflow:hidden;
−
background-size:cover;
+
max-height:50vh;
−
        height:100vh;
+
position:relative;
−
position:relative
+
−
    }
+
−
    .p02{
+
−
        background-image:url(images/p02.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p03{
+
−
        background-image:url(images/p03.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p04{
+
−
        background-image:url(images/p04.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p05{
+
−
        background-image:url(images/p05.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
/*    插入導覽列    */
+
−
    .sidenav{
+
−
        position: fixed;
+
−
        top:35vh;
+
−
        right:5vw;
+
−
        cursor:pointer;
+
−
        z-index:3;
+
−
    }
+
−
    li.navli{
+
−
        width:15px;
+
−
        height:15px;
+
−
margin: 2.5vh 0vw 0vh 0vw;
+
−
        background-color: transparent;
+
−
        border-radius: 10px;
+
−
        list-style-type: none;
+
−
border: #fff 2px solid;
+
−
line-height:17px;
+
−
    }
+
−
    g1{
+
−
        font-size:7em;
+
−
        color:#fff;
+
−
display:inline;
+
−
    }
+
−
g2{
+
−
font-size:2.6em;
+
−
color:#fff;
+
−
display:inline;
+
 
}
 
}
−
navtext {  
+
.project_text{
−
display: block;
+
text-align:left;
−
right: 7.4vw;
+
font-family:Myriad Pro;
−
top: 0px;
+
font-weight:normal;
−
position: relative;
+
color:#000000;
−
font-weight: 100;  
+
padding-left:5vw;
−
letter-spacing: 2px;
+
padding-right:5vw;
−
font-size: 1.9em;
+
font-size:1.5em;
−
}
+
text-indent:25px;
−
.upper{
+
}
−
position:relative;
+
 
−
font-family: "georgia";
+
.project_title{
−
border-bottom-style:solid;
+
text-align:left;
−
border-width:2px;
+
font-family:Myriad Pro;
−
height: 20vh;
+
color:#000000;
−
line-height:20vh;
+
padding-left:5vw;
−
border-color:#fff;
+
font-size:20pt;
−
padding: 0vh 0vw 0vh 7vw;
+
−
}
+
−
.side{
+
−
position:absolute;
+
−
left: 0px;
+
−
width: 6vw;
+
−
height: 79.8vh;
+
−
border-right-style:solid;
+
−
border-width:2px;
+
−
border-color:#fff;
+
−
}
+
−
.textbox{
+
−
position:static;
+
−
margin-left: 8vw;
+
−
padding: 9vh 20vw 10vh 4vw;
+
−
font-family: "Georgia";
+
−
font-size:2.8em;
+
−
color: #fff;
+
−
}
+
−
.column{
+
−
height:33vh;
+
−
width:100vw;
+
−
text-align:center;
+
−
margin:0 auto;
+
−
}
+
−
.line{
+
−
height:0.5vh;
+
−
width:100vw;
+
−
background-color:#3a4044;
+
−
}
+
−
.head{
+
−
position:absolute;
+
−
top:10vh;
+
−
left:40vw;
+
−
height:10vh;
+
−
width:20vw;
+
−
margin:0 auto;
+
−
font-family:zian;
+
−
Color:#3a4044;
+
−
font-size:5.5em;
+
−
}
+
−
.option{
+
−
float:left;
+
−
height:33vh;
+
−
width:25vw;
+
−
font-family:zian;
+
−
Color:#3a4044;
+
−
font-size:1.75em;
+
−
margin:0 auto;
+
 
}
 
}
−
.TEXT{
+
.project3{
−
position:relative;
+
text-align:left;
−
top:26vh;
+
font-family:Myriad Pro;
−
width:25vw;
+
font-weight:normal;
−
font-family:zian;
+
color:#000000;
−
Color:#3a4044;
+
padding-left:5vw;
−
font-size:1.75em;
+
padding-right:5vw;
−
-webkit-transition:0.5s ease-out;
+
padding-bottom:9vh;
−
-moz-transition: 0.5s ease-out;
+
font-size:12pt;
−
-o-transiton: 0.5s ease-out;
+
text-indent:25px;
−
-ms-transition:0.5s ease-out;
+
}
−
transition:0.5s ease-out;
+
  
 +
.link--kukuri {
 +
text-transform:none;
 +
overflow: hidden;
 +
 +
}
 +
.link {
 +
outline: none;
 +
text-decoration: none;
 +
position: relative;
 +
line-height: 1;
 +
color: #9e9ba4;
 +
display:outline-block;
 +
font-family:Myriad Pro;
 +
font-weight:bold;
 +
font-size:45pt;
 +
}
 +
 +
.link--kukuri:hover {
 +
color: #b2b0a9;
 +
}
 +
 +
.link--kukuri::after {
 +
content: '';
 +
position: absolute;gi
 +
height: 20px;
 +
width: 100%;
 +
top: 50%;
 +
margin-top: 8px;
 +
right: 0;
 +
background: #F9F9F9;
 +
transform: translate3d(-100%,0,0);
 +
transition: transform 0.2s;
 +
transition-timing-function: cubic-bezier(1.0,0,0.8,1);
 +
 +
}
 +
 +
.link--kukuri:hover::after {
 +
transform: translate3d(100%,0,0);
 +
 +
}
 +
 +
.link--kukuri::before {
 +
content: attr(data-letters);
 +
position: absolute;
 +
overflow: hidden;
 +
color: #424242;
 +
white-space: nowrap;
 +
width: 0%;
 +
transition: width 0.2s 0.1s;
 +
}
 +
 +
.link--kukuri:hover::before {
 +
width: 100%;
 
}
 
}
−
.option:hover div.TEXT{
+
a.animated-button.thar-three {
−
-moz-transform:translateY(-23vh);
+
  color: #000;
−
-webkit-transform:translateY(-23vh);
+
  font-family:Myriad Pro;
−
-o-transform:translateY(-23vh);
+
  font-size: 20px;
−
-ms-transform:translateY(-23vh);
+
  text-decoration: none;
−
transform:translateY(-23vh)
+
  text-align:center;
−
}
+
  cursor: pointer;
−
.icon2{
+
  display: block;
−
width:12%;
+
  position: relative;
−
height:24%;
+
  bottom:10vh;
−
-webkit-transition:0.5s ease-out;
+
  width:30vh;
−
-moz-transition: 0.5s ease-out;
+
  left:75vw;
−
-o-transiton: 0.5s ease-out;
+
  border: 2px solid #F7CA18;
−
-ms-transition:0.5s ease-out;
+
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
−
transition:0.5s ease-out;
+
  0s;
−
}
+
  z-index: 2;
−
.option:hover div.icon2{
+
−
opacity:0.0;
+
−
}
+
−
.text2{
+
−
background-color:#FFFFFF;
+
−
opacity:0.0;
+
−
width:17%;
+
−
height:24%;
+
−
-webkit-transition:0.5s ease-out;
+
−
-moz-transition: 0.5s ease-out;
+
−
-o-transiton: 0.5s ease-out;
+
−
-ms-transition:0.5s ease-out;
+
−
transition:0.5s ease-out;
+
−
}
+
−
.option:hover div.text2{
+
−
opacity:0.2;
+
−
}
+
−
</style>
+
−
</head>
+
−
<body>
+
−
<div class="container">
+
−
    <div class="sidenav">
+
−
        <ul style="list-style-image: none; color: #fff;">
+
−
            <li class="navli" style="background-color:#ffffff"><navtext>Project</navtext></li>
+
−
            <li class="navli"><navtext>Background</navtext></li>
+
−
            <li class="navli"><navtext>Design</navtext></li>
+
−
            <li class="navli"><navtext>Result</navtext></li>
+
−
            <li class="navli"><navtext>Modeling</navtext></li>
+
  
−
        </ul>
+
}
−
    </div>
+
 
−
    <div class="p01">
+
a.animated-button.thar-three:hover {
−
<div class="column" >
+
  color: #000 !important;
−
<div class="head">PROJECT</div>
+
  background-color: transparent;
−
</div>
+
  text-shadow: nthree;
−
<div class="line" ></div>
+
}
−
<div class="column" >
+
 
−
<div class="option">
+
a.animated-button.thar-three:hover:before {
−
<div class="icon2" style="position:absolute;top:35vh;left:6vw;background-image:url();background-size:cover;"></div>
+
  right: auto;
−
<div class="text2" style="position:absolute;top:42vh;left:4vw;"></div>
+
  width: 100%;
−
<div class="TEXT">Background</div>
+
}
−
+
 
−
</div>
+
a.animated-button.thar-three:before {
−
<div class="option">
+
  display: block;
−
<div class="icon2" style="position:absolute;top:35vh;left:31vw;background-image:url(https://static.igem.org/mediawiki/2015/3/33/2015NCTU_Formosa_design.png);background-size:cover;"></div>
+
  position: absolute;
−
<div class="text2" style="position:absolute;top:42vh;left:29vw;"></div>
+
  top: 0px;
−
<div class="TEXT" >Design</div>
+
  right: 0px;
−
</div>
+
  height: 100%;
−
<div class="option" >
+
  width: 0px;
−
<div class="icon2" style="position:absolute;top:35vh;left:56vw;background-image:url(https://static.igem.org/mediawiki/2015/9/9b/2015NCTU_Formosa_result.png);background-size:cover;"></div>
+
  z-index: -1;
−
<div class="text2" style="position:absolute;top:42vh;left:54vw;"></div>
+
  content: '';
−
<div class="TEXT" >Result</div>
+
  color: #000 !important;
−
</div>
+
  background: #F7CA18;
−
<div class="option">
+
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
−
<div class="icon2" style="position:absolute;top:35vh;left:81vw;background-image:url(https://static.igem.org/mediawiki/2015/8/8e/2015NCTU_Formosa_modeling.png);background-size:cover;"></div>
+
  0s;
−
<div class="text2" style="position:absolute;top:42vh;left:79vw;"></div>
+
}
−
<div class="TEXT" >Modeling</div>
+
a.animated-button.thar-three-two {
−
</div>
+
  color: #000;
−
</div>
+
  font-family:Myriad Pro;
−
<div class="line" ></div>
+
  font-size: 20px;
−
<div class="column" ></div>
+
  text-decoration: none;
−
</div>
+
  text-align:center;
−
    <div class="p02">
+
  cursor: pointer;
−
    <div class="upper"><g1>Background / </g1><g2>Our project focuses on the diagnoses before and after treatment for cancers.</g2>
+
  display: block;
−
        </div>
+
  position: relative;
−
        <div class="side">
+
  bottom:10vh;
−
        </div>
+
  width:30vh;
−
        <div class="textbox">Our project focuses on the diagnoses before and after treatment for cancers. Two systems are constructed for our project. The first system displays scFv on the surface of E.coli while the second one displays gold binding peptide (GBP). 
+
  left:-7vw;
−
Before treatment, by using the fluorescent E.coli with scFv displayed on the surface, IHC procedure can be simplified because secondary antibodies is omitted and solves the problem of non-specific binding of secondary antibodies.
+
  border: 2px solid #F7CA18;
−
  A dual system involving E.coli displaying scFv and GBP can solve random orientation of antibodies coating on gold chip to attain an accurate measurement. Therefore, the dual system can also offer a quantitative and accurate diagnosis for after treatment of cancer.
+
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
−
Our project not only improves the diagnoses of the cancer types before treatment easily but also helps track the patient's condition after treatment by multifaceted measurement technology with more accurate quantitative results!
+
  0s;
−
        </div>
+
  z-index: 2;
−
    </div>
+
}
−
     <div class="p03">
+
a.animated-button.thar-three-two:hover {
−
        <div class="upper"><g1>Design / </g1><g2>To display scfv on the E.coli's surface we used a transmembrance fusion protein.</g2>
+
  color: #000 !important;
−
        </div>
+
  background-color: transparent;
−
        <div class="side">
+
  text-shadow: nthree;
−
        </div>
+
}
−
        <div class="textbox">ScFv is a single chain variable fragment the binding site for antigen. Comparing to the entire antibody, scFv is smaller for E.coli to display it.To display scfv on the E.coli’s surface we used a transmembrance fusion protein. This fusion protein is composed of Lipoprotein and a small part of outermembrane protein A (OmpA). Its C terminal will connect with the scFv and display it onto the membrane surface of the E.coli.
+
 
−
        </div>
+
a.animated-button.thar-three-two:hover:before {
−
    </div>
+
  right: auto;
−
    <div class="p04">
+
  width: 100%;
−
            <div class="upper"><g1>Result / </g1><g2>Sucessfully present our E.cotector</g2>
+
}
−
        </div>
+
 
−
        <div class="side">
+
a.animated-button.thar-three-two:before {
−
        </div>
+
  display: block;
−
        <div class="textbox">testestetsetsetset
+
  position: absolute;
−
        </div>
+
  top: 0px;
−
    </div>
+
  right: 0px;
−
    <div class="p05">
+
  height: 100%;
−
    <div class="upper"><g1>Modeling / </g1><g2>Find out the best condition of our E.cotector</g2>
+
  width: 0px;
−
        </div>
+
  z-index: -1;
−
        <div class="side">
+
  content: '';
−
        </div>
+
  color: #000 !important;
−
        <div class="textbox">testestetsetsetset
+
  background: #F7CA18;
−
        </div>
+
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
 +
  0s;
 +
}
 +
 
 +
 
 +
 
 +
</style>\
 +
<BODY>
 +
 
 +
 
 +
            <div style=float:left;> <a href="https://2015.igem.org/Team:NCTU_Formosa/Description" class="btn btn-sm animated-button thar-three">Go to Background</a> </div>
 +
<div style=float:left;> <a href="https://2015.igem.org/Team:NCTU_Formosa/Project" class="btn btn-sm animated-button thar-three-two">Back to project</a> </div>
 +
           
 +
     <div style="position:relative;">
 +
    <div style="width:30vw;height:5vh;position:absolute;left:2vw;float:left;background-color:#00171F;color:#fff;font-family:Myriad Pro;font-size:2em;padding:7vh 0vw 7vh 5vw;">contact us<BR> NCTU_Formosa APOllO &nbsp;&nbsp;<a href="https://www.facebook.com/pages/NCTU_Formosa-IGEM-team/267841893250331?fref=ts" target="_blank"><img src=https://static.igem.org/mediawiki/2015/a/ab/NCTU_FORMOSA_Facebook_LINK.png width=40vw></a> </div>
 +
        <div style="width:58.85vw;height:5vh;position:absolute;right:0;float:left;background-color:#263A40;color:#fff;font-family:Myriad Pro;font-size:2em;padding:7vh 0vw 7vh 6vw;">
 +
        <a href="https://goo.gl/maps/nqUy6" target="_blank"><img src=https://static.igem.org/mediawiki/2015/1/10/NCTU_Formosa_footer_location.png width=40vw></a>
 +
            &nbsp;&nbsp;Engineering Building 6 EF455, 1001 University Road, Hsinchu 300, Taiwan, ROC. </div>
 
     </div>
 
     </div>
−
</div>
 
  
−
</body>
+
 
−
</html>
+
  </body>
 +
  </html>

Revision as of 10:30, 21 August 2015

\

Go to Background
Back to project
contact us
NCTU_Formosa APOllO   
  Engineering Building 6 EF455, 1001 University Road, Hsinchu 300, Taiwan, ROC.