Team:WPI-Worcester/Project

From 2014.igem.org

(Difference between revisions)
 
(3 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
-
 
{{CSS/Main}}
{{CSS/Main}}
<html>
<html>
 +
<!--CSS-->
<!--CSS-->
<style>
<style>
-
body{ margin:0px; }
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}
-
div#floatbar {
+
 
 +
body{  
 +
margin:0px;  
 +
}
 +
 
 +
#topmargin{
 +
margin: 0px;
 +
}
 +
 
 +
#bottombox{
 +
background:#999;
 +
height:50px;
 +
width:700px;
 +
margin-top:300px;
 +
margin-left:300px;
 +
float:left;
 +
}
 +
#floatbar {
position: fixed;
position: fixed;
right: 10px;
right: 10px;
top: 0%;
top: 0%;
width: 80px;
width: 80px;
-
margin-top: 50px
+
margin-top: 50px;
}
}
-
div#menubar1{ padding: 24px; border:#999 1 px dashed; }
+
#logo{
-
div#menubar1 > a{
+
float:left;
 +
left:-400px;
 +
margin-top:0px;
 +
position:fixed;
 +
z-index:9;
 +
transition: -webkit-transform .4s ease-in-out 0s, ease-in-out 0s;
 +
-moz-transition: transform .4s ease-in-out 0s, ease-in-out 0s;
 +
-ms-transition: transform .4s ease-in-out 0s, ease-in-out 0s;
 +
transition: transform .4s ease-in-out 0s, ease-in-out 0s;
 +
}
 +
#title{
 +
float:left;
 +
position:absolute;
 +
margin-left:200px;
 +
}
 +
#shift{
 +
height:75%;
 +
width:100%;
 +
position:absolute;
 +
z-index:1;
 +
}
 +
#shift:hover > #logo{
 +
transform: translateX(400px);
 +
-moz-transform: translateX(400px);
 +
-webkit-transform: translateX(400px);
 +
-ms-transform: translateX(400px);
 +
-o-transform: translateX(400px);
 +
}
 +
#shift:hover > #menubar1 {
 +
opacity:1;
 +
transform: translateX(260px);
 +
-moz-transform: translateX(260px);
 +
-webkit-transform: translateX(260px);
 +
-ms-transform: translateX(260px);
 +
-o-transform: translateX(260px);
 +
}
 +
#shift:hover + #maintext {
 +
transform: translateX(260px);
 +
-moz-transform: translateX(260px);
 +
-webkit-transform: translateX(260px);
 +
-ms-transform: translateX(260px);
 +
-o-transform: translateX(260px);
 +
}
 +
 
 +
#menubar1{
 +
padding: 24px;
 +
opacity: 0.5;
 +
width: 200px;
 +
margin-right:50px;
 +
margin-left:10px;
 +
margin-top:80px;
 +
float:left;
 +
position:fixed;
 +
z-index:8;
 +
transition: -webkit-transform .4s ease-in-out 0s, ease-in-out 0s, opacity 0.4s ease-in-out 0s;
 +
-moz-transition: transform .4s ease-in-out 0s, ease-in-out 0s, opacity 0.4s ease-in-out 0s;
 +
-ms-transition: transform .4s ease-in-out 0s, ease-in-out 0s, opacity 0.4s ease-in-out 0s;
 +
transition: transform .4s ease-in-out 0s, ease-in-out 0s, opacity 0.4s ease-in-out 0s;
 +
}
 +
#menubar1 > a{
font-family:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
font-size:17px;
-
background: #666;
+
padding: 8px 10px;
-
padding: 15px 10px;
+
color:#000;
color:#000;
margin-right: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-bottom: 5px;
text-decoration:none;
text-decoration:none;
-
border-radius:3px;
 
float:left;
float:left;
transition: background 0.3s ease-in-out 0s, color 0.4s ease-in-out 0s;
transition: background 0.3s ease-in-out 0s, color 0.4s ease-in-out 0s;
}
}
-
div#menubar1 > a:hover{
+
.menuslide > a{
-
background: #333;
+
font-family:Arial, Helvetica, sans-serif;
-
color: #FFF;
+
font-size:20px;
 +
padding: 8px 10px;
 +
color:#000;
 +
margin-right: 10px;
 +
margin-bottom: 5px;
 +
text-decoration:none;
 +
float:left;
 +
transition: background 0.3s ease-in-out 0s, color 0.4s ease-in-out 0s;
 +
}
 +
