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

Line 1: Line 1:
−
{{Pasteur_Paris/MenuBlock}}
+
{{Pasteur_Paris/Fonts}}
 
<html>
 
<html>
 +
    <head>
 +
        <title>""</title>
 +
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 +
    </head>
 +
    <style>
 +
        /* BEGIN : Default Wiki Settings */
 +
            #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;};
 +
        /* END : Default Wiki Settings */
 +
        *{
 +
            margin: 0;
 +
            padding: 0;
 +
        }
 +
        body {
 +
            padding-top: 80px;
 +
            font-family: 'Raleway', Arial Black, sans-serif;
 +
        }
 +
        #upArrow{
 +
            position: fixed;
 +
            bottom: 3%;
 +
            right: 3%;
 +
            height: 40px;
 +
            width: 60px;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/0/05/T--Pasteur_Paris--UpArrow.svg");
 +
            opacity: .3;
 +
            border-radius: 5px;
 +
            z-index: 300;
 +
            background-repeat: no-repeat;
 +
            transition:
 +
        }
 +
        #upArrow:hover{
 +
            opacity: .8;
 +
        }
  
−
<style type="text/css">
+
        #upArrow a {
−
#runningchip {
+
            padding-top: 1px;
−
left: 485px;
+
            padding-bottom: 20px;
−
}
+
            padding-left: 60px;
−
#modeling_small {
+
        }
−
background-color: #292929;
+
        /* BEGIN : Menu Bar Settings */
−
}
+
            /* BEGIN : General Settings of Menu Bar */
−
#banner {
+
                /* BEGIN: Settings Menu Containers and List */
−
background-image: ;
+
                    #Menu {
−
}
+
                        opacity: .95;
−
@media screen and (max-width: 760px) {
+
                        height: 80px;
−
#banner {
+
                        position: fixed;
−
background-image: ;
+
                        top: 18px;
−
}
+
                        left: 0%;
−
</style>
+
                        width: 100%;
−
 
+
                        z-index: 2;
−
 
+
                        border-bottom-left-radius: 15px;
−
<style type="text/css">
+
                        border-bottom-right-radius: 15px;
−
.tableData{
+
                        z-index: 3000;
−
background-color: transparent;
+
                        box-shadow: 0px 0px 5px black;
−
width: 90%;
+
−
}
+
−
.dropDown{
+
−
background-color: rgb(15, 12, 132);
+
−
height: 70px;
+
−
margin: 5px;
+
−
border-radius: 10px;
+
−
position: relative;
+
−
opacity: .9;
+
−
box-shadow: 0px 1px 3px black;
+
−
}
+
−
.dropDown:hover {
+
−
opacity: .7;
+
−
}
+
−
.dropDown h4 {
+
−
position: absolute;
+
−
left: 50%;
+
−
top: 50%;
+
−
transform: translate(-50%, -50%);
+
−
color: white;
+
−
}
+
−
.dropDown a {
+
−
color: white;
+
−
text-decoration: none;
+
−
}
+
−
.hiddenContent{
+
−
display: none;
+
−
background-color: #fffafc;
+
−
width: 100%;
+
−
transition-duration: : opacity 1s;
+
−
}
+
−
.hiddenContent:target{
+
−
display: block;
+
−
}
+
−
#upArrow{
+
−
position: fixed;
+
−
bottom: 3%;
+
−
right: 3%;
+
−
height: 40px;
+
−
width: 60px;
+
−
background-image: url("https://static.igem.org/mediawiki/2018/0/05/T--Pasteur_Paris--UpArrow.svg");
+
−
opacity: .3;
+
−
border-radius: 5px;
+
−
z-index: 300;
+
−
background-repeat: no-repeat;
+
−
transition:
+
−
}
+
−
#upArrow:hover{
+
−
opacity: .8;
+
−
}
+
−
 
+
−
#upArrow a {
+
−
padding-top: 1px;
+
−
padding-bottom: 20px;
+
−
padding-left: 60px;
+
−
}
+
−
</style>
+
−
 
+
−
<style type="text/css">
+
−
.frac {
+
−
    display: inline-block;
+
−
    position: relative;
+
−
    vertical-align: middle;
+
−
    letter-spacing: 0.001em;
+
−
    text-align: center;
+
−
    text-indent: 0px;
+
−
}
+
−
.frac > span {
+
−
    display: block;
+
−
    padding: 0.1em;
+
−
}
+
−
.frac span.bottom {
+
−
    border-top: thin solid black;
+
−
}
+
−
.frac span.symbol {
+
−
    display: none;
+
−
}
+
−
</style>
+
−
 
+
−
<script type="text/javascript">
+
−
dropDown.onclick() = $(#dropDown +).css({
+
−
display: "block"
+
−
})
+
−
</script>
+
−
 
+
−
 
+
−
<script>
+
−
$(document).ready(function() {
+
−
$('.dropDown').on('click', function() { // Au clic sur un élément
+
−
var page = $(this).attr('href'); // Page cible
+
−
var speed = 750; // Durée de l'animation (en ms)
+
−
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
+
−
return false;
+
−
});
+
−
});
+
−
</script>
+
−
 
