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

Line 1: Line 1:
−
{{Freiburg/CSS}}
 
−
{{Freiburg/Menubar}}
 
−
{{Freiburg/wiki_content_start}}
 
−
 
 
<html>
 
<html>
 
<style>
 
<style>
  
−
/* ====================== Define CSS-slider =================== */
 
  
 +
/* ============= Resetting css coming from wiki itself ============= */
 +
body {
 +
    font: sans-serif;
 +
    color: #000;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    background-color: #AAA;
 +
line-height: 1.8;
 +
}
  
−
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
+
a {
 +
    color: #002BB8;
 +
    text-decoration: none;
 +
    background: transparent none repeat scroll 0% 0%;
 +
}
  
−
#slider {
+
p {
−
  background: #000;
+
    margin: 0.4em 0px 0.5em;
−
  box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
+
    line-height: 1.5em;
−
  height: 338px;
+
−
  width: 600px;
+
−
  margin: 40px auto 0;
+
−
  overflow: visible;
+
−
  position: relative;
+
 
}
 
}
  
−
/* hides everything outside the slider box */
+
#globalWrapper {
−
#mask {
+
    position: absolute;
−
  overflow: hidden;
+
    font-size: 150%;
−
  height: 340px;
+
    width: 100%;
 +
    margin: 0px;
 +
    padding: 0px 0px 0px;
 
}
 
}
  
−
/* initialize position for positioning images outside the slider */
+
#mainContainer {
−
#slider ul {
+
    margin: 0;
−
  margin: 0;
+
    width: 100%;
−
  padding: 0;
+
−
  position: relative;
+
 
}
 
}
  
−
/* define image properties and position them outside the slider mask */
+
#top_menu_under {
−
#slider li {
+
    position: relative;
−
  width: 600px; /* Width Image */
+
    width: 100%;
−
  height: 338px; /* Height Image */
+
    height: 16px;
−
  position: absolute;
+
    border-bottom: 2px solid #000;
−
  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{
+
#top_menu_14 {
−
  width: 600px;
+
    position: fixed;
−
  height: 338px;
+
    width: 100%;
 +
    top: 0px;
 +
    left: 0px;
 +
    height: 16px;
 +
    background-color: #383838;
 +
    border-bottom: 2px solid #000;
 +
    z-index: 9999;
 
}
 
}
  
−
/* DEFINITIONS */
 
−
/* for each image an own cycle has to be created as they are have to cycle all together */
 
  
−
#slider li.firstanimation {
+
#top_menu_inside {
−
  -moz-animation: cycle 20s linear infinite;
+
    display: block;
−
  -webkit-animation: cycle 20s linear infinite;
+
    position: relative;
 +
    width: 900px;
 +
    height: 100%;
 +
    margin: 0px auto;
 +
    padding: 0px 10px;
 +
    border-left: 1px solid #C8C8C8;
 +
    border-right: 1px solid #C8C8C8;
 +
    font-family: "arial",sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 400;
 +
    color: #FFF;
 
}
 
}
  
−
#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 {
+
#content {
−
  -moz-animation: cyclefour 20s linear infinite;
+
    position: relative;
−
   -webkit-animation: cyclefour 20s linear infinite;}
+
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
    background: #FFF none repeat scroll 0% 0%;
 +
    color: #000;
 +
    border-left: 0;
 +
    border-right: 0;
 +
   /* line-height: 0; */
 +
    z-index: 2;
  
−
/* ANIMATION */
 
  
−
/* for firefox & chrome */
+
}
  
−
@-moz-keyframes cycle {
+
.visualClear {
−
  0%  { top: 0px; } /* When you start the slide, the first image is already visible */
+
    clear: both;
−
  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; }
+
 
}
 
}
  