.menuslide > p{
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size:20px;
 +
padding: 8px 10px;
 +
color:#000;
 +
margin-left: 120px;
 +
margin-bottom: 5px;
 +
text-decoration:none;
 +
transition: -webkit-transform .2s ease-in-out 0s, ease-in-out 0s;
 +
-moz-transition: transform .2s ease-in-out 0s, ease-in-out 0s;
 +
-ms-transition: transform .2s ease-in-out 0s, ease-in-out 0s;
 +
transition: transform .2s ease-in-out 0s, ease-in-out 0s;
 +
}
 +
.menuslide:hover > p{
 +
transform: translateX(40px);
 +
-moz-transform: translateX(40px);
 +
-webkit-transform: translateX(40px);
 +
-ms-transform: translateX(40px);
 +
-o-transform: translateX(40px);
}
}
-
 
-
</style>
 
-
<!--Float Bar-->
+
#toptext {
-
<body>
+
float: left;
-
<div id="floatbar">
+
width: 400px;
-
<a href="https://2014.igem.org/Main_Page"> <img src= "https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" align="right" width="55px"></a>
+
height: 50%;
-
</div>
+
font-family:Arial, Helvetica, sans-serif;
 +
font-size:25px;
 +
margin:140px;
 +
margin-left:520px;
 +
margin-bottom:20px;
 +
padding:10px;
-
<!--main content -->
+
}
-
<table width="70%" align="center">
+
#maintext {
 +
float: left;
 +
width: 100%;
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size:25px;
 +
padding:10px;
 +
margin-left:250px;
 +
margin-top:100px;
 +
text-decoration:none;
 +
z-index:10;
 +
transition: -webkit-transform .4s ease-in-out 0s, ease-in-out 0s;
 +
-moz-transition: transform .4s ease-in-out 0s, ease-in-out 0s;
 +
-ms-transition: transform .4s ease-in-out 0s, ease-in-out 0s;
 +
transition: transform .4s ease-in-out 0s, ease-in-out 0s;
 +
}
-
<tr>
+
.textitem{
 +
margin:50px;
 +
padding:10px;
 +
float:left;
 +
}
-
<!--navigation menu -->
+
.textitem > h1 {
-
<td align="center" colspan="3">
+
margin-bottom: 5px;
 +
}
-
<table  width="100%">
+
#filler{
-
<tr heigth="15px"></tr>
+
margin:100px;
-
<tr heigth="75px">
+
padding:15px;
 +
margin-right:700px;
 +
}
-
<img src="http://i.imgur.com/ta0HIn9.png" align="center"/>
+
#down figure{
 +
position: absolute;
 +
margin:0;
 +
-webkit-animation:xfade 10s infinite ease-in-out;
 +
-moz-animation:xfade 10s infinite ease-in-out;
 +
-o-animation:xfade 10s infinite ease-in-out;
 +
animation:xfade 10s infinite ease-in-out;
 +
}
-
<body>
 
-
<div id="menubar1">
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester"> Home </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Team"> Team </a>
 
-
<a href="https://2014.igem.org/Team.cgi?year=2014&team_name=WPI-Worcester"> Official Team Profile </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Project"> Project </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Parts"> Parts </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Modeling"> Modeling </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Notebook"> Notebook </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Safety"> Safety </a>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Attributions"> Attributions </a>
 
-
</div>
 
-
</body>
 
 +
@-webkit-keyframes xfade{
 +
  0%{
 +
    opacity: 1;
 +
  }
 +
  17% {
 +
    opacity:1;
 +
  }
 +
  25%{
 +
    opacity: 0;
 +
  }
 +
  92% {
 +
    opacity:0;
 +
  }
 +
  100% {
 +
    opacity:1;
 +
  }
 +
}
 +
