Difference between revisions of "Team:Pasteur Paris/TrainingThomas2"

Line 1: Line 1:
 
{{Pasteur_Paris/Fonts}}
 
{{Pasteur_Paris/Fonts}}
 
+
{{Pasteur_Paris/Menu}}
 
+
 
+
 
+
 
+
 
+
 
+
<!--doctype html-->
+
 
<html>
 
<html>
  
    <head>
+
<style type="text/css">  
        <title>""</title>
+
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
    </head>
+
  
  
    <style>
+
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
        /* BEGIN : Default Wiki Settings */
+
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
  
            #home_logo, #sideMenu { display:none; }
 
            #sideMenu, #top_title, .patrollink  {display:none;}
 
            #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
            body {background-color:white; }
 
            #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
  
            .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;};
+
*{
 +
margin: 0;
 +
padding: 0;
 +
}
  
        /* END : Default Wiki Settings */
+
body {
 +
padding-top: 30px;
 +
font-family: 'Raleway', Arial Black, sans-serif;
 +
}
  
  
 +
#banner {
 +
width: 100%;
 +
height: 350px;
 +
background-image: url("https://static.igem.org/mediawiki/2018/5/53/T--Pasteur_Paris--BannerHome1.png");
 +
background-repeat: no-repeat;
 +
background-attachment: fixed;
 +
background-size: 100%;
 +
}
  
        /* BEGIN : Menu Bar Settings */
+
#banner h1 {
 +
text-align: center;
 +
color: white;
 +
padding-top: 250px;
 +
}
  
            /* BEGIN : General Settings of Menu Bar */
 
            *{
 
            margin: 0;
 
            padding: 0;
 
            }
 
  
            body {
+
#GeneralContent {
            padding-top: 30px;
+
position:relative;
            }
+
width: 100%;
  
            #MenuIgem {
+
}
            height: 18px;
+
            background-color: black;
+
            position: fixed;
+
            top: 0%;
+
            left: 0%;
+
            width: 100%;
+
            z-index: 2;
+
            }
+
  
            #Menu {
+
#MainContent {
            height: 70px;
+
max-width: 1100px;
            position: fixed;
+
margin: auto;
            top: 18px;
+
padding-top: 10%;
            left: 0%;
+
padding-bottom: 10%;
            width: 100%;
+
text-align: center;
            z-index: 2;
+
}
            border-bottom-left-radius: 15px;
+
            border-bottom-right-radius: 15px;
+
            }
+
  
            #Menu img {
 
            float: left;
 
            height: 100%;
 
            width: auto;
 
            }
 
  
            #Menu-mobile-bar {
 
            display: none;
 
            height: 50px;
 
            background-color: pink;
 
            position: fixed;
 
            top: 18px;
 
            left: 0%;
 
            width: 100%;
 
            z-index: 2;
 
            border-bottom-left-radius: 5px;
 
            border-bottom-right-radius: 5px;
 
            }
 
  
            #Menu-mobile-bar img {
+
footer {
            float: left;
+
background-color: #303E91;
            height: 100%;
+
height: 70px;
            width: auto;
+
width: 100%;
            }
+
bottom: 0%;
 +
left: 0%;
 +
}
  
            /* END : General Settings of Menu Bar */
+
.block {
 +
display: inline-block;
 +
vertical-align: middle;
 +
margin: auto;
 +
margin-top: 2%;
 +
margin-bottom: 2%;
 +
}
  
 +
.block.title {
 +
width: 94%;
 +
margin-bottom: 10%;
 +
}
  
 +
.block.two-third {
 +
width: 60%;
 +
}
  
 +
.block.two-third.center {
 +
width: 60%;
 +
}
  
            /* BEGIN media query large screen */
+
.block.one-third {
            @media screen and (min-width: 951px){
+
width: 30%;
 +
}
  
                #naviconwrapper {
+
.block.full {
                    height: 100%;
+
width: 90%;
                    margin: 0px ;    /*auto centers wrapper*/
+
}
                    min-width: 900px;
+
                    z-index: -100;
+
                }
+
  
                #naviconbar {
+
.block.separator {
                height: 100%;
+
height: 1px;
                    min-width: 900px;
+
margin-top: 10%;
                    background-image: linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146));
+
margin-bottom: 10%;
                    z-index: -60;
