(110 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
− | + | <!-- #919191 Grau1 --> | |
− | + | <!-- #787878 Grau2 --> | |
− | + | <!-- #51A7f9 Blau1 --> | |
+ | <!-- #3c7cb9 Blau2 --> | ||
+ | <!-- #ffffff weiss --> | ||
<html> | <html> | ||
+ | <head> | ||
+ | <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> | <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: | + | 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> | ||
+ | <!-- Head End --> | ||
+ | <!-- 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> | </table> | ||
− | + | <!-- Content End --> | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> | ||
+ | {{Munich/Footer}} |
Latest revision as of 20:49, 15 December 2017
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|