+
−
<script>
+
−
$(document).ready(function() {
+
−
$('#upArrow').on('click', function() { // Au clic sur un élément
+
−
var page = $(this).attr('href'); // Page cible
+
−
var speed = 750; // Durée de l'animation (en ms)
+
−
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
+
−
return false;
+
−
});
+
−
});
+
−
</script>
+
−
 
+
−
 
+
−
<div id="banner">
+
−
<h1>MODELING</h1>
+
−
</div>
+
−
 
+
−
<div id="upArrow" href="#GeneralContent">
+
−
<a href=""></a>
+
−
</div>
+
−
 
+
−
 
+
−
<div id="GeneralContent">
+
−
<div id="MainContent">
+
−
<!-- Introduction -->
+
−
<div class="block title">
+
−
<h1>General introduction</h1>
+
−
</div>
+
−
<div class="block two-third center">
+
−
<p>The aim of our mathematical model is to simulate the growth of neurons towards our biofilm in response of the presence of Nerve Growth Factor (NGF). Nerve growth factor is one of a group of small proteins called neurotrophins that are re-sponsible for the development of new neurons, and for the health and maintenance of mature ones. We created a determin-istic model to help the wetlab establish the optimal concen-tration gradients of NGF needed for the regrowth of the nerves. NGF concentration and concentration gradient are key parameters affecting the growth rate and direction of neu-rites. Neurites growth have shown to be NGF dose-dependent: if NGF concentration si too low or too high, the growth rate is attenuated. In order to visualize the results of the model on a microfluidic chip we used MATLAB, App Designer, Python, Gmsh and FreeFem. This is an important part of our project since it creates the link between the wetlab and drylab. </p>
+
−
<p>We divided our model in three parts:
+
−
<ol style="text-align: left;">
+
−
<li>Production of NGF by the <i>E. coli</i> genetically modified</li>
+
−
<li>Simulation of the diffusion of NGF in a given environment</li>
+
−
<li>Neurons growth in the presence of NGF</li>
+
−
</ol>
+
−
</p>
+
−
</div>
+
−
<div class="block two-third center">
+
−
+
−
</div>
+
−
<div class="block separator-mark"></div>
+
−
<div class="block title">
+
−
<h1>Context of our model</h1>
+
−
</div>
+
−
<div class="block half">
+
−
<p>Our project aims at creating a biofilm composed of genetically modified <i>E. coli</i> able to release a neurotrophic factor: NGF. It helps to accelerate the connection between the neurons and the implant of the prothesis; hence aiming at connecting directly the prothesis amputee’s neurons. This will enable the patient to have a more instinctive control of his prothesis device. The nerves will be guided towards a conductive membrane surrounding our genetically modified biofilm. This membrane will then pass the neural signal of the regenerated nerves towards the electronic chip of the implant through wires.  It will allow the patient to have a more instinctive and natural control than any other current prosthesis, and a reduced reeducation time.</p>
+
−
</div>
+
−
<div class="block half">
+
−
 
+
−
</div>
+
−
<div class="block one-third">
+
−
+
−
</div>
+
−
<div class="block two-third">
+
−
<p>The aim of the wetllab is to test the biofilm on a microfluidic chip as a proof of concept. The chip is composed of two compartments: one made of the E. coli genetically modified to produce NGF and the other one of neurons. Micro canals link the two compartments in the middle of the chip, allowing the diffusion of NGF and the growth of the neurites. Our model will hence be established on a micro-fluidic chip shape in order to share our results with the wetlab and indicate them the optimal concentration of NGF needed according to their model.</p>
+
−
</div>
+
−
<div class="block two-third center">
+
−
<p><i>We introduce different parameters in order to create our model :</i></p>
+
−
<table class="tableData" style="margin: auto;">
+
−
<tr>
+
−
<td>g</td>
+
−
<td>Length of the neurite outgrowth</td>
+
−
</tr>
+
−
<tr>
+
−
<td>
+
−
<span>
+
−
<div class="frac"><span>dg</span><span class="symbol">/</span><span class="bottom">dt</span></div>
+
−
</span>
+
−
</td>
+
−
<td>Neurite outgrowth rate</td>
+
−
</tr>
+
−
<tr>
+
−
<td>u(x,t)</td>
+
−
<td>Concentration of NGF at the position x and time t</td>
+
−
</tr>
+
−
<tr>
+
−
<td>
+
−
<span>
+
−
<div class="frac"><span>du</span><span class="symbol">/</span><span class="bottom">dt</span></div>
+
−
</span>
+
−
</td>
+
−
<td>NGF concentration gradient at the position x and time t</td>
+
−
</tr>
+
−
<tr>
+
−
<td>C<SUB>diff</SUB></td>
+
−
<td>Diffusion coefficient of NGF</td>
+
−
</tr>
+
−
<tr>
+
−
<td>K</td>
+
−
<td>Gradient factor (growth rate of the neurite under the stimulation of the NGF concentration gradient)</td>
+
−
</tr>
+
−
<tr>
+
−
<td>G<SUB><FONT face="Raleway">&theta;</FONT></SUB></td>
+
−
<td>Baseline growth rate (neurite growth rate in absence of NGF concentration gradient)</td>
+
−
</tr>
+
−
<tr>
+
−
<td>L</td>
+
−
<td>Length of the conduit </td>
+
−
</tr>
+
−
</table>
+
−
</div>
+
−
 
+
−
<!-- First Onglet Production of NGF-->
+
−
 
