Difference between revisions of "Team:Freiburg/Home"

Line 1: Line 1:
−
{{Freiburg/CSS}}
+
  {{Freiburg/CSS}}
−
{{Freiburg/Menubar}}
+
  {{Freiburg/Menubar}}
−
{{Freiburg/wiki_content_start}}
+
  {{Freiburg/wiki_content_start}}
−
<html>
+
  <html>
  
−
<style>
+
  <style>
−
/*========= BEGIN: style for navigation bar ==========*/
+
  /*========= BEGIN: style for navigation bar ==========*/
−
#home {
+
  #home {
−
    background: url(https://static.igem.org/mediawiki/2015/d/d7/Freiburg_icon_home_active.png) no-repeat;
+
      background: url(https://static.igem.org/mediawiki/2015/d/d7/Freiburg_icon_home_active.png) no-repeat;
−
}
+
  }
  
−
#home a {
+
  #home a {
−
    color: #ecdc18;
+
      color: #ecdc18;
−
}
+
  }
−
/*========= END: style for navigation bar ==========*/
+
  /*========= END: style for navigation bar ==========*/
  
  
−
/* =============== BEGIN: Circle of Elements ==================== */
+
  /* =============== BEGIN: Circle of Elements ==================== */
−
/*
+
  /*
−
* Mixin to put items on a circle
+
  * Mixin to put items on a circle
−
* [1] - Allows children to be absolutely positioned
+
  * [1] - Allows children to be absolutely positioned
−
* [2] - Allows the mixin to be used on a list
+
  * [2] - Allows the mixin to be used on a list
−
* [3] - In case box-sizing: border-box has been enabled
+
  * [3] - In case box-sizing: border-box has been enabled
−
* [4] - Allows any type of direct children to be targeted
+
  * [4] - Allows any type of direct children to be targeted
−
*/
+
  */
  
