Template:ETHZ Basel10 Teaser

From 2010.igem.org

(Difference between revisions)
 
(27 intermediate revisions not shown)
Line 8: Line 8:
display: block;
display: block;
color: #fff;
color: #fff;
 +
text-decoration: none;
 +
}
}
:hover.teaserlink {
:hover.teaserlink {
-
color: #89D194;
 
text-decoration: none;
text-decoration: none;
}
}
Line 26: Line 27:
/*--Main Image Preview--*/
/*--Main Image Preview--*/
.main_image {
.main_image {
-
width: 598px; height: 456px;
+
width: 598px; height: 502px;
float: left;
float: left;
background: #333;
background: #333;
border: 1px solid #ccc;
border: 1px solid #ccc;
-
position: relative;
 
-
overflow: hidden;
 
color: #fff;
color: #fff;
}
}
Line 55: Line 54:
.main_image .desc{
.main_image .desc{
display: block;
display: block;
-
position: absolute;
+
position: relative;
-
bottom: 0; left: 0;
+
width: 100%;
width: 100%;
-
display: none;
 
}
}
.main_image .block{
.main_image .block{
-
opacity: 0.85;
 
width: 100%;
width: 100%;
-
background: #111;
+
height: 169px;
-
background-image: url()
+
background: #000;
-
border-top: 1px solid #000;
+
border-top: 1px solid #ccc;
 +
border-bottom: 1px solid #ccc;
}
}
Line 94: Line 91:
border-right: 1px solid #ccc;
border-right: 1px solid #ccc;
}
}
-
.image_thumb ul li:hover {
+
.image_thumb ul li:hover, .image_thumb ul li.active {
background: #B6F3BF;
background: #B6F3BF;
cursor: pointer;
cursor: pointer;
Line 114: Line 111:
</style>
</style>
<script type="text/javascript">
<script type="text/javascript">
 +
// Main function
$(document).ready(function() {
$(document).ready(function() {
// Hide all main_image, until one is activated.
// Hide all main_image, until one is activated.
$(".main_image").hide();
$(".main_image").hide();
// Activate first banner
// Activate first banner
-
$("#motivation").show();
+
$(".main_image:first").show();
 +
 
 +
//Click and Hover events for thumbnail list
 +
$(".image_thumb ul li:first").addClass('active');
 +
$(".image_thumb ul li").hover(function(){
 +
 +
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
 +
$(this).addClass('active');  //add class of 'active' on this list only
 +
return false;
 +
 +
}) .hover(function(){
 +
$(this).addClass('hover');
 +
}, function() {
 +
$(this).removeClass('hover');
 +
});
});
});
Line 134: Line 146:
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation" class="teaserlink">
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
<div class="block">
<div class="block">
<h2>Motivation & Project Idea</h2>
<h2>Motivation & Project Idea</h2>
<small>What is E. lemming?</small>
<small>What is E. lemming?</small>
-
<p>E. lemming is the 2010 iGEM project of ETH Zurich. We intend to control movement of a single <i>E. coli</i> bacterium by hijacking chemotaxis and monitoring of position and direction of the bacterium by image processing algorithms, which are linked to a controller device. Find out more about our motivation and project idea!</p>
+
<p>E. lemming is the 2010 iGEM project of ETH Zurich. We control the movement of a single genetically modified <i>E. coli</i> bacterium by hijacking chemotaxis. Position and direction of the bacterium is monitored by image processing algorithms, which are linked to a controller device. Find out more about our motivation and project idea!</p>
</div>
</div>
</div>
</div>
Line 146: Line 158:
<div class="main_image" id="movie">
<div class="main_image" id="movie">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie" class="teaserlink">
-
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
+
<img src="https://static.igem.org/mediawiki/2010/e/e8/ETHZ_Basel_teaser_movie.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
<div class="block">
<div class="block">
<h2>E. lemming - The Movie</h2>
<h2>E. lemming - The Movie</h2>
Line 160: Line 172:
<a href="https://2010.igem.org/Team:ETHZ_Basel/Biology" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Biology" class="teaserlink">
<img src="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png">
<img src="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
<div class="block">
<div class="block">
<h2>Biology & Wet Laboratory</h2>
<h2>Biology & Wet Laboratory</h2>
<small>How is it implemented?</small>
<small>How is it implemented?</small>
-
<p>By coupling proteins of the chemotaxis pathway to a synthetic light-sensitive spatial localization system, their activity can be controlled reversibly. To find out more about our project on the molecular level and to find information regarding the biological implementation and an overview about the conducted wet laboratory experiments, visit this section.</p>
+
<p>By coupling proteins of the chemotaxis pathway to a light-sensitive spatial localization system, the chemotaxis activity can be controlled reversibly. To find out more about our project on the molecular level and its biological implementation, visit this section.</p>
</div>
</div>
</div>
</div>
Line 173: Line 185:
<a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">
<img src="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png">
<img src="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
<div class="block">
<div class="block">
<h2>Mathematical Modeling</h2>
<h2>Mathematical Modeling</h2>
<small>How does modeling help?</small>
<small>How does modeling help?</small>
-
<p>Mathematical modeling supports analysis of biological systems since the advent of synthetic biology. Find out, how this not only supported wet laboratory experiments by providing time and effort alleviating network structure and experimental setup selection, but also provided a test bench for the information processing part.</p>
+
<p>Mathematical modeling supports analysis of biological systems since the advent of synthetic biology. Find out, how this supported wet laboratory experiments by providing time and effort alleviating network structure and experimental design selection. In addition, the combined model was a perfect test bench for information processing.</p>
</div>
</div>
</div>
</div>
Line 186: Line 198:
<a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing" class="teaserlink">
<img src="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png">
<img src="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
<div class="block">
<div class="block">
<h2>Information Processing</h2>
<h2>Information Processing</h2>
<small>How is it controlled?</small>
<small>How is it controlled?</small>
-
<p>Implementation of a comprehensive information processing workflow for controlling E. lemming was achieved by combination of microscopy, image processing, cell detection and a controller. Find out more about how this not only created E. lemming but also created a new application for synthetic biology: Gaming!</p>
+
<p>Implementation of a comprehensive information processing workflow for controlling E. lemming was achieved by combination of microscopy, image processing, cell detection and a controller. Find out more about how this not only created E. lemming, but also created a new application for synthetic biology: Gaming!</p>
</div>
</div>
</div>
</div>
Line 199: Line 211:
<a href="https://2010.igem.org/Team:ETHZ_Basel/Achievements" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Achievements" class="teaserlink">
<img src="https://static.igem.org/mediawiki/2010/9/90/ETHZ_Basel_teaser_achievements.png">
<img src="https://static.igem.org/mediawiki/2010/9/90/ETHZ_Basel_teaser_achievements.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
<div class="block">
<div class="block">
<h2>Achievements</h2>
<h2>Achievements</h2>
<small>What was achieved?</small>
<small>What was achieved?</small>
 +
<p>See videos of E. lemming in action! We created a BioBrick and a Matlab Toolkit, which can be used for similar projects. Learn more about our comprehensive systems design and systems implementation approaches, which were necessary for the success of E. lemming.</p>
 +
</div>
 +
</div>
 +
</a>
 +
</div>
 +
<div class="main_image" id="team">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Team" class="teaserlink">
 +
<img src="https://static.igem.org/mediawiki/2010/b/b1/ETHZ_Basel_teaser_team.png">
 +
<div class="desc">
 +
<div class="block">
 +
<h2>Team</h2>
 +
<small>Who is behind E. lemming?</small>
-
<p>We created for E. lemming a BioBrick and a Matlab Toolkit. Find out, how this tools can be used for similar projects and learn more about the unique interworking between computer science and biology, which was necessary for the success of E. lemming.</p>
+
<p>Find out who created E. lemming and learn about the different backgrounds of the people who tried to achieve these common goals: Having a great experience and going crazy with E. lemming!</p>
</div>
</div>
</div>
</div>
Line 219: Line 243:
</li>
</li>
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie'" onmouseover="switchbanner('#movie')">
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie'" onmouseover="switchbanner('#movie')">
-
<img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png">
+
<img src="https://static.igem.org/mediawiki/2010/4/4f/ETHZ_Basel_teaser_movie_thumb.png">
<div class="block">
<div class="block">
<h2>E. lemming - The Movie</h2>
<h2>E. lemming - The Movie</h2>
-
<small>Watch a short animation of the project idea!</small>
+
<small>Watch a short animation!</small>
</div>
</div>
</li>
</li>
Line 251: Line 275:
<h2>Achievements</h2>
<h2>Achievements</h2>
<small>What was achieved?</small>
<small>What was achieved?</small>
 +
</div>
 +
</li>
 +
<li class=""  onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Team'" onmouseover="switchbanner('#team')">
 +
<img src="https://static.igem.org/mediawiki/2010/7/76/ETHZ_Basel_teaser_team_thumb.png">
 +
<div class="block">
 +
<h2>Team</h2>
 +
<small>Who is behind E. lemming?</small>
</div>
</div>
</li>
</li>

Latest revision as of 13:18, 27 October 2010

  • Motivation & Project Idea

    What is E. lemming?

  • E. lemming - The Movie

    Watch a short animation!

  • Biology & Wet Laboratory

    How is it implemented?

  • Mathematical Modeling

    How does modeling help?

  • Information Processing

    How is it controlled?

  • Achievements

    What was achieved?

  • Team

    Who is behind E. lemming?

Retrieved from "http://2010.igem.org/Template:ETHZ_Basel10_Teaser"