+
−
<div class="block full dropDown">
+
−
<h4><a href="#production">NGF Production by genetically modified <i>E. coli</i></a></h4>
+
−
</div>
+
−
 
+
−
<div class="hiddenContent" id="production">
+
−
 
+
−
</div>
+
−
 
+
−
<!-- Second Onglet Diffusion of NGF -->
+
−
 
+
−
<div class="block full dropDown">
+
−
<h4><a href="#diffusion">NGF diffusion simultation in a given environment</a></h4>
+
−
</div>
+
−
 
+
−
<div class="hiddenContent" id="diffusion">
+
−
<div class="block title">
+
−
<h1 style="padding-top: 100px;">NGF diffusion diffusion in a given environment</h1><br>
+
−
<p><i>We are looking to understand the way the NGF spreads inside the conduit once it is produced. This will help us to determine the NGF concentration u(x,t) (ng.mL<SUP>-1</SUP>) as a function of the distance x (cm) from the production site of NGF.</i></p>
+
−
</div>
+
−
<!-- Fick's diffusion law -->
+
−
<div class="block full">
+
−
<h3>Fick’s diffusion law </h3>
+
−
<p>To simulate NGF diffusion in the microfluidic chip we consider a unidimensional conduit of axe x and a constant concentration of NGF introduced at one end of the canals. In this part, diffusion is assumed to be the only mechanism producing the gradient decay in the micro canals. We can model the diffusion characteristics of NGF with Fick’s second law of diffusion:<br>
+
−
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
+
−
<span class="frac">
+
−
<span>du</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dt</span>
+
−
</span>
+
−
= C<SUB>diff</SUB>
+
−
<span class="frac">
+
−
<span>d<SUP>2</SUP>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dx<SUP>2</SUP></span>
+
−
</span>
+
−
&emsp;&emsp;&emsp;(1)
+
−
</span>
+
−
</p>
+
−
<p>Cdiff is assumed to be constant inside the conduit and depends on the material used.<br>
+
−
There are also two boundary conditions:<br>
+
−
at x=0: &emsp;&emsp;
+
−
<span class="frac">
+
−
<span>du</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dx</span>
+
−
</span>
+
−
|<SUB>(0,t)</SUB>&emsp;&emsp;&emsp;(2)<br>
+
−
at x=L: &emsp;&emsp;
+
−
<span style="text-align: left;">
+
−
<span class="frac">
+
−
<span>du</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dx</span>
+
−
</span>
+
−
|<SUB>(L,t)</SUB>&emsp;&emsp;&emsp;(3)<br>
+
−
</span>
+
−
</p>
+
−
<p>Indeed, in the same material, the rate transfer of the diffusing NGF through the cross section of the micro canal is proportional to the concentration gradient normal to the cross section. It is assumed that the leakage of NGF at both ends of the micro canal is negligible because there should be little NGF at the ends the micro canals compared to the total amount of NGF and second because of a low NGF diffusion rate.
+
−
The equation (1) can be solved with Euler’s method and we find the NGF concentration gradient at the position x and time t. The MatLab code is the following:</p>
+
−
</div>
+
−
<div class="block half">
+
−
+
−
</div>
+
−
<div class="block half">
+
−
<p>We displayed our results showing a decrease of the concentration of NGF (u(x,t)) depending on the distance of the conduit x.</p>
+
−
<p>We used the following parameters for the model: </p>
+
−
<table class="tableData">
+
−
<tr>
+
−
<td>Length of the conduit: L</td>
+
−
<td>0.1 cm </td>
+
−
</tr>
+
−
<tr>
+
−
<td>Diffusion coefficient of NGF : Cdiff</td>
+
−
<td>7,8*10<SUP>-7</SUP> cm<SUP>2</SUP>.s<SUP>-1</SUP></td>
+
−
</tr>
+
−
<tr>
+
−
<td>Time length of the experiment: t_final</td>
+
−
<td>3 600 s </td>
+
−
</tr>
+
−
</table>
+
−
</div>
+
−
<div class="block full">
+
−
<p style="text-align: center;">We obtain the following graphs: </p>
+
−
</div>
+
−
 