−
@media screen and (min-width: 1100px){
+
  @media screen and (min-width: 1200px){
  
−
.circle-container {
+
  .circle-container {
−
  position: relative;
+
    position: relative;
−
  /* [1] */
+
    /* [1] */
−
  width: 30em;                      /* changes size of circle that elements are circling on */
+
    width: 30em;                      /* changes size of circle that elements are circling on */
−
  height: 30em;
+
    height: 30em;
−
  padding: 0;
+
    padding: 0;
−
  border-radius: 50%;              /* switch between circle and Rechteck */
+
    border-radius: 50%;              /* switch between circle and Rechteck */
−
  list-style: none;
+
    list-style: none;
−
  /* [2] */
+
    /* [2] */
−
  -moz-box-sizing: content-box;
+
    -moz-box-sizing: content-box;
−
  -webkit-box-sizing: content-box;
+
    -webkit-box-sizing: content-box;
−
  box-sizing: content-box;
+
    box-sizing: content-box;
−
  /* [3] */
+
    /* [3] */
−
  margin: 5em auto 0;
+
    margin: 5em auto 0;
−
  /*border: solid 5px #0051A2;*/
+
    /*border: solid 5px #0051A2;*/
−
  z-index: 500;
+
    z-index: 500;
−
}
+
  }
−
.circle-container > * {
+
  .circle-container > * {
−
  /* [4] */
+
    /* [4] */
−
  display: block;
+
    display: block;
−
  position: absolute;              /* set absolute to fix elements on circle */
+
    position: absolute;              /* set absolute to fix elements on circle */
−
  top: 30%;
+
    top: 30%;
−
  left: 40%;
+
    left: 40%;
−
  width: 260px;                      /* define size of elements */
+
    width: 260px;                      /* define size of elements */
−
  height: 200px;
+
    height: 200px;
−
  margin: 0;     
+
    margin: 0;     
−
  font-size: 100%;
+
    font-size: 100%;
−
  text-align: center;
+
    text-align: center;
−
}
+
  }
  
−
/* 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(19em) rotate(-357deg);
−
  -ms-transform: rotate(357deg) translate(19em) rotate(-357deg);
+
    -ms-transform: rotate(357deg) translate(19em) rotate(-357deg);
−
  -webkit-transform: rotate(357deg) translate(19em) rotate(-357deg);
+
    -webkit-transform: rotate(357deg) translate(19em) rotate(-357deg);
−
  transform: rotate(357deg) translate(19em) rotate(-357deg);            /*change translate for defining position of elements*/
+
    transform: rotate(357deg) translate(19em) 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(19em) rotate(-45deg);
−
  -ms-transform: rotate(45deg) translate(19em) rotate(-45deg);
+
    -ms-transform: rotate(45deg) translate(19em) rotate(-45deg);
−
  -webkit-transform: rotate(45deg) translate(19em) rotate(-45deg);
+
    -webkit-transform: rotate(45deg) translate(19em) rotate(-45deg);
−
  transform: rotate(45deg) translate(19em) rotate(-45deg);
+
    transform: rotate(45deg) translate(19em) 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(18em) rotate(-105deg);
−
  -ms-transform: rotate(105deg) translate(18em) rotate(-105deg);
+
    -ms-transform: rotate(105deg) translate(18em) rotate(-105deg);
−
  -webkit-transform: rotate(105deg) translate(18em) rotate(-105deg);
+
    -webkit-transform: rotate(105deg) translate(18em) rotate(-105deg);
−
  transform: rotate(105deg) translate(18em) rotate(-105deg);
+
    transform: rotate(105deg) translate(18em) 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(27em) rotate(-147deg);
−
  -ms-transform: rotate(147deg) translate(27em) rotate(-147deg);
+
    -ms-transform: rotate(147deg) translate(27em) rotate(-147deg);
−
  -webkit-transform: rotate(147deg) translate(27em) rotate(-147deg);
+
    -webkit-transform: rotate(147deg) translate(27em) rotate(-147deg);
−
  transform: rotate(147deg) translate(27em) rotate(-147deg);
+
    transform: rotate(147deg) translate(27em) 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(28em) rotate(-180deg);
−
  -ms-transform: rotate(180deg) translate(28em) rotate(-180deg);
+
    -ms-transform: rotate(180deg) translate(28em) rotate(-180deg);
−
  -webkit-transform: rotate(180deg) translate(28em) rotate(-180deg);
+
    -webkit-transform: rotate(180deg) translate(28em) rotate(-180deg);
−
  transform: rotate(180deg) translate(28em) rotate(-180deg);
+
    transform: rotate(180deg) translate(28em) 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(27em) rotate(-212deg);
−
  -ms-transform: rotate(212deg) translate(27em) rotate(-212deg);
+
    -ms-transform: rotate(212deg) translate(27em) rotate(-212deg);
−
  -webkit-transform: rotate(212deg) translate(27em) rotate(-212deg);
+
    -webkit-transform: rotate(212deg) translate(27em) rotate(-212deg);
−
  transform: rotate(212deg) translate(27em) rotate(-212deg);
+
    transform: rotate(212deg) translate(27em) 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(20em) rotate(-255deg);
−
  -ms-transform: rotate(255deg) translate(20em) rotate(-255deg);
+
    -ms-transform: rotate(255deg) translate(20em) rotate(-255deg);
−
  -webkit-transform: rotate(255deg) translate(20em) rotate(-255deg);
+
    -webkit-transform: rotate(255deg) translate(20em) rotate(-255deg);
−
  transform: rotate(255deg) translate(20em) rotate(-255deg);
+
    transform: rotate(255deg) translate(20em) 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(20em) rotate(-310deg);
−
  -ms-transform: rotate(310deg) translate(20em) rotate(-310deg);
+
    -ms-transform: rotate(310deg) translate(20em) rotate(-310deg);
−
  -webkit-transform: rotate(310deg) translate(20em) rotate(-310deg);
+
    -webkit-transform: rotate(310deg) translate(20em) rotate(-310deg);
−
  transform: rotate(310deg) translate(20em) rotate(-310deg);
+
    transform: rotate(310deg) translate(20em) rotate(-310deg);
−
}
+
  }
  
