Difference between revisions of "Team:Freiburg/Home Intro"

 
(26 intermediate revisions by 2 users not shown)
Line 22: Line 22:
 
.intro_button {
 
.intro_button {
 
     margin: 0px auto;
 
     margin: 0px auto;
−
     padding: 2px 5px 5px 0px;
+
     padding: 2px 5px 5px 10px;
 
     width: 150px;
 
     width: 150px;
−
     line-height: 1em;
+
     line-height: 16px;
 
     text-align: center;
 
     text-align: center;
−
     background-color: #326aab;
+
     /*background-color: #326aab;*/
−
     font-size: 16pt;
+
    background-color: #C5162F;
−
     border-radius: 2px;
+
     font-size: 14pt;
−
     box-shadow: 1px -1px 1px 0px #888;
+
     border-radius: 8px;
−
     border: 1px solid #888;
+
     /*box-shadow: 1px -1px 1px 0px #888;*/
 +
     /*border: 1px solid #F9F9F9;*/
 +
    color: #FFF;
 +
}
 +
 
 +
.intro_button a:hover {
 +
    text-decoration: underline;
 +
}
 +
 
 +
.menu-arrow{
 +
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
 +
background-repeat: no-repeat;
 +
background-position: 5% 50%;
 +
background-size: 10px 13px;
 
}
 
}
  
Line 42: Line 55:
 
  */
 
  */
  
