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

 
(16 intermediate revisions by 2 users not shown)
Line 30: Line 30:
 
left: 0%;
 
left: 0%;
 
width: 100%;
 
width: 100%;
−
z-index: 2;
+
z-index: 10;
 
}
 
}
  
Line 40: Line 40:
 
left: 0%;
 
left: 0%;
 
width: 100%;
 
width: 100%;
−
z-index: 2;
+
z-index: 10;
 
border-bottom-left-radius: 15px;
 
border-bottom-left-radius: 15px;
 
border-bottom-right-radius: 15px;
 
border-bottom-right-radius: 15px;
Line 186: Line 186:
 
}
 
}
  
−
</style>
+
                .vignette {                            /*element that contains ONE vignette*/
 +
                    height:20em;
 +
                    width:20em;
 +
                    margin:0;
 +
                    position:relative;
 +
                    display: inline-block;
 +
                }
 +
  
 +
                .vignette_for {              /*foreground part of the vignettes, gets transparent*/
 +
                    width: 15em;
 +
                    height: 16em;
 +
                    position:absolute;
 +
                    left:2.5em;
 +
                    top:2em;
  
 +
                    z-index:2;
 +
                    border: 1px solid #333;
 +
                    border-radius:20px;
 +
                    background-image: url("https://static.igem.org/mediawiki/2018/c/cd/T--Pasteur_Paris--Logo-Neuronarch_gradient.jpg");
 +
                    background-size:100%;
  
 +
                    pointer-events:none;
  
 +
                    -webkit-transition: opacity 0.7s;
 +
                    -moz-transition: opacity 0.7s;
 +
                    -o-transition: opacity 0.7s;
 +
                    transition: opacity 0.7s;
 +
                }
  
 +
                .vignette_back {          /*background part of the vignettes, picture*/
 +
                    width: 15em;
 +
                    height: 16em;
 +
                    position:absolute;
 +
                    left:2.5em;
 +
                    top:2em;
  
 +
                    cursor:pointer;
  
 +
                    z-index: 1;
 +
                    border: 1px solid #333;
 +
                    border-radius: 20px;
 +
                    background-image:url("https://static.igem.org/mediawiki/2018/0/03/T--Pasteur_Paris--PDMS_prep.jpg");
 +
                    background-size:100%;
 +
                }
  
 +
                .vignette_text {            /*small panel that slides down on the vignettes*/
 +
                    width: 17em;
 +
                    height: 3em;
 +
                    position:absolute;
 +
                    top:5em;
 +
                    left:1.5em;
  
 +
                    z-index: 3;
 +
                    border: 1px solid #333;
 +
                    background-color:white;
 +
                    box-shadow: 2px 2px 3px grey;
 +
                    opacity: 0.8;
  
 +
                    pointer-events:none;
 +
                    -webkit-transition: top 0.7s, opacity 0.7s;
 +
                    -moz-transition: top 0.7s, opacity 0.7s;
 +
                    -o-transition: top 0.7s, opacity 0.7s;
 +
                    transition: top 0.7s, opacity 0.7s;
 +
                }
  
 +
                .panel {
 +
                    position: relative;
 +
                    display: inline-block;
 +
                    width: 90%;
 +
                    padding: 0px 18px;
 +
                    background-color: white;
 +
                    max-height: 0;
 +
                    overflow: hidden;
 +
                    -webkit-transition: max-height 0.7s;
 +
                    -moz-transition: max-height 0.7s ;
 +
                    -o-transition: max-height 0.7s ;
 +
                    transition: max-height 0.7s ;
 +
                    border: 5px solid transparent;
 +
                    -moz-border-image: -moz-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 +
                    -webkit-border-image: -webkit-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 +
                    -o-border-image: -webkit-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 +
                    border-image: linear-gradient(to right, #C6234A 0%, #3C519F 100%);
 +
                    border-image-slice: 1;
 +
                }
  
 +
                .close_button {
 +
                    width:3em;
 +
                    height:3em;
 +
                    z-index:6;
 +
                    position:relative;
 +
                    float: right;
 +
                    margin-top: 1em;
 +
                    background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--Pasteur_Paris--Cross.png");
 +
                    background-size:100%;
 +
                    opacity:0.3;
 +
                    border-radius:4px;
  
 +
                    cursor:pointer;
 +
                }
 +
 +
                .close_button:hover {
 +
                    opacity:1;
 +
                }
  
−
<style>
+
                .close_button:active {
 +
                    background-color:#3C519F;
 +
                    opacity:0.2;
 +
                }
  
 +
                .protocol_box {
 +
                    border: 0.2em solid #AF3D57;
 +
                    width:15em;
 +
                }
  
 +
                #vign_0 {
 +
                    order:3;
 +
                }
 +
                #vign_1 {
 +
                    order:4;
 +
                }
 +
                #vign_2 {
 +
                    order:5;
 +
                }
 +
                #vign_3 {
 +
                    order:9;
 +
                }
  
  
−
@media screen and (min-width: 911px){
+
                #pan_0 {
 +
                    order:6;
 +
                }
 +
                #pan_1 {
 +
                    order:7;
 +
                }
 +
                #pan_2 {
 +
                    order:8;
 +
                }
  
