(Undo revision 16095 by Sven klumpe (talk)) |
|||
(106 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
− | + | <!-- #919191 Grau1 --> | |
+ | <!-- #787878 Grau2 --> | ||
+ | <!-- #51A7f9 Blau1 --> | ||
+ | <!-- #3c7cb9 Blau2 --> | ||
+ | <!-- #ffffff weiss --> | ||
<html> | <html> | ||
− | |||
<head> | <head> | ||
− | <link type="text/css" | + | <link rel="stylesheet" type="text/css" |
− | < | + | href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" /> |
− | < | + | <link rel="stylesheet" type="text/css" |
+ | href="https://2017.igem.org/Template:Munich/Header?action=raw&ctype=text/css" /> | ||
+ | <style> | ||
+ | body {line-height: initial;} | ||
+ | h1, h2,h3 { | ||
+ | color: #51a7f9 !important; | ||
+ | text-align: center !important; | ||
+ | } | ||
− | + | /*Time for the CSS*/ | |
+ | * {margin: 0; padding: 0;} | ||
− | + | .slider{ | |
− | + | width: 900px; /*Same as width of the large image*/ | |
− | + | position: relative; | |
− | + | /*Instead of height we will use padding*/ | |
− | + | padding-top: 600px; /*That helps bring the labels down*/ | |
− | + | ||
− | + | /*Lets add a shadow*/ | |
+ | } | ||
+ | |||
+ | /*Last thing remaining is to add transitions*/ | ||
+ | .slider>img{ | ||
+ | position: absolute; | ||
+ | left: 0; top: 0; | ||
+ | transition: all 0.5s; | ||
+ | } | ||
+ | |||
+ | .slider input[name='slide_switch'] { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .slider label { | ||
+ | /*Lets add some spacing for the thumbnails*/ | ||
+ | margin: 30px 0 0 18px; | ||
+ | |||
+ | float: left; | ||
+ | cursor: pointer; | ||
+ | transition: all 0.5s; | ||
+ | |||
+ | /*Default style = low opacity*/ | ||
+ | opacity: 0.6; | ||
+ | |||
+ | z-index: 99; | ||
+ | } | ||
+ | |||
+ | .slider label img{ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /*Time to add the click effects*/ | ||
+ | .slider input[name='slide_switch']:checked+label { | ||
+ | border-color: #666; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | /*Clicking any thumbnail now should change its opacity(style)*/ | ||
+ | /*Time to work on the main images*/ | ||
+ | .slider input[name='slide_switch'] ~ img { | ||
+ | opacity: 0; | ||
+ | transform: scale(1.1); | ||
+ | } | ||
+ | /*That hides all main images at a 110% size | ||
+ | On click the images will be displayed at normal size to complete the effect | ||
+ | */ | ||
+ | .slider input[name='slide_switch']:checked+label+img { | ||
+ | opacity: 1; | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | /*Clicking on any thumbnail now should activate the image related to it*/ | ||
+ | |||
+ | /*We are done :)*/ | ||
+ | </style> | ||
+ | </head></html> | ||
+ | {{Munich/Menu}} | ||
+ | <html> | ||
+ | <body> | ||
+ | <table width=100% height=100% cellpadding=0 cellspacing=0 border=0> | ||
+ | <!-- Content --> | ||
+ | <tr><td width="100%" colspan=3> | ||
+ | <table width=100% height=100% cellpadding=0 cellspacing=0 border=0> | ||
+ | <tr> | ||
+ | <td width="40%"> | ||
+ | </td> | ||
+ | <td id="myContent" width="20%" valign=top align=center> | ||
<br> | <br> | ||
− | <p> | + | <!-- Head End --> |
− | <p><a | + | <!-- Content Begin --> |
− | </ | + | <video width="980" autoplay="autoplay" controls> |
+ | <source src="https://static.igem.org/mediawiki/2017/4/44/T--Munich--FrontPageVideo.mp4" type="video/mp4"> | ||
+ | Your browser does not support the video tag. | ||
+ | </video> | ||
+ | <table width="900" border=0 cellspacing=0 cellpadding=10> | ||
+ | <tr> | ||
+ | <td width=160></td> | ||
+ | <td width=160></td> | ||
+ | <td width=160></td> | ||
+ | <td width=160></td> | ||
+ | <td width=160></td> | ||
+ | <td width=160></td> | ||
+ | </tr> | ||
+ | <tr><td colspan=6 align=left valign=center> | ||
+ | <font size=7 ><b style="color: #51a7f9">Abstract</b></font> | ||
+ | </td></tr> | ||
+ | <tr><td align=center valign=center colspan=6> | ||
+ | <p style="text-align:justify"> | ||
+ | <font size=3 color=#444444> | ||
+ | The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S rRNA from <i>E. coli</i>. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout. | ||
+ | </font> | ||
+ | </p> | ||
+ | <p style="text-align:justify; margin-bottom: 50px"> | ||
+ | <font size=3 color=#444444> | ||
+ | Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics. | ||
+ | Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens. | ||
+ | </font> | ||
+ | </p> | ||
+ | </td></tr> | ||
+ | <tr><td colspan=6 align=middle valign=center> | ||
+ | <font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Awards & Achievements</b></font> | ||
+ | </td></tr> | ||
+ | <tr> | ||
+ | <td colspan=6> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/e/e5/T--Munich--Banner_Awards.jpg" width=900> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h1>First Runner-up</h1> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h1>Best Diagnostics Project</h1> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h2>Best Model</h2> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h2>Best Applied Design</h2> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h2>Best Hardware</h2> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=3> | ||
+ | <div class="captionPicture"> | ||
+ | <h2>Best Software</h2> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | |||
+ | <tr> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3>Nominated for Best Wiki</h3> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3>Nominated for Best Presentation</h3> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3>Nominated for Best Poster</h3> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3>Nominated for Best Integrated Human Practices</h3> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3>Nominated for Best Education & Public Engagement</h3> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3>Nominated for Best Measurement</h3> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | |||
+ | <tr> | ||
+ | <td align=center valign=center colspan=1></td> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3 style="margin-bottom: 50px">Nominated for Best Composite Part</h3> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=2> | ||
+ | <h3 style="margin-bottom: 50px">Nominated for Best Part Collection</h3> | ||
+ | </td> | ||
+ | <td align=center valign=center colspan=1></td> | ||
+ | </tr> | ||
+ | |||
+ | <tr><td colspan=6 align=middle valign=center> | ||
+ | <font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Gallery</b></font> | ||
+ | </td></tr> | ||
+ | |||
+ | <tr> <td colspan=6 align=middle valing=center> | ||
+ | <!-- | ||
+ | We will make a slider with stylized thumbnails using CSS3 | ||
+ | The markup is very simple: | ||
+ | Radio Inputs | ||
+ | Labels with thumbnails to detect click event | ||
+ | Main Image | ||
+ | --> | ||
+ | <div class="slider"> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id3" checked="checked"/> | ||
+ | <label for="id3"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--Review2017_77.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--Review2017_77.jpeg" width=900/> | ||
+ | <!--Lets show the second image by default on page load--> | ||
+ | <input type="radio" name="slide_switch" id="id2" /> | ||
+ | <label for="id2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width=900/> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id1"/> | ||
+ | <label for="id1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width= 900/> | ||
+ | |||
+ | |||
+ | <input type="radio" name="slide_switch" id="id4"/> | ||
+ | <label for="id4"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width=900/> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id5"/> | ||
+ | <label for="id5"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width=900/> | ||
+ | |||
+ | <input type="radio" name="slide_switch" id="id6"/> | ||
+ | <label for="id6"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width="100"/> | ||
+ | </label> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width=900/> | ||
+ | <input type="radio" name="slide_switch" id="id7"/> | ||
+ | <label for="id7"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width="100"/> | ||
+ | </label> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width=900/> | ||
− | |||
− | |||
− | |||
</div> | </div> | ||
+ | </td> | ||
+ | </tr> | ||
− | < | + | <tr> |
− | + | <td colspan=6> | |
− | + | <h3> <a style="color: #51a7f9 !important" href="/Team:Munich/Gallery">See the rest of our gallery...</a></h3> | |
− | + | </td> | |
− | + | </tr> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
+ | <tr><td class="no-padding" colspan=6 align=right valign=center height=10> | ||
+ | <br><br><br><center><hr></center> | ||
+ | </td></tr> | ||
+ | </table> | ||
+ | <!-- Content End --> | ||
</html> | </html> | ||
+ | {{Munich/Footer}} |
Latest revision as of 20:49, 15 December 2017
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|