Difference between revisions of "Team:Freiburg/PaP/ScienceFair"

Line 7: Line 7:
  
 
/* ====================== Define CSS-slider =================== */
 
/* ====================== Define CSS-slider =================== */
−
.image_box{
+
 
−
    overflow: hidden;
+
 
 +
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
 +
 
 +
#slider {
 +
  background: #000;
 +
  box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
 +
  height: 338px;
 +
  width: 600px;
 +
  margin: 40px auto 0;
 +
  overflow: visible;
 +
  position: relative;
 
}
 
}
  
−
/* define slider box */
+
/* hides everything outside the slider box */
−
div#slider {
+
#mask {
−
    width: 60%;
+
  overflow: hidden;
−
    max-width: 1000px;
+
  height: 340px;
−
    overflow: hidden;
+
−
    margin: 0 auto;
+
−
    border: 3px solid #c1002a;
+
−
    border-radius: 30px 60px;
+
 
}
 
}
  
−
div#slider figure{
+
/* initialize position for positioning images outside the slider */
−
    position: relative;
+
#slider ul {
−
    width: 500%;
+
  margin: 0;
−
    margin: 0;
+
  padding: 0;
−
    padding: 0;
+
  position: relative;
−
    font-size: 0;
+
−
    text-align: left;
+
 
}
 
}
  
−
div#slider figure img{
+
/* define image properties and position them outside the slider mask */
−
    width: 20%;
+
#slider li {
−
    height: auto;
+
  width: 600px; /* Width Image */
−
    float: left;
+
  height: 338px; /* Height Image */
 +
  position: absolute;
 +
  top: -345px; /* Original Position - Outside of the Slider */
 +
  list-style: none;
 
}
 
}
 +
/* scale the images s.t. they fit into the mask */
 +
#slider li a img{
 +
width: 600px;
 +
height: 338px;
 +
}
 +
 +
/* DEFINITIONS */
 +
/* for each image an own cycle has to be created as they are have to cycle all together */
  
−
/* animate slider */
+
#slider li.firstanimation {
−
@keyframes slidy {  
+
  animation: cycle 20s linear infinite;
−
    0%  { left: 0%; }
+
−
    20% { left: 0%; }
+
−
    25% { left: -100%; }
+
−
    45% { left: -100%; }
+
−
    50% { left: -200%; }
+
−
    70% { left: -200%; }
+
−
    75% { left: -300%; }
+
−
    95% { left: -300%; }
+
−
    100% { left: -400%; }
+
 
}
 
}
  
−
/* Chrome, Safari, Opera */
+
#slider li.secondanimation {
−
@-webkit-keyframes slidy {  
+
  animation: cycletwo 20s linear infinite;
−
    0%  { left: 0%; }
+
−
    20% { left: 0%; }
+
−
    25% { left: -100%; }
+
−
    45% { left: -100%; }
+
−
    50% { left: -200%; }
+
−
    70% { left: -200%; }
+
−
    75% { left: -300%; }
+
−
    95% { left: -300%; }
+
−
    100% { left: -400%; }
+
 
}
 
}
  
−
div#slider figure {
+
#slider li.thirdanimation {
−
    left: 0;
+
  animation: cyclethree 20s linear infinite;
−
    text-align: left;
+
−
    animation: 30s slidy infinite;
+
 
}
 
}
  
−
/* ##### define images with caption ##### */
+
#slider li.fourthanimation {
 +
  animation: cyclefour 20s linear infinite;
 +
}
 +
 
 +
/* ANIMATION */
 +
 
 +