−
#naviconwrapper {
+
                @media screen and (max-width: 850px) and (min-width: 572px) {
−
height: 100%;
+
−
    margin: 0px ;    /*auto centers wrapper*/
+
−
    min-width: 900px;
+
−
    z-index: -100;
+
−
}
+
  
−
#naviconbar {
+
                    #pan_0 {
−
height: 100%;
+
                        order: 5;
−
    min-width: 900px;
+
                    }
−
    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));
+
                    #pan_1 {
−
    z-index: -60;
+
                        order: 6;
−
    text-align: center;
+
                    }
−
}
+
−
   
+
  
−
/* ==== BEGIN: Settings Main Menu Icons ==== */
+
                    #vign_2 {
−
#navicons {
+
                        order: 7;
−
    width: 840px;
+
                    }
−
    background-color:  linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
+
                }
−
    z-index: -20;    /*defines color behind icons */
+
−
    display: inline-block;
+
−
vertical-align: middle;
+
−
height: 100%;
+
−
}
+
  
−
#navicons ul {
+
</style>
−
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: 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: 45%;
 
  
−
}
 
  
−
#navicons ul a:hover {
+
    <style>
−
}     
+
−
/* ==== END: Settings Main Menu Icons ==== */
+
−
 
+
  
−
/* ==== classes for icons ==== */
 
−
#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 {
+
        @media screen and (min-width: 911px){
−
    color: #ffffff;
+
−
}
+
  
−
#parts {
+
        #naviconwrapper {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
        height: 100%;
−
    height: 60px;
+
            margin: 0px ;    /*auto centers wrapper*/
−
    background-position: center;
+
            min-width: 900px;
−
}
+
            z-index: -100;
 +
        }
  
−
#parts a {
+
        #naviconbar {
−
    color: #ffffff;
+
        height: 100%;
−
}
+
            min-width: 900px;
 +
            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));
 +
            z-index: -60;
 +
            text-align: center;
 +
        }
 +
           
  
−
#modelling {
+
        /* ==== BEGIN: Settings Main Menu Icons ==== */
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
        #navicons {
−
    height: 60px;
+
            width: 840px;
−
    background-position: center;
+
            background-color: linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
−
}
+
            z-index: -20;    /*defines color behind icons */  
 +
            display: inline-block;
 +
        vertical-align: middle;
 +
        height: 100%;
 +
        }
  
−
#modelling a {
+
        #navicons ul {
−
    color: #ffffff;
+
        margin: 0px;
−
}
+
        height: 100%;
 +
            width: 100%;
 +
            position: relative;  /*makes chip go directly behind home from left corner*/
  
−
#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 {
+
        #navicons ul li {
−
    color: #ffffff;
+
            list-style: none;
−
}
+
            /*display: block;*/
 +
            float: left;
 +
            position: relative;
 +
            font-family: sans-serif;
 +
            font-size: 12px;
 +
            background-color: rgba(161, 47, 92, 0.0);
 +
            /*border: 1px solid #5781BD;*/
 +
            z-index: 100;
 +
            height: 90%;
 +
        }
  
−
#hp {
+
        #navicons ul li a {
−
    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 {
+
            width: 120px;
−
    color: #ffffff;
+
            display: block;
−
}
+
            text-decoration: none;
 +
            /*color: #FFF;*/
 +
            text-align: center;
 +
            text-transform: uppercase;
 +
            z-index: 50;
 +
            padding-top: 45%;
  
−
#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 {
+
        #navicons ul a:hover {  
−
    color: #ffffff;
+
        }    
−
}
+
        /* ==== END: Settings Main Menu Icons ==== */
−
/* ==== End classes for icons ==== */
+
         
  
−
/* ==== Begin running chip ==== */
+
        /* ==== classes for icons ==== */
−
/* == Begin Chip Design == */
+
        #project {
−
#runningchip {
+
            background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
−
    position: absolute;
+
            height: 60px;
−
    width: 90px;
+
            background-position: center;
−
    height: 120%;
+
        }
−
    left: 2.1%;
+
−
    -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 == */
+
        #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;
 +
        }
  
−
/* == Begin Chip Movement == */
+
        #labwork a {
−
#project:hover ~ #runningchip {
+
            color: #ffffff;
−
    left: 15px;
+
        }
−
}
+
  
−
#labwork:hover ~ #runningchip {
+
        #parts {
−
    left: 135px;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#parts:hover ~ #runningchip {
+
        #parts a {
−
    left: 255px;
+
            color: #ffffff;
−
}
+
        }
  
−
#modelling:hover ~ #runningchip {
+
        #modelling {
−
    left: 375px;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#achievements:hover ~ #runningchip {
+
        #modelling a {
−
    left: 495px;
+
            color: #ffffff;
−
}
+
        }
  
−
#hp:hover ~ #runningchip {
+
        #achievements {
−
    left: 615px;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#aboutus:hover ~ #runningchip {
+
        #achievements a {
−
    left: 735px;
