Difference between revisions of "Template:Munich"

 
(11 intermediate revisions by 2 users not shown)
Line 445: Line 445:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
 +
 +
</style>
  
−
* {margin: 0; padding: 0;
 
−
 
 
−
}
 
−
body{
 
−
  font-family: Helvetica;
 
  
−
}
+
<!--- THIS IS WHERE THE HTML BEGINS --->
  
  
−
#container {
 
−
width: 80%;
 
−
overflow: hidden;
 
−
margin: 50px auto;
 
−
}
 
  
−
h2{
+
<head>
−
  text-align: center;
+
−
}
+
  
−
.banner > img{
+
<!-- This tells the browser that your page is responsive -->
−
  margin-left:50px;
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
}
+
  
−
.banner {
+
</head>
−
  width:5000px;
+
−
  overflow: hidden;
+
−
  height: 233px;
+
−
}
+
  
−
/*keyframe animations*/
 
−
.first {
 
−
-webkit-animation: bannermove 20s linear infinite;
 
−
  -moz-animation: bannermove 20s linear infinite;
 
−
    -ms-animation: bannermove 20s linear infinite;
 
−
    -o-animation: bannermove 20s linear infinite;
 
−
        animation: bannermove 20s linear infinite;
 
−
}
 
  
−
@keyframes "bannermove" {
 
−
0% {
 
−
    margin-left: 0px;
 
−
}
 
−
100% {
 
−
    margin-left: -2000px;
 
−
}
 
  
−
}
+
<div class="igem_2017_menu_wrapper" >
  
−
@-moz-keyframes bannermove {
 
−
0% {
 
−
  margin-left: 0px;
 
−
}
 
−
100% {
 
−
  margin-left: -2000px;
 
−
}
 
  
−
}
 
  
−
@-webkit-keyframes "bannermove" {
+
<a href="https://2017.igem.org/Team:Munich">
−
0% {
+
<img src="http://placehold.it/350x150">
−
  margin-left: 0px;
+
</a>
−
}
+
−
100% {
+
−
  margin-left: -2000px;
+
−
}
+
  
−
}
 
  
−
@-ms-keyframes "bannermove" {
+
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
−
  0% {
+
<div class="menu_button" id="display_menu_control">
−
  margin-left: 0px;
+
MENU  
−
}
+
</div>
−
100% {
+
−
  margin-left: -2000px;
+
−
}
+
  
−
}
+
<div id="menu_content">
 +
  
−
@-o-keyframes "bannermove" {
 
−
0% {
 
−
  margin-left: 0px;
 
−
}
 
−
100% {
 
−
  margin-left: -2000px;
 
−
}
 
  
−
}
 
  
 +
<a href="https://2017.igem.org/Team:Munich">
 +
<div class="menu_button direct_to_page">
 +
HOME
 +
</div>
 +
</a>
  
−
h1{
 
−
  text-align: center;
 
−
  color: black;
 
−
  font-size: 50px;
 
−
  border-radius:12px;
 
−
  background-color: #92D4EF;
 
  
−
 
−
}
 
  
−
h2{
+
<div class="menu_button">
−
text-align: center;
+
<div class="expand_collapse_icon">  </div> TEAM
−
margin-bottom: 10px;
+
</div>
−
}
+
  
−
#hola{
+
<div class="submenu_wrapper" id="team_submenu">
 +
 +
<a href="https://2017.igem.org/Team:Munich/Team">
 +
<div class="submenu_button" id="Team_page">
 +
Team
 +
</div>
 +
</a>
  
−
}
+
<a href="https://2017.igem.org/Team:Munich/Collaborations">
 +
<div class="submenu_button"  id="Collaborations_page">
 +
Collaborations
 +
</div>
 +
</a>
 +
 +
 +
</div>
  
−
h3{
 
−
  text-align: center;
 
−
  margin: 10px;
 
−
}
 
  
−
.problem, .solution{
+
−
  padding-left: 50px;
+
−
  padding-right: 50px;
+
−
  padding-top: 20px;
+
−
  padding-bottom: 20px;
+
−
  border-radius:50px;
+
−
}
+
  
 +
<div class="menu_button">
 +
<div class="expand_collapse_icon">  </div> PROJECT
 +
</div>
  
−
.problem{
+
<!-- project submenu -->
−
  margin-right:500px;
+
<div class="submenu_wrapper">
−
}
+
−
table{
+
<a href="https://2017.igem.org/Team:Munich/Description">
−
  margin:auto;
+
<div class="submenu_button"  id="Description_page">
−
  border-spacing: 2.5vw 0;
+
Description
−
  margin-top: 30px;
+
</div>
−
  margin-bottom: 30px;
+
</a>
−
}
+
  
 +
<a href="https://2017.igem.org/Team:Munich/Design">
 +
<div class="submenu_button"  id="Design_page">
 +
Design
 +
</div>
 +
</a>
  
−
.footer{
+
<a href="https://2017.igem.org/Team:Munich/Experiments">
−
  background-color: #92D4EF;
+
<div class="submenu_button"  id="Experiments_page">
−
  text-align: center;
+
Experiments
−
  margin-bottom: 0;
+
</div>
−
  padding-top: 5px;
+
</a>
−
 
+
−
}
+
  