@keyframes cycle {
 +
  0%  { top: 0px; } /* When you start the slide, the first image is already visible */
 +
  5%  { top: 0px; } /* Original Position */
 +
  20% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
 +
  25% { top: 345px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
 +
  26% { top: -345px; opacity: 0; z-index: -1; } /* Return to Original Position */
 +
  90% { top: -345px; opacity: 0; z-index: 0; }
 +
  95% { top: -345px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
 +
  100%{ top: 0px; opacity: 1; }
 +
}
 +
 
 +
@keyframes cycletwo {
 +
  0%  { top: -345px; opacity: 0; } /* Original Position */
 +
  20% { top: -345px; opacity: 0; }/* Starts moving after 16% to this position */
 +
  25% { top: 0px; opacity: 1; }
 +
  30% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
 +
  45% { top: 0px; opacity: 1; z-index: 0; }  /* From 24% to 36 % = for 3 seconds the image is visible */
 +
  50% { top: 345px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
 +
  51% { top: -345px; opacity: 0; z-index: -1; }  /* Return to Original Position */
 +
  100%{ top: -345px; opacity: 0; z-index: -1; }
 +
}
 +
 
 +
@keyframes cyclethree {
 +
  0%  { top: -345px; opacity: 0; }
 +
  45% { top: -345px; opacity: 0; }
 +
  50% { top: 0px; opacity: 1; }
 +
  55% { top: 0px; opacity: 1; }
 +
  70% { top: 0px; opacity: 1; }
 +
  75% { top: 345px; opacity: 0; z-index: 0; }
 +
  76% { top: -345px; opacity: 0; z-index: -1; }
 +
  100%{ top: -345px; opacity: 0; z-index: -1; }
 +
}
 +
 
 +
@keyframes cyclefour {
 +
  0%  { top: -325px; opacity: 0; }
 +
  70% { top: -325px; opacity: 0; }
 +
  75% { top: 0px; opacity: 1; }
 +
  80% { top: 0px; opacity: 1; }
 +
  95% { top: 0px; opacity: 1; z-index: 0; }
 +
  100%{ top: 325px; opacity: 0; z-index: 0; }
 +
}
 +
 
 +
/* PROGRESS BAR */
 +
 
 +
.progress-bar {
 +
  position: relative;
 +
  top: -10px;
 +
  width: 680px;
 +
  height: 5px;
 +
  background: #000;
 +
  animation: fullexpand 20s ease-out infinite;
 +
}
 +
 
 +
/* ANIMATION BAR */
 +
 
 +
@keyframes fullexpand {
 +
  /* In these keyframes, the progress-bar is stationary */
 +
  0%, 25%, 50%, 75%, 100% { width: 0%; opacity: 0; }
 +
 
 +
  /* In these keyframes, the progress-bar starts to come alive */
 +
  5%, 30%, 55%, 80% { width: 0%; opacity: 0.3; }
 +
 
 +
  /* In these keyframes, the progress-bar moves forward for 3 seconds */
 +
  20%, 45%, 70%, 95% { width: 100%; opacity: 0.7; }
 +
 
 +
  /* In these keyframes, the progress-bar has finished his path */
 +
  21%, 46%, 71%, 96% { width: 100%; opacity: 0.3; }
 +
 
 +
  /* In these keyframes, the progress-bar will disappear and then resume the cycle */
 +
  22%, 47%, 72%, 97% { width: 100%; opacity: 0; }
 +
}
 +
 
 +
#slider .tooltip {
 +
  background: rgba(0,0,0,0.7);
 +
  z-index: 9000;
 +
  width: 300px;
 +
  height: 60px;
 +
  position: relative;
 +
  bottom: 120px;
 +
  left: -320px;
 +
}
 +
 
 +
#slider .tooltip h1 {
 +
  color: #fff;
 +
  font-size: 24px;
 +
  font-weight: 300;
 +
  line-height: 60px;
 +
  padding: 0 0 0 10px;
 +
}
 +
 
 +
#slider .tooltip {
 +
  transition: all 0.3s ease-in-out;
 +
}
  
−
.flexbox{
+
#slider li#first:hover .tooltip,
−
    display: flex;
+
#slider li#second:hover .tooltip,
−
    flex-direction: row;
+
#slider li#third:hover .tooltip,
−
    margin: 10px 0;
+
#slider li#fourth:hover .tooltip {
 +
  left: 0;
 
}
 
}
  
Line 84: Line 178:
 
<html>
 
<html>
 
<!-- Labjournal content goes in here -->
 
<!-- Labjournal content goes in here -->
−
+
 +
<div class="image_box">
 +
 
 +
<div class="container">
 +
  <div id="content-slider">
 +
      <div id="slider">  <!-- Slider container -->
 +
        <div id="mask">  <!-- Mask -->
 +
 
 +
        <ul>
 +
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 +
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/f/fb/Freiburg_files-2015-07-11_12.35.40.jpg" alt="Cougar"/> </a>
 +
        <div class="tooltip"> <h1>Preparations</h1> </div>
 +
        </li>
 +
 
 +
        <li id="second" class="secondanimation">
 +
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/c/cb/Freiburg_files-2015-07-10_17.50.59.jpg" alt="Lions"/> </a>
 +
        <div class="tooltip"> <h1>Explaining</h1> </div>
 +
        </li>
 +
 
 +
        <li id="third" class="thirdanimation">
 +
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/8/8a/Freiburg_files-2015-07-10_15.47.37.jpg" alt="Snowalker"/> </a>
 +
        <div class="tooltip"> <h1>Take a look at DNA</h1> </div>
 +
        </li>
 +
 
 +
        <li id="fourth" class="fourthanimation">
 +
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_files-img_0353_kopie.jpg" alt="Howling"/> </a>
 +
        <div class="tooltip"> <h1>Presentation</h1> </div>
 +
        </li>
 +
 
 +
        </div>  <!-- End Mask -->
 +
        <div class="progress-bar"></div>  <!-- Progress Bar -->
 +
      </div>  <!-- End Slider Container -->
 +
  </div>
 +
</div>
 +
 
 +
</div>
 +
 
<div class="content_box">
 
<div class="content_box">
 
<h1 class="sectionedit1">Freiburg Science Fair - Inspire the public for science</h1>
 