+
            color: #ffffff;
−
}
+
        }
−
/* == End Chip Movment == */
+
−
/* ==== End running chip ==== */
+
  
 +
        #hp {
 +
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
 +
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
/* ==== Begin Settings Submenu Level 1 ==== */
+
        #hp a {
−
#navtextwrapper {               /*define background box*/
+
            color: #ffffff;
−
    margin: 0 auto;
+
        }
−
    padding: 0px;
+
−
    top: -2px;
+
−
    height: 24px;
+
−
    width: 840px;
+
−
    position: relative;
+
−
    /*border: 2px solid #000;*/
+
−
}
+
  
−
#navtext {
+
        #aboutus {
−
    text-align: center;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
−
    font-family: Roboto,sans-serif;
+
            height: 60px;
−
    font-size: 16px;
+
            background-position: center;
−
    z-index: 600;
+
        }
−
}
+
  
−
#navtext ul {
+
        #aboutus a {
−
    margin: 0px auto;
+
            color: #ffffff;
−
    top: -8px;
+
        }
−
    padding: 0px;
+
        /* ==== End classes for icons ==== */
−
    position: absolute;
+
−
    z-index: 600;
+
−
}
+
  
−
#navtext li {
+
        /* ==== Begin running chip ==== */
−
    margin: 0px auto;        /*centers text*/
+
        /* == Begin Chip Design == */
−
    list-style: none;
+
        #runningchip {
−
    display: block;       /*makes items go horizontal and centers them*/
+
            position: absolute;
−
    /*float: left;*/                /*makes items go horizontal*/
+
            width: 90px;
−
    position: relative;
+
            height: 120%;
−
    z-index: 600;
+
            left: 2.1%;
−
    height: 10px;
+
            -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;
 +
        }
  
−
#navtext ul li a {
+
        /* == End Chip Design == */
−
    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 {
+
        /* == Begin Chip Movement == */
−
    display: none;
+
        #project:hover ~ #runningchip {
−
    left: -120px;
+
            left: 15px;
−
}
+
        }
  
−
#labwork-sub {
+
        #labwork:hover ~ #runningchip {
−
    display: none;
+
            left: 135px;
−
    left: 0px;
+
        }
−
}
+
  
−
#parts-sub {
+
        #parts:hover ~ #runningchip {
−
    /*background-color: #ac34fe;*/
+
            left: 255px;
−
    display: none;
+
        }
−
    left: 120px;
+
−
}
+
  
−
#modelling-sub{
+
        #modelling:hover ~ #runningchip {
−
    display: none;
+
            left: 375px;
−
    left: 240px;
+
        }
−
}
+
  
−
#achievements-sub{
+
        #achievements:hover ~ #runningchip {
−
    display: none;
+
            left: 495px;
−
    left: 360px;
+
        }
−
}
+
  
−
#hp-sub{
+
        #hp:hover ~ #runningchip {
−
    display: none;
+
            left: 615px;
−
    left: 480px;
+
        }
−
}
+
−
#aboutus-sub{
+
−
    display: none;
+
−
    left: 600px;
+
−
}
+
  
−
.chip_gap {
+
        #aboutus:hover ~ #runningchip {
−
    content: none;
+
            left: 735px;
−
}
+
        }
 +
        /* == End Chip Movment == */
 +
        /* ==== End running chip ==== */
  
−
.navsub1 {
 
−
    background-color: #000000;
 
−
opacity: 1;
 
−
} 
 
−
/* ==== End Settings Submenu Level 1 ==== */
 
  
−
#smallnav{
+
        /* ==== Begin Settings Submenu Level 1 ==== */
−
    display: none;
+
        #navtextwrapper {               /*define background box*/
−
}
+
            margin: 0 auto;
 +
            padding: 0px;
 +
            top: -2px;
 +
            height: 24px;
 +
            width: 840px;
 +
            position: relative;
 +
            /*border: 2px solid #000;*/
 +
        }
  
−
} /* end media query*/
+
        #navtext {
 +
            text-align: center;
 +
            font-family: Roboto,sans-serif;
 +
            font-size: 16px;
 +
            z-index: 600;
 +
        }
  
−
@media screen and (max-width: 910px){
+
        #navtext ul {
−
    #header{
+
            margin: 0px auto;
−
        top: -9000px;
+
            top: -8px;
−
        opacity: 0;
+
            padding: 0px;
−
    }
+
            position: absolute;
 +
            z-index: 600;
 +
        }
  
−
/* avoid space to content box */
+
        #navtext li {
−
    .content_background_wrapper{
+
            margin: 0px auto;        /*centers text*/
−
        padding-top: 20px;
+
            list-style: none;
−
    }
+
            display: block;        /*makes items go horizontal and centers them*/
 +
            /*float: left;*/                /*makes items go horizontal*/
 +
            position: relative;
 +
            z-index: 600;
 +
            height: 10px;
 +
        }  
  
−
}
+
        #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;
 +
        }
  
−
/* Styles for smallnav */
+
        #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*/
 +
        }
  
−
/* Clearfix */
+
        #project-sub {