−
h5{
 
−
  text-align: center;
 
  
−
  margin-bottom: 10px;
+
<a href="https://2017.igem.org/Team:Munich/Notebook">
−
 
+
<div class="submenu_button"  id="Notebook_page">
−
}
+
Notebook
 +
</div>
 +
</a>
  
−
td{
+
<a href="https://2017.igem.org/Team:Munich/InterLab">
−
  width: 50%;
+
<div class="submenu_button"  id="InterLab_page">
−
  vertical-align: top;
+
InterLab
−
}
+
</div>
 +
</a>
  
−
a{
+
<a href="https://2017.igem.org/Team:Munich/Contribution">
−
  text-decoration: none;
+
<div class="submenu_button"  id="Contribution_page">
−
  padding-left:7px;
+
Contribution
−
 
+
</div>
−
}
+
</a>
−
+
−
</style>
+
  
 +
<a href="https://2017.igem.org/Team:Munich/Model">
 +
<div class="submenu_button"  id="Model_page">
 +
Model
 +
</div>
 +
</a>
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
<a href="https://2017.igem.org/Team:Munich/Results">
 +
<div class="submenu_button"  id="Results_page">
 +
Results
 +
</div>
 +
</a>
  
  
 +
<a href="https://2017.igem.org/Team:Munich/Demonstrate">
 +
<div class="submenu_button"  id="Demonstrate_page">
 +
Demonstrate
 +
</div>
 +
</a>
  
−
<head>  
+
<a href="https://2017.igem.org/Team:Munich/Improve">
 +
<div class="submenu_button"  id="Improve_page">
 +
Improve
 +
</div>
 +
</a>
  
−
<!-- This tells the browser that your page is responsive -->
+
<a href="https://2017.igem.org/Team:Munich/Attributions">
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
<div class="submenu_button" id="Attributions_page">
 +
Attributions
 +
</div>
 +
</a>
  
−
</head>
+
</div>
  
 +
 +
 +
 +
  
 +
<div class="menu_button">
 +
<div class="expand_collapse_icon">  </div> PARTS
 +
</div>
 +
 +
<!-- parts submenu -->
 +
<div class="submenu_wrapper">
 +
 +
<a href="https://2017.igem.org/Team:Munich/Parts">
 +
<div class="submenu_button"  id="Parts_page">
 +
Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2017.igem.org/Team:Munich/Basic_Part">
 +
<div class="submenu_button"  id="Basic_Part_page">
 +
Basic Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2017.igem.org/Team:Munich/Composite_Part">
 +
<div class="submenu_button"  id="Composite_Part_page">
 +
Composite Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2017.igem.org/Team:Munich/Part_Collection">
 +
<div class="submenu_button"  id="Part_Collection_page">
 +
Part Collection
 +
</div>
 +
</a>
 +
</div>
  
−
<!-- start of content -->
+
−
<div class="igem_2017_content_wrapper">
+
−
</div>
+
−
<body>
+
−
+
−
<div id="container"> <!-- Apparently, the freaking space lines between the elements are important, so for the animation to loop seamlessly, the img elements can't have them inbetween. -->
+
  
−
  <div class="banner first"><img id="picture" src="https://static.igem.org/mediawiki/2017/9/92/T--Munich--logo.png" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/3/36/T--Munich--scientist.jpg" alt="" style="width:350px;height:233px" /><img src="https://static.igem.org/mediawiki/2017/f/fa/T--Munich--Explaning_MakeMunich.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/4/40/T--Munich--Wetlab_work.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/c/cd/Groupphoto_170504.jpeg" alt="" style="width:350px;height:233px;"/><img class="hola" src="https://static.igem.org/mediawiki/2017/9/92/T--Munich--logo.png" alt="" style="width:350px;height:233px;"/><img class ="hola" src="https://static.igem.org/mediawiki/2017/3/36/T--Munich--scientist.jpg" alt="" style="width:350px;height:233px" /><img src="https://static.igem.org/mediawiki/2017/f/fa/T--Munich--Explaning_MakeMunich.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/4/40/T--Munich--Wetlab_work.jpg" alt="" style="width:350px;height:233px;"/><img src="https://static.igem.org/mediawiki/2017/c/cd/Groupphoto_170504.jpeg" alt="" style="width:350px;height:233px;"/>
+
<a href="https://2017.igem.org/Team:Munich/Safety">
−
    </div>
+
<div class="menu_button direct_to_page">
−
  </div>
+
SAFETY
−
                                                         
+
</div>  
 +
</a>
  
−
<div class ="projectName">
 
−
  <h1> CascAID </h1>
 
−
</div>
 
  
−
 
 
  
−
<div class="part2">
 
−
  <table style="width:100%; text-align:justify" >
 
−
  <tr>
 
−
    <td bgcolor="white" class = "problem"> <h3 id="hola">Problem</h3>
 
−
      <p> Although there are many diagnose tests available that can detect even the smallest traces of a pathogen, they usually require expensive lab-equipment or skilled labor. Usually, places most prone to diseases are also the ones most lacking such equipment or personal, and thus, where tests are least asequible.
 