−
@media screen and (min-width: 1200px){
+
@media screen and (min-width: 1050px){
  
 
.circle-container {
 
.circle-container {
 
   position: relative;
 
   position: relative;
 
   /* [1] */
 
   /* [1] */
−
   width: 30em;                      /* changes size of circle that elements are circling on */
+
   width: 480px;                      /* changes size of circle that elements are circling on */
−
   height: 30em;
+
   height: 480px;
 
   padding: 0;
 
   padding: 0;
 
   border-radius: 50%;              /* switch between circle and Rechteck */
 
   border-radius: 50%;              /* switch between circle and Rechteck */
Line 59: Line 72:
 
   margin: 5em auto 0;
 
   margin: 5em auto 0;
 
   /*border: solid 5px #0051A2;*/
 
   /*border: solid 5px #0051A2;*/
−
   z-index: 500;
+
   z-index: 499;
 
}
 
}
 
.circle-container > * {
 
.circle-container > * {
Line 76: Line 89:
 
/* transformations needed for showing the pictures */
 
/* transformations needed for showing the pictures */
 
.circle-container > *:nth-of-type(4) {
 
.circle-container > *:nth-of-type(4) {
−
   -moz-transform: rotate(357deg) translate(19em) rotate(-357deg);
+
   -moz-transform: rotate(357deg) translate(304px) rotate(-357deg);
−
   -ms-transform: rotate(357deg) translate(19em) rotate(-357deg);
+
   -ms-transform: rotate(357deg) translate(304px) rotate(-357deg);
−
   -webkit-transform: rotate(357deg) translate(19em) rotate(-357deg);
+
   -webkit-transform: rotate(357deg) translate(304px) rotate(-357deg);
−
   transform: rotate(357deg) translate(19em) rotate(-357deg);            /*change translate for defining position of elements*/
+
   transform: rotate(357deg) translate(304px) rotate(-357deg);            /*change translate for defining position of elements*/
 
}
 
}
 
.circle-container > *:nth-of-type(5) {
 
.circle-container > *:nth-of-type(5) {
−
   -moz-transform: rotate(45deg) translate(19em) rotate(-45deg);
+
   -moz-transform: rotate(45deg) translate(304px) rotate(-45deg);
−
   -ms-transform: rotate(45deg) translate(19em) rotate(-45deg);
+
   -ms-transform: rotate(45deg) translate(304px) rotate(-45deg);
−
   -webkit-transform: rotate(45deg) translate(19em) rotate(-45deg);
+
   -webkit-transform: rotate(45deg) translate(304px) rotate(-45deg);
−
   transform: rotate(45deg) translate(19em) rotate(-45deg);
+
   transform: rotate(45deg) translate(304px) rotate(-45deg);
 
}
 
}
 
.circle-container > *:nth-of-type(6) {
 
.circle-container > *:nth-of-type(6) {
−
   -moz-transform: rotate(105deg) translate(18em) rotate(-105deg);
+
   -moz-transform: rotate(105deg) translate(288px) rotate(-105deg);
−
   -ms-transform: rotate(105deg) translate(18em) rotate(-105deg);
+
   -ms-transform: rotate(105deg) translate(288px) rotate(-105deg);
−
   -webkit-transform: rotate(105deg) translate(18em) rotate(-105deg);
+
   -webkit-transform: rotate(105deg) translate(288px) rotate(-105deg);
−
   transform: rotate(105deg) translate(18em) rotate(-105deg);
+
   transform: rotate(105deg) translate(288px) rotate(-105deg);
 
}
 
}
 
.circle-container > *:nth-of-type(7) {
 
.circle-container > *:nth-of-type(7) {
−
   -moz-transform: rotate(147deg) translate(27em) rotate(-147deg);
+
   -moz-transform: rotate(147deg) translate(432px) rotate(-147deg);
−
   -ms-transform: rotate(147deg) translate(27em) rotate(-147deg);
+
   -ms-transform: rotate(147deg) translate(432px) rotate(-147deg);
−
   -webkit-transform: rotate(147deg) translate(27em) rotate(-147deg);
+
   -webkit-transform: rotate(147deg) translate(432px) rotate(-147deg);
−
   transform: rotate(147deg) translate(27em) rotate(-147deg);
+
   transform: rotate(147deg) translate(432px) rotate(-147deg);
 
}
 
}
 
.circle-container > *:nth-of-type(8) {
 
.circle-container > *:nth-of-type(8) {
−
   -moz-transform: rotate(180deg) translate(28em) rotate(-180deg);
+
   -moz-transform: rotate(180deg) translate(448px) rotate(-180deg);
−
   -ms-transform: rotate(180deg) translate(28em) rotate(-180deg);
+
   -ms-transform: rotate(180deg) translate(448px) rotate(-180deg);
−
   -webkit-transform: rotate(180deg) translate(28em) rotate(-180deg);
+
   -webkit-transform: rotate(180deg) translate(448px) rotate(-180deg);
−
   transform: rotate(180deg) translate(28em) rotate(-180deg);
+
   transform: rotate(180deg) translate(448px) rotate(-180deg);
 
}
 
}
 
.circle-container > *:nth-of-type(1) {
 
.circle-container > *:nth-of-type(1) {
−
   -moz-transform: rotate(212deg) translate(27em) rotate(-212deg);
+
   -moz-transform: rotate(212deg) translate(432px) rotate(-212deg);
−
   -ms-transform: rotate(212deg) translate(27em) rotate(-212deg);
+
   -ms-transform: rotate(212deg) translate(432px) rotate(-212deg);
−
   -webkit-transform: rotate(212deg) translate(27em) rotate(-212deg);
+
   -webkit-transform: rotate(212deg) translate(432px) rotate(-212deg);
−
   transform: rotate(212deg) translate(27em) rotate(-212deg);
+
   transform: rotate(212deg) translate(432px) rotate(-212deg);
 
}
 
}
 
.circle-container > *:nth-of-type(2) {
 
.circle-container > *:nth-of-type(2) {
−
   -moz-transform: rotate(255deg) translate(20em) rotate(-255deg);
+
   -moz-transform: rotate(255deg) translate(320px) rotate(-255deg);
−
   -ms-transform: rotate(255deg) translate(20em) rotate(-255deg);
+
   -ms-transform: rotate(255deg) translate(320px) rotate(-255deg);
−
   -webkit-transform: rotate(255deg) translate(20em) rotate(-255deg);
+
   -webkit-transform: rotate(255deg) translate(320px) rotate(-255deg);
−
   transform: rotate(255deg) translate(20em) rotate(-255deg);
+
   transform: rotate(255deg) translate(320px) rotate(-255deg);
 
}
 
}
 
.circle-container > *:nth-of-type(3) {
 
.circle-container > *:nth-of-type(3) {
−
   -moz-transform: rotate(310deg) translate(20em) rotate(-310deg);
+
   -moz-transform: rotate(310deg) translate(320px) rotate(-310deg);
−
   -ms-transform: rotate(310deg) translate(20em) rotate(-310deg);
+
   -ms-transform: rotate(310deg) translate(320px) rotate(-310deg);
−
   -webkit-transform: rotate(310deg) translate(20em) rotate(-310deg);
+
   -webkit-transform: rotate(310deg) translate(320px) rotate(-310deg);
−
   transform: rotate(310deg) translate(20em) rotate(-310deg);
+
   transform: rotate(310deg) translate(320px) rotate(-310deg);
 
}
 
}
  
Line 139: Line 152:
 
   -webkit-filter: grayscale(0);
 
   -webkit-filter: grayscale(0);
 
   filter: grayscale(0);
 
   filter: grayscale(0);
 +
}
 +
 +
#DiaCHIP_text{
 +
  font-size: 16px;
 +
  line-height: 28px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width: 420px;
 +
  /* centers the text vertically */
 +
  position: relative;
 +
  top: 75%;
 +
  -moz-transform: translateY(-50%);
 +
  -ms-transform: translateY(-50%);
 +
  -webkit-transform: translateY(-50%);
 +
  transform: translateY(-50%);
 
}
 
}
  
Line 176: Line 204:
  
 
.cool_content {
 
.cool_content {
−
     padding: 1em;
+
     padding: 16px;
 
     height: 150px;
 
     height: 150px;
 
     background-color: #FFFFFF;
 
     background-color: #FFFFFF;
Line 184: Line 212:
 
     -moz-box-shadow: 1px 1px 10px #888;
 
     -moz-box-shadow: 1px 1px 10px #888;
 
     border-radius: 15px;
 
     border-radius: 15px;
−
opacity: 0;
+
  opacity: 0;
−
+
 
−
-webkit-transition: all 0.4s ease-in-out;
+
  -webkit-transition: all 0.4s ease-in-out;
−
-moz-transition: all 0.4s ease-in-out;
+
  -moz-transition: all 0.4s ease-in-out;
−
-o-transition: all 0.4s ease-in-out;
+
  -o-transition: all 0.4s ease-in-out;
−
-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;
−
+
 
−
-webkit-transform: scale(0);
+
  -webkit-transform: scale(0);
−
-moz-transform: scale(0);
+
  -moz-transform: scale(0);
−
-o-transform: scale(0);
+
  -o-transform: scale(0);
−
-ms-transform: scale(0);
+
  -ms-transform: scale(0);
−
transform: scale(0);
+
  transform: scale(0);
−
+
 
−
-webkit-backface-visibility: hidden;
+
  -webkit-backface-visibility: hidden;
 
}
 
}
  
Line 216: Line 244:
 
     width: 40%;
 
     width: 40%;
 
     height: 250px;
 
     height: 250px;
−
     top: -410px;
+
     top: -420px;
 
     text-align: center;
 
     text-align: center;
 
     left: 1%;
 
     left: 1%;
 
     /*border: 1px solid #000;*/
 
     /*border: 1px solid #000;*/
 
     color: #000;
 
     color: #000;
 +
    z-index: 500;
 
}
 
}
  