−
.clearfix:before,
+
            display: none;
−
.clearfix:after {
+
            left: -120px;
−
    content: " ";
+
        }
−
    display: table;
+
−
}
+
−
.clearfix:after {
+
−
    clear: both;
+
−
}
+
−
.clearfix {
+
−
    *zoom: 1;
+
−
}
+
  
 +
        #labwork-sub {
 +
            display: none;
 +
            left: 0px;
 +
        }
  
−
/* Basic Styles */
+
        #parts-sub {
 +
            /*background-color: #ac34fe;*/
 +
            display: none;
 +
            left: 120px;
 +
        }
  
−
#smallnav {
+
        #modelling-sub{
−
    height: 40px;
+
            display: none;
−
    width: 100%;
+
            left: 240px;
−
    background: #0051A2;
+
        }
−
    font-size: 11pt;
+
−
    font-family: 'PT Sans', Arial, sans-serif;
+
−
    font-weight: bold;
+
−
    position: fixed;
+
−
    border-bottom: 2px solid #CFCFCF;
+
−
    z-index: 3000;
+
−
    opacity: 0.9;
+
−
}
+
−
#smallnav ul {
+
−
    padding: 0;
+
−
    margin: 0 auto;
+
−
    width: 720px;
+
−
    height: 40px;
+
−
}
+
−
#smallnav li {
+
−
    display: inline;
+
−
    float: left;
+
−
}
+
−
#smallnav a {
+
−
    color: #fff;
+
−
    display: inline-block;
+
−
    width: 120px;
+
−
    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: #1D629F;
+
−
}
+
−
#smallnav a#pull {
+
−
    display: none;
+
−
}
+
  
−
/*Styles for screen 600px and lower*/
+
         #achievements-sub{
−
@media screen and (max-width: 720px) {
+
            display: none;
−
    #smallnav {
+
            left: 360px;
−
         height: auto;
+
         }
−
        background: #3B7EBF;
+
−
    }
+
−
    #smallnav ul {
+
−
        width: 100%;
+
−
        display: block;
+
−
        height: auto;
+
−
    }
+
−
    #smallnav li {
+
−
        width: 50%;
+
−
        float: left;
+
−
        position: relative;
+
−
         margin-bottom: 0;
+
−
    }
+
  
−
    #smallnav a {
+
        #hp-sub{
−
        text-align: left;
+
            display: none;
−
        width: 100%;
+
            left: 480px;
−
         text-indent: 25px;
+
         }
−
    }
+
        #aboutus-sub{
 +
            display: none;
 +
            left: 600px;
 +
        }
  
−
    #smallnav {
+
         .chip_gap {
−
         border-bottom: 0;
+
            content: none;
−
    }
+
         }
−
    #smallnav ul {
+
−
        display: none;
+
−
         height: auto;
+
−
    }
+
−
    #smallnav a#pull {
+
−
        display: block;
+
−
        background-color: #0051A2;
+
−
        width: 100%;
+
−
        position: relative;
+
−
    }
+
−
    #smallnav a#pull:after {
+
−
        content:"";
+
−
        background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
+
−
        background-size: auto 90%;
+
−
        width: 30px;
+
−
        height: 30px;
+
−
        display: inline-block;
+
−
        position: absolute;
+
−
        right: 15px;
+
−
        top: 5px;
+
−
    }
+
  
 +
        .navsub1 {
 +
            background-color: #000000;
 +
        opacity: 1;
 +
        } 
 +
        /* ==== End Settings Submenu Level 1 ==== */
  
−
/* ==== classes for icons ==== */
+
        #smallnav{
−
#home_small {
+
            display: none;
−
    background-color: #3673AF;
+
        }
  
−
}
+
        } /* end media query*/
  
−
#home_small a {
+
        @media screen and (max-width: 910px){
−
    background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
+
            #header{
−
    background-position: left;
+
                top: -9000px;
−
    background-size: auto 100%;
+
                opacity: 0;
−
    background-repeat: no-repeat;
+
            }
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#project_small {
+
−
    background-color: #3673AF;
+
−
 
+
−
}
+
−
 
+
−
#project_small a {
+
−
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#team_small {
+
−
    background-color: #3673AF;
+
−
 
+
−
}
+
−
 
+
−
#team_small a {
+
−
    background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#results_small {
+
−
    background-color: #3673AF;
+
−
 
+
−
}
+
−
 
+
−
#results_small a {
+
−
    background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#policy_small {
+
−
    background-color: #3673AF;
+
−
}
+
−
 
+
−
#policy_small a {
+
−
    color: #FFF;
+
−
    padding-left: 40px;
+
−
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
}
+
−
 
+
−
#notebook_small {
+
−
    background-color: #3673AF;
+
−
}
+
−
 
+
−
#notebook_small a {
+
−
    background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.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>