−
.circle-container a {
+
  .circle-container a {
−
  /*display: block; */                        /* border around elements */
+
    /*display: block; */                        /* border around elements */
−
  border-radius: 8px;                      /* makes border around elements round or Rechteck */
+
    border-radius: 8px;                      /* makes border around elements round or Rechteck */
−
  /*box-shadow: 0 0 0 5px #0051A2;*/
+
    /*box-shadow: 0 0 0 5px #0051A2;*/
−
        color: #FFF;
+
          color: #FFF;
−
  background-color: #0051A2;
+
    background-color: #0051A2;
−
  padding: 1px 10px;
+
    padding: 1px 10px;
−
  font-size: 110%;
+
    font-size: 110%;
−
  border: 5px solid #0051A2;
+
    border: 5px solid #0051A2;
−
}
+
  }
−
.circle-container > div {
+
  .circle-container > div {
−
  display: block;
+
    display: block;
−
  width: 100%;
+
    width: 100%;
−
  border-radius: 10%;                      /* makes elements round or Rechteck */
+
    border-radius: 10%;                      /* makes elements round or Rechteck */
−
  -webkit-filter: grayscale(100%);
+
    -webkit-filter: grayscale(100%);
−
  filter: grayscale(100%);
+
    filter: grayscale(100%);
−
}
+
  }
−
.circle-container img:hover {
+
  .circle-container img:hover {
−
  -webkit-filter: grayscale(0);
+
    -webkit-filter: grayscale(0);
−
  filter: grayscale(0);
+
    filter: grayscale(0);
−
}
+
  }
  
−
/* =============== END: Circle of Elements - Positioning ==================== */
+
  /* =============== END: Circle of Elements - Positioning ==================== */
  
−
/* =============== BEGIN: New Header =============================== */
+
  /* =============== BEGIN: New Header =============================== */
−
#cool_centerimage_small{
+
  #cool_centerimage_small{
−
  display: none;
+
    display: none;
−
}
+
  }
−
/* =============== END: New Header =============================== */
+
  /* =============== END: New Header =============================== */
  
−
} /* end of media query! dont delete */
+
  } /* end of media query! dont delete */
  
  
−
/* =============== BEGIN: Circle of Elements - Element Styling ==================== */
+
  /* =============== BEGIN: Circle of Elements - Element Styling ==================== */
−
.cool_header {
+
  .cool_header {
−
    text-align: center;
+
      text-align: center;
−
    height: 20px;
+
      height: 20px;
−
    margin-bottom: 3px;
+
      margin-bottom: 3px;
−
    z-index: 10;
+
      z-index: 10;
−
}
+
  }
  
−
.cool_content {
+
  .cool_content {
−
    padding: 1em;
+
      padding: 1em;
−
    height: 150px;
+
      height: 150px;
−
    background-color: #FFFFFF;
+
      background-color: #FFFFFF;
−
    text-align: left;
+
      text-align: left;
−
    box-shadow: 1px 1px 10px #888;
+
      box-shadow: 1px 1px 10px #888;
−
    -webkit-box-shadow: 1px 1px 10px #888;
+
      -webkit-box-shadow: 1px 1px 10px #888;
−
    -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;
−
}
+
  }
  
−
.cool_container {
+
  .cool_container {
−
    width: 100%;
+
      width: 100%;
−
    padding-top: 180px;
+
      padding-top: 180px;
−
    margin-bottom: -50px;
+
      margin-bottom: -50px;
−
}
+
  }
  
−
/* =============== END: Circle of Elements - Element Styling ==================== */
+
  /* =============== END: Circle of Elements - Element Styling ==================== */
  
  
−
/* =============== BEGIN: Circle of Elements - Center Image ==================== */
+
  /* =============== BEGIN: Circle of Elements - Center Image ==================== */
−
.cool_centerimage {
+
  .cool_centerimage {
−
    margin: 0 auto;
+
      margin: 0 auto;
−
    position: relative;
+
      position: relative;
−
    width: 40%;
+
      width: 40%;
−
    height: 250px;
+
      height: 250px;
−
    top: -410px;
+
      top: -410px;
−
    text-align: center;
+
      text-align: center;
−
    left: 1%;
+
      left: 1%;
−
    /*border: 1px solid #000;*/
+
      /*border: 1px solid #000;*/
−
    color: #000;
+
      color: #000;
−
}
+
  }
  