+
}
                    text-align: center;
+
                }
+
                   
+
  
                /* BEGIN: Settings Main Menu Icons */
+
.block.separator-mark {
 +
height: 2px;
 +
width: 70%;
 +
margin-top: 15%;
 +
margin-bottom: 20%;
 +
background-color: black;
 +
opacity: 0.3;
 +
}
  
                    #navicons {
+
.legend p {
                        width: 960px;
+
text-indent: 0px;
                        background-color: linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
+
font-size: 0.8em;
                        z-index: -20;    /*defines color behind icons */
+
}
                        display: inline-block;
+
                    vertical-align: middle;
+
                    height: 100%;
+
                    }
+
  
                    #navicons ul {
+
p {
                        padding: 0px;
+
text-align: justify;
                    margin: 0px;
+
text-indent: 30px;
                    height: 100%;
+
font-family: 'Raleway', Arial, sans-serif;
                        width: 100%;
+
}
                        position: relative;  /*makes chip go directly behind home from left corner*/
+
  
                    }
+
img {
 +
width: 100%;
 +
}
  
                    #navicons ul li {
+
a img:hover {
                        list-style: none;
+
opacity: 0.4;
                        /*display: block;*/
+
}
                        float: left;
+
                        position: relative;
+
                        font-family: 'Raleway', sans-serif;
+
                        font-size: 12px;
+
                        background-color: rgba(161, 47, 92, 0.0);
+
                        /*border: 1px solid #5781BD;*/
+
                        z-index: 100;
+
                        height: 90%;
+
                    }
+
  
                    #navicons ul li a {
+
@media only screen and (max-width: 1000px) {
 +
.block.two-third, .block.one-third {width: 44%; margin-left: 2%; margin-right: 2%;}
 +
.block.two-third.center, .block.full, .block.separator, .block.title {width: 92%; margin-left: 4%; margin-right: 4%;}
 +
#banner h1 {padding-top: 175px;}
 +
}
  
                        width: 120px;
+
@media only screen and (max-width: 500px) {
                        display: block;
+
.block.two-third, .block.one-third, .block.two-third.center, .block.full, .block.separator, .block.title {width: 96%; margin-left: 2%; margin-right: 2%;}
                        text-decoration: none;
+
#Menu {display:none;}
                        /*color: #FFF;*/
+
#Menu-mobile-bar{display: block;}
                        text-align: center;
+
#banner h1 {padding-top: 100px;}
                        text-transform: uppercase;
+
}
                        z-index: 50;
+
                        padding-top: 45%;
+
  
                    }
+
</style>
  
                    #navicons ul a:hover {
+
            <div id="banner">
                    }   
+
            </div>
  
                 /* END: Settings Main Menu Icons */
+
            <div id="GeneralContent">
                 
+
                  
 +
                <div id="MainContent">
  
                /* Begin classes for icons */
+
                    <div class="block two-third">
 +
                        <h1>Context: why prosthetics and biocompatibility?</h1>
 +
                        <p> In today’s society where equal access to means and opportunities is a priority, disabled citizens need to be given better tools for their daily lives. In this context, prosthetics and implants will become more and more sophisticated and we think it is necessary to develop a system to enhance the interface between the implanted-human and the mechanical component thanks to synthetic biology. One of the main actor obstructing the improvement in this domain is the connection between the nerves and the controllers. In addition, the development of bacterial biofilms on prosthetics or on other implantable devices is a major health risk. Biofilms are tolerated as they can evade the immune system. However, they may become colonized by other organisms such as S. aureus or microscopic fungi. They are responsible for chronic infections with more than 200 000 people in need of re-intervention on their devices just in the USA 1 . Some of the possible remedies include improving of the interface at the nerve or prosthetics junction, and secondly preventing this interface from getting infected by other pathogenic bacteria.</p>
 +
                    </div>
  
                     #home {
+
                     <div class="block one-third">
                         background: url(https://static.igem.org/mediawiki/2018/3/39/T--Pasteur_Paris--teamlogoigemwhite_99x60.png) no-repeat;
+
                         <img src=""> <!-- METTRE PHOTO CONTEXT -->
                         height: 60px;
+
                         <div class="legend">
                         background-position: center;
+
                            <p><b>Figure 1 : </b></p>
                     }