+
  
 +
        /* avoid space to content box */
 +
            .content_background_wrapper{
 +
                padding-top: 20px;
 +
            }
  
 +
        }
  
 +
        /* 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: #0051A2;
 +
            font-size: 11pt;
 +
            font-family: 'PT Sans', Arial, sans-serif;
 +
            font-weight: bold;
 +
            position: fixed;
 +
            border-bottom: 2px solid #CFCFCF;
 +
            z-index: 3000;
 +
            opacity: 0.9;
 +
        }
 +
        #smallnav ul {
 +
            padding: 0;
 +
            margin: 0 auto;
 +
            width: 720px;
 +
            height: 40px;
 +
        }
 +
        #smallnav li {
 +
            display: inline;
 +
            float: left;
 +
        }
 +
        #smallnav a {
 +
            color: #fff;
 +
            display: inline-block;
 +
            width: 120px;
 +
            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: #1D629F;
 +
        }
 +
        #smallnav a#pull {
 +
            display: none;
 +
        }
  
 +
        /*Styles for screen 600px and lower*/
 +
        @media screen and (max-width: 720px) {
 +
            #smallnav {
 +
                height: auto;
 +
                background: #3B7EBF;
 +
            }
 +
            #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: #0051A2;
 +
                width: 100%;
 +
                position: relative;
 +
            }
 +
            #smallnav a#pull:after {
 +
                content:"";
 +
                background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
 +
                background-size: auto 90%;
 +
                width: 30px;
 +
                height: 30px;
 +
                display: inline-block;
 +
                position: absolute;
 +
                right: 15px;
 +
                top: 5px;
 +
            }
  
  
 +
        /* ==== classes for icons ==== */
 +
        #home_small {
 +
            background-color: #3673AF;
  
 +
        }
  
 +
        #home_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 100%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
 +
        #project_small {
 +
            background-color: #3673AF;
  
 +
        }
  
 +
        #project_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
 +
        #team_small {
 +
            background-color: #3673AF;
  
 +
        }
  
 +
        #team_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
 +
        #results_small {
 +
            background-color: #3673AF;
  
 +
        }
  
 +
        #results_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
 +
        #policy_small {
 +
            background-color: #3673AF;
 +
        }
  
 +
        #policy_small a {
 +
            color: #FFF;
 +
            padding-left: 40px;
 +
            background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
        }
  
 +
        #notebook_small {
 +
            background-color: #3673AF;
 +
        }
  
 +
        #notebook_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.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>
  
  
Line 765: Line 879:
  
 
<header id="MenuIgem">
 
<header id="MenuIgem">
−
 
 
</header>
 
</header>
  
Line 872: Line 985:
  
 
<!-- END: Mobile Navigation -->
 
<!-- END: Mobile Navigation -->
−
</header>
+
</header>
  
−
<header id="Menu-mobile-bar">
+
<header id="Menu-mobile-bar">
 
<a href="https://2018.igem.org/Team:Pasteur_Paris"><img src="http://a398.idata.over-blog.com/3/29/19/90/rose-bleue.gif"></a>
 
<a href="https://2018.igem.org/Team:Pasteur_Paris"><img src="http://a398.idata.over-blog.com/3/29/19/90/rose-bleue.gif"></a>
−
</header>
+
</header>
  
−
<div id="banner">
+
<div id="banner">
−
<h1>ALL ABOUT FLOWERS</h1>
+
<h1>PROTOCOLS & EXPERIMENTS</h1>
−
</div>
+
</div>
  
−
<div id="GeneralContent">
+
<div id="GeneralContent">
−
+
<div id="MainContent">
−
<div id="MainContent">
+
  
−
<div class="block title"><h1>FLOWERS, MY LIFE</h1>
+
            <div class="block title">
−
</div>
+
                <h1> PROTOCOLS </h1>
 +
            </div>
 +
 +
            <div class="block separator-mark">
 +
            </div>
 +
 +
            <div class="block full" style="display:flex;flex-flow: row wrap;justify-content:center;">
  
−
<div class="block two-third">
+
                <h2 style="order:1">Microfluidics</h2>
−
<h3>I love flowers</h3>
+
−
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo. Morbi in erat sed nisi mattis molestie vitae vel leo. Mauris pellentesque aliquam nunc vitae finibus.</p>
+
−
</div>
+
  
−
<div class="block one-third">
+
                <p style="text-indent:0px;order:2;">PDMS (Polydimethylsiloxane) is a widely used polymer in microfluidics, for its biocompatibility and transparence, among other qualities. Here we show how to prepare PDMS for microfluidic chips, as well as how to demold them, bond them to other surfaces and treat them for neuron growth. Also, we explain how our molds and chips were fabricated.</p>                          
−
<img src="https://media.centrakor.com/catalog/product/cache/image/800x800/0ee134d6d987b4a4dd752d2524c88dff/b/o/bouquet-deco-fleurs-rose-pale-h-35cm-294540_294540_DEB_WEB.jpg">
+
−
<div class="legend">
+
−
<p><b>Figure 1 : </b>Beautiful roses</p>
+
−
</div>
+
−
</div>
+
  
−
<div class="block separator">
 
−
</div>
 
  
 +
                <div class="vignette" id="vign_0">
 +
                    <div class="vignette_for">
 +
                    </div>
  
 +
                    <div class="vignette_back" id="back_0">
 +
                    </div>
  