<h1 class="sectionedit1">Freiburg Science Fair - Inspire the public for science</h1>
Line 126: Line 256:
 
</div>
 
</div>
  
−
<div class="image_box">
 
  
−
<div id="slider">
 
−
<figure>
 
−
<img src="https://static.igem.org/mediawiki/2015/f/fb/Freiburg_files-2015-07-11_12.35.40.jpg" alt>
 
−
<img src="https://static.igem.org/mediawiki/2015/c/cb/Freiburg_files-2015-07-10_17.50.59.jpg" alt>
 
−
<img src="https://static.igem.org/mediawiki/2015/8/8a/Freiburg_files-2015-07-10_15.47.37.jpg" alt>
 
−
<img src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_files-img_0353_kopie.jpg" alt>
 
−
<img src="https://static.igem.org/mediawiki/2015/f/fb/Freiburg_files-2015-07-11_12.35.40.jpg" alt>
 
−
</figure>
 
−
</div>
 
−
 
−
<!---
 
−
<a class="media" href="https://static.igem.org/mediawiki/2015/f/fb/Freiburg_files-2015-07-11_12.35.40.jpg" title="files:2015-07-11_12.35.40.jpg"><img alt="" class="media" src="https://static.igem.org/mediawiki/2015/f/fb/Freiburg_files-2015-07-11_12.35.40.jpg" width="300"/></a><a class="media" href="https://static.igem.org/mediawiki/2015/c/cb/Freiburg_files-2015-07-10_17.50.59.jpg" title="files:2015-07-10_17.50.59.jpg"><img alt="" class="media" src="https://static.igem.org/mediawiki/2015/c/cb/Freiburg_files-2015-07-10_17.50.59.jpg" width="300"/></a><a class="media" href="https://static.igem.org/mediawiki/2015/8/8a/Freiburg_files-2015-07-10_15.47.37.jpg" title="files:2015-07-10_15.47.37.jpg"><img alt="" class="media" src="https://static.igem.org/mediawiki/2015/8/8a/Freiburg_files-2015-07-10_15.47.37.jpg" width="300"/></a><br/>
 
−
<a class="media" href="https://static.igem.org/mediawiki/2015/2/24/Freiburg_files-img_0353_kopie.jpg" title="files:img_0353_kopie.jpg"><img alt="" class="media" src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_files-img_0353_kopie.jpg" width="300"/></a><a class="media" href="https://static.igem.org/mediawiki/2015/5/5d/Freiburg_files-wissenschaftsmarkt.jpg" title="files:wissenschaftsmarkt.jpg"><img alt="" class="media" src="https://static.igem.org/mediawiki/2015/5/5d/Freiburg_files-wissenschaftsmarkt.jpg" width="200"/></a><br/>
 
−
</p>
 
−
<div class="tags"><span>
 
−
<a class="wikilink1" href="/igem2015/doku.php?id=tag:info&amp;do=showtag&amp;tag=info" rel="tag" title="tag:info">info</a>
 
−
</span></div>
 
−
</div>
 
−
--->
 
 
</html>
 
</html>
 
<!-- Labjournal content ends here -->
 
<!-- Labjournal content ends here -->
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Revision as of 10:25, 31 August 2015

""


  • Cougar

    Preparations

  • Lions

    Explaining

  • Snowalker

    Take a look at DNA

  • Howling

    Presentation

Freiburg Science Fair - Inspire the public for science

This year we had the great opportunity to inspire the public for biology at the science fair that took place the central square in Freiburg, called the „Münsterplatz“. We tried to explain in a simple way the key of our lifes: DNA - the genetic information. One of our goals was to bring people in touch with this molecule. On two hot summer days in July, our team helped curious visitors to extract DNA from bananas and tomatos. Children and elderly people were overwhelmed by the simple but fascinating experiment at our iGEM booth. We offered an easy but highly visual experiment of showing the hidden world of genetics. We also saw it as our duty to spread the idea of the iGEM competition and to present our project -the DiaCHIP- to the visitors of the science fair. Therefore we had an interview on stage together with a local radio station. We used the chance to inform people on synthetic biology and about iGEM in particular.

Here we provide a simple protocol for DNA isolation from fruits:

Material:

  • Lysis buffer: 5 g NaCl, 50 ml dishwashing detergent (the use of different colored dishwashing detergent fascinates the experimenter), 450 ml Water
  • 70% - 99% ethanol (ice cold)

Workflow:

  • smash one half of a banana with a fork within a beaker
  • add approximately 25 ml of Lysis buffer and stir the solution with the fork, so that you get a more or less homogenous solution
  • filter the solution through a paper filter into a new beaker to get rid of the crude cell fragments
  • put 1-2 ml of the filtered solution into a test-tube
  • slowly pipette the ice cold ethanol into the test-tube
  • two phases of alcohol and water are formed with precipitated DNA being visible in the alcohol phase