Difference between revisions of "Template:Pasteur Paris HumanPractice"

Line 1: Line 1:
−
<html lang="en-US">
+
<html>
  
 
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
 
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
 
<style type="text/css">
 
<style type="text/css">
−
 
−
 
−
<script>
 
−
 
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
−
 
−
$(document).ready(function() {
 
−
 
−
$("#HQ_page").attr('id','');
 
−
 
−
 
−
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 
−
$("#team_name").html( wgPageName );
 
−
}
 
−
 
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 
−
}
 
−
 
−
else {
 
−
// this adds the team's name as an h1
 
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 
−
 
−
// this adds the page's title as an h4
 
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 
−
}
 
−
 
−
 
−
 
−
 
−
$('#accordion').find('.menu_item').click(function(){
 
−
 
−
//Expand or collapse this panel
 
−
submenu = $(this).find('.submenu');
 
−
submenu.toggle();
 
−
 
−
icon = $(this).find('.icon');
 
−
 
−
if ( !$( submenu ).is(':visible') ) {
 
−
icon.removeClass("less").addClass("plus");
 
−
}
 
−
else {
 
−
icon.removeClass("plus").addClass("less");
 
−
}
 
−
 
−
//Hide the other panels
 
−
$(".submenu").not(submenu).hide();
 
−
$(".icon").not(icon).removeClass("less").addClass("plus");
 
−
});
 
−
 
−
 
−
$(".collapsable_menu_control").click(function() {
 
−
$(".menu_item").toggle();
 
−
});
 
−
 
−
$( window ).resize(function() {
 
−
$(".menu_item").show();
 
−
});
 
−
 
−
 
−
});
 
−
 
−
 
−
</script>
 
−
 
−
 
−
 
−
 
  
  
Line 81: Line 13:
  
 
*  
 
*  
−
Body{
+
body {
−
  Front-family = 'Source code pro', Trebuchet MS, Greorgia ;
+
  front-family: "Trebuchet MS", Greorgia ;
−
  Margin = 20px ;
+
  margin : 30px ;
−
  Padding = 20px ;
+
  padding :30px ;margin: 0;
 +
  padding: 0;
 +
  text-align: center;
 +
  font-family: Tahoma, sans-serif;
 
}
 
}
−
 
+
−
{
+
div#container {
−
    margin: 0;
+
  margin-left: auto;
−
    padding: 0;
+
  margin-right: auto;
 +
  width: 1200px;
 +
  text-align: left;
 
}
 
}
 +
 +
div#top {
 +
  position: relative;
 +
  width: 1000px;
 +
  height: 100px;
 +
  top:-85px;
 +
  left:-160px;
  
−
.GIF {
+
}
−
  Border= none ;
+
−
  vertical-align=middle ;
+
div#bandeau {
−
  margin-top= -200
+
  top:-95px;
−
  padding-top= -200
+
  width: 1200px;
−
  float= left
+
  height: 150px;
 +
  background-color:#FFFFFF;
 
}
 
}
  
  
−
.navmenubkg {
+
div#position-menu2{
−
  position:fixed;
+
position: relative;
−
  padding-top:10px;
+
top:-130px;
−
  top:0;
+
left:150px;
−
  left:0;
+
−
  right:0;
+
}
−
  background:white;
+
#menu2, #menu2 ul{
−
        z-index : 100;
+
padding:0;
−
        height : 150px;
+
margin:0px;
−
        align : center;
+
list-style:none;
 +
text-align:CENTER;
 +
}
 +
#menu2 li{
 +
display:inline-block;
 +
position:relative;
 +
border-radius:8px 8px 0 0;
 +
}
 +
#menu2 ul li{
 +
display:inherit;
 +
border-radius:0;
 +
}
 +
#menu2 ul li:hover{
 +
border-radius:0;
 +
}
 +
#menu2 ul li:nth-child(6){
 +
border-radius:0 0 8px 8px;
 +
}
 +
#menu2 ul{
 +
position:absolute;
 +
z-index: 1000;
 +
max-height:0;
 +
left: 0;
 +
right: 0;
 +
overflow:hidden;
 +
-moz-transition: .8s all .3s;
 +
-webkit-transition: .8s all .3s;
 +
transition: .8s all .3s;
 +
}
 +