−
@-moz-keyframes cycletwo {
+
 
−
  0%  { top: -345px; opacity: 0; } /* Original Position */
+
/* ============= END: Resetting css coming from wiki itself ============= */
−
  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*/
+
/* ============= Declare Fonts for non-Windows machines ============= */
−
  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 */
+
@font-face {
−
  100%{ top: -345px; opacity: 0; z-index: -1; }
+
    font-family: Candara;
 +
    src: url(https://static.igem.org/mediawiki/2015/6/6c/Freiburg_Candara.ttf) format('truetype');
 +
 
 
}
 
}
  
−
@-moz-keyframes cyclethree {
+
@font-face {
−
  0%  { top: -345px; opacity: 0; }
+
    font-family: Candara;
−
  45% { top: -345px; opacity: 0; }
+
    src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Candarab.ttf)  format('truetype');
−
  50% { top: 0px; opacity: 1; }
+
    font-weight: bold;
−
  55% { top: 0px; opacity: 1; }
+
    font-style: normal;
−
  70% { top: 0px; opacity: 1; }
+
}
−
  75% { top: 345px; opacity: 0; z-index: 0; }
+
@font-face {
−
  76% { top: -345px; opacity: 0; z-index: -1; }
+
    font-family: Candara;
−
  100%{ top: -345px; opacity: 0; z-index: -1; }
+
    src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf)  format('truetype');
 +
    font-weight: normal;
 +
    font-style: italic;
 
}
 
}
  
−
@-moz-keyframes cyclefour {
+
@font-face {
−
  0%  { top: -325px; opacity: 0; }
+
    font-family: Roboto;
−
  70% { top: -325px; opacity: 0; }
+
    src: url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype');
−
  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; }
+
 
}
 
}
 +
@font-face {
 +
  font-family: Roboto;
 +
  src: url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf)  format('truetype');
 +
  font-style: normal;
 +
  font-weight: 300;
 +
 
 +
}
 +
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: normal;
 +
}
 +
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf)  format('truetype');
 +
    font-weight: normal;
 +
    font-style: italic;
 +
}
 +
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
 +
 +
 +
 +
/* ============= END: Declare Fonts for non-Windows machines  ============= */
 +
 +
 +
 +
/* ============= CSS for Menubar ============= */
  
 +
#menubar {
 +
    font-size: 16px;
 +
    background-color: #5781bd;
 +
    display: table;
 +
    width: 100%;
 +
    height: 70px; 
 +
    border-collapse: collapse;
 +
    border: none;
  
−
/* once again for Safari */
 
−
@-webkit-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; }
 
 
}
 
}
  
−
@-webkit-keyframes cycletwo {
+
/*The sub (and subsubs) items of the menu*/
−
  0%  { top: -345px; opacity: 0; } /* Original Position */
+
#menubar ul li ul li{
−
  20% { top: -345px; opacity: 0; }/* Starts moving after 16% to this position */
+
    width: 200px;
−
  25% { top: 0px; opacity: 1; }
+
    height: 30px;
−
  30% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
+
    margin-top: 2px;
−
  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; }
+
 
}
 
}
 +
/*The first (horizontal) line of menu items*/
 +
#menubar > ul{
  
−
@-webkit-keyframes cyclethree {
+
    position: relative;
−
  0%  { top: -345px; opacity: 0; }
+
    margin-top: 25;
−
  45% { top: -345px; opacity: 0; }
+
    left: 50%;
−
  50% { top: 0px; opacity: 1; }
+
    display: block;
−
  55% { top: 0px; opacity: 1; }
+
    transform: translate(-50%,0%);
−
  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; }
+
 
}
 
}
  
−
@-webkit-keyframes cyclefour {
+
#menubar ul ul {
−
  0%  { top: -325px; opacity: 0; }
+
    background-color: #5781bd;
−
  70% { top: -325px; opacity: 0; }
+
    display: none;
−
  75% { top: 0px; opacity: 1; }
+
    position: absolute;
−
  80% { top: 0px; opacity: 1; }
+
    margin-left: 0px;
−
  95% { top: 0px; opacity: 1; z-index: 0; }
+
    float: left;
−
  100%{ top: 325px; opacity: 0; z-index: 0; }
+
    margin-top:0px;
 +
}
 +
