Difference between revisions of "Team:Freiburg/Testpage3"

Line 144: Line 144:
 
     -moz-box-shadow: 1px 1px 10px #888;
 
     -moz-box-shadow: 1px 1px 10px #888;
 
     border-radius: 15px;
 
     border-radius: 15px;
 +
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;
 
}
 
}
  
Line 160: Line 175:
 
     width: 40%;
 
     width: 40%;
 
     height: 250px;
 
     height: 250px;
−
     top: -410px;
+
     top: -380px;
 
     text-align: center;
 
     text-align: center;
 
     left: 1%;
 
     left: 1%;
Line 168: Line 183:
  
  
−
/* =============== BEGIN: Circle of Elements - Hiding Animation ====================  
+
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 
.cool_image_blink {
 
.cool_image_blink {
−
        /*width: 100%;*/
+
/*box-shadow:  
−
box-shadow:  
+
 
inset 0 0 0 0 rgba(200,95,66, 0.4),
 
inset 0 0 0 0 rgba(200,95,66, 0.4),
 
inset 0 0 0 16px rgba(255,255,255,0.6),
 
inset 0 0 0 16px rgba(255,255,255,0.6),
−
0 1px 2px rgba(0,0,0,0.1);
+
0 1px 2px rgba(0,0,0,0.1);*/
 +
        box-shadow: 1px 1px 2px 2px #000;
 
 
 
-webkit-transition: all 0.4s ease-in-out;
 
-webkit-transition: all 0.4s ease-in-out;
Line 181: Line 196:
 
-ms-transition: all 0.4s ease-in-out;
 
-ms-transition: all 0.4s ease-in-out;
 
transition: all 0.4s ease-in-out;
 
transition: all 0.4s ease-in-out;
−
         border-radius: 20%;
+
         border-radius: 15px;
−
}
+
−
 
+
−
.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 */
+
 
}
 
}
  
Line 210: Line 206:
 
}
 
}
  
−
.cool_image_blink:hover .cool_text_blink {
+
.cool_image_blink:hover .cool_content {
 
opacity: 1;
 
opacity: 1;
 
 
Line 219: Line 215:
 
transform: scale(1);
 
transform: scale(1);
 
}
 
}
−
/*
+
 
 
.element1 {
 
.element1 {
 
     background-image: url("https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg");
 
     background-image: url("https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg");
−
     background-size: 250px;
+
     background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element2 {
 
.element2 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element3 {
 
.element3 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/1/1f/Freiburg_project-img_0301.jpg");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element4 {
 
.element4 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/2/29/Freiburg_Modeling_Home.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element5 {
 
.element5 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/7/71/Freiburg_tetanus_home.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element6 {
 
.element6 {
 
     background-image: url("");
 
     background-image: url("");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element7 {
 
.element7 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/c/c1/Freiburg_diachip_centcoin.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
  
 
.element8 {
 
.element8 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
 +
    background-size: 260px;
 +
    background-position: center;
 
}
 
}
 
/* =============== END: Circle of Elements - Hiding Animation ==================== */
 
/* =============== END: Circle of Elements - Hiding Animation ==================== */
Line 284: Line 295:
 
     <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 element1">
 
           <div class="cool_image_blink element1">
−
            <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 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>
 
           </div>
 
         </li>
 
         </li>
 
         <li><!--2-->
 
         <li><!--2-->
−
          <div class="cool_image_blink">
+
 
−
           <div class="cool_header cool_text_blink"><a href='#'>New iGEM Backbone</a></div>
+
           <div class="cool_header"><a href='#'>New iGEM Backbone</a></div>
 +
          <div class="cool_image_blink element2">
 
           <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 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>
 
           </div>
Line 297: Line 309:
  
 
         <li><!--3-->
 
         <li><!--3-->
−
          <div class="cool_image_blink">
+
 
−
           <div class="cool_header cool_text_blink"><a href='#'>Human Practice</a></div>
+
           <div class="cool_header"><a href='#'>Human Practice</a></div>
 +
          <div class="cool_image_blink element3">
 
           <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 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>
 
           </div>
Line 304: Line 317:
  
 
         <li><!--4-->
 
         <li><!--4-->
−
          <div class="cool_image_blink">
+
 
−
           <div class="cool_header cool_text_blink"><a href='#'>Modeling</a></div>
+
           <div class="cool_header"><a href='#'>Modeling</a></div>
 +
          <div class="cool_image_blink element4">
 
           <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 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>
 
           </div>
Line 311: Line 325:
  
 
         <li><!--5-->
 
         <li><!--5-->
−
          <div class="cool_image_blink">
+
 
−
             <div class="cool_header cool_text_blink"><a href='#'>Blood Serum Analysis</a></div>
+
             <div class="cool_header"><a href='#'>Blood Serum Analysis</a></div>
 +
          <div class="cool_image_blink element5">
 
             <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 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>
 
           </div>
Line 318: Line 333:
  
 
         <li><!--6-->
 
         <li><!--6-->
−
          <div class="cool_image_blink">
+
 
−
             <div class="cool_header cool_text_blink"><a href='#'>Enlightening Diagnostics</a></div>
+
             <div class="cool_header"><a href='#'>Enlightening Diagnostics</a></div>
 +
          <div class="cool_image_blink element6">
 
             <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.
 
             <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>
Line 326: Line 342:
  
 
         <li><!--7-->
 
         <li><!--7-->
−
           <div class="cool_image_blink">
+
            
−
             <div class="cool_header cool_text_blink"><a href='#'>The DiaCHIP</a></div>
+
             <div class="cool_header"><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 class="cool_image_blink element7">
−
    </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_image_blink">
+
            
−
             <div class="cool_header cool_text_blink"><a href='#'>Our System</a></div>
+
             <div class="cool_header"><a href='#'>Our System</a></div>
 +
          <div class="cool_image_blink element8">
 
             <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 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>
 
           </div>
Line 341: Line 358:
 
     </ul>
 
     </ul>
  
−
     <div class="cool_centerimage"><img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="370px">
+
     <div class="cool_centerimage"><img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">
 
     </div>
 
     </div>
  

Revision as of 16:35, 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)

find ich gut soweit, bin gespannt wie es fertig aussieht (NG)

  • Own Device
    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.
  • New iGEM Backbone
    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
  • Human Practice
    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.
  • Modeling
    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.
  • Blood Serum Analysis
    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.
  • Enlightening Diagnostics
    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.
  • The DiaCHIP
    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.
  • Our System
    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.

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.