#menu2 li:hover ul{
 +
max-height:14em;
 
}
 
}
 +
/* background des liens menus */
 +
#menu2 li:first-child{
 +
background-color: #FFFFFFF;
  
−
#navmenubox {
 
−
  padding-top:10px;
 
−
  margin-left:0;
 
−
  margin-right:0;
 
−
  width:200%;
 
−
  height:90px;
 
−
  background-color:transparent;
 
−
  align : center;
 
 
}
 
}
  
 +
#menu2 li:nth-child(2){
 +
background-color: #FFFFFFF;
  
−
#menu-vertical .sous-menu{
 
−
display: none;
 
−
position: absolute;
 
−
list-style-type= none;
 
 
}
 
}
−
#menu-vertical li:hover > ul{
+
#menu2 li:nth-child(3){
−
display: block;
+
background-color: #FFFFFF;
−
list-style-type= none;
+
 
 
}
 
}
 +
#menu2 li:nth-child(4){
 +
background-color: #FFFFFF;
  
−
#menu-vertical li {
 
−
display: inline;
 
−
position: relative;
 
−
top: -135px;
 
−
left: 155px;
 
−
height: -250px;
 
 
}
 
}
 +
#menu2 li:nth-child(5){
 +
background-color: #FFFFFF;
  
 +
}
 +
#menu2 li:nth-child(6){
 +
background-color: #FFFFFF;
  
−
/* style du bloc ul */
 
−
.menu-vertical {
 
−
  width: 1600px; /* optionnel, c'est pour la démo */
 
−
  list-style: none; /* supprime les puces de liste */
 
−
  padding: 5px; /* on fait un peu de place autour des liens */
 
−
  margin: 5px; /* on annule les marges */
 
−
  background: #FFFFFF;
 
 
}
 
}
−
+
/* background des liens sous menus */
−
/* styles des liens et éléments de liste */
+
#menu2 li:first-child li{
−
.mv-item,
+
background:#FFD700;
−
.mv-item a {
+
−
  /* les liens et item deviennent des blocs */
+
−
  /* suffit théoriquement à virer les puces de liste */
+
−
  display: inline-block;
+
 
}
 
}
−
+
#menu2 li:nth-child(2) li{
−
/* styles des liens */
+
background:#FFA500;
−
.mv-item a {
+
−
  margin: 1px 0px; /* espace les liens d'1 px */
+
−
  padding: 8px 20px; /* marges internes pour aérer */
+
−
  color: #666;
+
−
  background: #FFF;
+
−
  text-decoration: none; /* on vire le soulignement */
+
−
 
+
−
  /* on définit la transition pour les navigateurs */
+
−
  -webkit-transition: all .3s; /* Chrome/Safari */
+
−
  -moz-transition: all .3s; /* Firefox (plus trop nécessaire) */
+
−
  transition: all .3s; /* syntaxe officielle */
+
 
}
 
}
−
+
#menu2 li:nth-child(3) li{
−
/* styles changeants au survol et focus */
+
background:#BC8F8F;
−
.mv-item a:hover,
+
−
.mv-item a:focus {
+
−
  background: #FFFEE6;
+
−
  color: #FFF;
+
−
  padding-left: 20px; /* décalage du contenu de 10px vers la droite (30-20 = 10) */
+
 
}
 
}
−
 
+
#menu2 li:nth-child(4) li{
−
#menu-vertical ul li ul li{
+
background:#F08080;
−
display: inline;
+
}
−
list-style-type= none;
+
#menu2 li:nth-child(5) li{
 +
background:#ADD8E6;
 +
}
 +
#menu2 li:nth-child(6) li{
 +
background:#00CED1;
 
}
 
}
  
−
 
+
/* les a href */
−
.menu-vertical li{
+
#menu2 a{
−
list-style-type= none;
+
text-decoration:none;
 +
display:block;
 +
padding:8px 20px;
 +
color:#fff;
 +
font-family:"Trebuchet SM";
 +
}
 +
#menu2 ul a{
 +
padding:8px 0;
 +
}
 +
#menu2 li:hover li a{
 +
color:#fff;
 +
text-transform:inherit;
 +
}
 +
#menu2 li:hover a, #menu2 li li:hover a{
 +
color:#000;
 
}
 
}
  
  
−
 