+
                         </div>
 +
                     </div>
  
                     #home a {
+
                     <div class="block separator">
                        color: #ffffff;
+
                     </div>
                     }
+
  
                     #project {
+
                     <div class="block title"><h1>Our project NeuronArch</h1></div>
                        background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
                        height: 60px;
+
                        background-position: center;
+
                    }
+
  
                     #project a {
+
                     <div class="block two-third center">
                        color: #ffffff;
+
                         <p>With NeuronArch, instead of combating the biofilm, we will develop an innovative system by subverting it. To achieve this, we will deliberately coat the implant with a genetically modified lab-grown E. coli that would serve as an interface between the synthetic prosthesis and organic tissues. </p>
                    }
+
                         <p>By doing so, our innovative biofilm would be capable of promoting neural connections. Secondly, it will fight other invasive pathogenic bacteria and reduce the risk of formation of an infectious biofilm. To do so, we will test the capacity of neuronal cells to grow and redirect towards a specific target under the influence of our biofilm. Then, we will test the capacity of our biofilm to diminish an invasive bacterial population in an in vitro culture titration.</p>
 
+
                    </div>
                    #labwork {
+
                   
                        background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
                    <div class="block full">
                        height: 60px;
+
                        <img src=""> <!-- METTRE PHOTO EQUIPE -->
                        background-position: center;
+
                         <div class="legend">
                    }
+
                             <p><b>Figure 3 : </b>This is us</p>
 
+
                    #labwork a {
+
                         color: #ffffff;
+
                    }
+
 
+
                    #parts {
+
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
                        height: 60px;
+
                        background-position: center;
+
                    }
+
 
+
                    #parts a {
+
                        color: #ffffff;
+
                    }
+
 
+
                    #modeling {
+
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
                        height: 60px;
+
                        background-position: center;
+
                    }
+
 
+
                    #modeling a {
+
                        color: #ffffff;
+
                    }
+
 
+
                    #achievements {
+
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;
+
                         height: 60px;
+
                        background-position: center;
+
                    }
+
 
+
                    #achievements a {
+
                        color: #ffffff;
+
                    }
+
 
+
                    #hp {
+
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
                        height: 60px;
+
                        background-position: center;
+
                    }
+
 
+
                    #hp a {
+
                        color: #ffffff;
+
                    }
+
 
+
                    #aboutus {
+
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
                        height: 60px;
+
                        background-position: center;
+
                    }
+
 
+
                    #aboutus a {
+
                        color: #ffffff;
+
                    }
+
 
+
                /* End classes for icons */
+
 
+
 
+
                /* Begin running chip */
+
 
+
 
+
                    /* Begin Chip Design */
+
 
+
                        #runningchip {
+
                            position: absolute;
+
                            width: 110px;
+
                            height: 120%;
+
                            left: 5px;
+
                            -webkit-transition: all 300ms ease-out;
+
                            -moz-transition: all 300ms ease-out;
+
                            transition: all 300ms ease-out;
+
                            z-index: 0;
+
                          border-bottom-left-radius: 5px;
+
                          border-bottom-right-radius: 5px;
+
                          background: #000000;
+
                        }
+
 
+
                    /* End Chip Design */
+
 
+
 
+
                    /* Begin Chip Movement */
+
 
+
                        #home:hover ~ #runningchip {
+
                            left: 5px;
+
                        }
+
 
+
                        #project:hover ~ #runningchip {
+
                            left: 125px;
+
                        }
+
 
+
                        #labwork:hover ~ #runningchip {
+
                            left: 245px;
+
                        }
+
 
+
                        #parts:hover ~ #runningchip {
+
                            left: 365px;
+
                        }
+
 
+
                        #modeling:hover ~ #runningchip {
+
                            left: 485px;
+
                        }
+
 
+
                        #achievements:hover ~ #runningchip {
+
                            left: 605px;
+
                        }
+
 
+
                        #hp:hover ~ #runningchip {
+
                            left: 725px;
+
                        }
+
 
+
                        #aboutus:hover ~ #runningchip {
+
                            left: 845px;
+
                        }
+
 
+
                    /* End Chip Movment */
+
 
+
                /* End running chip */
+
 
+
 
+
                /* Begin Settings Submenu Level 1 */
+
 
+
                    #navtextwrapper {                /*define background box*/
+
                        margin: 0 auto;