@-moz-keyframes xfade{
 +
  0%{
 +
    opacity: 1;
 +
  }
 +
  17% {
 +
    opacity:1;
 +
  }
 +
  25%{
 +
    opacity: 0;
 +
  }
 +
  92% {
 +
    opacity:0;
 +
  }
 +
  100% {
 +
    opacity:1;
 +
  }
 +
}
 +
@-ms-keyframes xfade{
 +
  0%{
 +
    opacity: 1;
 +
  }
 +
  17% {
 +
    opacity:1;
 +
  }
 +
  25%{
 +
    opacity: 0;
 +
  }
 +
  92% {
 +
    opacity:0;
 +
  }
 +
  100% {
 +
    opacity:1;
 +
  }
 +
}
 +
@-o-keyframes xfade{
 +
  0%{
 +
    opacity: 1;
 +
  }
 +
  17% {
 +
    opacity:1;
 +
  }
 +
  25%{
 +
    opacity: 0;
 +
  }
 +
  92% {
 +
    opacity:0;
 +
  }
 +
  100% {
 +
    opacity:1;
 +
  }
 +
}
 +
@keyframes xfade{
 +
  0%{
 +
    opacity: 1;
 +
  }
 +
  17% {
 +
    opacity:1;
 +
  }
 +
  25%{
 +
    opacity: 0;
 +
  }
 +
  92% {
 +
    opacity:0;
 +
  }
 +
  100% {
 +
    opacity:1;
 +
  }
 +
}
-
<td align ="center">  </td>
+
figure#top {
-
</tr>
+
  -webkit-animation-delay: 7.5s;
-
</table>
+
  -moz-animation-delay: 7.5s;
-
 
+
  animation-delay: 7.5s;
-
<!--end navigation menu -->
+
}
-
 
+
figure#pic2 {
-
 
+
  -webkit-animation-delay: 5s;
-
 
+
  -moz-animation-delay: 5s;
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
  animation-delay: 5s;
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
}
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
figure#pic3 {
 +
  -webkit-animation-delay: 2.5s;
 +
  -moz-animation-delay: 2.5s;
 +
  animation-delay: 2.5s;
 +
}
 +
figure#pic4 {
 +
  -webkit-animation-delay: 0s;
 +
  -moz-animation-delay: 0s;
 +
  animation-delay: 0s;
 +
}
 +
 +
#down figure#top{
 +
opacity:0;
 +
}
 +
 +
.infographic > img{
 +
margin:30px;
 +
width: 600px;
 +
height: 300px;
 +
}
 +
.infodesc > p{
 +
max-width:600px;
 +
}
 +
</style>
-
<!--Project content  -->
+
<!--Float Bar-->
-
<tr><td > <h3> Project Description </h3></td>
+
<div id="floatbar">
-
<td ></td >
+
<a href="https://2014.igem.org/Main_Page"> <img src= "https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" align="right" width="55px"/></a>
-
<td > <h3> Content</h3></td>
+
</div>
-
</tr>
+
<body>
-
 
+
<div id="topmargin" />
-
<tr>
+
<div id="page">
-
<td width="45%" valign="top">  
+
<div id="shift">
-
<p>Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs) </p>
+
<div id="logo">
-
<br>
+
<img src="https://static.igem.org/mediawiki/2014/c/c8/WPI_Team_Logo.png" width="300px"/>
-
<h3>References </h3>
+
</div>
-
<p>
+
<div id="title">
-
iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you though about your project and what works inspired you. </p>  
+
<img src="https://static.igem.org/mediawiki/2014/9/9a/WPI_Title.png" width="800px"/>
-
</td>
+
</div>
-
 
+
<div id="menubar1">
-
<td></td>
+
<div class="menuslide">
-
<td  width="45%" valign="top">
+
<a href="https://2014.igem.org/Team:WPI-Worcester"> Home </a>
-
<p> You can use these subtopics to further explain your project</p>
+
<p><img src="https://static.igem.org/mediawiki/2014/f/f8/WPI_Home_Link.png"/></p>
-
 