−
<div class="block one-third">
+
                    <div class="vignette_text">
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo. Morbi in erat sed nisi mattis molestie vitae vel leo. Mauris pellentesque aliquam nunc vitae finibus. </p>
+
                        <p style="margin:auto; text-align:center;font-weight:bold;" >PDMS Chips Fabrication</p>
−
</div>
+
                    </div>
 +
                </div>
  
−
<div class="block two-third">
+
                <div class="vignette" id="vign_1">
−
<a href=""><img src="http://www.chaussurezoo.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/h/m/hmax313-1.jpg"></a>
+
                    <div class="vignette_for">
−
<div class="legend">
+
                    </div>
−
<p><b>Figure 2 : </b>Flowers and shoes</p>
+
       
−
</div>
+
                    <div class="vignette_back" id="back_1">
−
</div>
+
                    </div>
 +
       
 +
                    <div class="vignette_text">
 +
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Demolding</p>
 +
                    </div>
 +
                </div>
  
−
<div class=" block separator-mark">
+
                <div class="vignette" id="vign_2">
−
</div>
+
                    <div class="vignette_for">
 +
                    </div>
 +
       
 +
                    <div class="vignette_back" id="back_2">
 +
                    </div>
 +
       
 +
                    <div class="vignette_text">
 +
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Bonding</p>
 +
                    </div>
 +
                </div>
  
  
  
 +
                <div class="panel" id="pan_0">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li> Sylgard 184 Elastomer Kit  (Sigma-aldrich, Sylgard 184, 761036-5EA)  </li>
 +
                        <li> Vacuum pump unit (Vacuubrand PC 3 RZ 2.5) </li>
 +
                        <li> Stove (Memmert UM 400) </li>
 +
                    </ul>
 +
                    <br>
 +
                    <h3>Protocol</h3>
 +
                    <p>According to <a href="https://static.igem.org/mediawiki/igem.org/2/29/T--Technion_Israel-
 +
                    HardwarespecsPDMS.pdf">manufacturer's instruction</a>. <br>
 +
                    <ul>
 +
                        <li> Mix monomer and curing agent (10:1 proportion) for 30 seconds  </li>
 +
                        <li> Use a vacuum pump unit and a  vacuum bell jar to extract air bubbles until the mixture is clear </li>
 +
                        <li> Pour mixture onto mold </li>
 +
                        <li> Put mixture+mold in stove at 70 degrees Celsius for 3 hours </li>
 +
                    </ul>
 +
                    <br>
 +
                    <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 +
                    <br>
 +
                </div>
  
 +
                <div class="panel" id="pan_1">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li> Razor blade (OEMTOOLS 25181 Razor Blades, 100 Pack)  </li>
 +
                        <li> Biopsy puncher (Kai Biopsy Punch 4mm )  </li>
 +
                    </ul>
 +
                    <br>
 +
                    <h3>Protocol</h3>
 +
                    <br>
 +
                    <ul>
 +
                        <li> Cut the borders of the chip with the razor blade  </li>
 +
                        <li> Extract the chip from its mold </li>
 +
                        <li> Drill input and output holes with the biopsy puncher </li>
 +
                    <br>
 +
                    <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 +
                    <br>
 +
                </div>
  
 +
                <div class="panel" id="pan_2">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li>  Plasma cleaner (Diener Pico PCCE)  </li>
 +
                        <li>  Distilled water (Fisherbrand, CAS number 7732-18-5)  </li>
 +
                        <li>  Isopropanol (Fisherbrand, CAS number 67-63-0)  </li>
 +
                        <li>  Office duct tape </li>
 +
                        <li>  Vertical laminar airflow cabinets (Euroclone aura vertical S.D.4) </li>
 +
                    </ul>
 +
                    <br>
 +
                    <h3>Protocol</h3>
 +
                    <br>
 +
                    <ul>
 +
                        <li> Take chip and the surface it needs to be bonded to in the airflow cabinet  </li>
 +
                        <li> Clean chip with duct tape and isopropanol </li>
 +
                        <li> Put the chip and the surface into the plasma cleaner. </li>
 +
                        <li> Expose chip and surface 30 seconds to plasma. </li>
 +
                        <li> Take the chip and the surface back in the airflow cabinet </li>
 +
                        <li> Press the microfluidic chip against the surface </li>
 +
                        <li> Insert distilled water into chip circuitry </li>
  
 +
                    <br>
 +
                    <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 +
                    <br>
 +
                </div>
  
−
<div class="block title"><h1>THERE ARE NOT ONLY FLOWERS IN LIFE </h1></div>
 
  
−
<div class="block two-third center">
+
                <div class="vignette" id="vign_3">
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo. Morbi in erat sed nisi mattis molestie vitae vel leo. Mauris pellentesque aliquam nunc vitae finibus.</p>
+
                    <div class="vignette_for">