+
/*logo de communication en bas du menu à droite*/
−
/*barre de navigation */
+
#logocom a{
−
.navbar navbar-default navbar-fixed-top {
+
text-decoration:none;
−
width:100%;
+
display:block;
−
}
+
padding:8px 2px;
−
.navbar-default {
+
−
/* Change BG color */
+
−
/*background-color: rgba(190, 198, 204);*/
+
 
}
 
}
  
−
#navbar-default {
+
#logocom{
−
list-style-type= none;
+
−
display: block;
+
 
list-style-type= none;
 
list-style-type= none;
 +
display: inline;
 +
position: relative;
 +
padding:1px;
 +
top: -120px;
 +
left: 400px;
 +
 
}
 
}
−
 
+
 
  
  
 
.logotwitterfb {
 
.logotwitterfb {
 +
list-style-type= none;
 
width: 20px;
 
width: 20px;
 
height: 20px;
 
height: 20px;
Line 255: Line 217:
 
         -ms-filter: hue-rotate(0);
 
         -ms-filter: hue-rotate(0);
 
}
 
}
−
 
−
 
−
 
−
/*logo de communication en bas du menu à droite*/
 
−
#logocom{
 
−
display: inline;
 
−
position: relative;
 
−
top: -80px;
 
−
left: -170px;
 
−
height: -250px;
 
−
width: 700px;
 
−
}
 
−
img.space{
 
−
border: 1px none#000;
 
−
margin: 60px;
 
−
}
 
−
 
−
 
−
 
  
 
/* CSS de l’abstract*/
 
/* CSS de l’abstract*/
Line 299: Line 242:
 
#volet {
 
#volet {
 
     position: relative;
 
     position: relative;
−
     left: -910px;  
+
     left: -930px;  
−
     top: -250px;
+
     top: 30px;
 
}
 
}
 
#volet a.ouvrir,
 
#volet a.ouvrir,
Line 335: Line 278:
  
 
#volet_clos:target #volet {
 
#volet_clos:target #volet {
−
     left: -910px;
+
     left: -930px;
 
}
 
}
  
Line 351: Line 294:
 
</style>
 
</style>
  
 +
 +
<head>
 +
  <link rel="stylesheet" type="text/css" href="include/css/style.css" />
 +
  <title>Titre</title>
 +
</head>
 +
 
<body>
 
<body>
 +
<div id="container">
 +
  <div id="top">
 +
    <div id="bandeau">   
  
−
<div style="clear: both;"></div>
+
<div><a href=" https://2016.igem.org/Team:Pasteur_Paris " id=mainpage><img src="https://static.igem.org/mediawiki/2016/9/97/LOGO-definitif.png" class="space" width="135"></img></a></div>
−
<div class="navmenubkg">
+
  </div>
  
−
<div id="navmenubox"><a href=" https://2016.igem.org/Team:Pasteur_Paris " id=mainpage><img class="GIF" alt="http://imagizer.imageshack.us/a/img922/9439/1kY2Ez.gif" src="http://imagizer.imageshack.us/a/img922/9439/1kY2Ez.gif" height="100px" width="130px"></img></a>
+
<div id="position-menu2" >
 +
    <ul id="menu2" >
 +
  <li><a href=" https://2016.igem.org/Team:Pasteur_Paris/AboutUs "><center><img src="https://static.igem.org/mediawiki/2016/9/90/Logo_team_pasteur.png" height="40px" width="40px"></center><b></b><FONT size ="3pt"color=#8B8378><br>About us</br></FONT></a >
 +
    <ul>
 +
      <li><a href="#">Presentation</a></li> 
 +
      <li><a href="#">Attribution</a></li>
 +
      <li><a href="#">Collaboration</a></li>
 +
      <li><a href="#">Sponsors</a></li>
 +
    </ul>
 +
  </li>
 +
<li><a href=" https://2016.igem.org/Team:Pasteur_Paris/Project "><center><img src="https://static.igem.org/mediawiki/2016/a/a5/Science.png" height="40px" width="40px"></center><b></b><FONT size ="3pt" color=#8B8378><br>Project</br></FONT></a >
 +
    <ul>
 +
      <li><a href="#">Abstract</a></li>
 +
      <li><a href="#">Our Aim</a></li>
 +
      <li><a href="#">Design </a></li>
 +
      <li><a href="#">Senario</a></li>
 +
    </ul>
 +
  </li>
  