+
                        padding: 0px;
+
                        top: -2px;
+
                        height: 24px;
+
                        width: 840px;
+
                        position: relative;
+
                        /*border: 2px solid #000;*/
+
                    }
+
 
+
                    #navtext {
+
                        text-align: center;
+
                        font-family: 'Raleway',sans-serif;
+
                        font-size: 16px;
+
                        z-index: 600;
+
                    }
+
 
+
                    #navtext ul {
+
                        margin: 0px auto;
+
                        top: -8px;
+
                        padding: 0px;
+
                        position: absolute;
+
                        z-index: 600;
+
                    }
+
 
+
                    #navtext li {
+
                        margin: 0px auto;        /*centers text*/
+
                        list-style: none;
+
                        display: block;        /*makes items go horizontal and centers them*/
+
                        /*float: left;*/                /*makes items go horizontal*/
+
                        position: relative;
+
                        z-index: 600;
+
                    }   
+
 
+
                    #navtext ul li a {
+
                        margin-top: 2px;
+
                        height: 24px;
+
                        padding-left: 10px;
+
                        padding-right: 10px;
+
                        text-decoration: none;
+
                        color: #FFF;
+
                        display: block;
+
                        text-align: center;
+
                        border-radius: 8px;
+
                        z-index: 600;
+
                    }
+
 
+
                    #navtext ul li:hover > a {
+
                      /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
                        color: #345292; /* couleur du sous titre quand tu passes dessus*/
+
                    }
+
 
+
                    #project-sub {
+
                        display: none;
+
                        left: 67px;
+
                    }
+
 
+
                    #labwork-sub {
+
                        display: none;
+
                        left: 183px;
+
                    }
+
 
+
                    #parts-sub {
+
                        /*background-color: #ac34fe;*/
+
                        display: none;
+
                        left: 292.5px;
+
                    }
+
 
+
                    #modeling-sub{
+
                        display: none;
+
                        left: 445.5px;
+
                    }
+
 
+
                    #achievements-sub{
+
                        display: none;
+
                        left: 532.5px;
+
                    }
+
 
+
                    #hp-sub{
+
                        display: none;
+
                        left: 618.5px;
+
                    }
+
                    #aboutus-sub{
+
                        display: none;
+
                        left: 790.5px;
+
                    }
+
 
+
                    .chip_gap {
+
                        content: none;
+
                    }
+
 
+
                    .navsub1 {
+
                        background-color: #000000;
+
                    opacity: 1;
+
                    } 
+
 
+
                /* End Settings Submenu Level 1 */
+
 
+
                #smallnav{
+
                    display: none;
+
                }
+
            }/* END media query large screen*/
+
 
+
            /* BEGIN media query small screen */
+
            @media screen and (max-width: 950px){
+
                #Menu{
+
                    top: -9000px;
+
                    opacity: 0;
+
                }
+
 
+
                /* avoid space to content box */
+
                .content_background_wrapper{
+
                    padding-top: 20px;
+
                }
+
            }/* END media query small screen*/
+
 
+
            /* BEGIN Styles for smallnav */
+
 
+
                /* Clearfix */
+
                .clearfix:before,
+
                .clearfix:after {
+
                    content: " ";
+
                    display: table;
+
                }
+
                .clearfix:after {
+
                    clear: both;
+
                }
+
                .clearfix {
+
                    *zoom: 1;
+
                }
+
 
+
 
+
                /* Basic Styles */
+
 
+
                #smallnav {
+
                    height: 40px;
+
                    width: 100%;
+
                    background-image:  linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146));
+
                    font-size: 11pt;
+
                    font-family: 'Raleway', Arial, sans-serif;
+
                    position: fixed;
+
                    top: 18px;
+
                    left: 0%;
+
                    border-bottom: 2px solid #000000;
+
                    z-index: 3000;
+
                    opacity: 0.9;
+
                }
+
                #smallnav ul {
+
                    padding: 0;
+
                    margin: 0 auto;
+
                    width: 770px;
+
                    height: 40px;
+
                }
+
                #smallnav li {
+
                    display: inline;
+
                    float: left;
+
                }
+
                #smallnav a {
+
                    color: #ffffff;
+
                    display: inline-block;
+
                    width: 110px;
+
                    text-align: center;
+
                    text-decoration: none;