−
<p>Nulla ornare purus ac pharetra semper. Maecenas lacinia urna ac libero scelerisque pellentesque non non ipsum. Curabitur rhoncus quis nibh vestibulum gravida. Nulla consequat viverra tempus. Mauris faucibus, urna nec scelerisque malesuada, mi arcu mollis ipsum, quis euismod felis mauris et ligula. Suspendisse egestas aliquam arcu porta aliquet. Proin leo ligula, ultrices ac lacus ac, finibus lacinia turpis. Nunc at tortor sit amet risus molestie placerat. In accumsan vitae massa a molestie. Vestibulum fermentum hendrerit nulla, et maximus eros condimentum eget. Fusce volutpat lacinia velit, quis laoreet diam facilisis ut. Proin magna est, ornare in tincidunt in, feugiat et dolor. Vestibulum finibus sodales odio, nec posuere massa iaculis sit amet. Fusce non tempor diam. </p>
+
                    </div>
−
</div>
+
       
−
+
                    <div class="vignette_back" id="back_3">
−
<div class="block full">
+
                    </div>
−
<img src="https://s1.qwant.com/thumbr/0x0/a/9/917c4d526cd2190f3b7282a82fbab21f4cc5dd9b862f810a29e3fb990e8478/Back-From-The-Edge-Best-Of-2016.jpg?u=http%3A%2F%2Fwww.naturephotographie.com%2Fwp-content%2Fuploads%2F2016%2F12%2FBack-From-The-Edge-Best-Of-2016.jpg&q=0&b=1&p=0&a=1">
+
       
−
<div class="legend">
+
                    <div class="vignette_text">
−
<p><b>Figure 3 : </b>This is not a flower</p>
+
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Treatment for Nerve Growth</p>
−
</div>
+
                    </div>
−
</div>
+
                </div>
  
−
<div class="block separator"></div>
 
  
 +
            </div>                         
 +
 
 +
        </div>
 +
 +
</div>
  
 +
<footer>
 +
</footer>
  
−
<div class="block two-third">
+
</body>
−
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo. Morbi in erat sed nisi mattis molestie vitae vel leo. Mauris pellentesque aliquam nunc vitae finibus.</p>
+
−
</div>
+
  
−
<div class="block one-third">
+
<script>
−
<img src="https://media.centrakor.com/catalog/product/cache/image/800x800/0ee134d6d987b4a4dd752d2524c88dff/b/o/bouquet-deco-fleurs-rose-pale-h-35cm-294540_294540_DEB_WEB.jpg">
+
         
−
<div class="legend">
+
        var acc = document.getElementsByClassName("vignette_back");
−
<p><b>Figure 4 : </b>Okay, this is a flower</p>
+
        var i;
−
</div>
+
−
</div>
+
  
−
<div class="block separator-mark"></div>
+
        for (i = 0; i < acc.length; i++) {
 +
            acc[i].addEventListener("click", function() {
  
 +
                /*get clicked element index*/
 +
                var index = String(this.id).substring(5,6);
  
 +
                /*locate elements to move*/
 +
                var panel = document.getElementById("pan_"+index);
 +
                var vignFor = this.previousElementSibling;
 +
                var vignText = this.nextElementSibling;
 +
                /*move it*/
 +
                if (panel.style.maxHeight){
  
 +
                    /*close it*/
 +
                    panel.style.maxHeight = null;
 +
                    vignFor.style.opacity = 1;
 +
                    vignText.style.opacity = 0.8;
 +
                    vignText.style.top = "5em";
 +
                }
 +
                else {
 +
                   
 +
                    /*find active element*/
 +
                    var j;
 +
                    var index_act = -1 ;
 +
                    var el_foc;
 +
                    for (j = 0; j < acc.length; j++) {
 +
                        el_foc=document.getElementById("pan_"+j);
 +
                        if (el_foc.style.maxHeight != 0) {
 +
                            index_act=j;
 +
                            break;
 +
                        }
 +
                    }
 +
                    if (index_act != -1) {
 +
                        /*close active element*/
 +
                        var panel_act = document.getElementById("pan_"+index_act);
 +
                        var back_act = document.getElementById("back_"+index_act);
 +
                        var for_act=back_act.previousElementSibling;
 +
                        var text_act=back_act.nextElementSibling;
 +
                        panel_act.style.maxHeight = null;
 +
                        for_act.style.opacity = 1;
 +
                        text_act.style.opacity = 0.8;
 +
                        text_act.style.top = "5em";
 +
                    }
 +
 
  
 +
                    /*open clicked element*/
 +
                    panel.style.maxHeight = panel.scrollHeight + "px";
 +
                    vignFor.style.opacity = 0;
 +
                    vignText.style.opacity = 1;
 +
                    vignText.style.top = "15em";
 +
                }
 +
            });
 +
        }
  
 +
        var acc = document.getElementsByClassName("close_button");
  
−
 