−
<div id="menu-vertical">
+
  <li><a href=" https://2016.igem.org/Team:Pasteur_Paris/Science "><center><img src="https://static.igem.org/mediawiki/2016/archive/a/af/20160811084846%21WetLab.png" height="40px" width="40px" alt=""></center><b></b><FONT size ="3pt" color=#8B8378><br>Science </br></FONT></a>
−
     <ul>   
+
     <ul>
 +
      <li><a href="#">Protocols</a></li>
 +
      <li><a href="#">Netbook</a></li>
 +
      <li><a href="#">Results</a></li>
 +
    </ul>
 +
   </li>
  
−
        <li class="mv-item"><a href="https://2016.igem.org/Team:Pasteur_Paris/Project"><center><img src="https://static.igem.org/mediawiki/2016/a/a5/Science.png" height="40px" width="40px"></center><b></b><FONT color=#A3B1BF><br>Project</br></FONT></a></li>
+
<li><a href=" https://2016.igem.org/Team:Pasteur_Paris/Law "><center><img src="https://static.igem.org/mediawiki/2016/7/7b/Law.png " height="40px" width="40px"></center><b></b><FONT size ="3pt" color=#8B8378><br>Law Part</br> </FONT></a>  
−
   
+
    <ul>
−
        <li class="mv-item"><a href=" https://2016.igem.org/Team:Pasteur_Paris/ArtDesign"><center><img src="https://static.igem.org/mediawiki/2016/archive/8/89/20160811173826%21Design..png" height="40px" width="40px"></center><b></b><FONT color=#A3B1BF><br>Art /Design </br></FONT></a></li>
+
      <li><a href="#">in construction</a></li>
−
   
+
      <li><a href="#"> in construction</a></li>
−
 
+
      <li><a href="#"> in construction</a></li>
−
        <li class="mv-item"><a href=" https://2016.igem.org/Team:Pasteur_Paris/Science " ><center><img src="https://static.igem.org/mediawiki/2016/archive/a/af/20160811084846%21WetLab.png" height="40px" width="40px" alt=""></center><b></b><FONT color=#A3B1BF><br>Science </br></FONT></a></li>
+
    </ul>  
−
 
+
</li>
−
        <li class="mv-item"><a href=" https://2016.igem.org/Team:Pasteur_Paris/Law "><center><img src="https://static.igem.org/mediawiki/2016/7/7b/Law.png  " height="40px" width="40px"></center><b></b><FONT color=#A3B1BF><br>Law Part</br> </FONT></a></li>
+
−
 
+
<li><a href=" https://2016.igem.org/Team:Pasteur_Paris/HumanPractice "><center><img src="https://static.igem.org/mediawiki/2016/f/f5/HP.png  " height="40px" width="40px"><b></b><FONT size ="3pt" color=#8B8378></center><br>Human Practice</br></FONT></a>  
−
        <li class="mv-item"><a href=" https://2016.igem.org/Team:Pasteur_Paris/HumanPractice "><center><img src="https://static.igem.org/mediawiki/2016/f/f5/HP.png  " height="40px" width="40px"></center><b></b><FONT color=#A3B1BF><br>Human Practice</br></FONT></a></li>
+
  <ul>
−
 
+
      <li><a href="#">in construction</a></li>
−
        <li class="mv-item" ><a href=" https://2016.igem.org/Team:Pasteur_Paris/Parts  "><center><img src="https://static.igem.org/mediawiki/2016/e/e7/BB.png " height=" class="space"40px" width="40px"></center><b></b><FONT color=#A3B1BF><br>BioBricks</br></FONT> </a></li>
+
      <li><a href="#"> in construction</a></li>
−
 
+
      <li><a href="#"> in construction</a></li>
−
        <li id="logoMOSKITO"><a href=" https://2016.igem.org/Team:Pasteur_Paris " id=mainpage><img src="https://static.igem.org/mediawiki/2016/9/97/LOGO-definitif.png" class="space" width="147"></img></a></li>
+
    </ul>
 +
  </li>
 +
 
 +