+
−
<div class="block full">
+
−
<img src="https://static.igem.org/mediawiki/2018/b/b4/T--Pasteur_Paris--gif.gif" style="max-width: 500px; box-shadow: 0px 0px 8px -2px;">
+
−
</div>
+
−
<div class="block half">
+
−
+
−
</div>
+
−
<!-- Optimisation of the gradient -->
+
−
<div class="block full">
+
−
<h3>Optimisation of the NGF gradient</h3>
+
−
</div>
+
−
<div class="block half">
+
−
<p>To optimize the accuracy of the NGF gradient we interpolate the curve u(x)=f(x). Consequently, we obtain the f polynomial function easier to derive and a polynomial function of the gradient with a better accuracy than with the first method. The program is the following:</p>
+
−
</div>
+
−
<div class="block half">
+
−
+
−
</div>
+
−
<div class="block two-third">
+
−
+
−
</div>
+
−
<div class="block two-third">
+
−
<p>With the same parameters as with the previous model we obtain the following graphs: </p>
+
−
</div>
+
−
<div class="block two-third">
+
−
+
−
</div>
+
−
<!-- Analysis of the model -->
+
−
<div class="block full">
+
−
<h3>Analysis of the model </h3>
+
−
<p><i>To validate the model, we vary the three parameters (L, t_final, C<SUB>diff</SUB>) to verify if the program corresponds to a diffusion phenomenon described in Fick’s second law of diffusion. </i></p>
+
−
</div>
+
−
<div class="block two-third">
+
−
<img src="https://static.igem.org/mediawiki/2018/4/41/T--Pasteur_Paris--gif-fct-L.gif" style="max-width: 500px; box-shadow: 0px 0px 8px -2px;">
+
−
</div>
+
−
<div class="block full">
+
−
<p>Observations:<br>
+
−
<ol style="text-align: left; list-style-type: disc;">
+
−
<li>When the length of the conduit increases but the duration of the experiment is fixed the NGF doesn’t have the time to diffuse in the entire conduit.</li>
+
−
<li>For instance, with a t_final= 3 600s the NGF molecules can’t diffuse further than x=0.2cm.</li>
+
−
</ol>
+
−
</p>
+
−
</div>
+
−
<div class="block two-third">
+
−
<img src="https://static.igem.org/mediawiki/2018/0/07/T--Pasteur_Paris--fct-Cdiff.gif" style="max-width: 500px; box-shadow: 0px 0px 8px -2px;">
+
−
</div>
+
−
<div class="block full">
+
−
<p>The higher the diffusion coefficient, the faster the molecules will diffuse in the conduit. Indeed, we observe in the model that with a fixed t_final:<br>
+
−
<ol style="text-align: left; list-style-type: disc;">
+
−
<li>NGF concentration at x=0.1 cm is 675 000 ng.ml<SUP>-1</SUP> for a diffusion coefficient C<SUB>diff</SUB> = 15*10<SUP>-7</SUP> cm<SUP>2</SUP>.s<SUP>-1</SUP></li>
+
−
<li>For a diffusion coefficient two times lower, the NGF concentration is 380 ng.ml<SUP>1</SUP></li>
+
−
</ol>
+
−
</p>
+
−
<p>The results confirm the prediction of the Fick’s law model. </p>
+
−
</div>
+
−
<div class="block full">
+
−
<p>When the time length of the experiment lasts from 1 hour to 2 hours, the concentration of NGF is almost homogeneous in the entire conduit. At the end of the conduit, for x= 0.1 cm, the concentration of NGF equals to 910 ng.ml-1 when t_final= 7 200s whereas the concentration is 3 900 ng.ml<SUP>-1</SUP> when t_final=3 600s. </p>
+
−
<p>It is interesting to observe that when the duration of the experiment increases, the stationary regime is established: the NGF concentration in the conduit becomes independent of the position and time. Indeed, the concentation gradient of NGF in the conduit moves toward 0 for any position. </p>
+
−
</div>
+
−
<div class="block two-third">
+
−
+
−
</div>
+
−
<div class="block two-third">
+
−
+
−
</div>
+
−
</div>
+
−
+
−
<!-- Third Onglet Neurons Growth-->
+
−
 
+
−
<div class="block full dropDown">
+
−
<h4><a href="#growth">Neurons growth in the presence of NGF</a></h4>
+
−
</div>
+
−
 
