Difference between revisions of "Team:Freiburg/Home"

Line 19: Line 19:
 
   color: #888;
 
   color: #888;
 
}
 
}
−
 
  
 
.intro_button {
 
.intro_button {
Line 25: Line 24:
 
     padding: 2px 5px 5px 10px;
 
     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;*/
 
     background-color: #C5162F;
 
     background-color: #C5162F;
−
     font-size: 16pt;
+
     font-size: 14pt;
 
     border-radius: 8px;
 
     border-radius: 8px;
 
     /*box-shadow: 1px -1px 1px 0px #888;*/
 
     /*box-shadow: 1px -1px 1px 0px #888;*/
 
     /*border: 1px solid #F9F9F9;*/
 
     /*border: 1px solid #F9F9F9;*/
 
     color: #FFF;
 
     color: #FFF;
 +
    text-decoration: underline;
 
}
 
}
  
Line 58: Line 58:
 
   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 87: Line 87:
 
/* 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);
 +
}
 +
 
 +
.circle-container a {
 +
  padding: 1px 10px;
 +
  font-size: 90%;
 
}
 
}
  
Line 145: Line 150:
 
   -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 182: Line 202:
  
 
.cool_content {
 
.cool_content {
−
     padding: 1em;
+
     padding: 16px;
 
     height: 150px;
 
     height: 150px;
 
     background-color: #FFFFFF;
 
     background-color: #FFFFFF;
Line 190: Line 210:
 
     -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 243: Line 263:
 
/* =============== 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;
−
    text-decoration: none;
 
−
    color: #666;
 
 
}
 
}
  
 
.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);
 
}
 
}
  
Line 289: Line 307:
  
 
.element3 {
 
.element3 {
−
     background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
+
     background-image: url();
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: center;
 
     background-position: center;
Line 301: Line 319:
  
 
.element5 {
 
.element5 {
−
     background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
+
     background-image: url();
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: center;
 
     background-position: center;
Line 343: Line 361:
 
/* =============== END: Resetting General CSS ==================== */
 
/* =============== END: Resetting General CSS ==================== */
  
−
#DiaCHIP_logo{
+
 
−
   display:none;
+
/* ============== Animate boxes on start ===========================*/
 +
 
 +
/* from https://daneden.github.io/animate.css/ */
 +
 
 +
@-webkit-keyframes zoomIn {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 
 +
@-webkit-keyframes zoomIn-Pics {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);
 +
  }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 
 +
@keyframes zoomIn {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 
 +
@keyframes zoomIn-Pics {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);
 +
  }
 +
 
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 
 +
.zoomIn {
 +
  -webkit-animation-name: zoomIn;
 +
  animation-name: zoomIn;
 +
}
 +
 
 +
@-webkit-keyframes zoomOut {
 +
  from {
 +
    opacity: 1;
 +
  }
 +
 
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  to {
 +
    opacity: 0;
 +
  }
 +
}
 +
 
 +
@keyframes zoomOut {
 +
  from {
 +
    opacity: 1;
 +
  }
 +
 
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 
 +
  to {
 +
    opacity: 0;
 +
  }
 +
}
 +
 
 +
.zoomOut {
 +
  -webkit-animation-name: zoomOut;
 +
  animation-name: zoomOut;
 +
}
 +
 
 +
 
 +
#DiaCHIP_logo {
 +
   opacity: 0;
 
}
 
}
  
Line 366: Line 490:
 
   flex-wrap: wrap;
 
   flex-wrap: wrap;
 
   justify-content: space-around;
 
   justify-content: space-around;
−
   margin-bottom: 2em;
+
   margin-bottom: 32px;
 
}
 
}
  
Line 386: Line 510:
  
 
.circle-container a {
 
.circle-container a {
−
   padding: 1px 10px;
+
   padding: 1px 5px;
−
   font-size: 90%;
+
   font-size: 80%;
 +
}
 +
 
 
}
 
}
  
 
</style>
 
</style>
−
 
−
<div class="todo_box">
 
−
To-do:<br>
 
−
1) Introduction Link unterstrichen<br>
 
−
2) Bilder einfügen und klein machen
 
−
</div>
 
  
 
<div id="cool_centerimage_small">
 
<div id="cool_centerimage_small">
 
     <!--<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?
−
    </p>
+
<br>
−
    <p>
+
 
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>
Line 522: Line 641:
  
 
</div>
 
</div>
 +
 +
  
  

Revision as of 09:23, 17 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!

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.