−
#DiaCHIP_logo{
+
  #DiaCHIP_logo{
−
  position: absolute;
+
    position: absolute;
−
  transform: translate(30%, 50%);
+
    transform: translate(30%, 50%);
−
}
+
    -webkit-transform: translate(30%, 50%);
−
/* =============== END: Circle of Elements - Center Image ==================== */
+
    -ms-transform: translate(30%, 50%);
 +
    -o-transform: translate(30%, 50%);
 +
    -moz-transform: translate(30%, 50%);
  
  
−
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 
−
.cool_image_blink {
 
−
/*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);*/
 
−
        box-shadow: 1px 1px 2px 2px #000;
 
−
 
−
-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: 15px;
 
−
}
 
  
−
.cool_image_blink:hover {
+
  }
−
/*box-shadow:
+
  /* =============== END: Circle of Elements - Center Image ==================== */
−
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_content {
 
−
opacity: 1;
 
−
 
−
-webkit-transform: scale(1);
 
−
-moz-transform: scale(1);
 
−
-o-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
}
 
  
−
.element1 {
+
  /* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
−
    background-image: url("");
+
  .cool_image_blink {
−
    background-size: 260px;
+
  /*box-shadow:  
−
    background-position: center;
+
  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);*/
 +
          box-shadow: 1px 1px 2px 2px #000;
 +
 
 +
  -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: 15px;
 +
  }
  
