Difference between revisions of "Team:NYMU-Taipei/Project-Parts"

(Created page with "{{NYMU-sheet}} {{NYMU-Taipei}} <html> <style> body{ background-color:#FFFFFF; } #type{ z-index:1; position:absolute; width:100%; background-color:#FFFFFF; top:250px;...")
 
Line 7: Line 7:
  
 
body{
 
body{
−
background-color:#FFFFFF;
+
background-color:#666666;
 
}
 
}
  
−
#type{
+
p, a, h1, h2, h3{
−
z-index:1;
+
font-family: 'Product Sans', Arial, sans-serif;
−
position:absolute;
+
color:#FFFFFF;
−
width:100%;
+
text-decoration: none;
−
background-color:#FFFFFF;
+
−
top:250px;
+
 
}
 
}
  
−
#container{
+
#title{
−
width:85%;
+
color:#FFFFFF;
 +
background-color:#666666;
 +
width:50%;
 +
min-height:80px;
 +
margin-left:25%;
 +
margin-right:25%;
 
position:relative;
 
position:relative;
−
margin-left:auto;
 
−
margin-right:auto;
 
 
}
 
}
  
−
.text{
+
.wrapper{ width:100%; height:480px; margin:auto; position:relative; overflow:hidden; z-index:1; background-color:#666666; margin-top:-60px;}
−
width:70%;
+
−
position:relative;
+
−
margin-left:auto;
+
−
margin-right:auto;
+
−
margin-top:30px;
+
−
}
+
  
−
h1{
+
.adv{overflow:hidden; width:80%; margin:auto; position:relative; z-index:1;}
−
height:40px;
+
−
        font-family: 'Product Sans', Arial, sans-serif;
+
−
font-size:36px;
+
−
text-align:center;
+
−
}
+
  
−
p{
+
.slider{ float:left; width:25%; height:450px; position:relative; overflow:hidden;}
−
font-family: 'Product Sans', Arial, sans-serif;
+
−
}
+
  
−
</style>
+
.title{ display:block; background:#000; width:100%; position:absolute;}
 +
.light{ display:block; /*background:#FFF;*/ width:100%; position:absolute;}
  
−
<img src="http://pic.pimg.tw/ctg5496/1411634102-1200041724.jpg" style="width:100%; margin-top:-500px; z-index:0; position:fixed;" />
+
.light{ height:100%; top:0; opacity:.4;}
  
−
<div id="type">
+
.title{ height:50%; position:absolute; bottom:0; color:#FFF; opacity:.9; text-align:center; padding-top:.5em; bottom:-40%;}
  
−
<div id="container">
+
.slider:hover .light{ opacity:0;}
 +
.slider:hover .title{ bottom:0%;}
  
−
<h1 style="margin-top:30px; margin-bottom:10px;">Parts</h1>
+
.slider a{ box-shadow:0 0 5px #999; position:relative; margin:auto; text-decoration:none; color:#000; display:block; border: solid 1px #69F; background-color:#CCCCCC; border-radius:3px; width:100px; text-align:center;}
−
    <hr />
+
.slider a:hover{ box-shadow:0 0 5px #666; background-color:#FF0000; color:#FFFFFF;}
−
 
+
 
−
        <div class="text">
+
.click{ width:100px; height:15%; position:relative; margin:auto;}
−
<p style="font-size:16px;">The purpose of our project is to utilize the a filamentous-fungi-specific CRISPR-Cas9 system 1 in conjunction with an optogenetic system 2 to construct a fast acting kill switch system for genetically engineered fungi, which is becoming ever more popular method for dealing with insect pest around the world. Two plasmids will be constructed, each carrying a module of our two part system. Metarhizium anisopliae ARSEF 549 will be transformed with both plasmids and inoculated on live specimen of Bactrocera dorsalis and Spodoptera litura to test the viability and efficacy of the system. If the system is viable, we think that it could be adapted for other organism for similar purposes.</p>
+
 
−
        </div>
+
#contentcontent{ width:80%; height:600px; position:relative; margin:auto;}
 +
 
 +
.sidecontent1{width:35%; height:600px; float:left;}
 +
.sidecontent2{width:35%; height:600px; float:left; margin-left:5%;}
 +
 
 +
.menu{width:20%; height:600px; float:left; margin-left:5%;}
 +
 
 +
.introduction1{height:30%; background-color:#666666;}
 +
.introduction2{height:60%; background-color:#666666;}
 +
.nothing1{height:40%; width:100%;}
 +
.nothing2{height:25%; width:100%;}
 +
.sub{height:15%; width:90%; position:relative; margin:auto; margin-top:5%;}
 +
.type{float:left; margin-top:0%; font-size:24px;}
 +
 
 +
#footer{width:80%; height:150px; position:relative; margin:auto; border-bottom:16px solid #FFFFFF; border-top:16px solid #FFFFFF; margin-top:50px;}
 +
 
 +
.left{ width:45%; height:100%; float:left; position:relative;}
 +
.right{ width:45%; height:100%; float:left; position:relative; margin-right:10%;}
 +
 
 +
#final{width:80%; height:150px; position:relative; margin:auto; margin-top:10px;}
 +
.nymu{width:20%; float:left; margin-left:10%;}
 +
.information{ width:20%; float:left; text-decoration: none;}
 +
.contact{width:80%; height:20%; margin-top:5%;}
 +
.contact a{font-size:18px;}
 +
 
 +
</style>
 +
 
 +
<div id="title">
 +
    <p style="font-size:60px; font-weight:700; text-align:center;">
 +
    I. O. S. igem
 +
    </p>
 +
</div>
 +
 
 +
<div class="wrapper">
 +
 
 +
<div class="adv">
 
      
 
      
−
</div>
+
        <div class="slider">
 +
            <img src="img/IMAG1549.png" width="100%" height="450px" />
 +
            <div class="title">
 +
            <div class="click"><img src="img/222.png" width="40px;" /></div>
 +
            <p>Wonderful<br/>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.</p>
 +
            <a href="javascript:;">ENTER</a>
 +
            </div>
 +
        </div>
 +
        <div class="slider">
 +
            <img src="img/IMAG1242_1.png" width="100%" height="450px" />
 +
            <div class="title">
 +
            <div class="click"><img src="img/222.png" width="40px;" /></div>
 +
            <p>Wonderful<br/>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.</p>
 +
            <a href="javascript:;">ENTER</a>
 +
            </div>
 +
        </div><div class="slider">
 +
            <img src="img/IMAG1550.png" width="100%" height="450px" />
 +
            <div class="title">
 +
            <div class="click"><img src="img/222.png" width="40px;" /></div>
 +
            <p>Wonderful<br/>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.</p>
 +
            <a href="javascript:;">ENTER</a>
 +
            </div>
 +
        </div><div class="slider">
 +
            <img src="img/IMAG1376.png" width="100%" height="450px" />
 +
            <div class="title">
 +
            <div class="click"><img src="img/222.png" width="40px;" /></div>
 +
            <p>Wonderful<br/>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.</p>
 +
            <a href="javascript:;">ENTER</a>
 +
            </div>
 +
        </div>
 +
       
 +
</div>
  
 +
</div>
 +
 +
<div id="contentcontent">
 +
 +
<div class="sidecontent1">
 +
<div class="introduction1">
 +
    <h2>What's Our Project?</h2>
 +
<p>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.</p>
 +
    <a href="javascript:;">read more</a>
 +
    </div>
 +
    <div class="introduction2">
 +
    <img src="" width="70%" height="50%" />
 +
    <h1>After transforming M.anisopliae,we will be inoculating that carries</h1>
 +
    <a href="javascript:;">read more</a>
 +
    </div>
 +
</div>
 +
 +
<div class="sidecontent2">
 +
<div class="nothing1">
 +
    <h1>TITLETITLE</h1>
 +
    <img src="" width="80%" height="60%" />
 +
    </div>
 +
    <div class="nothing2">
 +
    <h3>TITLETITLE</h3>
 +
    <p>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.</p>
 +
    </div>
 +
    <div class="nothing2">
 +
    <h3>TITLETITLE</h3>
 +
    <p>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.</p>
 +
    </div>
 +
</div>
 +
 +
<div class="menu">
 +
<div class="sub">
 +
    <a href="#"><img src="img/222.png" width="20%" height="35%" style="float:left; margin-top:0%;"/>
 +
        <div class="type">PROJECT</a></div>
 +
    </div>
 +
    <div class="sub">
 +
    <a href="#"><img src="img/222.png" width="20%" height="35%" style="float:left; margin-top:0%;"/>
 +
        <div class="type">MODEL</a></div>
 +
    </div>
 +
    <div class="sub">
 +
    <a href="#"><img src="img/222.png" width="20%" height="35%" style="float:left; margin-top:0%;"/>
 +
        <div class="type">PROTOTYPE</a></div>
 +
    </div>
 +
    <div class="sub">
 +
    <a href="#"><img src="img/222.png" width="20%" height="35%" style="float:left; margin-top:0%;"/>
 +
        <div class="type">PRACTICE</a></div>
 +
    </div>
 +
</div>
 +
 +
</div>
 +
 +
<div id="footer">
 +
<div class="left">
 +
    <h1 style="margin-left:10%; font-size:36px;">In.Out.Suicide.</h1>
 +
    <h2 style="margin-left:60%;">It's that simple.</h2>
 +
    </div>
 +
    <div class="right">
 +
    <p>After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.</p>
 +
    <a href="#" style="float:right; position:relative;">click here</a>
 +
    </div>
 +
</div>
 +
 +
<div id="final">
 +
<div class="nymu">
 +
    <a href="#" style="font-size:24px; text-decoration: none;">National<br/>Yang-Ming<br/>University</h1>
 +
    </div>
 +
    <div class="information">
 +
<div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
        <div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
        <div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
    </div>
 +
    <div class="information">
 +
<div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
        <div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
        <div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
    </div>
 +
    <div class="information">
 +
<div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
        <div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
        <div class="contact">
 +
        <a href="#">> ENTER</a>
 +
        </div>
 +
    </div>
 
</div>
 
</div>
  
 
<html/>
 
<html/>

Revision as of 17:06, 13 September 2016

I. O. S. igem

Wonderful
After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.

ENTER

Wonderful
After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.

ENTER

Wonderful
After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.

ENTER

Wonderful
After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect.

ENTER

What's Our Project?

After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.

read more

After transforming M.anisopliae,we will be inoculating that carries

read more

TITLETITLE

TITLETITLE

After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.

TITLETITLE

After transforming M. anisopliae, we will be inoculating that carries the kill switch system onto two species of insect, Bactrocera dorsalis and Spodoptera litura, to ensure that the whole system functions as intended.

PROJECT
MODEL
PROTOTYPE
PRACTICE