Team:TU-Delft/All

From 2013.igem.org

(Difference between revisions)
 
(88 intermediate revisions not shown)
Line 6: Line 6:
<div style="margin-left:30px;margin-right:30px; width:900px;float:left;">   
<div style="margin-left:30px;margin-right:30px; width:900px;float:left;">   
-
<h2 align="center"></h2>
+
<h2 align="center">Planning</h2>
 +
<html>
 +
 
 +
 
 +
 
 +
<p align="justify">
 +
Project 'Peptidor' deals with various cloning schemes into <i>E.coli</i> cells. They are made to sense Auto-inducing peptides (AIPs) from the <i>Staphylococcus aureus</i> and then start producing Antimicrobial peptides in order to kill the <i>Staphylococcus aureus</i>. Several bio-bricks from the parts registry were used to clone the <i>E. coli</i>. There are many test constructs made in order to test and characterize each module. Both the detailed cloning strategies related to each module and the final constructs can be viewed in the following links:
 +
 
 +
<ul style="list-style-type: circle">
 +
<li><a href="https://2013.igem.org/Team:TU-Delft/PeptideProduction" style="text-decoration: none"><font color="#0080FF" size="3">Peptide Production Cloning Schemes</font></a></li>
 +
<li><a href="https://2013.igem.org/Team:TU-Delft/KillSwitchPlanning" style="text-decoration: none"><font color="#0080FF" size="3">Kill Switch Cloning Schemes</font></a></li>
 +
<li><a href="https://2013.igem.org/Team:TU-Delft/Sensing Device" style="text-decoration: none"><font color="#0080FF" size="3">Sensing Device Cloning Schemes</font></a></li>
 +
<li><a href="https://2013.igem.org/Team:TU-Delft/FinalConstructs" style="text-decoration: none"><font color="#0080FF" size="3">Final Constructs</font></a></li>
 +
<li><a href="https://2013.igem.org/Team:TU-Delft/All" style="text-decoration: none"><font color="#0080FF" size="3">All Cloning Schemes</font></a> </li>
 +
 
 +
</ul>
 +
</p>
 +
 
 +
</html>
 +
 
<html>
<html>
-
<style type="text/css">
+
    <style type="text/css">