−
.element2 {
+
  .cool_image_blink:hover {
−
    background-image: url("https://static.igem.org/mediawiki/2015/c/c1/Freiburg_diachip_centcoin.png");
+
  /*box-shadow:  
−
    background-size: 260px;
+
  inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
−
    background-position: center;
+
  inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
−
}
+
  0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 +
  }
  
−
.element3 {
+
  .cool_image_blink:hover .cool_content {
−
    background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
+
  opacity: 1;
−
    background-size: 260px;
+
 
−
    background-position: center;
+
  -webkit-transform: scale(1);
−
}
+
  -moz-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  transform: scale(1);
 +
  }
  
−
.element4 {
+
  .element1 {
−
    background-image: url("https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg");
+
      background-image: url("");
−
    background-size: 260px;
+
      background-size: 260px;
−
    background-position: center;
+
      background-position: center;
−
}
+
  }
  
−
.element5 {
+
  .element2 {
−
    background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
+
      background-image: url("https://static.igem.org/mediawiki/2015/c/c1/Freiburg_diachip_centcoin.png");
−
    background-size: 260px;
+
      background-size: 260px;
−
    background-position: center;
+
      background-position: center;
−
}
+
  }
  
−
.element6 {
+
  .element3 {
−
    background-image: url("https://static.igem.org/mediawiki/2015/1/1f/Freiburg_project-img_0301.jpg");
+
      background-image: url("https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png");
−
    background-size: 260px;
+
      background-size: 260px;
−
    background-position: center;
+
      background-position: center;
−
}
+
  }
  
−
.element7 {
+
  .element4 {
−
    background-image: url("https://static.igem.org/mediawiki/2015/2/29/Freiburg_Modeling_Home.png");
+
      background-image: url("https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg");
−
    background-size: 260px;
+
      background-size: 260px;
−
    background-position: center;
+
      background-position: center;
−
}
+
  }
  
−
.element8 {
+
  .element5 {
−
    background-image: url("https://static.igem.org/mediawiki/2015/7/71/Freiburg_tetanus_home.png");
+
      background-image: url("https://static.igem.org/mediawiki/2015/4/49/Freiburg_2015_pOP.jpg");
−
    background-size: 260px;
+
      background-size: 260px;
−
    background-position: center;
+
      background-position: center;
−
}
+
  }
−
/* =============== END: Circle of Elements - Hiding Animation ==================== */
+
  
 +
  .element6 {
 +
      background-image: url("https://static.igem.org/mediawiki/2015/1/1f/Freiburg_project-img_0301.jpg");
 +
      background-size: 260px;
 +
      background-position: center;
 +
  }
  
−
/* =============== BEGIN: Resetting General CSS ==================== */
+
  .element7 {
−
.mw-content-ltr ul {
+
      background-image: url("https://static.igem.org/mediawiki/2015/2/29/Freiburg_Modeling_Home.png");
−
    padding: 0;
+
      background-size: 260px;
−
    margin: 0 auto;
+
      background-position: center;
−
}
+
  }
  
−
/*ul {
+
  .element8 {
−
    line-height: 1em;
+
      background-image: url("https://static.igem.org/mediawiki/2015/7/71/Freiburg_tetanus_home.png");
−
}*/
+
      background-size: 260px;
 +
      background-position: center;
 +
  }
 +
  /* =============== END: Circle of Elements - Hiding Animation ==================== */
  
−
.content_box {
 
−
    box-shadow: none;
 
−
    padding: 2% 4%;
 
−
    margin: 0px;
 
−
}
 
−
/* =============== END: Resetting General CSS ==================== */
 
  
 +
  /* =============== BEGIN: Resetting General CSS ==================== */
 +
  .mw-content-ltr ul {
 +
      padding: 0;
 +
      margin: 0 auto;
 +
  }
  
−
/* ============== Animate boxes on start ===========================*/
+
  /*ul {
 +
      line-height: 1em;
 +
  }*/
  
−
/* from https://daneden.github.io/animate.css/ */
+
  .content_box {
−
 
+
      box-shadow: none;
−
@-webkit-keyframes zoomIn {
+
      padding: 2% 4%;
−
  from {
+
      margin: 0px;
−
    opacity: 0;
+
−
    -webkit-transform: scale3d(.3, .3, .3);
+
−
    transform: scale3d(.3, .3, .3);
+
 
   }
 
   }
 +
  /* =============== END: Resetting General CSS ==================== */
  
−
  50% {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
  
−
@keyframes zoomIn {
+
  /* ============== Animate boxes on start ===========================*/
−
  from {
+
 
−
    opacity: 0;
+
  /* from https://daneden.github.io/animate.css/ */
−
    -webkit-transform: scale3d(.3, .3, .3);
+
 
−
    transform: scale3d(.3, .3, .3);
+
  @-webkit-keyframes zoomIn {
−
  }
+
    from {
 +
      opacity: 0;
 +
      -webkit-transform: scale3d(.3, .3, .3);
 +
      transform: scale3d(.3, .3, .3);
 +
    }
  
−
  50% {
+
    50% {
−
    opacity: 1;
+
      opacity: 1;
 +
    }
 
   }
 
   }
−
}
 
  
−
.zoomIn {
+
  @keyframes zoomIn {
−
  -webkit-animation-name: zoomIn;
+
    from {
−
  animation-name: zoomIn;
+
      opacity: 0;
−
}
+
      -webkit-transform: scale3d(.3, .3, .3);
 +
      transform: scale3d(.3, .3, .3);
 +
    }
  
−
@-webkit-keyframes zoomOut {
+
    50% {
−
  from {
+
      opacity: 1;
−
    opacity: 1;
+
    }
 
   }
 
   }
  
−
   50% {
+
   .zoomIn {
−
    opacity: 0;
+
     -webkit-animation-name: zoomIn;
−
     -webkit-transform: scale3d(.3, .3, .3);
+
     animation-name: zoomIn;
−
     transform: scale3d(.3, .3, .3);
+
 
   }
 
   }
  
−
   to {
+
   @-webkit-keyframes zoomOut {
−
     opacity: 0;
+
     from {
 +
      opacity: 1;
 +
    }
 +
 
 +
    50% {
 +
      opacity: 0;
 +
      -webkit-transform: scale3d(.3, .3, .3);
 +
      transform: scale3d(.3, .3, .3);
 +
    }
 +
 
 +
    to {
 +
      opacity: 0;
 +
    }
 
   }
 
   }
−
}
 
  
−
@keyframes zoomOut {
+
  @keyframes zoomOut {
−
  from {
+
    from {
−
    opacity: 1;
+
      opacity: 1;
 +
    }
 +
 
 +
    50% {
 +
      opacity: 0;
 +
      -webkit-transform: scale3d(.3, .3, .3);
 +
      transform: scale3d(.3, .3, .3);
 +
    }
 +
 
 +
    to {
 +
      opacity: 0;
 +
    }
 
   }
 
   }
  
−
   50% {
+
   .zoomOut {
−
    opacity: 0;
+
     -webkit-animation-name: zoomOut;
−
     -webkit-transform: scale3d(.3, .3, .3);
+
     animation-name: zoomOut;
−
     transform: scale3d(.3, .3, .3);
+
 
   }
 
   }
  
−
   to {
+
 
 +
   #box1,
 +
  #box2,
 +
  #box3,
 +
  #box4,
 +
  #box5,
 +
  #box6,
 +
  #box7,
 +
  #box8,
 +
  #DiaCHIP_logo,
 +
  #DiaCHIP_text {
 
     opacity: 0;
 
     opacity: 0;
 
   }
 
   }
−
}
 
  
−
.zoomOut {
+
   @media screen and (max-width: 1199px) {
−
   -webkit-animation-name: zoomOut;
+
−
  animation-name: zoomOut;
+
−
}
+
  
 +
  .topicboxes{
 +
    display: block;
 +
    width: 230px;                      /* define size of elements */
 +
    height: 200px;
 +
    margin: 20px;   
 +
    font-size: 100%;
 +
    text-align: center;
 +
  }
  
−
#box1,
+
  .circle-container li {
−
#box2,
+
    display: inline-block;
−
#box3,
+
  }
−
#box4,
+
   
−
#box5,
+
  .circle-container{
−
#box6,
+
    display: flex;
−
#box7,
+
    flex-wrap: wrap;
−
#box8,
+
    justify-content: space-around;
−
#DiaCHIP_logo,
+
    margin-bottom: 2em;
−
#DiaCHIP_text {
+
  }
−
  opacity: 0;
+
−
}
+
  
−
@media screen and (max-width: 1099px) {
+
  .cool_container{
 +
    display: block;
 +
    padding-top: 0;
 +
    margin: 0;
 +
  }
 +
   
 +
  .cool_centerimage{
 +
    display: none;
 +
  }
  
−
.topicboxes{
+
  #cool_centerimage_small{
−
  display: block;
+
    display: block;
−
  width: 230px;                      /* define size of elements */
+
    margin: 20px;
−
  height: 200px;
+
    font-weight: 500;
−
  margin: 20px;  
+
   }
−
  font-size: 100%;
+
−
   text-align: center;
+
−
}
+
  
−
.circle-container li {
+
  .circle-container a {
−
  display: inline-block;
+
    border-radius: 8px;
−
}
+
    color: #FFF;
−
 
+
    background-color: #0051A2;
−
.circle-container{
+
    padding: 1px 10px;
−
  display: flex;
+
    font-size: 100%;
−
  flex-wrap: wrap;
+
    border: 5px solid #0051A2;
−
  justify-content: space-around;
+
  }
−
  margin-bottom: 2em;
+
−
}
+
  
−
.cool_container{
+
   }
−
   display: block;
+
−
  padding-top: 0;
+
−
  margin: 0;
+
−
}
+
−
 
+
−
.cool_centerimage{
+
−
  display: none;
+
−
}
+
  
−
#cool_centerimage_small{
+
   </style>
−
   display: block;
+
−
  margin: 20px;
+
−
  font-weight: 500;
+
−
}
+
  