+
−
<div class="hiddenContent" id="growth">
+
−
<div class="block title">
+
−
<h1 style="padding-top: 100px;">Neurons growth in the presence of NGF</h1><br>
+
−
<p><i>In this part our goal is to determine the length of the neurite outgrowth (g(t)) in response to the gradient concentration of NGF.</i></p>
+
−
</div>
+
−
<!-- Explanation of the model -->
+
−
<div class="block full">
+
−
<h3>Explanation of the model</h3>
+
−
</div>
+
−
<div class="block full">
+
−
<h5 style="text-align: left">Baseline growth rate: </h5>
+
−
<p>In our mathematical model, neurites grow at a constant growth rate defined as the baseline growth rate G0  when the concentration is below the threshold (assumed to be 995 ng.mL<SUP>-1</SUP>). Neurites stop growing when the NGF concentration is higher than the threshold concentration. The value for the baseline growth rate G0 has been fixed at 20 <FONT face="Raleway">&mu;</FONT>m.h<SUP>-1</SUP> for this model. </p>
+
−
<h5 style="text-align: left">Concentration Gradient:</h5>
+
−
<p>The extent of directional guidance is gradient steepness-dependent provided that the concentration gradient reaches the threshold value. The gradient factor k is a gradient steepness-dependent positive effect on the neurite growth rate. </p>
+
−
<p>In this model we assume that the baseline growth rate and the growth rate in the presence of concentration gradient follow an additive rule. This can be explained by the fact that both the NGF concentration and the its gradient can both individually contribute to neurite extension. The equation governing neurite outgrowth thus becomes:<br><br>
+
−
<span style="position: relative; display: inline-block; text-align: center; width: 100%">
+
−
<span class="frac">
+
−
<span>dg</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dt</span>
+
−
</span>
+
−
= G<SUB>0</SUB> + k
+
−
<span class="frac">
+
−
<span><FONT face="Raleway">&part;</FONT>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB> &emsp; &emsp; &emsp; (4)</p>
+
−
</span>
+
−
</div>
+
−
<div class="block full">
+
−
<p>We can introduce a time parameter Tlag because the time taken to transmit the NGF signal is finite. The experiments show that the time lag for the cells to respond to NGF is approximately 1 day. The experiments show:<br>
+
−
if t <FONT face="Raleway">&le;</FONT> T<SUB>lag</SUB> : &emsp; &emsp;  
+
−
<span class="frac">
+
−
<span>dg</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dt</span>
+
−
</span> = 0<br>
+
−
else, if: t <FONT face="Raleway">&ge;</FONT> T<SUB>lag</SUB> : &emsp; &emsp; 
+
−
<span class="frac">
+
−
<span>dg</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dt</span>
+
−
</span> = G<SUB>0</SUB> + k
+
−
<span class="frac">
+
−
<span><FONT face="Raleway">&part;</FONT>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB>
+
−
</p>
+
−
</div>
+
−
<!-- Solving the model -->
+
−
<div class="block full">
+
−
<h3>Solving the model</h3>
+
−
</div>
+
−
<div class="block full">
+
−
<p>To solve the equation (4) we are using Euler’s method forward because the gradient concentration of NGF depends on the length of the neurite (since neurites consume NGF). <br><br>
+
−
The Equation (4): &emsp; &emsp; <br>
+
−
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
+
−
<span class="frac">
+
−
<span>dg</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dt</span>
+
−
</span> = G<SUB>0</SUB> + k
+
−
<span class="frac">
+
−
<span><FONT face="Raleway">&part;</FONT>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB>
+
−
</span><br><br>
+
−
Can be written as: &emsp; &emsp; <br><br>
+
−
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
+
−
g' = G<SUB>0</SUB> + k*f(g,t)
+
−
</span><br><br>
+
−
Which can be written as : &emsp; &emsp; <br><br>
+
−
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
+
−
<span class="frac">
+
−
<span>g<SUB>n+1</SUB> - g<SUB>n</SUB></span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom">dt</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB> = G<SUB><FONT face= "Raleway">&theta;</FONT></SUB> + k
+
−
<span class="frac">
+
−
<span><FONT face="Raleway">&part;</FONT>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB>
+
−
</span><br><br>
+
−
We can therefore have an expression of g<SUB>n+1</SUB>: &emsp; &emsp; <br><br>
+
−
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
+
−
g<SUB>n+1</SUB> = g<SUB>n</SUB> + dt*[G<SUB>0</SUB> + k
+
−
<span class="frac">
+
−
<span><FONT face="Raleway">&part;</FONT>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB>]
+
−
</span><br><br>
+
−
With initial values of g<SUB><FONT face="Raleway">&theta;</FONT></SUB>, t<SUB><FONT face="Raleway">&theta;</FONT></SUB> and
+
−
<span class="frac">
+
−
<span><FONT face="Raleway">&part;</FONT>u</span>
+
−
<span class="symbol">/</span>
+
−
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
+
−
</span>
+
−
|<SUB>(g(t),t)</SUB>
+
−
  we can find all the values of the g </p>
+
−
</div>
+
−
 