+
        for (i = 0; i < acc.length; i++) {
−
 
+
            acc[i].addEventListener("click", function() {
−
<div class="block title"><h1>REASONABLE ARGUMENTS FOR LOVING FLOWERS</h1></div>
+
                var panel = this.parentElement;
−
 
+
                var index = String(panel.id).substring(4,5);
−
 
+
                var vignBack = document.getElementById("back_"+index);
−
<div class="block one-third">
+
                var vignFor = vignBack.previousElementSibling;
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo. Morbi in erat sed nisi mattis molestie vitae vel leo. Mauris pellentesque aliquam nunc vitae finibus. </p>
+
                var vignText = vignBack.nextElementSibling;
−
</div>
+
                panel.style.maxHeight = null;
−
 
+
                vignFor.style.opacity = 1;
−
<div class="block two-third">
+
                vignText.style.opacity = 0.8;
−
<img src="http://www.chaussurezoo.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/h/m/hmax313-1.jpg">
+
                vignText.style.top = "5em";
−
<div class="legend">
+
            });
−
<p><b>Figure 5 : </b>I already showed these, but I really like these shoes</p>
+
        }
−
</div>
+
</script>
−
</div>
+
−
 
+
−
<div class="block separator"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="block one-third">
+
−
<img src="https://www150.statcan.gc.ca/n1/daily-quotidien/140221/cg140221a005-fra.gif">
+
−
<div class="legend">
+
−
<p><b>Figure 6 : </b>Flowers sells and benefits, period 2000-2018</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="block one-third">
+
−
<img src="https://www150.statcan.gc.ca/n1/daily-quotidien/140221/cg140221a005-fra.gif">
+
−
<div class="legend">
+
−
<p><b>Figure 7 : </b>Shoes sells and benefits, period 2000-2018</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="block one-third">
+
−
<img src="https://www150.statcan.gc.ca/n1/daily-quotidien/140221/cg140221a005-fra.gif">
+
−
<div class="legend">
+
−
<p><b>Figure 8 : </b>This one is just a random chart</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="block separator"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="block one-third">
+
−
<h4>I</h4>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo.
+
−
</p>
+
−
</div>
+
−
 
+
−
<div class="block one-third">
+
−
<h4>Love</h4>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo.
+
−
</p>
+
−
</div>
+
−
 
+
−
<div class="block one-third">
+
−
<h4>Flowers</h4>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta. Sed eleifend lacinia bibendum. Vestibulum tempor quam eget facilisis vehicula. Quisque in dolor justo.
+
−
</p>
+
−
</div>
+
−
 
+
−
<div class="block separator-mark"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="block two-third">
+
−
<img src="http://www.chaussurezoo.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/h/m/hmax313-1.jpg">
+
−
<div class="legend">
+
−
<p><b>Figure 9 : </b>I'm lovin' it</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="block separator-mark"></div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="block title"><h1>Références</h1></div>
+
−
 
+
−
<div class="block full">
+
−
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta.</p>
+
−
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta.</p>
+
−
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta.</p>
+
−
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta.</p>
+
−
<p>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis sollicitudin semper. Sed tempor vel leo at porta.</p>
+
−
</div>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
+
−
</div>
+
−
 
+
−
<footer>
+
−
</footer>
+
−
 
+
−
</body>
+
−
 
+
  
  

Latest revision as of 12:37, 16 August 2018

Training

PROTOCOLS

Microfluidics

PDMS (Polydimethylsiloxane) is a widely used polymer in microfluidics, for its biocompatibility and transparence, among other qualities. Here we show how to prepare PDMS for microfluidic chips, as well as how to demold them, bond them to other surfaces and treat them for neuron growth. Also, we explain how our molds and chips were fabricated.

PDMS Chips Fabrication

PDMS Chip Demolding

PDMS Chip Bonding


Materials

  • Sylgard 184 Elastomer Kit (Sigma-aldrich, Sylgard 184, 761036-5EA)
  • Vacuum pump unit (Vacuubrand PC 3 RZ 2.5)
  • Stove (Memmert UM 400)

Protocol

According to manufacturer's instruction.

  • Mix monomer and curing agent (10:1 proportion) for 30 seconds
  • Use a vacuum pump unit and a vacuum bell jar to extract air bubbles until the mixture is clear
  • Pour mixture onto mold
  • Put mixture+mold in stove at 70 degrees Celsius for 3 hours

Get full protocol here



Materials

  • Razor blade (OEMTOOLS 25181 Razor Blades, 100 Pack)
  • Biopsy puncher (Kai Biopsy Punch 4mm )

Protocol


  • Cut the borders of the chip with the razor blade
  • Extract the chip from its mold
  • Drill input and output holes with the biopsy puncher

    • Get full protocol here



Materials

  • Plasma cleaner (Diener Pico PCCE)
  • Distilled water (Fisherbrand, CAS number 7732-18-5)
  • Isopropanol (Fisherbrand, CAS number 67-63-0)
  • Office duct tape
  • Vertical laminar airflow cabinets (Euroclone aura vertical S.D.4)

Protocol


  • Take chip and the surface it needs to be bonded to in the airflow cabinet
  • Clean chip with duct tape and isopropanol
  • Put the chip and the surface into the plasma cleaner.
  • Expose chip and surface 30 seconds to plasma.
  • Take the chip and the surface back in the airflow cabinet
  • Press the microfluidic chip against the surface
  • Insert distilled water into chip circuitry

    • Get full protocol here


PDMS Chip Treatment for Nerve Growth