−
.circle-container a {
+
   <script type="text/javascript">
−
   border-radius: 8px;
+
   
−
  color: #FFF;
+
   // perform the animation
−
   background-color: #0051A2;
+
−
  padding: 1px 10px;
+
−
  font-size: 100%;
+
−
  border: 5px solid #0051A2;
+
−
}
+
  
−
}
+
  $(document).ready(function() {
 +
      $('#DiaCHIP_logo').delay(1000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 +
      $('#box1').delay(2000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box2').delay(3000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box3').delay(4000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box4').delay(5000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box5').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box6').delay(7000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box7').delay(8000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#box8').delay(9000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
      $('#DiaCHIP_logo').delay(9000).queue(function (next) {$(this).css({"animation-name": "zoomOut", "animation-duration": "1s"}).css({"opacity":"0"}); next(); });
 +
      $('#DiaCHIP_text').delay(10500).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 +
  });
  
−
</style>
+
  </script>
  
−
<script type="text/javascript">
+
  <div id="cool_centerimage_small">
−
    
+
      <!--<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">-->
−
// perform the animation
+
      <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>
 +
      <p>
 +
   This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
 +
      </p>
 +
  </div>
  
−
$(document).ready(function() {
 
−
    $('#DiaCHIP_logo').delay(1000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 
−
    $('#box1').delay(2000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box2').delay(3000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box3').delay(4000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box4').delay(5000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box5').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box6').delay(7000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box7').delay(8000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#box8').delay(9000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
−
    $('#DiaCHIP_logo').delay(9000).queue(function (next) {$(this).css({"animation-name": "zoomOut", "animation-duration": "1s"}).css({"opacity":"0"}); next(); });
 
−
    $('#DiaCHIP_text').delay(10500).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 
−
});
 
  
−
</script>
+
  <div class="cool_container">
  
−
<div id="cool_centerimage_small">
+
      <ul class='circle-container'>
−
    <!--<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">-->
+
          <li><!--6-->
−
    <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?
+
          <div id="box1" class="topicboxes">
−
    </p>
+
            <div class="cool_header"><a href='#'>Diagnostics today</a></div>
−
    <p>
+
            <div class="cool_image_blink element1">
−
This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
+
            <div class="cool_content cool_text_blink">Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!</div>
−
    </p>
+
            </div>
−
</div>
+
          </div>
 +
          </li>
  
−
 
+
          <li><!--7-->
−
<div class="cool_container">
+
          <div id="box2" class="topicboxes">
−
 
+
            <div class="cool_header"><a href='#'>The DiaCHIP</a></div>
−
    <ul class='circle-container'>
+
            <div class="cool_image_blink element2">
−
        <li><!--6-->
+
            <div class="cool_content cool_text_blink">Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!</div>
−
        <div id="box1" class="topicboxes">
+
            </div>  
−
          <div class="cool_header"><a href='#'>Diagnostics today</a></div>
+
−
          <div class="cool_image_blink element1">
+
−
          <div class="cool_content cool_text_blink">Nowadays, medical diagnoses are mainly based on huge amounts of time-consuming and cost intensive serological tests. Read more about the issues we tackled!</div>
+
 
           </div>
 
           </div>
−
        </div>
+
          </li>
−
        </li>
+
  
−
        <li><!--7-->
+
           <li><!--8-->
−
        <div id="box2" class="topicboxes">
+
          <div id="box3" class="topicboxes">
−
           <div class="cool_header"><a href='#'>The DiaCHIP</a></div>
+
            <div class="cool_header"><a href='#'>Our System</a></div>
−
          <div class="cool_image_blink element2">
+
            <div class="cool_image_blink element3">
−
          <div class="cool_content cool_text_blink">Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!</div>
+
            <div class="cool_content cool_text_blink">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!</div>
−
          </div>
+
            </div>
−
        </div>
+
−
        </li>
+
−
 
+
−
        <li><!--8-->
+
−
        <div id="box3" class="topicboxes">
+
−
          <div class="cool_header"><a href='#'>Our System</a></div>
+
−
          <div class="cool_image_blink element3">
+
−
          <div class="cool_content cool_text_blink">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!</div>
+
 
           </div>
 
           </div>
−
        </div>
+
          </li>
−
        </li>
+
  
−
        <li><!--1-->
+
          <li><!--1-->
−
            <div id="box4" class="topicboxes">
+
              <div id="box4" class="topicboxes">
−
              <div class="cool_header"><a href='#'>Own Device</a></div>
+
                <div class="cool_header"><a href='#'>Own Device</a></div>
−
              <div class="cool_image_blink element4">
+
                <div class="cool_image_blink element4">
−
              <div class="cool_content cool_text_blink">We built our own simplified and affordable detection device. Check out the step by step instructions!</div>
+
                <div class="cool_content cool_text_blink">We built our own simplified and affordable detection device. Check out the step by step instructions!</div>
 +
              </div>
 
             </div>
 
             </div>
−
          </div>
+
          </li>
−
        </li>
+
          <li><!--2-->
−
        <li><!--2-->
+
            <div id="box5" class="topicboxes">
−
          <div id="box5" class="topicboxes">
+
              <div class="cool_header"><a href='#'>Improved iGEM Backbone</a></div>
−
            <div class="cool_header"><a href='#'>Improved iGEM Backbone</a></div>
+
              <div class="cool_image_blink element5">
−
            <div class="cool_image_blink element5">
+
              <div class="cool_content cool_text_blink">We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!</div>
−
            <div class="cool_content cool_text_blink">We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!</div>
+
              </div>
 
             </div>
 
             </div>
−
           </div>
+
           </li>
−
        </li>
+
  
−
        <li><!--3-->
+
          <li><!--3-->
−
          <div id="box6" class="topicboxes">
+
            <div id="box6" class="topicboxes">
−
            <div class="cool_header"><a href='#'>Human Practice</a></div>
+
              <div class="cool_header"><a href='#'>Human Practice</a></div>
−
            <div class="cool_image_blink element6">
+
              <div class="cool_image_blink element6">
−
            <div class="cool_content cool_text_blink">What do people think about the DiaCHIP and systems based on synthetic biology? <br> Check out the results of our survey and discussions!</div>
+
              <div class="cool_content cool_text_blink">What do people think about the DiaCHIP and systems based on synthetic biology? <br> Check out the results of our survey and discussions!</div>
 +
              </div>
 
             </div>
 
             </div>
−
           </div>
+
           </li>
−
        </li>
+
  
−
        <li><!--4-->
+
          <li><!--4-->
−
        <div id="box7" class="topicboxes">
+
          <div id="box7" class="topicboxes">
−
          <div class="cool_header"><a href='#'>Modeling</a></div>
+
            <div class="cool_header"><a href='#'>Modeling</a></div>
−
          <div class="cool_image_blink element7">
+
            <div class="cool_image_blink element7">
−
          <div class="cool_content cool_text_blink">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.</div>
+
            <div class="cool_content cool_text_blink">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.</div>
 +
            </div>
 
           </div>
 
           </div>
−
        </div>
+
          </li>
−
        </li>
+
  
−
        <li><!--5-->
+
          <li><!--5-->
−
          <div id="box8" class="topicboxes">
+
            <div id="box8" class="topicboxes">
−
            <div class="cool_header"><a href='#'>Blood Serum Analysis</a></div>
+
              <div class="cool_header"><a href='#'>Blood Serum Analysis</a></div>
−
            <div class="cool_image_blink element8">
+
              <div class="cool_image_blink element8">
−
            <div class="cool_content cool_text_blink">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!</div>
+
              <div class="cool_content cool_text_blink">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!</div>
 +
              </div>
 
             </div>
 
             </div>
−
           </div>
+
           </li>
−
        </li>
+
      </ul>
−
    </ul>
+
  
−
    <div class="cool_centerimage">
+
      <div class="cool_centerimage">
−
        <div id="DiaCHIP_logo">
+
          <div id="DiaCHIP_logo">
−
          <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">
−
        </div>
+
          </div>
−
        <div id="DiaCHIP_text">
+
          <div id="DiaCHIP_text">
−
          <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>
+
            </p>
−
          <p>
+
            <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>
−
        </div>
+
          </div>
−
    </div>
+
      </div>
  
−
</div>
+
  </div>
  
  
−
<div class="content_box">
+
  <div class="content_box">
  
  
−
<h1 class="sectionedit1">DiaCHIP - Enlightening Diagnostics</h1>
+
  <h1 class="sectionedit1">DiaCHIP - Enlightening Diagnostics</h1>
−
<div class="level1">
+
  <div class="level1">
−
<p>
+
  <p>
−
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.  
+
  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.  
−
</p>
+
  </p>
−
</div>
+
  </div>
  
−
</div>
+
  </div>
  
−
</html>
+
  </html>
−
{{Freiburg/wiki_content_end}}
+
  {{Freiburg/wiki_content_end}}

Revision as of 13:07, 14 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!
      

  



  


      
    
          
  • 
          
    
            
    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!
    
            
    
          
    
          
    • 

          
  • 
              
    
                
    Own Device
    
                
    
                
    We built our own 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!
            

          

      


  



  



  
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.