|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{Freiburg/CSS}}
| |
| | | | |
| − | <html>
| |
| − |
| |
| − | <style>
| |
| − | /*========= BEGIN: style for navigation bar ==========*/
| |
| − | #home {
| |
| − | background: url(https://static.igem.org/mediawiki/2015/d/d7/Freiburg_icon_home_active.png) no-repeat;
| |
| − | }
| |
| − |
| |
| − | #home a {
| |
| − | color: #ecdc18;
| |
| − | }
| |
| − | /*========= END: style for navigation bar ==========*/
| |
| − |
| |
| − | a:link {
| |
| − | text-decoration: none;
| |
| − | color: #888;
| |
| − | }
| |
| − |
| |
| − | .intro_button {
| |
| − | margin: 0px auto;
| |
| − | padding: 2px 5px 5px 10px;
| |
| − | width: 150px;
| |
| − | line-height: 16px;
| |
| − | text-align: center;
| |
| − | /*background-color: #326aab;*/
| |
| − | background-color: #C5162F;
| |
| − | font-size: 14pt;
| |
| − | border-radius: 8px;
| |
| − | /*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;
| |
| − | }
| |
| − |
| |
| − | /* =============== BEGIN: Circle of Elements ==================== */
| |
| − | /*
| |
| − | * Mixin to put items on a circle
| |
| − | * [1] - Allows children to be absolutely positioned
| |
| − | * [2] - Allows the mixin to be used on a list
| |
| − | * [3] - In case box-sizing: border-box has been enabled
| |
| − | * [4] - Allows any type of direct children to be targeted
| |
| − | */
| |
| − |
| |
| − | @media screen and (min-width: 1050px){
| |
| − |
| |
| − | .circle-container {
| |
| − | position: relative;
| |
| − | /* [1] */
| |
| − | width: 480px; /* changes size of circle that elements are circling on */
| |
| − | height: 480px;
| |
| − | padding: 0;
| |
| − | border-radius: 50%; /* switch between circle and Rechteck */
| |
| − | list-style: none;
| |
| − | /* [2] */
| |
| − | -moz-box-sizing: content-box;
| |
| − | -webkit-box-sizing: content-box;
| |
| − | box-sizing: content-box;
| |
| − | /* [3] */
| |
| − | margin: 5em auto 0;
| |
| − | /*border: solid 5px #0051A2;*/
| |
| − | z-index: 499;
| |
| − | }
| |
| − | .circle-container > * {
| |
| − | /* [4] */
| |
| − | display: block;
| |
| − | position: absolute; /* set absolute to fix elements on circle */
| |
| − | top: 30%;
| |
| − | left: 40%;
| |
| − | width: 260px; /* define size of elements */
| |
| − | height: 200px;
| |
| − | margin: 0;
| |
| − | font-size: 100%;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /* transformations needed for showing the pictures */
| |
| − | .circle-container > *:nth-of-type(4) {
| |
| − | -moz-transform: rotate(357deg) translate(304px) rotate(-357deg);
| |
| − | -ms-transform: rotate(357deg) translate(304px) rotate(-357deg);
| |
| − | -webkit-transform: rotate(357deg) translate(304px) rotate(-357deg);
| |
| − | transform: rotate(357deg) translate(304px) rotate(-357deg); /*change translate for defining position of elements*/
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(5) {
| |
| − | -moz-transform: rotate(45deg) translate(304px) rotate(-45deg);
| |
| − | -ms-transform: rotate(45deg) translate(304px) rotate(-45deg);
| |
| − | -webkit-transform: rotate(45deg) translate(304px) rotate(-45deg);
| |
| − | transform: rotate(45deg) translate(304px) rotate(-45deg);
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(6) {
| |
| − | -moz-transform: rotate(105deg) translate(288px) rotate(-105deg);
| |
| − | -ms-transform: rotate(105deg) translate(288px) rotate(-105deg);
| |
| − | -webkit-transform: rotate(105deg) translate(288px) rotate(-105deg);
| |
| − | transform: rotate(105deg) translate(288px) rotate(-105deg);
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(7) {
| |
| − | -moz-transform: rotate(147deg) translate(432px) rotate(-147deg);
| |
| − | -ms-transform: rotate(147deg) translate(432px) rotate(-147deg);
| |
| − | -webkit-transform: rotate(147deg) translate(432px) rotate(-147deg);
| |
| − | transform: rotate(147deg) translate(432px) rotate(-147deg);
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(8) {
| |
| − | -moz-transform: rotate(180deg) translate(448px) rotate(-180deg);
| |
| − | -ms-transform: rotate(180deg) translate(448px) rotate(-180deg);
| |
| − | -webkit-transform: rotate(180deg) translate(448px) rotate(-180deg);
| |
| − | transform: rotate(180deg) translate(448px) rotate(-180deg);
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(1) {
| |
| − | -moz-transform: rotate(212deg) translate(432px) rotate(-212deg);
| |
| − | -ms-transform: rotate(212deg) translate(432px) rotate(-212deg);
| |
| − | -webkit-transform: rotate(212deg) translate(432px) rotate(-212deg);
| |
| − | transform: rotate(212deg) translate(432px) rotate(-212deg);
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(2) {
| |
| − | -moz-transform: rotate(255deg) translate(320px) rotate(-255deg);
| |
| − | -ms-transform: rotate(255deg) translate(320px) rotate(-255deg);
| |
| − | -webkit-transform: rotate(255deg) translate(320px) rotate(-255deg);
| |
| − | transform: rotate(255deg) translate(320px) rotate(-255deg);
| |
| − | }
| |
| − | .circle-container > *:nth-of-type(3) {
| |
| − | -moz-transform: rotate(310deg) translate(320px) rotate(-310deg);
| |
| − | -ms-transform: rotate(310deg) translate(320px) rotate(-310deg);
| |
| − | -webkit-transform: rotate(310deg) translate(320px) rotate(-310deg);
| |
| − | transform: rotate(310deg) translate(320px) rotate(-310deg);
| |
| − | }
| |
| − |
| |
| − | .circle-container a {
| |
| − | padding: 1px 10px;
| |
| − | font-size: 90%;
| |
| − | }
| |
| − |
| |
| − | .circle-container > div {
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | border-radius: 10%; /* makes elements round or Rechteck */
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | filter: grayscale(100%);
| |
| − | }
| |
| − | .circle-container img:hover {
| |
| − | -webkit-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%);
| |
| − | }
| |
| − |
| |
| − | /* =============== END: Circle of Elements - Positioning ==================== */
| |
| − |
| |
| − | /* =============== BEGIN: New Header =============================== */
| |
| − | #cool_centerimage_small{
| |
| − | display: none;
| |
| − | }
| |
| − | /* =============== END: New Header =============================== */
| |
| − |
| |
| − | } /* end of media query! dont delete */
| |
| − |
| |
| − |
| |
| − | /* =============== BEGIN: Circle of Elements - Element Styling ==================== */
| |
| − | .cool_header {
| |
| − | text-align: center;
| |
| − | height: 20px;
| |
| − | margin-bottom: 3px;
| |
| − | z-index: 10;
| |
| − | }
| |
| − |
| |
| − | .cool_header a {
| |
| − | /*display: block; */ /* border around elements */
| |
| − | border-radius: 8px; /* makes border around elements round or Rechteck */
| |
| − | /*box-shadow: 0 0 0 5px #0051A2;*/
| |
| − | color: #FFF;
| |
| − | background-color: #0051A2;
| |
| − | padding: 1px 10px;
| |
| − | font-size: 110%;
| |
| − | border: 5px solid #0051A2;
| |
| − | }
| |
| − |
| |
| − | .cool_header a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | .cool_content {
| |
| − | padding: 16px;
| |
| − | height: 150px;
| |
| − | background-color: #FFFFFF;
| |
| − | text-align: left;
| |
| − | box-shadow: 1px 1px 10px #888;
| |
| − | -webkit-box-shadow: 1px 1px 10px #888;
| |
| − | -moz-box-shadow: 1px 1px 10px #888;
| |
| − | border-radius: 15px;
| |
| − | opacity: 0;
| |
| − |
| |
| − | -webkit-transition: all 0.4s ease-in-out;
| |
| − | -moz-transition: all 0.4s ease-in-out;
| |
| − | -o-transition: all 0.4s ease-in-out;
| |
| − | -ms-transition: all 0.4s ease-in-out;
| |
| − | transition: all 0.4s ease-in-out;
| |
| − |
| |
| − | -webkit-transform: scale(0);
| |
| − | -moz-transform: scale(0);
| |
| − | -o-transform: scale(0);
| |
| − | -ms-transform: scale(0);
| |
| − | transform: scale(0);
| |
| − |
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .cool_container {
| |
| − | width: 100%;
| |
| − | padding-top: 180px;
| |
| − | margin-bottom: -50px;
| |
| − | }
| |
| − |
| |
| − | /* =============== END: Circle of Elements - Element Styling ==================== */
| |
| − |
| |
| − |
| |
| − | /* =============== BEGIN: Circle of Elements - Center Image ==================== */
| |
| − | .cool_centerimage {
| |
| − | margin: 0 auto;
| |
| − | position: relative;
| |
| − | width: 40%;
| |
| − | height: 250px;
| |
| − | top: -420px;
| |
| − | text-align: center;
| |
| − | left: 1%;
| |
| − | /*border: 1px solid #000;*/
| |
| − | color: #000;
| |
| − | z-index: 500;
| |
| − | }
| |
| − |
| |
| − | #DiaCHIP_logo{
| |
| − | position: absolute;
| |
| − | transform: translate(30%, 50%);
| |
| − | -ms-transform: translate(30%, 50%);
| |
| − | -o-transform: translate(30%, 50%);
| |
| − | -webkit-transform: translate(30%, 50%);
| |
| − |
| |
| − | }
| |
| − | /* =============== END: Circle of Elements - Center Image ==================== */
| |
| − |
| |
| − |
| |
| − | /* =============== 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:
| |
| − | 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 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/0/05/Freiburg_Home_Julias_Hand.jpg");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element2 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/8/8e/Freiburg_diachip_centcoin_home.png");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element3 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/e/e6/Freiburg_DiaCHIP_home.jpg");
| |
| − | background-size: 91%;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element4 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/d/d0/Freiburg_Own_Device_Foto_home.jpg");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element5 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/3/3a/Freiburg_pOP_home_scaled.png");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element6 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/8/8d/Freiburg_Home_ScienceFair_Interview.png");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element7 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_Modeling_Home2.png");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − |
| |
| − | .element8 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/5/56/Freiburg_tetanus_home2.png");
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | }
| |
| − | /* =============== END: Circle of Elements - Hiding Animation ==================== */
| |
| − |
| |
| − |
| |
| − | /* =============== BEGIN: Resetting General CSS ==================== */
| |
| − | .mw-content-ltr ul {
| |
| − | padding: 0;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | /*ul {
| |
| − | line-height: 1em;
| |
| − | }*/
| |
| − |
| |
| − | .content_box {
| |
| − | box-shadow: none;
| |
| − | padding: 2% 4%;
| |
| − | margin: 0px;
| |
| − | }
| |
| − | /* =============== END: Resetting General CSS ==================== */
| |
| − |
| |
| − |
| |
| − | /* ============== 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;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #box1,
| |
| − | #box2,
| |
| − | #box3,
| |
| − | #box4,
| |
| − | #box5,
| |
| − | #box6,
| |
| − | #box7,
| |
| − | #box8,
| |
| − | #DiaCHIP_logo,
| |
| − | #DiaCHIP_text {
| |
| − | opacity: 0;
| |
| − | }
| |
| − |
| |
| − | .link_trigger:hover{
| |
| − | cursor: hand;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1049px) {
| |
| − |
| |
| − | .topicboxes{
| |
| − | display: block;
| |
| − | width: 230px; /* define size of elements */
| |
| − | height: 200px;
| |
| − | margin: 20px;
| |
| − | font-size: 100%;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .circle-container li {
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .circle-container{
| |
| − | display: flex;
| |
| − | flex-wrap: wrap;
| |
| − | justify-content: space-around;
| |
| − | margin-bottom: 32px;
| |
| − | }
| |
| − |
| |
| − | .cool_container{
| |
| − | display: block;
| |
| − | padding-top: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .cool_centerimage{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #cool_centerimage_small{
| |
| − | display: block;
| |
| − | margin: 20px;
| |
| − | font-weight: 500;
| |
| − | }
| |
| − |
| |
| − | .circle-container a {
| |
| − | padding: 1px 5px;
| |
| − | font-size: 80%;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | // perform the animation
| |
| − |
| |
| − | $(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-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box2').delay(2500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box3').delay(3000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box4').delay(3500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box5').delay(4000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box6').delay(4500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box7').delay(5000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
| |
| − | $('#box8').delay(5500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); 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(); });
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | $('.link_trigger').click(function(){
| |
| − | window.location.href=$(this).attr('href');
| |
| − | })
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <div id="cool_centerimage_small">
| |
| − | <!--<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?
| |
| − | <br>
| |
| − | This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
| |
| − | </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 class="cool_container">
| |
| − |
| |
| − | <ul class='circle-container'>
| |
| − | <li><!--6-->
| |
| − | <div id="box1" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Design' title="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!
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--7-->
| |
| − | <div id="box2" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href="https://2015.igem.org/Team:Freiburg/Project/Overview" title="The DiaCHIP">
| |
| − | Simultaneous screening for hundreds of diseases within a few hours? <br> Find out about the DiaCHIP's potential to enlighten future diagnostics!
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--8-->
| |
| − | <div id="box3" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Project/System' title="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!
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--1-->
| |
| − | <div id="box4" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Results/Own_Device' title="Our Device">
| |
| − | We built our simplified and affordable detection device. Check out the step by step instructions!
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--2-->
| |
| − | <div id="box5" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Description' title="pOP-vector">
| |
| − | We provided an improved backbone for protein overexpression meeting all the iGEM standards. <br> See how we expanded the iGEM Registry!
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--3-->
| |
| − | <div id="box6" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Practices' title="Human Practice">
| |
| − | 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>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--4-->
| |
| − | <div id="box7" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Results/Modeling' title="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.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li><!--5-->
| |
| − | <div id="box8" class="topicboxes">
| |
| − | <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_content cool_text_blink link_trigger" href='https://2015.igem.org/Team:Freiburg/Results' title="Results">
| |
| − | 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>
| |
| − | </li>
| |
| − | </ul>
| |
| − |
| |
| − | <div class="cool_centerimage">
| |
| − | <div id="DiaCHIP_logo">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_homepage_Dia_chip.png" width="250px">
| |
| − | </div>
| |
| − | <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?
| |
| − | <br>
| |
| − | This is the reason why we thought about a universally accessible, cost and time efficient diagnostic device and developed the DiaCHIP!
| |
| − | </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>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div class="content_box">
| |
| − |
| |
| − |
| |
| − | <h1>DiaCHIP - Enlightening Diagnostics</h1>
| |
| − | <div class="level1">
| |
| − | <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.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </html>
| |
| − | {{Freiburg/wiki_content_end}}
| |