+
                    line-height: 40px;
+
                }
+
                #smallnav li a {
+
                    box-sizing:border-box;
+
                    -moz-box-sizing:border-box;
+
                    -webkit-box-sizing:border-box;
+
                }
+
                #smallnav li:last-child a {
+
                    border-right: 0;
+
                }
+
                #smallnav a:hover, #smallnav a:active {
+
                    background-color: #000000;
+
                }
+
                #smallnav a#pull {
+
                    display: none;
+
                }
+
            /* END Styles for smallnav*/
+
 
+
            /*Styles for screen 600px and lower*/
+
            @media screen and (max-width: 760px) {
+
                #smallnav {
+
                    height: auto;
+
                    background: #ffffff;
+
                }
+
                #smallnav ul {
+
                    width: 100%;
+
                    display: block;
+
                    height: auto;
+
                }
+
                #smallnav li {
+
                    width: 50%;
+
                    float: left;
+
                    position: relative;
+
                    margin-bottom: 0;
+
                }
+
 
+
                #smallnav a {
+
                    text-align: left;
+
                    width: 100%;
+
                    text-indent: 25px;
+
                }
+
 
+
                #smallnav {
+
                    border-bottom: 0;
+
                }
+
                #smallnav ul {
+
                    display: none;
+
                    height: auto;
+
                }
+
                #smallnav a#pull {
+
                    display: block;
+
                    background-color: #000000;
+
                    width: 100%;
+
                    position: relative;
+
                }
+
                #smallnav a#pull:after {
+
                    content:"";
+
                    background: url('') no-repeat;
+
                    background-size: auto 90%;
+
                    width: 30px;
+
                    height: 30px;
+
                    display: inline-block;
+
                    position: absolute;
+
                    right: 15px;
+
                    top: 5px;
+
                }
+
 
+
 
+
                /* BEGINclasses for icons */
+
                    #home_small {
+
                        background-color: #a8305b;
+
 
+
                    }
+
 
+
                    #home_small a {
+
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
                        background-position: left;
+
                        background-size: auto 100%;
+
                        background-repeat: no-repeat;
+
                        padding-left: 40px;
+
                        color: #FFF;
+
                    }
+
 
+
                    #project_small {
+
                        background-color: #a8305b;
+
 
+
                    }
+
 
+
                    #project_small a {
+
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                        padding-left: 40px;
+
                        color: #FFF;
+
                    }
+
 
+
                    #labwork_small {
+
                        background-color:#a8305b;
+
 
+
                    }
+
 
+
                    #labwork_small a {
+
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                        padding-left: 40px;
+
                        color: #FFF;
+
                    }
+
 
+
                    #parts_small {
+
                        background-color: #a8305b;
+
 
+
                    }
+
 
+
                    #parts_small a {
+
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                        padding-left: 40px;
+
                        color: #FFF;
+
                    }
+
 
+
                    #modeling_small {
+
                        background-color: #a12f5c;
+
                    }
+
 
+
                    #modeling_small a {
+
                        color: #FFF;
+
                        padding-left: 40px;
+
                        background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                    }
+
 
+
                    #achievements_small {
+
                        background-color: #80346e;
+
                    }
+
 
+
                    #achievements_small a {
+
                        color: #FFF;
+
                        padding-left: 40px;
+
                        background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                    }
+
 
+
                    #hp_small {
+
                        background-color: #543b7e;
+
                    }
+
 
+
                    #hp_small a {
+
                        color: #FFF;
+
                        padding-left: 40px;
+
                        background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                    }
+
 
+
                    #aboutus_small {
+
                        background-color: #345292;
+
                    }
+
 
+
                    #aboutus_small a {
+
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
                        background-position: left;
+
                        background-size: auto 90%;
+
                        background-repeat: no-repeat;
+
                        padding-left: 40px;
+
                        color: #FFF;
+
                    }
+
                /* END classes for icons */
+
            }/* end media query
+
 
+
            /*Smartphone*/
+
            @media only screen and (max-width : 320px) {
+
                #smallnav li {
+
                    display: block;
+
                    float: none;
+
                    width: 100%;
+
                }
+
            }
+
 
+
    </style>
+
 
+
 
+
<body>
+
 
+
        <!-- BEGIN Simulating Upper Igem Menu-->
+
    <header id="MenuIgem">