#menubar ul ul li{
 +
    display: block;
 +
    margin-left: 0px;
 
}
 
}
  
−
/* PROGRESS BAR */
+
#menubar ul li {
 +
    width: 100px;
 +
    display: table-cell;
 +
    font-family: "Roboto",sans-serif;
 +
}
  
−
.progress-bar {
+
#menubar ul a{
−
  position: relative;
+
    text-decoration: none;
−
  top: -10px;
+
    color: #FFFFFF;
−
  width: 680px;
+
    font-style: bold;
−
  height: 5px;
+
    text-align: left;
−
  background: #000;
+
−
  -moz-animation: fullexpand 20s ease-out infinite;
+
−
  -webkit-animation: fullexpand 20s ease-out infinite;
+
 
}
 
}
  
−
/* ANIMATION BAR */
+
#menubar ul a:visited{
 +
    display: block;
 +
    text-decoration: none;
 +
    color: #FFFFFF;
 +
    font-style: bold;
 +
}
 +
#menubar ul li:hover > ul{
 +
    color: #EEEE00;
 +
    display: block;
 +
    padding-top: 0px;
 +
    padding-left: 20px;
 +
}
 +
#menubar ul li:hover{
 +
    color: #EEEE00;
 +
}
  
−
@-moz-keyframes fullexpand {
+
/* ============= END: CSS for Menubar ============= */
−
  /* 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 */
+
/* ============= Important Site setup ============= */
−
  5%, 30%, 55%, 80% { width: 0%; opacity: 0.3; }
+
  
−
  /* In these keyframes, the progress-bar moves forward for 3 seconds */
+
/* changed tiles background to scaling full-size image --jb */
−
  20%, 45%, 70%, 95% { width: 100%; opacity: 0.7; }
+
/*.content_background_wrapper{
  
−
  /* In these keyframes, the progress-bar has finished his path */
+
position: relative;
−
  21%, 46%, 71%, 96% { width: 100%; opacity: 0.3; }
+
background-image: url("https://static.igem.org/mediawiki/2015/7/74/Freiburg_antibody_background.png");
 +
background-attachment: fixed;
 +
overflow:hidden;
 +
}*/
 +
/*
 +
.content_background_wrapper{
 +
  background: url("https://static.igem.org/mediawiki/2015/b/b4/Freiburg_wiki_background_2.png") no-repeat center center fixed;  
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
  overflow: hidden;
 +
  REMOVE WITH NEW NAVIGATION BAR!!! AVOIDS CONTENT SHIFTING AFTER MENU-WRAP
 +
  clear: both;
 +
}
 +
*/
  
−
  /* In these keyframes, the progress-bar will disappear and then resume the cycle */
+
.content_background_wrapper{
−
  22%, 47%, 72%, 97% { width: 100%; opacity: 0; }
+
    background: #F9F9F9;
 +
    overflow: hidden;
 +
    box-sizing: border-box;
 
}
 
}
  
−
@-webkit-keyframes fullexpand {
+
.central_position_wrap{
−
  /* In these keyframes, the progress-bar is stationary */
+
    position: relative;
−
  0%, 25%, 50%, 75%, 100% { width: 0%; opacity: 0; }
+
}
  
−
  /* In these keyframes, the progress-bar starts to come alive */
+
.background_image_left,
−
  5%, 30%, 55%, 80% { width: 0%; opacity: 0.3; }
+
.background_image_right{
 +
    width: 150px;
 +
    position: absolute;
 +
}
  
−
  /* In these keyframes, the progress-bar moves forward for 3 seconds */
+
.background_image_left{
−
  20%, 45%, 70%, 95% { width: 100%; opacity: 0.7; }
+
    top: 20%
 +
}
  
−
  /* In these keyframes, the progress-bar has finished his path */
+
.background_image_right{
−
  21%, 46%, 71%, 96% { width: 100%; opacity: 0.3; }
+
    bottom: -20px;
 +
    right: 0;
 +
}
  
−
  /* In these keyframes, the progress-bar will disappear and then resume the cycle */
+
.background_image_right img{
−
  22%, 47%, 72%, 97% { width: 100%; opacity: 0; }
+
    float: right;
 
}
 
}
  