Line 236: Line 265:
 
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 
.cool_image_blink {
 
.cool_image_blink {
−
/*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;
 
         box-shadow: 1px 1px 2px 2px #000;
−
+
   
−
-webkit-transition: all 0.4s ease-in-out;
+
  -webkit-transition: all 0.4s ease-in-out;
−
-moz-transition: all 0.4s ease-in-out;
+
  -moz-transition: all 0.4s ease-in-out;
−
-o-transition: all 0.4s ease-in-out;
+
  -o-transition: all 0.4s ease-in-out;
−
-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: 15px;
 
         border-radius: 15px;
 
}
 
}
  
 
.cool_image_blink:hover {
 
.cool_image_blink:hover {
−
/*box-shadow:  
+
  /*box-shadow:  
−
inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
+
    inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
−
inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
+
    inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
−
0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
+
    0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 
}
 
}
  
 
.cool_image_blink:hover .cool_content {
 
.cool_image_blink:hover .cool_content {
−
opacity: 1;
+
  opacity: 1;
−
+
 
−
-webkit-transform: scale(1);
+
  -webkit-transform: scale(1);
−
-moz-transform: scale(1);
+
  -moz-transform: scale(1);
−
-o-transform: scale(1);
+
  -o-transform: scale(1);
−
-ms-transform: scale(1);
+
  -ms-transform: scale(1);
−
transform: scale(1);
+
  transform: scale(1);
 
}
 
}
  
 
.element1 {
 
.element1 {
−
     background-image: url("");
+
     background-image: url("https://static.igem.org/mediawiki/2015/0/05/Freiburg_Home_Julias_Hand.jpg");
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: center;
 
     background-position: center;
Line 280: Line 309:
  
 
.element3 {
 
.element3 {
−
     background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
+
     background-image: url("https://static.igem.org/mediawiki/2015/e/e6/Freiburg_DiaCHIP_home.jpg");
−
     background-size: cover;
+
     background-size: 91%;
 
     background-position: center;
 
     background-position: center;
 
}
 
}
Line 292: Line 321:
  
 
.element5 {
 
.element5 {
−
     background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
+
     background-image: url("https://static.igem.org/mediawiki/2015/3/3a/Freiburg_pOP_home_scaled.png");
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: center;
 
     background-position: center;
Line 298: Line 327:
  
 
.element6 {
 
.element6 {
−
     background-image: url("https://static.igem.org/mediawiki/2015/a/a3/Freiburg_project-img_0301_home.jpg");
+
     background-image: url("https://static.igem.org/mediawiki/2015/8/8d/Freiburg_Home_ScienceFair_Interview.png");
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: center;
 
     background-position: center;
Line 453: Line 482:
 
}
 
}
  
−
@media screen and (max-width: 1199px) {
+
.link_trigger:hover{
 +
  cursor: hand;
 +
  cursor: pointer;
 +
}
 +
 
 +
@media screen and (max-width: 1049px) {
  
 
.topicboxes{
 
.topicboxes{
Line 472: Line 506:
 
   flex-wrap: wrap;
 
   flex-wrap: wrap;
 
   justify-content: space-around;
 
   justify-content: space-around;
−
   margin-bottom: 2em;
+
   margin-bottom: 32px;
 
}
 
}
  
Line 492: Line 526:
  
 
.circle-container a {
 
.circle-container a {
−
  border-radius: 8px;
+
   padding: 1px 5px;
−
  color: #FFF;
+
   font-size: 80%;
−
  background-color: #0051A2;
+
−
   padding: 1px 10px;
+
−
   font-size: 100%;
+
−
  border: 5px solid #0051A2;
+
 
}
 
}
  
Line 520: Line 550:
 
     $('#DiaCHIP_logo').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomOut", "animation-duration": "1s"}).css({"opacity":"0"}); next(); });
 
     $('#DiaCHIP_logo').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomOut", "animation-duration": "1s"}).css({"opacity":"0"}); next(); });
 
     $('#DiaCHIP_text').delay(7500).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });   
 
     $('#DiaCHIP_text').delay(7500).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });   
 +
});
 +
 +
</script>
 +
 +
<script>
 +
 +
$(document).ready(function(){
 +
  $('.link_trigger').click(function(){
 +
    window.location.href=$(this).attr('href');
 +
  })
 
});
 
});
  
Line 527: Line 567:
 
     <!--<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">-->
 
     <!--<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">-->
 
     <p>Modern everyday life is fast...<br>...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results.<br> Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
 
     <p>Modern everyday life is fast...<br>...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results.<br> Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
−
<br>
+
    <br>
−
This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
+
    This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 
     </p>
 
     </p>
 +
    <div class="intro_button menu-arrow"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="Introduction" style="color:#FFF">Introduction</a></div>
 +
 
</div>
 
</div>
  
Line 538: Line 580:
 
         <li><!--6-->
 
         <li><!--6-->
 
         <div id="box1" class="topicboxes">
 
         <div id="box1" class="topicboxes">
−
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/Diagnostics'>Diagnostics today</a></div>
+
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Design'>Diagnostics today</a></div>
 
           <div class="cool_image_blink element1">
 
           <div class="cool_image_blink element1">
−
           <div class="cool_content cool_text_blink">
+
           <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Design' title="Diagnostics today">
−
            <a href='https://2015.igem.org/Team:Freiburg/Project/Diagnostics' title="Diagnostics today" style="color:#666">Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!
+
            Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!
−
          </a>
+
 
           </div>
 
           </div>
 
           </div>
 
           </div>
Line 552: Line 593:
 
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/Overview'>The DiaCHIP</a></div>
 
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/Overview'>The DiaCHIP</a></div>
 
           <div class="cool_image_blink element2">
 
           <div class="cool_image_blink element2">
−
           <div class="cool_content cool_text_blink">
+
           <div class="cool_content cool_text_blink link_trigger" href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="The DiaCHIP">
−
            <a href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="The DiaCHIP" style="color:#666">Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!
+
            Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!
−
            </a>
+
 
           </div>
 
           </div>
 
           </div>
 
           </div>
Line 564: Line 604:
 
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/System'>Our System</a></div>
 
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/System'>Our System</a></div>
 
           <div class="cool_image_blink element3">
 
           <div class="cool_image_blink element3">
−
           <div class="cool_content cool_text_blink">
+
           <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Project/System' title="Our system">
−
              <a href='https://2015.igem.org/Team:Freiburg/Project/System' title="Our system" style="color:#666">Generating a protein array on demand via cell-free expression and detecting antigen-antibody interactions label-free and in real-time: The principle behind the DiaCHIP!
+
              Generating a protein array on demand via cell-free expression and detecting antigen-antibody interactions label-free and in real-time: The principle behind the DiaCHIP!
−
              </a>
+
 
           </div>
 
           </div>
 
           </div>
 
           </div>
Line 576: Line 615:
 
               <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results/Own_Device'>Our Device</a></div>
 
               <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results/Own_Device'>Our Device</a></div>
 
               <div class="cool_image_blink element4">
 
               <div class="cool_image_blink element4">
−
               <div class="cool_content cool_text_blink">
+
               <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Results/Own_Device' title="Our Device">
−
              <a href='https://2015.igem.org/Team:Freiburg/Results/Own_Device' title="Our Device" style="color:#666">We built our simplified and affordable detection device. Check out the step by step instructions!
+
                  We built our simplified and affordable detection device. Check out the step by step instructions!
−
              </a>
+
 
               </div>
 
               </div>
 
             </div>
 
             </div>
Line 586: Line 624:
 
         <li><!--2-->
 
         <li><!--2-->
 
           <div id="box5" class="topicboxes">
 
           <div id="box5" class="topicboxes">
−
             <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Project/pOP-vector'>Improved iGEM Backbone</a></div>
+
             <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Description'>Improved iGEM Backbone</a></div>
 
             <div class="cool_image_blink element5">
 
             <div class="cool_image_blink element5">
−
             <div class="cool_content cool_text_blink">
+
             <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Description' title="pOP-vector">
−
            <a href='https://2015.igem.org/Team:Freiburg/Project/pOP-vector' title="pOP-vector" style="color:#666">We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!
+
              We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!
−
            </a>
+
 
             </div>
 
             </div>
 
             </div>
 
             </div>
Line 600: Line 637:
 
             <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Practices'>Human Practice</a></div>
 
             <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Practices'>Human Practice</a></div>
 
             <div class="cool_image_blink element6">
 
             <div class="cool_image_blink element6">
−
             <div class="cool_content cool_text_blink">
+
             <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Practices' title="Human Practice">
−
            <a href='https://2015.igem.org/Team:Freiburg/Practices' title="Human Practice" style="color:#666">What do people think about the DiaCHIP and systems based on synthetic biology? <br> Check out the results of our survey and discussions!
+
                What do people think about the DiaCHIP and systems based on synthetic biology? <br> Check out the results of our survey and discussions!
−
            </a>
+
 
             </div>
 
             </div>
 
             </div>
 
             </div>
Line 612: Line 648:
 
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results/Modeling'>Modeling</a></div>
 
           <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results/Modeling'>Modeling</a></div>
 
           <div class="cool_image_blink element7">
 
           <div class="cool_image_blink element7">
−
           <div class="cool_content cool_text_blink">
+
           <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Results/Modeling' title="Modeling">
−
          <a href='https://2015.igem.org/Team:Freiburg/Results/Modeling' title="Modeling" style="color:#666">Modeling the generation of proteins during cell-free expression as well as their diffusion in our system helped us obtaining better results. Get more information here.
+
              Modeling the generation of proteins during cell-free expression as well as their diffusion in our system helped us obtaining better results. Get more information here.
−
          </a>
+
 
           </div>
 
           </div>
 
           </div>
 
           </div>
Line 624: Line 659:
 
             <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results'>Blood Serum Analysis</a></div>
 
             <div class="cool_header"><a href='https://2015.igem.org/Team:Freiburg/Results'>Blood Serum Analysis</a></div>
 
             <div class="cool_image_blink element8">
 
             <div class="cool_image_blink element8">
−
             <div class="cool_content cool_text_blink">           
+
             <div class="cool_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Results' title="Results">          
−
                <a href='https://2015.igem.org/Team:Freiburg/Results' title="Results" style="color:#666">We successfully detected tetanus antibodies in human blood serum and measured binding of GFP antibodies to cell-free expressed GFP. <br> Visit our results page!
+
                  We successfully detected tetanus antibodies in human blood serum and measured binding of GFP antibodies to cell-free expressed GFP. <br> Visit our results page!
−
                </a>
+
 
             </div>
 
             </div>
 
             </div>
 
             </div>
Line 639: Line 673:
 
         <div id="DiaCHIP_text">
 
         <div id="DiaCHIP_text">
 
           <p style="margin-bottom:4%">Modern everyday life is fast...<br>...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results. <br> Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
 
           <p style="margin-bottom:4%">Modern everyday life is fast...<br>...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results. <br> Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
−
<br>
+
          <br>
 
           This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 
           This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 
           </p>
 
           </p>
−
           <div class="intro_button">Introduction</div>
+
           <div class="intro_button menu-arrow"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="Introduction" style="color:#FFF">Introduction</a></div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 654: Line 688:
  
  
−
<h1 class="sectionedit1">DiaCHIP - Enlightening Diagnostics</h1>
+
<h1>DiaCHIP - Enlightening Diagnostics</h1>
 
<div class="level1">
 
<div class="level1">
 
<p>
 
<p>

Latest revision as of 08:53, 18 September 2015

""

Modern everyday life is fast...
...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results.
Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!

Introduction
  • Diagnostics today
    Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!
  • The DiaCHIP
    Simultaneous screening for hundreds of diseases within a few hours?
    Find out about the DiaCHIP's potential to enlighten future diagnostics!
  • Our System
    Generating a protein array on demand via cell-free expression and detecting antigen-antibody interactions label-free and in real-time: The principle behind the DiaCHIP!
  • Our Device
    We built our simplified and affordable detection device. Check out the step by step instructions!
  • Improved iGEM Backbone
    We provided an improved backbone for protein overexpression meeting all the iGEM standards.
    See how we expanded the iGEM Registry!
  • Human Practice
    What do people think about the DiaCHIP and systems based on synthetic biology?
    Check out the results of our survey and discussions!
  • Modeling
    Modeling the generation of proteins during cell-free expression as well as their diffusion in our system helped us obtaining better results. Get more information here.
  • Blood Serum Analysis
    We successfully detected tetanus antibodies in human blood serum and measured binding of GFP antibodies to cell-free expressed GFP.
    Visit our results page!

Modern everyday life is fast...
...too fast for spending unnecessary time at the doctor’s and waiting weeks for your test results.
Not to mention spending lots of money on numerous serological tests for your diagnosis. Wouldn't life be easier if a single test was sufficient?
This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!

Introduction

DiaCHIP - Enlightening Diagnostics

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). Offering simultaneous screening for several diseases, our DiaCHIP has strong potential to improve future diagnostics.