+
</div>
-
<ol>
+
<div class="menuslide">
-
<li>Overall project summary</li>
+
<a href="https://2014.igem.org/Team:WPI-Worcester/Team"> Team </a>
-
<li>Project Details</li>
+
<p><img src="https://static.igem.org/mediawiki/2014/6/64/WPI_Team_Link.png"/></p>
-
<li>Materials and Methods</li>
+
</div>
-
<li>The Experiments</li>
+
<div class="menuslide">
-
<li>Results</li>
+
<a href="https://igem.org/Team.cgi?id=1423"> Official </a>
-
<li>Data analysis</li>
+
<p><img src="https://static.igem.org/mediawiki/2014/a/af/WPI_Official_Link.png"/></p>
-
<li>Conclusions</li>
+
</div>
-
</ol>
+
<div class="menuslide">
-
 
+
<a href="https://2014.igem.org/Team:WPI-Worcester/Project"> Project </a>
-
<p>
+
<p><img src="https://static.igem.org/mediawiki/2014/4/41/WPI_Project_Link.png"/></p>
-
It's important for teams to describe all the creativity that goes into an iGEM project, along with all the great ideas your team will come up with over the course of your work.  
+
</div>
-
</p>
+
<div class="menuslide">
-
 
+
<a href="https://2014.igem.org/Team:WPI-Worcester/Notebook"> Notebook </a>
-
<p>
+
<p><img src="https://static.igem.org/mediawiki/2014/7/7e/WPI_Notes_Link.png"/></p>
-
It's also important to clearly describe your achievements so that judges will know what you tried to do and where you succeeded. Please write your project page such that what you achieved is easy to distinguish from what you attempted.  
+
</div>
-
</p>
+
<div class="menuslide">
-
 
+
<a href="https://2014.igem.org/Team:WPI-Worcester/Safety"> Safety </a>
-
</td>
+
<p><img src="https://static.igem.org/mediawiki/2014/d/d4/WPI_Safety_Link.png"/></p>
-
 
+
</div>
-
</tr>
+
</div>
 +
</div>
 +
<div id="maintext">
 +
<div class="infographic">
 +
<div class="infodesc">
 +
<h1>Ligate</h1>
 +
<p>Create the target sequence of BclA and CAEV p28. 
 +
BclA is a membrane binding domain and CAEV-p28 is the capsid protein of CAEV that antibodies bind to.</p>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2014/2/2d/WPI_2014_Infographic1.png"/>
 +
<div class="infodesc">
 +
<div class="infodesc">
 +
<h1>Transform</h1>
 +
<p>Transform the target plasmid into e. coli which would then express CAEV-p28 on its surface.</p>
 +
</div>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2014/b/b2/WPI_2014_Infographic2.png"/>
 +
<div class="infodesc">
 +
<h1>Draw Blood</h1>
 +
<p>Take a sample of blood from the goat being diagnosed.</p>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2014/b/b1/WPI_2014_Infographic3.png"/>
 +
<div class="infodesc">
 +
<h1>Add Bacteria</h1>
 +
<p>Mix the transformed e. coli with the sample of goat blood.</p>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2014/f/fe/WPI_2014_Infographic4.png"/>
 +
<div class="infodesc">
 +
<h1>Agglutinate</h1>
 +
<p>If the disease is present in the goat being diagnosed, the antibodies for the disease in its blood will bind to the e. coli.</p>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2014/b/b0/WPI_2014_Infographic5.png"/>
 +
<div class="infodesc">
 +
<h1>Diagnosis</h1>
 +
<p>The agglutinated diseased blood (+) will be visibly different from the non-diseased blood (-).</p>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2014/c/cd/WPI_2014_Infographic6.png"/>
 +
</div>
 +
</div>
 +
<div id="bottombox"/>
 +
</body>
-
</table>
 
</html>
</html>

Latest revision as of 17:48, 16 July 2014


Ligate

Create the target sequence of BclA and CAEV p28. BclA is a membrane binding domain and CAEV-p28 is the capsid protein of CAEV that antibodies bind to.

Transform

Transform the target plasmid into e. coli which would then express CAEV-p28 on its surface.

Draw Blood

Take a sample of blood from the goat being diagnosed.

Add Bacteria

Mix the transformed e. coli with the sample of goat blood.

Agglutinate

If the disease is present in the goat being diagnosed, the antibodies for the disease in its blood will bind to the e. coli.

Diagnosis

The agglutinated diseased blood (+) will be visibly different from the non-diseased blood (-).