Team:WPI-Worcester/Project

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
 
(4 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}}
Line 7: Line 4:
<html>
<html>
-
<!--main content -->
 
-
<table width="70%" align="center">
 
-
 
-
 
-
<!--welcome box -->
 
-
<tr>
 
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
 
-
<h1 >WELCOME TO iGEM 2014! </h1>
 
-
<p>Your team has been approved and you are ready to start the iGEM season!
 
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
 
-
<br>
 
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:WPI-Worcester/Project&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
 
-
</td>
 
-
</tr>
 
-
 
-
<tr> <td colspan="3"  height="5px"> </td></tr>
 
-
<!-- end welcome box -->
 
-
<tr>
 
-
 
-
<!--navigation menu -->
 
-
<td align="center" colspan="3">
 
-
 
-
<table  width="100%">
 
-
<tr heigth="15px"></tr>
 
-
<tr heigth="75px">
 
-
 
-
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester"style="color:#000000">Home </a> </td>
 
-
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Team"style="color:#000000"> Team </a> </td>
 
-
 
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=WPI-Worcester"style="color:#000000"> Official Team Profile </a></td>
 
-
 
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Project"style="color:#000000"> Project</a></td>
 
-
 
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Parts"style="color:#000000"> Parts</a></td>
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<!--CSS-->
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Modeling"style="color:#000000"> Modeling</a></td>
+
<style>
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
body{
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Notebook"style="color:#000000"> Notebook</a></td>
+
margin:0px;  
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#topmargin{
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Safety"style=" color:#000000"> Safety </a></td>
+
margin: 0px;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
#bottombox{
-
<a href="https://2014.igem.org/Team:WPI-Worcester/Attributions"style="color:#000000"> Attributions </a></td>
+
background:#999;
 +
height:50px;
 +
width:700px;
 +
margin-top:300px;
 +
margin-left:300px;
 +
float:left;
 +
}
 +
#floatbar {
 +
position: fixed;
 +
right: 10px;
 +
top: 0%;
 +
width: 80px;
 +
margin-top: 50px;
 +
}
 +
#logo{
 +
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-size:17px;
 +
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 > a{
 +
font-family:Arial, Helvetica, sans-serif;
 +
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);
 +
}
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
#toptext {
-
</tr>
+
float: left;
-
</table>
+
width: 400px;
 +
height: 50%;
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size:25px;
 +
margin:140px;
 +
margin-left:520px;
 +
margin-bottom:20px;
 +
padding:10px;
-
</tr>
+
}
-
</tr>
+
#maintext {
-
</td>
+
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> <td colspan="3"  height="15px"> </td></tr>
+
.textitem{
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
margin:50px;
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
padding:10px;
 +
float:left;
 +
}
 +
.textitem > h1 {
 +
margin-bottom: 5px;
 +
}
 +
#filler{
 +
margin:100px;
 +
padding:15px;
 +
margin-right:700px;
 +
}
-
<!--Project content  -->
+
#down figure{
-
<tr><td > <h3> Project Description </h3></td>
+
position: absolute;
-
<td ></td >
+
margin:0;
-
<td > <h3> Content</h3></td>
+
-webkit-animation:xfade 10s infinite ease-in-out;
-
</tr>
+
-moz-animation:xfade 10s infinite ease-in-out;
 +
-o-animation:xfade 10s infinite ease-in-out;
 +
animation:xfade 10s infinite ease-in-out;
 +
}
-
<tr>
 
-
<td width="45%"  valign="top">
 
-
<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>
 
-
<br>
 
-
<h3>References </h3>
 
-
<p>
 
-
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>
 
-
</td>
 
-
<td></td>
+
@-webkit-keyframes xfade{
-
<td  width="45%"  valign="top">
+
  0%{
-
<p> You can use these subtopics to further explain your project</p>
+
    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;
 +
  }
 +
}
-
<ol>
 
-
<li>Overall project summary</li>
 
-
<li>Project Details</li>
 
-
<li>Materials and Methods</li>
 
-
<li>The Experiments</li>
 
-
<li>Results</li>
 
-
<li>Data analysis</li>
 
-
<li>Conclusions</li>
 
-
</ol>
 
-
<p>
+
figure#top {
-
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.  
+
  -webkit-animation-delay: 7.5s;
-
</p>
+
  -moz-animation-delay: 7.5s;
 +
  animation-delay: 7.5s;
 +
}
 +
figure#pic2 {
 +
  -webkit-animation-delay: 5s;
 +
  -moz-animation-delay: 5s;
 +
  animation-delay: 5s;
 +
}
 +
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;
 +
}
-
<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.
+
.infographic > img{
-
</p>
+
margin:30px;
 +
width: 600px;
 +
height: 300px;
 +
}
-
</td>
+
.infodesc > p{
 +
max-width:600px;
 +
}
 +
</style>
-
</tr>
+
<!--Float Bar-->
 +
<div id="floatbar">
 +
<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>
 +
</div>
 +
<body>
 +
<div id="topmargin" />
 +
<div id="page">
 +
<div id="shift">
 +
<div id="logo">
 +
<img src="https://static.igem.org/mediawiki/2014/c/c8/WPI_Team_Logo.png" width="300px"/>
 +
</div>
 +
<div id="title">
 +
<img src="https://static.igem.org/mediawiki/2014/9/9a/WPI_Title.png" width="800px"/>
 +
</div>
 +
<div id="menubar1">
 +
<div class="menuslide">
 +
<a href="https://2014.igem.org/Team:WPI-Worcester"> Home </a>
 +
<p><img src="https://static.igem.org/mediawiki/2014/f/f8/WPI_Home_Link.png"/></p>
 +
</div>
 +
<div class="menuslide">
 +
<a href="https://2014.igem.org/Team:WPI-Worcester/Team"> Team </a>
 +
<p><img src="https://static.igem.org/mediawiki/2014/6/64/WPI_Team_Link.png"/></p>
 +
</div>
 +
<div class="menuslide">
 +
<a href="https://igem.org/Team.cgi?id=1423"> Official </a>
 +
<p><img src="https://static.igem.org/mediawiki/2014/a/af/WPI_Official_Link.png"/></p>
 +
</div>
 +
<div class="menuslide">
 +
<a href="https://2014.igem.org/Team:WPI-Worcester/Project"> Project </a>
 +
<p><img src="https://static.igem.org/mediawiki/2014/4/41/WPI_Project_Link.png"/></p>
 +
</div>
 +
<div class="menuslide">
 +
<a href="https://2014.igem.org/Team:WPI-Worcester/Notebook"> Notebook </a>
 +
<p><img src="https://static.igem.org/mediawiki/2014/7/7e/WPI_Notes_Link.png"/></p>
 +
</div>
 +
<div class="menuslide">
 +
<a href="https://2014.igem.org/Team:WPI-Worcester/Safety"> Safety </a>
 +
<p><img src="https://static.igem.org/mediawiki/2014/d/d4/WPI_Safety_Link.png"/></p>
 +
</div>
 +
</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 (-).