+
 
+
    </header>
+
        <!-- END Simulating Upper Igem Menu-->
+
 
+
        <!-- BEGIN normal Menubar-->
+
    <header id="Menu">
+
    <div id="naviconwrapper">
+
                    <!-- BEGIN icons -->
+
                    <div id="naviconbar">
+
                         <div id="navicons">  
+
                             <ul>
+
                                <li id="home" ><a href="https://2018.igem.org/Team:Pasteur_Paris/Home"></a>
+
                                </li>
+
                                <li id="project" ><a href="https://2018.igem.org/Team:Pasteur_Paris/Description">Project</a>
+
                                </li>
+
                                <li id="labwork"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork">Labwork</a>
+
                                </li>
+
                                <li id="parts"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Parts</a>
+
                                </li>
+
                                <li id="modeling"><a href="https://2018.igem.org/Team:Pasteur_Paris/Model">Modeling</a>
+
                                </li>
+
                                <li id="achievements"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements">Achievements</a>
+
                                </li>
+
                                <li id="hp"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">Human Practices</a>
+
                                </li>
+
                                <li id="aboutus"><a href="https://2018.igem.org/Team:Pasteur_Paris/Team">About Us</a>
+
                                </li>
+
                                <div id="runningchip">
+
                                    <div id="top-arrow"></div>
+
                                    <div id="runningchip-back"></div>
+
                                </div>
