Difference between revisions of "Team:Freiburg/Testpage3"
| Line 5: | Line 5: | ||
<style> | <style> | ||
| − | /* =============== BEGIN: | + | /* =============== 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 | ||
| Line 28: | Line 27: | ||
/* [3] */ | /* [3] */ | ||
margin: 5em auto 0; | margin: 5em auto 0; | ||
| − | border: solid 5px #0051A2; | + | /*border: solid 5px #0051A2;*/ |
| + | z-index: 500; | ||
} | } | ||
.circle-container > * { | .circle-container > * { | ||
| Line 36: | Line 36: | ||
top: 30%; | top: 30%; | ||
left: 30%; | left: 30%; | ||
| − | width: | + | width: 260px; /* define size of elements */ |
height: 200px; | height: 200px; | ||
| − | margin: 0; | + | margin: 0; |
} | } | ||
| Line 52: | Line 52: | ||
-ms-transform: rotate(45deg) translate(10em) rotate(-45deg); | -ms-transform: rotate(45deg) translate(10em) rotate(-45deg); | ||
-webkit-transform: rotate(45deg) translate(10em) rotate(-45deg); | -webkit-transform: rotate(45deg) translate(10em) rotate(-45deg); | ||
| − | transform: rotate( | + | transform: rotate(35deg) translate(20em) rotate(-35deg); |
} | } | ||
.circle-container > *:nth-of-type(3) { | .circle-container > *:nth-of-type(3) { | ||
| Line 58: | Line 58: | ||
-ms-transform: rotate(90deg) translate(10em) rotate(-90deg); | -ms-transform: rotate(90deg) translate(10em) rotate(-90deg); | ||
-webkit-transform: rotate(90deg) translate(10em) rotate(-90deg); | -webkit-transform: rotate(90deg) translate(10em) rotate(-90deg); | ||
| − | transform: rotate( | + | transform: rotate(95deg) translate(20em) rotate(-95deg); |
} | } | ||
.circle-container > *:nth-of-type(4) { | .circle-container > *:nth-of-type(4) { | ||
| Line 64: | Line 64: | ||
-ms-transform: rotate(135deg) translate(10em) rotate(-135deg); | -ms-transform: rotate(135deg) translate(10em) rotate(-135deg); | ||
-webkit-transform: rotate(135deg) translate(10em) rotate(-135deg); | -webkit-transform: rotate(135deg) translate(10em) rotate(-135deg); | ||
| − | transform: rotate( | + | transform: rotate(150deg) translate(24em) rotate(-150deg); |
} | } | ||
.circle-container > *:nth-of-type(5) { | .circle-container > *:nth-of-type(5) { | ||
| Line 70: | Line 70: | ||
-ms-transform: rotate(180deg) translate(10em) rotate(-180deg); | -ms-transform: rotate(180deg) translate(10em) rotate(-180deg); | ||
-webkit-transform: rotate(180deg) translate(10em) rotate(-180deg); | -webkit-transform: rotate(180deg) translate(10em) rotate(-180deg); | ||
| − | transform: rotate(180deg) translate( | + | transform: rotate(180deg) translate(24em) rotate(-180deg); |
} | } | ||
.circle-container > *:nth-of-type(6) { | .circle-container > *:nth-of-type(6) { | ||
| Line 76: | Line 76: | ||
-ms-transform: rotate(225deg) translate(10em) rotate(-225deg); | -ms-transform: rotate(225deg) translate(10em) rotate(-225deg); | ||
-webkit-transform: rotate(225deg) translate(10em) rotate(-225deg); | -webkit-transform: rotate(225deg) translate(10em) rotate(-225deg); | ||
| − | transform: rotate( | + | transform: rotate(215deg) translate(24em) rotate(-215deg); |
} | } | ||
.circle-container > *:nth-of-type(7) { | .circle-container > *:nth-of-type(7) { | ||
| Line 82: | Line 82: | ||
-ms-transform: rotate(270deg) translate(10em) rotate(-270deg); | -ms-transform: rotate(270deg) translate(10em) rotate(-270deg); | ||
-webkit-transform: rotate(270deg) translate(10em) rotate(-270deg); | -webkit-transform: rotate(270deg) translate(10em) rotate(-270deg); | ||
| − | transform: rotate( | + | transform: rotate(266deg) translate(20em) rotate(-266deg); |
} | } | ||
.circle-container > *:nth-of-type(8) { | .circle-container > *:nth-of-type(8) { | ||
| Line 88: | Line 88: | ||
-ms-transform: rotate(315deg) translate(10em) rotate(-315deg); | -ms-transform: rotate(315deg) translate(10em) rotate(-315deg); | ||
-webkit-transform: rotate(315deg) translate(10em) rotate(-315deg); | -webkit-transform: rotate(315deg) translate(10em) rotate(-315deg); | ||
| − | transform: rotate( | + | transform: rotate(325deg) translate(20em) rotate(-325deg); |
} | } | ||
| Line 95: | Line 95: | ||
border-radius: 10%; /* makes border around elements round or Rechteck */ | border-radius: 10%; /* makes border around elements round or Rechteck */ | ||
box-shadow: 0 0 0 5px #0051A2; | box-shadow: 0 0 0 5px #0051A2; | ||
| + | color: #FFF; | ||
} | } | ||
.circle-container > div { | .circle-container > div { | ||
| Line 107: | Line 108: | ||
filter: grayscale(0); | filter: grayscale(0); | ||
} | } | ||
| + | /* =============== END: Circle of Elements - Positioning ==================== */ | ||
| + | |||
| + | |||
| + | /* =============== BEGIN: Circle of Elements - Element Styling ==================== */ | ||
| + | .cool_header { | ||
| + | background-color: #0051A2; | ||
| + | } | ||
| + | |||
| + | .cool_content { | ||
| + | background-color: aliceblue; | ||
| + | border: 1px solid #000; | ||
| + | } | ||
| + | |||
| + | .cool_container { | ||
| + | width: 100%; | ||
| + | } | ||
| + | /* =============== END: Circle of Elements - Element Styling ==================== */ | ||
| + | |||
| + | |||
| + | /* =============== BEGIN: Circle of Elements - Center Image ==================== */ | ||
| + | .cool_centerimage { | ||
| + | background-color: red; /* just for the demo */ | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | width: 30%; | ||
| + | height: 250px; | ||
| + | top: -390px; | ||
| + | border: 1px solid #000; | ||
| + | } | ||
| + | /* =============== END: Circle of Elements - Center Image ==================== */ | ||
</style> | </style> | ||
| − | <ul class='circle-container'> | + | <div class="cool_container"> |
| − | + | <div> | |
| − | + | <ul class='circle-container'> | |
| − | <div><a href='#'>Own Device</a></div> | + | <li><!--1--> |
| − | + | <div class="cool_header"><a href='#'>Own Device</a></div> | |
| − | + | <div class="cool_content">Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.</div> | |
| − | + | ||
| − | + | </li> | |
| − | <div><a href='#'> | + | <li><!--2--> |
| − | + | <div class="cool_header"><a href='#'>New iGEM Backbone</a> | |
| − | + | <div class="cool_content">In need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our </div> | |
| − | + | </div> | |
| − | + | </li> | |
| − | <div><a href='#'> | + | |
| − | + | <li><!--3--> | |
| − | + | <div class="cool_header"><a href='#'>Human Practice</a> | |
| − | + | <div class="cool_content">What does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.</div> | |
| − | + | </div> | |
| − | <div><a href='#'> | + | </li> |
| − | + | ||
| − | + | <li><!--4--> | |
| − | + | <div class="cool_header"><a href='#'>Modeling</a> | |
| − | + | <div class="cool_content">Numerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.</div> | |
| − | <div><a href='#'>We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page. | + | </div> |
| − | + | </li> | |
| − | + | ||
| − | + | <li><!--5--> | |
| − | + | <div class="cool_header"><a href='#'>Blood Serum Analysis</a> | |
| − | <div><a href='#'> | + | <div class="cool_content">We obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.</div> |
| − | + | </div> | |
| − | + | </li> | |
| − | + | ||
| − | < | + | <li><!--6--> |
| − | <div><a href='#'> | + | <div class="cool_header"><a href='#'>Enlightening Diagnostics</a> |
| − | + | <div class="cool_content">Modern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests. | |
| − | + | This is why we thought about a fast, universally accessible and affordable diagnostic device.</div> | |
| − | + | </div> | |
| − | + | </li> | |
| − | <div><a href='#'></a></div> | + | |
| − | <div>< | + | <li><!--7--> |
| − | + | <div class="cool_header"><a href='#'>The DiaCHIP</a> | |
| − | </ | + | <div class="cool_content">Simultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection. |
| − | </ | + | </div> |
| + | </div> | ||
| + | </li> | ||
| + | |||
| + | <li><!--8--> | ||
| + | <div class="cool_header"><a href='#'>Our System</a> | ||
| + | <div class="cool_content">Generating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.</div> | ||
| + | </div> | ||
| + | </li> | ||
| + | </ul> | ||
| + | |||
| + | <div class="cool_centerimage"><img src="images/icon_home_new3.png"> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | |||
</html> | </html> | ||
{{Freiburg/wiki_content_end}} | {{Freiburg/wiki_content_end}} | ||
Revision as of 08:34, 12 September 2015
-
Want to use our detection device in your next iGEM project? We built our own simplified and affordable setup. Here you can find a detailed description of how to build and use it.
-
New iGEM BackboneIn need for expressing tons of protein? We provided a new backbone for protein overexpression meeting all the iGEM standards. We also expanded the iGEM Registry with our
-
Human PracticeWhat does the public think about the DiaCHIP and systems based on synthetic biology? Would people want to use it? Check out the results of our survey.
-
ModelingNumerous complex processes take place during cell-free expression. Modeling the generation of proteins as well as their diffusion in our system helped us obtaining better results. Get more information here.
-
Blood Serum AnalysisWe obtained great results during summer! Our successful measurements of tetanus antibodies in human serum and GFP antibodies binding to cell-free expressed GFP can be found on our results page.
-
Enlightening DiagnosticsModern everyday life is fast...too fast for medical diagnosis relying on huge amounts of time-consuming and costly serological tests. This is why we thought about a fast, universally accessible and affordable diagnostic device.
-
The DiaCHIPSimultaneously screening for hundreds of diseases within a few hours? See how the DiaCHIP achieves this by the revolutionary combination of cell-free expression with an emerging optical method allowing label-free antibody detection.
-
Our SystemGenerating a protein array on demand and detecting antigen-antibody interactions in real-time: Find out about our own cell-free expression mix and our specific surface binding system.