−
#slider .tooltip {
+
@media only screen and (max-width: 1320px){
−
  background: rgba(0,0,0,0.7);
+
    .background_image_left,
−
  z-index: 9000;
+
    .background_image_right{
−
  width: 300px;
+
        display: none;
−
  height: 60px;
+
    }
−
  position: relative;
+
−
  bottom: 120px;
+
−
  left: -320px;
+
−
  -moz-transition: all 0.3s ease-in-out;
+
−
  -webkit-transition: all 0.3s ease-in-out;
+
 
}
 
}
  
−
#slider .tooltip h1 {
+
/* was removed in favour of fit-content --jb */
−
  color: #fff;
+
/* old version:
−
  font-size: 24px;
+
float: left;
−
  font-weight: 300;
+
max-width: 1000px;
−
  line-height: 60px;
+
    float: left;
−
  padding: 0 0 0 10px;
+
    position: relative;
 +
    left: 50%;
 +
*/
 +
 
 +
/*
 +
.page_content{
 +
    display:block;
 +
    float: left;
 +
    position: relative;
 +
    left: -50%;
 
}
 
}
 +
*/
  
−
#slider li#first:hover .tooltip,
+
/* responsive desgin: adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/
−
#slider li#second:hover .tooltip,
+
.page_content{
−
#slider li#third:hover .tooltip,
+
    margin: 20px 5px;
−
#slider li#fourth:hover .tooltip {
+
−
  left: 0;
+
 
}
 
}
  
−
/* =================== END of CSS-slider =================== */
+
@media only screen and (min-width: 1021px){
 +
    /* style for browsers wider than 1000px */
 +
    .page_content{
 +
        width: 1000px;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
}
 +
@media only screen and (max-width: 1020px){
 +
    /* style for browsers smaller than 1000px */
 +
    .page_content{
 +
        width: intrinsic;
 +
        width: moz-fit-content;
 +
        width: -webkit-fit-content;
 +
        width: fit-content;   
 +
    }
 +
}
  
−
</style>
 
−
</html>
 
  
  
−
<html>
+
/* ============= END: Important Site setup ============= */
−
<!-- Labjournal content goes in here -->
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ============= Text Styling ============= */
 +
 
 +
.page_content{
 +
color: #666666;
 +
font-family: 'Roboto',sans-serif;
 +
font-style: normal;
 +
font-weight: 300;
 +
font-size: 16px;
 +
line-height: 1.8;
 +
}
 +
 
 +
/* ============= END: Headline Styling ============= */
 +
h1, h2, h3{
 +
 
 +
    font-family: "Roboto", sans-serif;
 +
    color: #c1002a;
 +
    font-size: 25px;
 +
    clear: both;
 +
    font-weight: 400;
 +
    line-height: 1.2;
 +
}
 +
 
 +
 
 +
 
 +
/* ============= Full Width Banners  ============= */
 +
#banner_home{
 +
    margin:0;
 +
    padding: 0px;
 +
    background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg");
 +
    background-repeat: no-repeat;
 +
    background-size:  cover;
 +
    width: 100%;
 +
    height: 400px;
 +
}
 +
#banner_team{
 +
    margin:0;
 +
    padding: 0px;
 +
    background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg");
 +
    background-repeat: no-repeat;
 +
    background-size:  cover;
 +
    width: 100%;
 +
    height: 400px;
 +
}
 +
#banner_labjournal{
 +
    margin:0;
 +
    padding: 0px;
 +
    background-image: url("https://static.igem.org/mediawiki/2015/d/dc/Labjournal.jpg");
 +
    background-repeat: no-repeat;
 +
    background-size:  cover;
 +
    width: 100%;
 +
    height: 400px;
 +
}
 +
 
 +
