|
|
(10 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{Freiburg/CSS}}
| |
− | {{Freiburg/Menubar}}
| |
− | {{Freiburg/wiki_content_start}}
| |
− | <html>
| |
− | <style>
| |
− | /*========= BEGIN: style for navigation bar ==========*/
| |
− | #policy {
| |
− | background: url(https://static.igem.org/mediawiki/2015/e/e9/Freiburg_icon_policy_active_yellow.png) no-repeat;
| |
− | }
| |
| | | |
− | #policy a {
| |
− | color: #ecdc18;
| |
− | }
| |
− |
| |
− | #runningchip {
| |
− | left: 68.9%;
| |
− | }
| |
− | /*========= END: style for navigation bar ==========*/
| |
− |
| |
− |
| |
− | /* ====================== Define CSS-slider =================== */
| |
− |
| |
− | @media only screen and (max-width: 620px){
| |
− | #slider{
| |
− | display: none;
| |
− | }
| |
− | }
| |
− |
| |
− | @media only screen and (min-width: 621px){
| |
− |
| |
− | /* 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: 0 auto 0;
| |
− | overflow: visible;
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | /* hides everything outside the slider box */
| |
− | #mask {
| |
− | overflow: hidden;
| |
− | height: 340px;
| |
− | }
| |
− |
| |
− | /* initialize position for positioning images outside the slider */
| |
− | #slider ul {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | /* define image properties and position them outside the slider mask */
| |
− | #slider li {
| |
− | width: 600px; /* Width Image */
| |
− | height: 338px; /* Height Image */
| |
− | position: absolute;
| |
− | right: 0; /* 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 */
| |
− |
| |
− | #slider li.firstanimation {
| |
− | -moz-animation: cycle 20s linear infinite;
| |
− | -webkit-animation: cycle 20s linear infinite;
| |
− | }
| |
− |
| |
− | #slider li.secondanimation {
| |
− | -moz-animation: cycletwo 20s linear infinite;
| |
− | -webkit-animation: cycletwo 20s linear infinite;}
| |
− |
| |
− | #slider li.thirdanimation {
| |
− | -moz-animation: cyclethree 20s linear infinite;
| |
− | -webkit-animation: cyclethree 20s linear infinite;}
| |
− |
| |
− | #slider li.fourthanimation {
| |
− | -moz-animation: cyclefour 20s linear infinite;
| |
− | -webkit-animation: cyclefour 20s linear infinite;}
| |
− |
| |
− | /* ANIMATION */
| |
− |
| |
− | /* for firefox & chrome */
| |
− |
| |
− | @-moz-keyframes cycle {
| |
− | 0% { right: 0px; } /* When you start the slide, the first image is already visible */
| |
− | 5% { right: 0px; } /* Original Position */
| |
− | 20% { right: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
| |
− | 25% { right: 605px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
| |
− | 26% { right: -605px; opacity: 0; z-index: -1; } /* Return to Original Position */
| |
− | 90% { right: -605px; opacity: 0; z-index: 0; }
| |
− | 95% { right: -605px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
| |
− | 100%{ right: 0px; opacity: 1; }
| |
− | }
| |
− |
| |
− | @-moz-keyframes cycletwo {
| |
− | 0% { right: -605px; opacity: 0; } /* Original Position */
| |
− | 20% { right: -605px; opacity: 0; }/* Starts moving after 16% to this position */
| |
− | 25% { right: 0px; opacity: 1; }
| |
− | 30% { right: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
| |
− | 45% { right: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
| |
− | 50% { right: 605px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
| |
− | 51% { right: -605px; opacity: 0; z-index: -1; } /* Return to Original Position */
| |
− | 100%{ right: -605px; opacity: 0; z-index: -1; }
| |
− | }
| |
− |
| |
− | @-moz-keyframes cyclethree {
| |
− | 0% { right: -605px; opacity: 0; }
| |
− | 45% { right: -605px; opacity: 0; }
| |
− | 50% { right: 0px; opacity: 1; }
| |
− | 55% { right: 0px; opacity: 1; }
| |
− | 70% { right: 0px; opacity: 1; }
| |
− | 75% { right: 605px; opacity: 0; z-index: 0; }
| |
− | 76% { right: -605px; opacity: 0; z-index: -1; }
| |
− | 100%{ right: -605px; opacity: 0; z-index: -1; }
| |
− | }
| |
− |
| |
− | @-moz-keyframes cyclefour {
| |
− | 0% { right: -605px; opacity: 0; }
| |
− | 70% { right: -605px; opacity: 0; }
| |
− | 75% { right: 0px; opacity: 1; }
| |
− | 80% { right: 0px; opacity: 1; }
| |
− | 95% { right: 0px; opacity: 1; z-index: 0; }
| |
− | 100%{ right: 605px; opacity: 0; z-index: 0; }
| |
− | }
| |
− |
| |
− |
| |
− | /* once again for Safari */
| |
− | @-webkit-keyframes cycle {
| |
− | 0% { right: 0px; } /* When you start the slide, the first image is already visible */
| |
− | 5% { right: 0px; } /* Original Position */
| |
− | 20% { right: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
| |
− | 25% { right: 605px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
| |
− | 26% { right: -605px; opacity: 0; z-index: -1; } /* Return to Original Position */
| |
− | 90% { right: -605px; opacity: 0; z-index: 0; }
| |
− | 95% { right: -605px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
| |
− | 100%{ right: 0px; opacity: 1; }
| |
− | }
| |
− |
| |
− | @-webkit-keyframes cycletwo {
| |
− | 0% { right: -605px; opacity: 0; } /* Original Position */
| |
− | 20% { right: -605px; opacity: 0; }/* Starts moving after 16% to this position */
| |
− | 25% { right: 0px; opacity: 1; }
| |
− | 30% { right: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
| |
− | 45% { right: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
| |
− | 50% { right: 605px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
| |
− | 51% { right: -605px; opacity: 0; z-index: -1; } /* Return to Original Position */
| |
− | 100%{ right: -605px; opacity: 0; z-index: -1; }
| |
− | }
| |
− |
| |
− | @-webkit-keyframes cyclethree {
| |
− | 0% { right: -605px; opacity: 0; }
| |
− | 45% { right: -605px; opacity: 0; }
| |
− | 50% { right: 0px; opacity: 1; }
| |
− | 55% { right: 0px; opacity: 1; }
| |
− | 70% { right: 0px; opacity: 1; }
| |
− | 75% { right: 605px; opacity: 0; z-index: 0; }
| |
− | 76% { right: -605px; opacity: 0; z-index: -1; }
| |
− | 100%{ right: -605px; opacity: 0; z-index: -1; }
| |
− | }
| |
− |
| |
− | @-webkit-keyframes cyclefour {
| |
− | 0% { right: -605px; opacity: 0; }
| |
− | 70% { right: -605px; opacity: 0; }
| |
− | 75% { right: 0px; opacity: 1; }
| |
− | 80% { right: 0px; opacity: 1; }
| |
− | 95% { right: 0px; opacity: 1; z-index: 0; }
| |
− | 100%{ right: 605px; opacity: 0; z-index: 0; }
| |
− | }
| |
− |
| |
− | /* PROGRESS BAR */
| |
− |
| |
− | .progress-bar {
| |
− | position: relative;
| |
− | top: -10px;
| |
− | width: 680px;
| |
− | height: 5px;
| |
− | background: #000;
| |
− | -moz-animation: fullexpand 20s ease-out infinite;
| |
− | -webkit-animation: fullexpand 20s ease-out infinite;
| |
− | }
| |
− |
| |
− | /* ANIMATION BAR */
| |
− |
| |
− | @-moz-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; }
| |
− | }
| |
− |
| |
− | @-webkit-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; }
| |
− | }
| |
− |
| |
− | /* TOOLTIP */
| |
− |
| |
− | #slider .tooltip {
| |
− | background: rgba(0,0,0,0.7);
| |
− | z-index: 9000;
| |
− | width: 300px;
| |
− | height: 60px;
| |
− | position: relative;
| |
− | top: 0;
| |
− | -moz-transition: all 0.3s ease-in-out;
| |
− | -webkit-transition: all 0.3s ease-in-out;
| |
− | }
| |
− |
| |
− | #slider .tooltip h1 {
| |
− | color: #fff;
| |
− | font-size: 24px;
| |
− | font-weight: 300;
| |
− | line-height: 60px;
| |
− | padding: 0 0 0 10px;
| |
− | }
| |
− |
| |
− | #slider li#first:hover .tooltip,
| |
− | #slider li#second:hover .tooltip,
| |
− | #slider li#third:hover .tooltip,
| |
− | #slider li#fourth:hover .tooltip {
| |
− | top: -120px;
| |
− | }
| |
− |
| |
− | /* end of media query - dont delete */
| |
− | }
| |
− |
| |
− | /* =================== END of CSS-slider =================== */
| |
− |
| |
− | #noteblock1 {
| |
− | background-image: url(https://static.igem.org/mediawiki/2015/4/4b/Freiburg_noteblock.png);
| |
− | background-position: center;
| |
− | margin: 0 auto;
| |
− | height: 330px;
| |
− | padding-top: 4em;
| |
− | padding-left: 2.5em;
| |
− | padding-right: 2.5em;
| |
− | width: 66%;
| |
− | }
| |
− |
| |
− | #noteblock2 {
| |
− | background-image: url(https://static.igem.org/mediawiki/2015/6/62/Freiburg_noteblock3.png);
| |
− | background-position: center;
| |
− | margin: 0 auto;
| |
− | height: 550px;
| |
− | padding-top: 4em;
| |
− | padding-left: 2.5em;
| |
− | padding-right: 2.5em;
| |
− | width: 66%;
| |
− | }
| |
− |
| |
− | .recipe {
| |
− | list-style-image: url(https://static.igem.org/mediawiki/2015/e/e3/List_icon_circle.png);
| |
− | }
| |
− |
| |
− | .recipe ul {
| |
− | list-style: disc;
| |
− | font-size: 80%;
| |
− | padding-left: 32%;
| |
− | text-align: left;
| |
− | margin-bottom: 1em;
| |
− | }
| |
− |
| |
− | .recipe p {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | }
| |
− |
| |
− | /*=================== END of Stylesheet ====================*/
| |
− | </style>
| |
− |
| |
− | <!--========= BEGIN: GoBack button ==========-->
| |
− | <div class="button_back">
| |
− | <a style="color:#FFF" href="https://2015.igem.org/Team:Freiburg/Practices"> << Back</a>
| |
− | </div>
| |
− | <!--========= END: GoBack button ==========-->
| |
− |
| |
− |
| |
− | <div class="content_box">
| |
− | <h1>Freiburg Science Fair - Inspire the public for science</h1>
| |
− | <div class="image_box right">
| |
− | <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>
| |
− | <p>
| |
− | <em>Excited children, curious tourists and the magic of DNA wrapped around a piece of wood</em>
| |
− | </p>
| |
− | <p>
| |
− | On a sunny weekend in July, our team was offered the opportunity to inspire the public for synthetic biology at the local annual science fair.
| |
− | In the heart of Freiburg's old town center we explained the key of life: DNA - the genetic information of each and every cell.
| |
− | </p>
| |
− | </div>
| |
− |
| |
− | <div class="floatbox left style="overflow:hidden">
| |
− | <h2>Isolating DNA</h2>
| |
− | <p>
| |
− | While giving curious visitors the chance to extract DNA from bananas and tomatoes, we aimed at illustrating the importance and power of this small molecule.
| |
− | People of all ages and different backgrounds were fascinated by the simple experiment at our iGEM booth. Attracted by flasks with colourful liquids everyone passing by took the time not only to visualize DNA but also to learn something about our project.
| |
− | </p>
| |
− | </div>
| |
− |
| |
− | <div class="floatbox right">
| |
− | <h2>The DiaCHIP Game</h2>
| |
− | <p>
| |
− | For our DiaCHIP-Game we broke down our diagnostic device into a wooden board with magnets. A falcon containing paperclibs represents the patient blood sample. Children as well as adults could try out the basic principle of our diagnostic tool: antigen-antibody-interaction. This binding event was mirrored by the magnets and paperclibs. By obtaining different signals of the attraction on several wooden boards the wanna-be doctors just needed to match the signal to the corresponding antigen from a list of several diseases. With the successful diagnosis the doctors were released with gummy bears.
| |
− | </p>
| |
− | </div>
| |
− |
| |
− | <div>
| |
− | <h2>On-stage Interview</h2>
| |
− | <p>
| |
− | Both, the game explaining our iGEM project and the simple experimental introduction to genetics were very popular among the visitors. Since our booth was constantly overcrowded, we were rewarded with an on-stage interview right in front of the main entrance of the famous cathedral of Freiburg. We appreciated the chance to advertise iGEM and our project.
| |
− | </p>
| |
− | </div>
| |
− |
| |
− | </div>
| |
− |
| |
− | <div class="content_box">
| |
− | <h2>Extracting DNA from Fruits</h2>
| |
− | <p>
| |
− | Here we provide a simple protocol for DNA isolation from fruits:
| |
− | </p>
| |
− |
| |
− | <div class="floatbox left">
| |
− | <div id="noteblock1">
| |
− | <em>Materials needed:</em>
| |
− | <ul class="recipe">
| |
− | <li><p style:"float:left"> Lysis buffer:</p>
| |
− | <ul>
| |
− | <li> 5 g NaCl </li>
| |
− | <li> 50 ml dishwashing detergent </li>
| |
− | <li> 450 ml Water </li>
| |
− | </ul>
| |
− | <li> 70% - 99% ethanol (ice cold) </li>
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="floatbox right">
| |
− | <div id="noteblock2">
| |
− | <em>Workflow:</em>
| |
− | <ul class="recipe">
| |
− | <li> smash 1/2 banana with a fork within a beaker </li>
| |
− | <li> add ca. 25 ml of lysis buffer and stir until you get a more or less homogenous solution </li>
| |
− | <li> filter the solution (paper filter) into a new beaker to get rid of the crude cell fragments </li>
| |
− | <li> put 1-2 ml of the filtered solution into a test-tube </li>
| |
− | <li> slowly pipette the ice cold ethanol into the test-tube </li>
| |
− | <li> two phases of alcohol and water are formed with precipitated DNA being visible in the alcohol phase </li>
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | </div>
| |
− | </html>
| |
− | {{Freiburg/wiki_content_end}}
| |