+
                            </ul>
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
                    <!-- END icons -->
 
                </div>
 
                    <!-- Begin navigation submenu -->
 
                <div id="navtextwrapper"> <!-- only names of elements -->
 
                    <div id="navtext">
 
                        <ul id="project-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Description"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Description">Description</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Attributions">Infection</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Partners">Conductivity</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Design">Design</a></li>
 
                        </ul>
 
                        <ul id="labwork-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Experiments">Experiments</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Demonstrate">Demonstrate</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Notebook">Notebook</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/InterLab">InterLab</a></li>
 
                        </ul>
 
                        <ul id="parts-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Overview</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Basic_Part">Basic Part</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Composite_Part">Composite Part</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Part_Collection">Part Collection</a></li>
 
                        </ul>
 
                        <ul id="modeling-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Model"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Model">Model</a></li>
 
                        </ul>
 
                        <ul id="achievements-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/MedalCriterias">Medals Criterias</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Awards">Awards</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Collaborations">Collaboration</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Improve">Improve</a></li>
 
                        </ul>
 
                        <ul id="hp-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">Silver</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">Gold & integrated HP</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Public_Engagement">Education & Engagement</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Safety">Safety</a></li>
 
                        </ul>
 
                        <ul id="aboutus-sub">
 
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Team"></a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Team">Team Members</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Attributions">Attributions</a></li>
 
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Sponsors">Sponsors</a></li>
 
                        </ul>
 
                    </div>
 
                </div>   
 
                    <!-- End of navigation submenu --> 
 
            </header>   
 
        <!-- END: normal Menubar -->
 
  
  
        <!-- BEGIN: Mobile Navigation -->
 
  
            <div class="clearfix" id="smallnav">
 
                <ul class="clearfix">
 
                    <li id="home_small"><a href="https://2018.igem.org/Team:Pasteur_Paris">Home</a></li>
 
                    <li id="project_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Project">Project</a></li>
 
                    <li id="parts_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Parts</a></li>
 
                    <li id="modeling_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Modeling">Modeling</a></li>
 
                    <li id="achievements_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/">Achievements</a></li>
 
                    <li id="hp_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">HP</a></li> 
 
                    <li id="aboutus_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Team">About us</a></li>
 
                </ul>
 
                <a href="#" id="pull">Menu</a>
 
            </div>
 
  
        <!-- END: Mobile Navigation -->
 
    </body>
 
  
 +
                    <div class="block title"><h1>Références</h1></div>
  
 +
                    <div class="block full">
 +
                        <p>1: Treatment of Infections Associated with Surgical Implants, Darouiche R. New England Journal of Medicine (2004)</p>
 +
                    </div>
  
    <script>
 
    // FOR SMALLNAV
 
        $(function() {
 
            var pull        = $('#pull');
 
                menu        = $('#smallnav ul');
 
                menuHeight  = menu.height();
 
  
            $(pull).on('click', function(e) {
+
                 </div>
                 e.preventDefault();
+
                menu.slideToggle();
+
            });
+
  
            $(window).resize(function(){
 
                var w = $(window).width();
 
                if(w > 320) {
 
                    if (menu.is(':hidden')) {
 
                    menu.removeAttr('style');
 
                    }
 
                }
 
            });
 
        });
 
    </script>
 
 
    <script type="text/javascript">
 
            $(document).ready(function(){
 
            // make submenus appear //
 
                $("#home").hover(function(){
 
                    $("#project-sub") .hide();
 
                    $("#parts-sub") .hide();
 
                    $("#labwork-sub") .hide();
 
                    $("#modeling-sub") .hide();
 
                    $("#achievements-sub") .hide();
 
                    $("#hp-sub") .hide();
 
                    $("#aboutus-sub") .hide();
 
                });
 
                $("#project").hover(function(){
 
                    $("#project-sub") .show();
 
                    $("#labwork-sub") .hide();
 
                    $("#parts-sub") .hide();
 
                    $("#modeling-sub") .hide();
 
                    $("#achievements-sub") .hide();
 
                    $("#hp-sub") .hide();
 
                    $("#aboutus-sub") .hide();
 
                },
 
                                        function(){
 
                    $("#project-sub") .hide();
 
                });
 
                $("#labwork").hover(function(){
 
                    $("#labwork-sub") .show();
 
                    $("#project-sub") .hide();
 
                    $("#parts-sub") .hide();
 
                    $("#modeling-sub") .hide();
 
                    $("#achievements-sub") .hide();
 
                    $("#hp-sub") .hide();
 
                    $("#aboutus-sub") .hide();
 
                },
 
                                        function(){
 
                    $("#labwork-sub") .hide();
 
                });
 
 
                  
 
                  
                $("#parts").hover(function(){
+
            </div>
                    $("#parts-sub") .show();
+
                    $("#project-sub") .hide();
+
                    $("#labwork-sub") .hide();
+
                    $("#modeling-sub") .hide();
+
                    $("#achievements-sub") .hide();
+
                    $("#hp-sub") .hide();
+
                    $("#aboutus-sub") .hide();
+
                },
+
                                        function(){
+
                    $("#parts-sub") .hide();
+
                });
+
               
+
                $("#modeling").hover(function(){
+
                    $("#modeling-sub") .show();
+
                    $("#project-sub") .hide();
+
                    $("#parts-sub") .hide();
+
                    $("#labwork-sub") .hide();
+
                    $("#achievements-sub") .hide();
+
                    $("#hp-sub") .hide();
+
                    $("#aboutus-sub") .hide();
+
                });
+
               
+
                $("#achievements").hover(function(){
+
                    $("#achievements-sub") .show();
+
                    $("#project-sub") .hide();
+
                    $("#parts-sub") .hide();
+
                    $("#labwork-sub") .hide();
+
                    $("#modeling-sub") .hide();
+
                    $("#hp-sub") .hide();
+
                    $("#aboutus-sub") .hide();
+
                },
+
                                        function(){
+
                    $("#achievements-sub") .hide();
+
                });
+
               
+
                $("#hp").hover(function(){
+
                    $("#hp-sub") .show();
+
                    $("#project-sub") .hide();
+
                    $("#parts-sub") .hide();
+
                    $("#labwork-sub") .hide();
+
                    $("#modeling-sub") .hide();
+
                    $("#achievements-sub") .hide();
+
                    $("#aboutus-sub") .hide();
+
                },
+
                                        function(){
+
                    $("#hp-sub") .hide();
+
                });
+
  
                $("#aboutus").hover(function(){
+
        <footer>
                    $("#aboutus-sub") .show();
+
        </footer>
                    $("#project-sub") .hide();
+
                    $("#parts-sub") .hide();
+
                    $("#labwork-sub") .hide();
+
                    $("#modeling-sub") .hide();
+
                    $("#achievements-sub") .hide();
+
                    $("#hp-sub") .hide();
+
                },
+
                                        function(){
+
                    $("#aboutus-sub") .hide();
+
                });
+
            // make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
+
                $("#project-sub") .hover(function(){
+
                    $("#runningchip") .css('left','135px');
+
                    $("#project-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#project-sub") .hide();
+
                });
+
                $("#labwork-sub") .hover(function(){
+
                    $("#runningchip") .css('left','255px');
+
                    $("#labwork-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#labwork-sub") .hide();
+
                });
+
                $("#parts-sub") .hover(function(){
+
                    $("#runningchip") .css('left','375px');
+
                    $("#parts-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#parts-sub") .hide();
+
                });
+
                $("#modeling-sub") .hover(function(){
+
                    $("#runningchip") .css('left','495px');
+
                    $("#modeling-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#modeling-sub") .hide();
+
                });
+
                $("#achievements-sub") .hover(function(){
+
                    $("#runningchip") .css('left','615px');
+
                    $("#achievements-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#achievements-sub") .hide();
+
                });
+
                $("#hp-sub") .hover(function(){
+
                    $("#runningchip") .css('left','735px');
+
                    $("#hp-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#hp-sub") .hide();
+
                });
+
 
+
                $("#aboutus-sub") .hover(function(){
+
                    $("#runningchip") .css('left','855px');
+
                    $("#aboutus-sub") .show();
+
                },
+
                                        function(){
+
                    $("#runningchip") .css('left','');
+
                    $("#aboutus-sub") .hide();
+
                });
+
            });