/* ============= END: Full Width Banners  ============= */
 +
/*
 +
---------------- Our Team Flipcards css ----------------
 +
*/
 +
.flippanel {
 +
    width: 227px;
 +
    height: 341px;
 +
    margin: auto;
 +
    position: relative;
 +
}
 +
 
 +
.card {
 +
    width: 227px;
 +
    height: 341px;
 +
    -o-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -webkit-transition: all .5s;
 +
    transition: all .5s;
 +
    -webkit-backface-visibility: hidden;
 +
    -ms-backface-visibility: hidden;
 +
    -moz-backface-visibility: hidden;
 +
    backface-visibility: hidden;
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
}
 +
 
 +
.front {
 +
    z-index: 2;
 +
}
 +
 
 +
.back {
 +
overflow: auto;
 +
    z-index: 1;
 +
    -webkit-transform: rotateY(180deg);
 +
    -ms-transform: rotateY(180deg);
 +
    -moz-transform: rotateY(180deg); 
 +
    transform: rotateY(180deg); 
 
    
 
    
−
<div class="image_box">
+
}
−
<div class="container">
+
−
  <div id="content-slider">
+
−
      <div id="slider">  <!-- Slider container -->
+
−
        <div id="mask">  <!-- Mask -->
+
  
−
        <ul>
+
.flippanel:hover .front {
−
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
+
    z-index: 1;
−
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/f/fb/Freiburg_files-2015-07-11_12.35.40.jpg" alt="Cougar"/> </a>
+
    -webkit-transform: rotateY(-180deg);
−
        <div class="tooltip"> <h1>Preparations</h1> </div>
+
    -ms-transform: rotateY(-180deg);
−
        </li>
+
    -moz-transform: rotateY(-180deg);
 +
    transform: rotateY(-180deg);
 +
}
  
−
        <li id="second" class="secondanimation">
+
.flippanel:hover .back {
−
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/c/cb/Freiburg_files-2015-07-10_17.50.59.jpg" alt="Lions"/> </a>
+
    z-index: 2; 
−
        <div class="tooltip"> <h1>Explaining</h1> </div>
+
    -webkit-transform: rotateX(0deg);
−
        </li>
+
    -ms-transform: rotateX(0deg);
 +
    -moz-transform: rotateX(0deg);
 +
    transform: rotateX(0deg);
 +
}
 +
.memberPicture{
 +
    width: 227px;
 +
    height: 341px;
 +
}
  
−
        <li id="third" class="thirdanimation">
+
.profile-name {
−
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/8/8a/Freiburg_files-2015-07-10_15.47.37.jpg" alt="Snowalker"/> </a>
+
    font-size: 120%;
−
        <div class="tooltip"> <h1>Take a look at DNA</h1> </div>
+
    color: #c1012a;
−
        </li>
+
    font-style: bold;
 +
}
 +
.profile-question{
 +
    color: #004c97;
 +
}
  
−
        <li id="fourth" class="fourthanimation">
+
.flippanel_row{
−
        <a href="#"> <img src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_files-img_0353_kopie.jpg" alt="Howling"/> </a>
+
    margin-top: 25px;
−
        <div class="tooltip"> <h1>Presentation</h1> </div>
+
    display: flex;
−
        </li>
+
}
 +
/*
 +
---------------- END Our Team Flipcards css ----------------
 +
*/
  
−
        </div>  <!-- End Mask -->
 
−
        <div class="progress-bar"></div>  <!-- Progress Bar -->
 
−
      </div>  <!-- End Slider Container -->
 
−
  </div>
 
−
</div>
 
  
−
</div>
+
/* ======================= content boxes =================== */
−
     