-
<style type="text/css">
+
* {margin: 0; padding: 0;}
-
.gallerycontainer{
+
-
position: relative;
+
.slider{
-
/*Add a height attribute and set to largest image's height to prevent overlaying*/
+
width: 700px; /*Same as width of the large image*/
 +
position: relative;
 +
/*Instead of height we will use padding*/
 +
/*padding-bottom: -1121px;*/ /*That helps bring the labels down*/
 +
 +
 +
 +
/*Lets add a shadow*/
 +
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
}
-
 
+
-
.thumbnail img{
+
-
border: 1px solid white;
+
/*Last thing remaining is to add transitions*/
-
margin: 0 5px 5px 0;
+
.slider>img{
 +
position: absolute;
 +
left: 5px; top: 5px;
 +
transition: all 0.5s;
}
}
-
 
+
-
.thumbnail:hover{
+
.slider input[name='slide_switch'] {
-
background-color: transparent;
+
display: none;
}
}
-
 
+
-
.thumbnail:hover img{
+
.slider label {
-
border: 1px solid blue;
+
/*Lets add some spacing for the thumbnails*/
 +
margin: 10px 0 0 815px;
 +
border: 3px solid #999;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
     
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
}
}
-
 
+
-
.thumbnail span{ /*CSS for enlarged image*/
+
.slider label img{
-
position: absolute;
+
display: block;
-
background-color: lightyellow;
+
-
padding: 5px;
+
-
left: -1000px;
+
-
border: 1px dashed gray;
+
-
visibility: hidden;
+
-
color: black;
+
-
text-decoration: none;
+
}
}
-
 
+
-
.thumbnail span img{ /*CSS for enlarged image*/
+
/*Time to add the click effects*/
-
border-width: 0;
+
.slider input[name='slide_switch']:checked+label {
-
padding: 2px;
+
border-color: #666;
 +
opacity: 1;
}
}
-
 
+
/*Clicking any thumbnail now should change its opacity(style)*/
-
.thumbnail:hover span{ /*CSS for enlarged image*/
+
/*Time to work on the main images*/
-
visibility: visible;
+
.slider input[name='slide_switch'] ~ img {
-
top: 0;
+
opacity: 0;
-
left: 230px; /*position where enlarged image should offset horizontally */
+
transform: scale(1.1);
-
z-index: 50;
+
}
 +
/*That hides all main images at a 110% size
 +
On click the images will be displayed at normal size to complete the effect
 +
*/
 +
.slider input[name='slide_switch']:checked+label+img {
 +
opacity: 1;
 +
transform: scale(1);
}
}
-
 
</style>
</style>
 +
</html>
 +
<html>
 +
 +
 +
<div class="slider">
 +
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
 +
<label for="id1">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e3/Page1Cloning.jpg
 +
" width="50px" height="63px" />
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2013/e/e3/Page1Cloning.jpg
 +
" width="700px"/>
 +
 +
<!--Lets show the second image by default on page load-->
 +
<input type="radio" name="slide_switch" id="id2" />
 +
<label for="id2">
 +
<img src="https://static.igem.org/mediawiki/2013/9/90/Page2Cloning.jpg
 +
"width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/9/90/Page2Cloning.jpg
 +
" width="700px" />
 +
        <input type="radio" name="slide_switch" id="id3" />
 +
<label for="id3">
 +
<img src="https://static.igem.org/mediawiki/2013/1/1d/Page3Cloning.jpg
 +
" width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/1/1d/Page3Cloning.jpg
 +
"width="700px" />
 +
<input type="radio" name="slide_switch" id="id4" />
 +
        <label for="id4">
 +
<img src="https://static.igem.org/mediawiki/2013/5/52/Page4Cloning.jpg
 +
" width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/5/52/Page4Cloning.jpg
 +
" width="700px" />
 +
 +
<input type="radio" name="slide_switch" id="id5" />
 +
        <label for="id5">
 +
<img src="https://static.igem.org/mediawiki/2013/5/55/Page5Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/5/55/Page5Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id6" />
 +
        <label for="id6">
 +
<img src="https://static.igem.org/mediawiki/2013/0/0b/Page6Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/0/0b/Page6Cloning.jpg
 +
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id7" />
 +
        <label for="id7">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/e/e5/Page7Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id8" />
 +
        <label for="id8">
 +
<img src="https://static.igem.org/mediawiki/2013/1/19/Page8Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/1/19/Page8Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id9" />
 +
        <label for="id9">
 +
<img src="https://static.igem.org/mediawiki/2013/7/75/Page9Cloning.jpg
 +
"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/7/75/Page9Cloning.jpg
 +
" width="700px" />
 +
<input type="radio" name="slide_switch" id="id10" />
 +
        <label for="id10">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e7/Page10Cloning.jpg"  width="50px" height="63px" />
 +
</label>
 +
        <img src="https://static.igem.org/mediawiki/2013/e/e7/Page10Cloning.jpg" width="700px" />
 +
</div>
 +
 +
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
</style>
 
</html>
</html>

Latest revision as of 10:38, 29 September 2013


Planning

Project 'Peptidor' deals with various cloning schemes into E.coli cells. They are made to sense Auto-inducing peptides (AIPs) from the Staphylococcus aureus and then start producing Antimicrobial peptides in order to kill the Staphylococcus aureus. Several bio-bricks from the parts registry were used to clone the E. coli. There are many test constructs made in order to test and characterize each module. Both the detailed cloning strategies related to each module and the final constructs can be viewed in the following links:















































Retrieved from "http://2013.igem.org/Team:TU-Delft/All"