−
Many different diseases can present similar symptoms. But because the treatment for each of them can vary greatly (e.g. bacterial vs viral infetion), a quick and reliable diagnose is important to start as soon as possible with the right treatment. On the other hand, wrongly recognizing the cause of a disease not only leads to prescription of the wrong medicine, but also can contribute to the spread of resistances. <br><br>
 
−
New diagnose tool must take these points into consideration and be designed with affordability, availability, simplicity and reliability in mind, and, where possible, be flexible enough to cover a wide array of diseases in order to present the user with a single, powerful product.
 
−
       
 
−
      </p> </td>
 
−
    <td bgcolor="white" class ="solution"><h3>Solution</h3>
 
−
    <p> We are working at a diagnose tool that combines the power of high sensible methods with the affordability needed for a wide application field. Our project, named CascAID, utilizes the CRISPR/Cas effector Cas13a to quickly and reliably test for different pathogens based on their RNA. By cleaverly designing a short RNA sequence, it is possible to guide Cas13a to only cleave RNA molecules belonging to a pathogen. Once the target has been digested, Cas13a becomes active and cleaves indiscriminately other RNA molecules. If the sample contained pathogen, then digested RNA will be found, where as a negative sample won't produce digestion fragments. <br><br>
 
−
To provide an affordable product, CascAID will be implemented on paper-strips, using deep-freeze technologie that allows proteins and other organic molecules to remain active over long periods of time, even at room temperature. Thanks to the cheapness of paper as a material, CascAID-strips can be single use, thus reducing the risk of cross-contamination without increasing the costs of manufacture.
 
−
      </p>
 
−
    </td>
 
−
  </tr>
 
−
</table>
 
  
−
</div>
 
−
  <br>
 
−
 
 
  
−
<div class="footer">
+
 
−
    <h5>Follow our progress or contact us on:</h5>
+
 
−
<div class="logos"> <a href="https://www.facebook.com/Munich.iGEM/">
+
<div class="menu_button" >
−
<img border="0" src="https://image.flaticon.com/icons/svg/33/33702.svg" width="30px" height="30px" align="center"> </a>
+
<div class="expand_collapse_icon"> </div> HUMAN PRACTICES
−
  <a href="https://www.instagram.com/igem.munich.2017/">
+
</div>
−
<img border="0" src="https://image.flaticon.com/icons/svg/87/87390.svg" width="30px" height="30px" align="center"> </a>
+
 
−
<a href="mailto:igem.munich@gmail.com"> <img src= "https://static.igem.org/mediawiki/2017/9/97/T--Munich--mail_symbol.svg" width="30px" height="30px" align="center"> </a> </div>
+
<!-- human practices submenu -->
−
 
+
<div class="submenu_wrapper">
−
 
+
 
−
  <br>
+
<a href="https://2017.igem.org/Team:Munich/HP/Silver">
 +
<div class="submenu_button"   id="Silver_page">
 +
Silver HP
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/HP/Gold_Integrated">
 +
<div class="submenu_button" id="Gold_Integrated_page">
 +
Integrated and Gold
 +
</div>
 +
</a>
 +
 
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Engagement">
 +
<div class="submenu_button" id="Engagement_page">
 +
Public Engagement
 +
</div>
 +
</a>
 +
 
 +
</div>
 +
 
 +
 
 +
<div class="menu_button">
 +
<div class="expand_collapse_icon">  </div> AWARDS
 +
</div>
 +
 
 +
<!-- awards submenu -->
 +
<div class="submenu_wrapper">
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Applied_Design">
 +
<div class="submenu_button" id="Applied_Design_page">
 +
Applied Design
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Entrepreneurship">
 +
<div class="submenu_button"  id="Entrepreneurship_page">
 +
Entrepreneurship
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Hardware">
 +
<div class="submenu_button" id="Hardware_page">
 +
Hardware
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Measurement">
 +
<div class="submenu_button"  id="Measurement_page">
 +
Measurement
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Model">
 +
<div class="submenu_button" id="Model_page">
 +
Model
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Plant">
 +
<div class="submenu_button"  id="Plant_page">
 +
Plant
 +
</div>
 +
</a>
 +
 
 +
 
 +
<a href="https://2017.igem.org/Team:Munich/Software">
 +
<div class="submenu_button" id="Software_page">
 +
Software
 +
</div>
 +
</a>
 +
 
 +
</div>
 +
 
 +
<a href="https://igem.org/2017_Judging_Form?team=Munich">
 +
<div class="menu_button direct_to_page">
 +
JUDGING FORM
 +
</div>
 +
</a>
 +
 
 +
 
 +
 +
<div class="menu_bottom_padding" >
 +
</div>  
 +
 +
</div>
 +
 
 +
 
 +
 
  
 
</div>
 
</div>
  
−
    </body>
+
 
 +
 
 +
<!-- start of content -->
 +
<div class="igem_2017_content_wrapper">
 +
<h1>Munich</h1>

Latest revision as of 21:38, 29 June 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

Munich