Difference between revisions of "Team:Freiburg/Home"

Line 166: Line 166:
 
}
 
}
 
/* =============== END: Circle of Elements - Center Image ==================== */
 
/* =============== END: Circle of Elements - Center Image ==================== */
 +
 +
 +
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 +
.cool_image_blink {
 +
        /*width: 100%;*/
 +
box-shadow:
 +
inset 0 0 0 0 rgba(200,95,66, 0.4),
 +
inset 0 0 0 16px rgba(255,255,255,0.6),
 +
0 1px 2px rgba(0,0,0,0.1);
 +
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
        border-radius: 20%;
 +
}
 +
 +
.cool_text_blink {
 +
/*width: 100%;*/
 +
opacity: 0;
 +
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
 +
-webkit-transform: scale(0);
 +
-moz-transform: scale(0);
 +
-o-transform: scale(0);
 +
-ms-transform: scale(0);
 +
transform: scale(0);
 +
 +
-webkit-backface-visibility: hidden; /*for a smooth font */
 +
}
 +
 +
.cool_image_blink:hover {
 +
/*box-shadow:
 +
inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
 +
inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
 +
0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 +
}
 +
 +
.cool_image_blink:hover .cool_text_blink {
 +
opacity: 1;
 +
 +
-webkit-transform: scale(1);
 +
-moz-transform: scale(1);
 +
-o-transform: scale(1);
 +
-ms-transform: scale(1);
 +
transform: scale(1);
 +
}
 +
 +
.home_img1 {
 +
.home_img2
 +
.home_img3
 +
.home_img4
 +
.home_img5
 +
.home_img6
 +
.home_img7
 +
.home_img8
 +
/* =============== END: Circle of Elements - Hiding Animation ==================== */
  
  
Line 196: Line 259:
 
     <ul class='circle-container'>
 
     <ul class='circle-container'>
 
         <li><!--1-->
 
         <li><!--1-->
             <div class="cool_header"><a href='#'>Own Device</a></div>
+
          <div class="cool_image_blink">
             <div class="cool_content">Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.</div>
+
             <div class="cool_header cool_text_blink"><a href='#'>Own Device</a></div>
 
+
             <div class="cool_content cool_text_blink">Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.</div>
 +
          </div>
 
         </li>
 
         </li>
 
         <li><!--2-->
 
         <li><!--2-->
           <div class="cool_header"><a href='#'>New iGEM Backbone</a></div>
+
          <div class="cool_image_blink">
           <div class="cool_content">In need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our </div>
+
           <div class="cool_header cool_text_blink"><a href='#'>New iGEM Backbone</a></div>
 +
           <div class="cool_content cool_text_blink">In need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our </div>
 +
          </div>
 
         </li>
 
         </li>
  
 
         <li><!--3-->
 
         <li><!--3-->
           <div class="cool_header"><a href='#'>Human Practice</a></div>
+
          <div class="cool_image_blink">
           <div class="cool_content">What does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.</div>
+
           <div class="cool_header cool_text_blink"><a href='#'>Human Practice</a></div>
 +
           <div class="cool_content cool_text_blink">What does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.</div>
 +
          </div>
 
         </li>
 
         </li>
  
 
         <li><!--4-->
 
         <li><!--4-->
           <div class="cool_header"><a href='#'>Modeling</a></div>
+
          <div class="cool_image_blink">
           <div class="cool_content">Numerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.</div>
+
           <div class="cool_header cool_text_blink"><a href='#'>Modeling</a></div>
 +
           <div class="cool_content cool_text_blink">Numerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.</div>
 +
          </div>
 
         </li>
 
         </li>
  
 
         <li><!--5-->
 
         <li><!--5-->
             <div class="cool_header"><a href='#'>Blood Serum Analysis</a></div>
+
          <div class="cool_image_blink">
             <div class="cool_content">We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.</div>
+
             <div class="cool_header cool_text_blink"><a href='#'>Blood Serum Analysis</a></div>
 +
             <div class="cool_content cool_text_blink">We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.</div>
 +
          </div>
 
         </li>
 
         </li>
  
 
         <li><!--6-->
 
         <li><!--6-->
             <div class="cool_header"><a href='#'>Enlightening Diagnostics</a></div>
+
          <div class="cool_image_blink">
             <div class="cool_content">Modern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests.
+
             <div class="cool_header cool_text_blink"><a href='#'>Enlightening Diagnostics</a></div>
 +
             <div class="cool_content cool_text_blink">Modern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests.
 
     This is why we thought about a fast, universally accessible and affordable diagnostic device.</div>
 
     This is why we thought about a fast, universally accessible and affordable diagnostic device.</div>
 +
          </div>
 
         </li>
 
         </li>
  
 
         <li><!--7-->
 
         <li><!--7-->
             <div class="cool_header"><a href='#'>The DiaCHIP</a></div>
+
          <div class="cool_image_blink">
             <div class="cool_content">Simultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection.
+
             <div class="cool_header cool_text_blink"><a href='#'>The DiaCHIP</a></div>
 +
             <div class="cool_content cool_text_blink">Simultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection.
 
     </div>
 
     </div>
 +
          </div>
 
         </li>
 
         </li>
  
 
         <li><!--8-->
 
         <li><!--8-->
             <div class="cool_header"><a href='#'>Our System</a></div>
+
          <div class="cool_image_blink">
             <div class="cool_content">Generating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.</div>
+
             <div class="cool_header cool_text_blink"><a href='#'>Our System</a></div>
 +
             <div class="cool_content cool_text_blink">Generating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.</div>
 +
          </div>
 
         </li>
 
         </li>
 
     </ul>
 
     </ul>

Revision as of 15:07, 12 September 2015

""

Die Texte in den Boxen sind noch ziemlich klein und ziemlich Textwand. Da müssten kürzere, prägnantere Texte mit größerer Schrift und/oder Bild rein. (jb 20150912)

Texte sind zum Überarbeiten. Maximale Länge von 6 Zeilen ist optisch am besten. Die Texte sollen hinter Bildern "versteckt werden". Der Text erscheint, dann erst, wenn man mit dem Mauszeiger über das Bild fährt. - Das ist zumindest der Plan, arbeite noch an den Bildern - (sb 20150912)

Abstract

In modern medicine, fast detection and differentiation of diseases is a crucial and fundamental task. Typical ELISA-based assays are time-consuming and expensive. We propose an advanced procedure for the simultaneous detection of various diseases in a fast and inexpensive manner, the DiaCHIP. Our approach is based on the interaction of antibodies with their respective antigens. Different antigens are immobilized on a protein array generated by cell-free protein expression, using the corresponding DNA array as a template. Placed in a microfluidic chamber, the protein array is incubated with a patient’s blood sample. The interaction between an antibody in the sample and the corresponding immobilized antigen results in a local change of the optical thickness of the surface. This change can be detected using a label-free and real-time measurement technology called iRIf (imaging Reflectometric Interference)which is based on a laser detecting the interference of reflecting light from our chip. Offering simultaneous screening for several diseases, our DiaCHIP has strong potential to improve future diagnostics.