+
−
</div>
+
−
</div>
+
−
</div>
+
  
 +
                    }
 +
                    #Menu img {
 +
                        float: left;
 +
                        height: 100%;
 +
                        width: auto;
 +
                    }
 +
                    #naviconwrapper {
 +
                        height: 100%;
 +
                        margin: 0px ;    /*auto centers wrapper*/
 +
                        min-width: 900px;
 +
                        z-index: -100;
 +
                    }
 +
                    #naviconbar {
 +
                        height: 100%;
 +
                        min-width: 900px;
 +
                        background-image:  linear-gradient(to right, rgb(0, 0, 127), rgb(227, 0, 56));
 +
                        z-index: -60;
 +
                        text-align: center;
 +
                    }
 +
                    #navicons {
 +
                        width: 960px;
 +
                        z-index: -20;    /*defines color behind icons */
 +
                        display: inline-block;
 +
                        vertical-align: middle;
 +
                        height: 100%;
 +
                    }
 +
                    #navicons ul {
 +
                        padding: 0px;
 +
                        margin: 0px;
 +
                        height: 100%;
 +
                        width: 100%;
 +
                        position: relative;  /*makes chip go directly behind home from left corner*/
 +
                    }
 +
                    #navicons ul li {
 +
                        list-style: none;
 +
                        /*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 {
 +
                        width: 120px;
 +
                        display: block;
 +
                        text-decoration: none;
 +
                        /*color: #FFF;*/
 +
                        text-align: center;
 +
                        text-transform: uppercase;
 +
                        z-index: 50;
 +
                        padding-top: 50%;
 +
                    }
 +
                    #navicons ul a:hover {
 +
                    }   
 +
                /* END: Settings Menu Containers and List */
 +
                /* BEGIN : Classes for Main Menu Icons */
 +
                    #home {
 +
                        background: url(https://static.igem.org/mediawiki/2018/3/39/T--Pasteur_Paris--teamlogoigemwhite_99x60.png) no-repeat;
 +
                        height: 60px;
 +
                        background-position: center;
 +
                    }
 +
                    #home a {
 +
                        color: #ffffff;
 +
                    }
 +
                    #project {
 +
                        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 {
 +
                        color: #ffffff;
 +
                    }
 +
                    #labwork {
 +
                        background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
 +
                        height: 60px;
 +
                        background-position: center;
 +
                    }
 +
                    #labwork a {
 +
                        color: #ffffff;
 +
                    }
 +
                    #design {
 +
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
 +
                        height: 60px;
 +
                        background-position: center;
 +
                    }
 +
                    #design 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 Main Menu Icons */
 +
                /* BEGIN : Running Chip Settings */
 +
                    /* 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;
 +
                        }
 +
                        #design: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 Settings */
 +
                /* BEGIN : Settings Submenu Level 1 */
 +
                    #navtextwrapper {                /*define background box*/
 +
                        margin: 0 auto;
 +
                        padding: 0px;
 +
                        top: -2px;
 +
                        height: 24px;
 +
                        width: 960px;
 +
                        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: 125px;
 +
                    }
 +
                    #labwork-sub {
 +
                        display: none;
 +
                        left: 243px;
 +
                    }
 +
                    #design-sub {
 +
                        /*background-color: #ac34fe;*/
 +
                        display: none;
 +
                        left: 355px;
 +
                    }
 +
                    #modeling-sub{
 +
                        display: none;
 +
                        left: 505px;
 +
                    }
 +
                    #achievements-sub{
 +
                        display: none;
 +
                        left: 593px;
 +
                    }
 +
                    #hp-sub{
 +
                        display: none;
 +
                        left: 680px;
 +
                    }
 +
                    #aboutus-sub{
 +
                        display: none;
 +
                        left: 835px;
 +
                    }
 +
                    .chip_gap {
 +
                        content: none;
 +
                    }
 +
                    .navsub1 {
 +
                        background-color: #000000;
 +
                        opacity: 1;
 +
                    } 
 +
                /* END : Settings Submenu Level 1 */
 +
            /* END : General Settings of Menu Bar */
 +
            /* BEGIN Styles for Smallnav Intermediate Screens */
 +
                /* 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, rgba(0, 0, 127, .9), rgba(227, 0, 56, .9));
 +
                    font-size: 11pt;
 +
                    font-family: 'Raleway', Arial, sans-serif;
 +
                    position: fixed;
 +
                    top: 18px;
 +
                    left: 0%;
 +
                    z-index: 3000;
 +
                    box-shadow: 0px 0px 5px black;
 +
                }
 +
                #smallnav ul {
 +
                    padding: 0;
 +
                    margin: 0 auto;
 +
                    width: 770px;
 +
                    height: 40px;
 +
                    background: #345292;
 +
                }
 +
                #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 Intermediate Screens*/
 +
        /* END : Menu Bar Settings */
 +
        /* BEGIN : Content blocks settings */
 +
            #banner {
 +
                width: 100%;
 +
                height: 70vh;
 +
                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: cover;
 +
                background-position: 50% 50%;
 +
            }
 +
            #banner h1 {
 +
                text-align: center;
 +
                color: white;
 +
                font-size: 10vh;
 +
                line-height: 10vh;
 +
                font-family: 'Raleway', Arial Black, sans-serif;
 +
            }
 +
            #GeneralContent {
 +
                position:relative;
 +
                width: 100%;
 +
                background-color: #fffafc;
 +
            }
 +
            #GeneralContent p, #GeneralContent h1, #GeneralContent h2, #GeneralContent h3, #GeneralContent h4, #GeneralContent h5, #GeneralContent h6, #GeneralContent ol, #GeneralContent li {
 +
                font-family: 'Raleway', Arial Black, sans-serif;
 +
                font-size: 16px;
 +
            }
 +
            #MainContent {
 +
                max-width: 1100px;
 +
                margin: auto;
 +
                padding-top: 10%;
 +
                padding-bottom: 10%;
 +
                text-align: center;
 +
            }
 +
            footer {
 +
                position: absolute;
 +
                background-color: #000000;
 +
                height: 70px;
 +
                width: 100%;
 +
                bottom: 0%;
 +
                left: 0%;
 +
            }
 +
            .block {
 +
                display: inline-block;
 +
                vertical-align: middle;
 +
                margin: auto;
 +
                margin-top: 2%;
 +
                margin-bottom: 2%;
 +
                margin-left: 1%;
 +
                margin-right: 1%;
 +
            }
 +
            .block.title {
 +
                width: 94%;
 +
                margin-bottom: 10%;
 +
            }
 +
            .block.two-third {
 +
                width: 60%;
 +
            }
 +
            .block.two-third.center {
 +
                width: 60%;
 +
            }
 +
            .block.one-third {
 +
                width: 30%;
 +
            }
 +
            .block.full {
 +
                width: 90%;
 +
            }
 +
            .block.half {
 +
                width: 45%;
 +
            }
 +
            .block.separator {
 +
                height: 1px;
 +
                width: 90%;
 +
                margin-top: 3%;
 +
                margin-bottom: 3%;
 +
            }
 +
            .block.separator-invisible {
 +
                height: 1px;
 +
                width: 90%;
 +
            }
 +
            .block.separator-mark {
 +
                height: 2px;
 +
                width: 70%;
 +
                margin-top: 15%;
 +
                margin-bottom: 20%;
 +
                background-color: black;
 +
                opacity: 0.3;
 +
            }
 +
            .onglet{
 +
                position: relative;
 +
                border-radius: 20px;
 +
                background-color: red;
 +
                width: 43%;
 +
                box-shadow: 5px 5px 30px grey;
 +
                background-color: #fffafc;
 +
            }
 +
            .onglet:hover{
 +
                opacity: .8;
 +
                transform: scale(1.05,1.05);
 +
            }
 +
            .ongletImg {
 +
                width: 100%;
 +
                padding-top: 60%;
 +
                background-repeat: no-repeat;
 +
                background-size: cover;
 +
                background-position: center;
 +
                border-top-left-radius: 20px;
 +
                border-top-right-radius: 20px;
 +
            }
 +
            .textOnglet{
 +
                height: 50px;
 +
            }
 +
            .legend p {
 +
                text-indent: 0px;
 +
                font-size: 0.8em;
 +
            }
 +
            p {
 +
                text-align: justify;
 +
                text-indent: 30px;
 +
            }
 +
            img {
 +
                width: 100%;
 +
            }
 +
            a img:hover {
 +
                opacity: 0.4;
 +
            }
 +
        /* END : Content block settings */
 +
        /* BEGIN : Media Query Responsive Design */
 +
            /* BEGIN : Menu Style for Large screens above 960 */
 +
            @media screen and (min-width: 961px){
 +
                #smallnav{
 +
                    display: none;
 +
                }
 +
            }/* END : Menu Style for Large screens above 960 */
 +
            /* BEGIN : Menu Style for Small screens 960 and lower*/
 +
            @media screen and (max-width: 960px){
 +
                body {
 +
                    padding-top: 40px;
 +
                }
 +
                #Menu{
 +
                    display: none;
 +
                }
 +
                .block.two-third, .block.one-third, .block.half {width: 44%;}
 +
                .block.two-third.center, .block.full, .block.separator, .block.title {width: 90%;}
 +
                /* BEGIN : smallnav settings for mobile */
 +
                    #smallnav {
 +
                        height: auto;
 +
                    }
 +
                    #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;
 +
                        width: 100%;
 +
                        position: relative;
 +
                    }
 +
                    #smallnav a#pull:after {
 +
                        content:"";
 +
                        background: url('https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png') no-repeat;
 +
                        background-size: auto 90%;
 +
                        width: 30px;
 +
                        height: 30px;
 +
                        display: inline-block;
 +
                        position: absolute;
 +
                        right: 15px;
 +
                        top: 5px;
 +
                    }
 +
                /* END : smallnav settings for mobile */
 +
                /* BEGIN : classes for Small Mobile Icons */
 +
                    #home_small {
 +
                        background-color: #345292;
 +
                    }
 +
                    #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: #345292;
 +
                    }
 +
                    #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:#345292;
 +
                    }
 +
                    #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;
 +
                    }
 +
                    #design_small {
 +
                        background-color: #345292;
 +
                    }
 +
                    #design_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: #345292;
 +
                    }
 +
                    #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: #345292;
 +
                    }
 +
                    #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: #345292;
 +
                    }
 +
                    #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 Small Mobile Icons */
 +
            }/* END : Menu Style for Small screens 960 and lower */
 +
            /* BEGIN : Style for Small Mobile screen 760 and lower */
 +
            @media screen and (max-width: 760px) {
 +
                /* BEGIN : Content Settings */
 +
                    .block.two-third, .block.one-third, .block.two-third.center, .block.full, .block.separator, .block.title, .block.half {
 +
                        width: 90%;
 +
                    }
 +
                    #banner {
 +
                        background-image: none;
 +
                        background-color: black;
 +
                        height: 100vh;
 +
                    }
 +
                    #banner h1 {
 +
                    }
 +
                /* END : Content Settings */
 +
            }/* END : Style for Small Mobile screen 760 and lower */
 +
            /* BEGIN : Style for Smartphones 320 and lower*/
 +
            @media only screen and (max-width : 370px) {
 +
                #smallnav li {
 +
                    display: block;
 +
                    float: none;
 +
                    width: 100%;
 +
                }
 +
            }/* END : Style for Smartphones 320 and lower*/
 +
        /* END : Media query Responsive Design */
 +
    </style>
 +
    <script>
 +
        // FOR SMALLNAV
 +
        $(function() {
 +
            var pull        = $('#pull');
 +
                menu        = $('#smallnav ul');
 +
                menuHeight  = menu.height();
 +
            $(pull).on('click', function(e) {
 +
                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();
 +
                    $("#design-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();
 +
                    $("#design-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();
 +
                    $("#design-sub") .hide();
 +
                    $("#modeling-sub") .hide();
 +
                    $("#achievements-sub") .hide();
 +
                    $("#hp-sub") .hide();
 +
                    $("#aboutus-sub") .hide();
 +
                },
 +
                                        function(){
 +
                    $("#labwork-sub") .hide();
 +
                });
 +
               
 +
                $("#design").hover(function(){
 +
                    $("#design-sub") .show();
 +
                    $("#project-sub") .hide();
 +
                    $("#labwork-sub") .hide();
 +
                    $("#modeling-sub") .hide();
 +
                    $("#achievements-sub") .hide();
 +
                    $("#hp-sub") .hide();
 +
                    $("#aboutus-sub") .hide();
 +
                },
 +
                                        function(){
 +
                    $("#design-sub") .hide();
 +
                });
 +
               
 +
                $("#modeling").hover(function(){
 +
                    $("#modeling-sub") .show();
 +
                    $("#project-sub") .hide();
 +
                    $("#design-sub") .hide();
 +
                    $("#labwork-sub") .hide();
 +
                    $("#achievements-sub") .hide();
 +
                    $("#hp-sub") .hide();
 +
                    $("#aboutus-sub") .hide();
 +
                },
 +
                                        function(){
 +
                    $("#modeling-sub") .hide();
 +
                });
 +
               
 +
                $("#achievements").hover(function(){
 +
                    $("#achievements-sub") .show();
 +
                    $("#project-sub") .hide();
 +
                    $("#design-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();
 +
                    $("#design-sub") .hide();
 +
                    $("#labwork-sub") .hide();
 +
                    $("#modeling-sub") .hide();
 +
                    $("#achievements-sub") .hide();
 +
                    $("#aboutus-sub") .hide();
 +
                },
 +
                                        function(){
 +
                    $("#hp-sub") .hide();
 +
                });
 +
                $("#aboutus").hover(function(){
 +
                    $("#aboutus-sub") .show();
 +
                    $("#project-sub") .hide();
 +
                    $("#design-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','125px');
 +
                    $("#project-sub") .show();
 +
                },
 +
                                        function(){
 +
                    $("#runningchip") .css('left','');
 +
                    $("#project-sub") .hide();
 +
                });
 +
                $("#labwork-sub") .hover(function(){
 +
                    $("#runningchip") .css('left','245px');
 +
                    $("#labwork-sub") .show();
 +
                },
 +
                                        function(){
 +
                    $("#runningchip") .css('left','');
 +
                    $("#labwork-sub") .hide();
 +
                });
 +
                $("#design-sub") .hover(function(){
 +
                    $("#runningchip") .css('left','365px');
 +
                    $("#design-sub") .show();
 +
                },
 +
                                        function(){
 +
                    $("#runningchip") .css('left','');
 +
                    $("#design-sub") .hide();
 +
                });
 +
                $("#modeling-sub") .hover(function(){
 +
                    $("#runningchip") .css('left','485px');
 +
                    $("#modeling-sub") .show();
 +
                },
 +
                                        function(){
 +
                    $("#runningchip") .css('left','');
 +
                    $("#modeling-sub") .hide();
 +
                });
 +
                $("#achievements-sub") .hover(function(){
 +
                    $("#runningchip") .css('left','605px');
 +
                    $("#achievements-sub") .show();
 +
                },
 +
                                        function(){
 +
                    $("#runningchip") .css('left','');
 +
                    $("#achievements-sub") .hide();
 +
                });
 +
                $("#hp-sub") .hover(function(){
 +
                    $("#runningchip") .css('left','725px');
 +
                    $("#hp-sub") .show();
 +
                },
 +
                                        function(){
 +
                    $("#runningchip") .css('left','');
 +
                    $("#hp-sub") .hide();
 +
                });
 +
                $("#aboutus-sub") .hover(function(){
 +
                    $("#runningchip") .css('left','845px');
 +
                    $("#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>
 +
    <script>
 +
        $(document).ready(function() {
 +
            $('#upArrow').on('click', function() { // Au clic sur un élément
 +
                var page = $(this).attr('href'); // Page cible
 +
                var speed = 750; // Durée de l'animation (en ms)
 +
                $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
 +
                return false;
 +
            });
 +
        });
 +
    </script>
 +
    <body>
 +
        <div id="upArrow" href="#GeneralContent">
 +
            <a href=""></a>
 +
        </div>
 +
        <!-- BEGIN normal Menubar-->
 +
            <div 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"></a>
 +
                                </li>
 +
                                <li id="project" ><a href="https://2018.igem.org/Team:Pasteur_Paris/Project">Project</a>
 +
                                </li>
 +
                                <li id="labwork"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork">Labwork</a>
 +
                                </li>
 +
                                <li id="design"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Design</a>
 +
                                </li>
 +
                                <li id="modeling"><a href="https://2018.igem.org/Team:Pasteur_Paris/Modeling">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/HP">Human Practices</a>
 +
                                </li>
 +
                                <li id="aboutus"><a href="https://2018.igem.org/Team:Pasteur_Paris/AboutUs">About Us</a>
 +
                                </li>
 +
                                <div id="runningchip">
 +
                                    <div id="top-arrow"></div>
 +
                                    <div id="runningchip-back"></div>
 +
                                </div>
 +
                            </ul>
 +
                        </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>
 +
                        </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="design-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">Biobricks</a></li>
 +
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Applied_Design">Product Design</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 --> 
 +
            </div>   
 +
        <!-- END: normal Menubar -->
 +
        <!-- BEGIN: Mobile Navigation Menu -->
 +
            <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="labwork_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork">Labwork</a></li>
 +
                    <li id="design_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Design</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">Achievements</a></li>
 +
                    <li id="hp_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/HP">HP</a></li> 
 +
                    <li id="aboutus_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/AboutUs">About us</a></li>
 +
                </ul>
 +
                <a href="#" id="pull">Menu</a>
 +
            </div>
 +
        <!-- END: Mobile Navigation Menu -->
 +
    </body>
 +
    <!-- Menu Bar code inspired from Freiburg 2015 : https://2015.igem.org/Team:Freiburg -->
 
</html>
 
</html>

Revision as of 10:36, 30 August 2018

""