<li><a href=" https://2016.igem.org/Team:Pasteur_Paris/Parts  "><center><img src="https://static.igem.org/mediawiki/2016/e/e7/BB.png" height=" class="space"40px" width="40px"></center><b></b><FONT size ="3pt" color=#8B8378><br>Parts</br></FONT> </a>
 +
    <ul>
 +
      <li><a href="#">Description</a></li>
 +
      <li><a href="#"> Basic Parts</a></li>
 +
      <li><a href="#"> Part collection</a></li>
 +
    </ul>
 +
  </li>
  
  
−
                          <div id="logocom">
+
<div id="logocom">
 
                               <section class="grayscale">
 
                               <section class="grayscale">
−
            <li><a href=" https://twitter.com/igem_pasteur " target="_blank"><img class="logotwitterfb" src="https://static.igem.org/mediawiki/2016/a/af/Twitter_institut_pasteur_2016.jpg"/></a> </li> </a>
+
                  <li><a href=" https://twitter.com/igem_pasteur " target="_blank"><img class="logotwitterfb" src="https://static.igem.org/mediawiki/2016/a/af/Twitter_institut_pasteur_2016.jpg"/></a> </li> </a>
−
            </li>
+
                  </li>
  
−
            <li >
+
                  <li >
−
              <a href=" https://www.facebook.com/igem.pasteur/" target="_blank"><img  class="logotwitterfb" src="https://static.igem.org/mediawiki/2016/6/6c/FB_institut_pasteur_2016.jpg"/></a>
+
                    <a href=" https://www.facebook.com/igem.pasteur/" target="_blank"><img  class="logotwitterfb" src="https://static.igem.org/mediawiki/2016/6/6c/FB_institut_pasteur_2016.jpg"/></a>
 
</li>
 
</li>
−
+
   
 
                                     <li >
 
                                     <li >
−
              <a href="http://www.pasteur.fr/fr/enseignement/stages-etudiants/igem" target="_blank"><img  class="logotwitterfb" src="https://static.igem.org/mediawiki/2016/6/6d/LOGO_Pasteur_2016.png"/></a>
+
                    <a href="http://www.pasteur.fr/fr/enseignement/stages-etudiants/igem" target="_blank"><img  class="logotwitterfb" src="https://static.igem.org/mediawiki/2016/6/6d/LOGO_Pasteur_2016.png"/></a>
−
            </li>
+
                  </li>
 
                                    
 
                                    
 
                                     <li>
 
                                     <li>
−
              <a href=" mailto:igem.pasteur@gmail.com " target="_blank"><img class="logotwitterfb"  src="https://static.igem.org/mediawiki/2016/4/47/Email_Pasteur_2016.jpg"/></a>
+
                    <a href=" mailto:igem.pasteur@gmail.com " target="_blank"><img class="logotwitterfb"  src="https://static.igem.org/mediawiki/2016/4/47/Email_Pasteur_2016.jpg"/></a>
−
            </li>
+
                  </li>
−
 
+
−
 
+
 
                               </section>
 
                               </section>
−
                         </div>          
+
                         </div>
−
              </ul>
+
</ul>
 +
       
 +
</div>
 
</div>
 
</div>
 +
 +
     
 +
</div>
 +
  
  
Line 414: Line 401:
 
     </div>
 
     </div>
 
</div>
 
</div>
−
 
−
</div>
 
−
</div>
 
−
</section>
 
  
 
</body>
 
</body>
−
</html>
 

Revision as of 14:53, 17 August 2016

Titre

Vector-borne (re) emerging diseases are responsible for severe epidemics worldwide. In most cases, vaccines or treatments are not available, and insecticides are the primary source for vector control.

Consequently, over spraying of insecticides impacts the environment and leads to the selection of insecticide resistant mosquitoes.

Therefore, we developed a novel diagnostic device, Mos(kit)o that includes a fixed or mobile mosquito trap and a biosilica cellulose composite patch from genetically modified Escherichia coli.

The design of the patch creates a multilayered matrix coated with antibodies capable of detecting a wide panel of vector-borne pathogens and insecticide resistant proteins from captured mosquitoes.

Additionally, the patch will have 2D barcoded readouts, generating an environmental surveillance database. A precise map of vector hot spots will provide a better assessment and response to vector-borne diseases, assisting local health authorities with anticipating and preparing for an epidemic. Our tool will be user-friendly, safe, and applicable.

Our Abstract!