+
.content_box{
−
<div class="content_box">
+
    border-radius: 30px 60px;
−
<h1 class="sectionedit1">Freiburg Science Fair - Inspire the public for science</h1>
+
    overflow: hidden;
−
<div class="level1">
+
    padding: 2em;
−
<p>
+
    margin: 2em 0;
−
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.
+
    background-color: #FFFFFF;
−
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.
+
    text-align: justify;
−
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.
+
    margin-bottom: 0;
−
</p>
+
}
−
</div>
+
−
<p>
+
−
Here we provide a simple protocol for DNA isolation from fruits:
+
−
</p>
+
−
<p>
+
−
<em class="u">Material:</em>
+
−
</p>
+
−
<ul>
+
−
<li class="level1"><div class="li"> Lysis buffer:  5 g NaCl, 50 ml dishwashing detergent (the use of different colored dishwashing detergent fascinates the experimenter), 450 ml Water</div>
+
−
</li>
+
−
<li class="level1"><div class="li"> 70% - 99% ethanol (ice cold)</div>
+
−
</li>
+
−
</ul>
+
−
<p>
+
−
<em class="u">Workflow:</em>
+
−
</p>
+
−
<ul>
+
−
<li class="level1"><div class="li"> smash one half of a banana with a fork within a beaker</div>
+
−
</li>
+
−
<li class="level1"><div class="li"> add approximately 25 ml of Lysis buffer and stir the solution with the fork, so that you get a more or less homogenous solution</div>
+
−
</li>
+
−
<li class="level1"><div class="li"> filter the solution through a paper filter into a new beaker to get rid of the crude cell fragments </div>
+
−
</li>
+
−
<li class="level1"><div class="li"> put 1-2 ml of the filtered solution into a test-tube</div>
+
−
</li>
+
−
<li class="level1"><div class="li"> slowly pipette the ice cold ethanol into the test-tube</div>
+
−
</li>
+
−
<li class="level1"><div class="li"> two phases of alcohol and water are formed with precipitated DNA being visible in the alcohol phase</div>
+
−
</li>
+
−
</ul>
+
−
<p>
+
−
</div>
+
  
 +
/* ====================== image boxes =================== */
 +
.image_box{
 +
    overflow: hidden;
 +
}
 +
 +
/* =================== END of image box =================== */
 +
 +
.tags{
 +
/* remove tags from bottom */
 +
    font-size: 0;
 +
}
 +
 +
acronym{
 +
/* remove text-decoration from acronyms*/
 +
    border-bottom: none;
 +
    text-decoration: none;
 +
    cursor: auto;
 +
}
 +
 +
 +
/* allow placing of several images including caption in one row */
 +
 +
.flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/
 +
    font-size: 70%;
 +
    padding: 0 10px;
 +
    text-align: justify;
 +
}
 +
 +
.flexbox{
 +
    display: flex;
 +
    margin: 5% 0;
 +
}
 +
 +
/* =================== Footer =================== */
 +
 +
.content_footer{
 +
    background: rgb(54, 119, 188) none repeat scroll;
 +
    width: 100%;
 +
    height: 75px;
 +
}
 +
 +
.contacts{
 +
    width: 320px;
 +
    margin: 0 auto;
 +
    display: flex;
 +
    justify-content: space-around;
 +
    display: -webkit-flex; /*Safari*/
 +
    -webkit-justify-content: space-around; /* Safari 6.1+ */
 +
}
 +
 +
#uni a img,
 +
#bioss a img,
 +
#facebook a img,
 +
#email a img{
 +
    max-height: 40px
 +
}
 +
 +
#uni,
 +
#bioss,
 +
#facebook,
 +
#email{
 +
    padding-top: 15px;
 +
    padding-right:10px;
 +
}
 +
 +
/* gap between social links and uni links */
 +
#facebook{
 +
    padding-right: 40px;
 +
}
 +
</style>
  
 
</html>
 
</html>
−
<!-- Labjournal content ends here -->
 
−
{{Freiburg/wiki_content_end}}
 

Revision as of 12:17, 31 August 2015