+
    </script>
+
 
+
    <script>
+
            /*Attachable menu code*/
+
            $( document ).ready(function() {
+
           
+
                $(window).scroll(function (event) {
+
                    var y = $(this).scrollTop();
+
                    if(y>60){
+
 
+
                        $("#header").css('position','fixed');
+
                        $("#header").css('width','100%');
+
                        $("#header").css('margin-top','-61px');
+
                        $("#bottom-arrow").css('display','none');
+
                        $("#runningchip-back").css('display','none');
+
                        $("#navtext").css('margin-top','-20px');
+
                        $(".chip_gap").css('height','30px');
+
 
+
                    }else{
+
                        var offsetTop = -y;
+
                        $("#header").css('margin-top',offsetTop+'px');
+
                        $("#bottom-arrow").removeAttr('style');
+
                        $("#runningchip-back").removeAttr('style');
+
                        $("#navtext").removeAttr('style');
+
                        $(".chip_gap").css('height','23px');
+
                    }
+
 
+
                });
+
    /*Fix for when a link targets an id -> check the position on pageload*/
+
    $(window).scroll();
+
 
+
            });
+
 
+
    </script>
+
  
 +
    </body>
  
  
    <!-- END: jQuery -->
 
  
    <!-- Bar code inspired from Freiburg 2015 : https://2015.igem.org/Team:Freiburg -->
 
 
</html>
 
</html>

Revision as of 14:47, 15 August 2018


""

Context: why prosthetics and biocompatibility?

In today’s society where equal access to means and opportunities is a priority, disabled citizens need to be given better tools for their daily lives. In this context, prosthetics and implants will become more and more sophisticated and we think it is necessary to develop a system to enhance the interface between the implanted-human and the mechanical component thanks to synthetic biology. One of the main actor obstructing the improvement in this domain is the connection between the nerves and the controllers. In addition, the development of bacterial biofilms on prosthetics or on other implantable devices is a major health risk. Biofilms are tolerated as they can evade the immune system. However, they may become colonized by other organisms such as S. aureus or microscopic fungi. They are responsible for chronic infections with more than 200 000 people in need of re-intervention on their devices just in the USA 1 . Some of the possible remedies include improving of the interface at the nerve or prosthetics junction, and secondly preventing this interface from getting infected by other pathogenic bacteria.

Our project NeuronArch

With NeuronArch, instead of combating the biofilm, we will develop an innovative system by subverting it. To achieve this, we will deliberately coat the implant with a genetically modified lab-grown E. coli that would serve as an interface between the synthetic prosthesis and organic tissues.

By doing so, our innovative biofilm would be capable of promoting neural connections. Secondly, it will fight other invasive pathogenic bacteria and reduce the risk of formation of an infectious biofilm. To do so, we will test the capacity of neuronal cells to grow and redirect towards a specific target under the influence of our biofilm. Then, we will test the capacity of our biofilm to diminish an invasive bacterial population in an in vitro culture titration.

Figure 3 : This is us

Références

1: Treatment of Infections Associated with Surgical Implants, Darouiche R. New England Journal of Medicine (2004)