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

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 185: Line 185:
 
#banner h1 {padding-top: 100px;}
 
#banner h1 {padding-top: 100px;}
 
}
 
}
−
 
−
 
  
 
                 .vignette {                            /*element that contains ONE vignette*/
 
                 .vignette {                            /*element that contains ONE vignette*/
Line 192: Line 190:
 
                     width:25em;
 
                     width:25em;
 
                     margin:2em;
 
                     margin:2em;
−
                     position:absolute;
+
                     position:relative;
 
                 }
 
                 }
−
+
 
 
                 .vignette_for {              /*foreground part of the vignettes, gets transparent*/
 
                 .vignette_for {              /*foreground part of the vignettes, gets transparent*/
 
                     width: 20em;
 
                     width: 20em;
Line 202: Line 200:
 
                     top:2em;
 
                     top:2em;
  
−
                     z-index: 2;
+
                     z-index:2;
 
                     border: 1px solid #333;
 
                     border: 1px solid #333;
 
                     border-radius:20px;
 
                     border-radius:20px;
Line 216: Line 214:
 
                 }
 
                 }
  
−
 
−
       
 
 
                 .vignette_back {          /*background part of the vignettes, picture*/
 
                 .vignette_back {          /*background part of the vignettes, picture*/
 
                     width: 20em;
 
                     width: 20em;
Line 234: Line 230:
 
                 }  
 
                 }  
  
 +
                .vignette_text {            /*small panel that slides down on the vignettes*/
 +
                    width: 22em;
 +
                    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;
 +
                }
  
−
              .vignette_text {            /*small panel that slides down on the vignettes*/
+
                .panel {
−
                  width: 22em;
+
                    padding: 0px 18px;
−
                  height: 3em;
+
                    background-color: white;
−
                  position:absolute;
+
                    max-height: 0;
−
                  top:5em;
+
                    overflow: hidden;
−
                  left:1.5em;
+
                    -webkit-transition: max-height 0.7s;
 +
                    -moz-transition: max-height 0.7s ;
 +
                    -o-transition: max-height 0.7s ;
 +
                    transition: max-height 0.7s ;
 +
                    border: 10px 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;
 +
                }
  
−
                  z-index: 3;
+
                .close_button {
−
                  border: 1px solid #333;
+
                    width:3em;
−
                  background-color:white;
+
                    height:3em;
−
                  box-shadow: 2px 2px 3px grey;
+
                    position:absolute;
−
                  opacity: 0.8;
+
                    right: 1em;
 +
                    top:1em;
 +
                    z-index:6;
  
−
                  pointer-events:none;
+
                    background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--Pasteur_Paris--Cross.png");
−
                  -webkit-transition: top 0.7s, opacity 0.7s;
+
                    background-size:100%;
−
                  -moz-transition: top 0.7s, opacity 0.7s;
+
                    opacity:0.3;
−
                  -o-transition: top 0.7s, opacity 0.7s;
+
                    border-radius:4px;
−
                  transition: top 0.7s, opacity 0.7s;
+
 
−
              }
+
                    cursor:pointer;
 +
                }
 +
 +
                .close_button:hover {
 +
                    opacity:1;
 +
                }
 +
 
 +
                .close_button:active {
 +
                    background-color:#3C519F;
 +
                    opacity:0.6;
 +
                }
  
 
</style>
 
</style>
Line 932: Line 967:
 
             </div>
 
             </div>
 
   
 
   
−
             <div class="block full" style="background-color:yellow;">
+
             <div class="block full">
  
 
                 <h2 style="text-align: left;">Microfluidics</h2>
 
                 <h2 style="text-align: left;">Microfluidics</h2>
Line 940: Line 975:
  
  
−
                 <div class="vignette">
+
                 <div class="vignette" id=""vign_0">
−
 
+
 
                     <div class="vignette_for">
 
                     <div class="vignette_for">
 
                     </div>
 
                     </div>
−
       
+
 
 
                     <div class="vignette_back" id="back_0">
 
                     <div class="vignette_back" id="back_0">
 
                     </div>
 
                     </div>
−
       
+
 
 
                     <div class="vignette_text">
 
                     <div class="vignette_text">
−
                    <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chips</p>
+
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chips</p>
 
                     </div>
 
                     </div>
 +
                </div>
  
−
                </div>
+
                <div class="panel" id="pan_0">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li> Sylgard 184 Elastomer Kit  </li>
 +
                        <li> Razor blade  </li>
 +
                        <li> 4mm Biopsy Puncher  </li>
 +
                        <li> Isopropanol </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, according to  </li>
 +
                        <li> Use a vacuum machine to extract air bubbles until the mixture is clear </li>
 +
                        <li> Pour mixture onto mold </li>
 +
                        <li> Put mixture+mold in oven at 70 degrees Celsius for 3 hours </li>
 +
                        <li> Use a razor blade or scalpel to cut the borders of the chip and extract the chipfrom its mold </li>
 +
                        <li> Use biopsy puncher to drill input and output holes </li>
 +
                        <li> Clean chip with isopropanol </li>
 +
                    </ul>
 +
                    <br>
 +
                    <p> Get full protocol here </p>
 +
                    <br>
 +
                </div>
  
−
 
+
             </div>                          
−
 
+
−
 
+
−
 
+
−
             </div>                        
+
 
    
 
    
 
         </div>
 
         </div>
Line 969: Line 1,027:
 
</body>
 
</body>
  
 +
<script>
 +
         
 +
        var acc = document.getElementsByClassName("vignette_back");
 +
        var i;
 +
 +
        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 = "20em";
 +
                }
 +
            });
 +
        }
 +
 +
        var acc = document.getElementsByClassName("close_button");
 +
 +
        for (i = 0; i < acc.length; i++) {
 +
            acc[i].addEventListener("click", function() {
 +
                var panel = this.parentElement;
 +
                var index = String(panel.id).substring(4,5);
 +
                var vignBack = document.getElementById("back_"+index);
 +
                var vignFor = vignBack.previousElementSibling;
 +
                var vignText = vignBack.nextElementSibling;
 +
                panel.style.maxHeight = null;
 +
                vignFor.style.opacity = 1;
 +
                vignText.style.opacity = 0.8;
 +
                vignText.style.top = "5em";
 +
            });
 +
        }
 +
</script>
  
  

Revision as of 14:14, 8 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.

PDMS Chips


Materials

  • Sylgard 184 Elastomer Kit
  • Razor blade
  • 4mm Biopsy Puncher
  • Isopropanol

Protocol

According to manufacturer's instruction.

  • Mix monomer and curing agent (10:1 proportion) for 30 seconds, according to
  • Use a vacuum machine to extract air bubbles until the mixture is clear
  • Pour mixture onto mold
  • Put mixture+mold in oven at 70 degrees Celsius for 3 hours
  • Use a razor blade or scalpel to cut the borders of the chip and extract the chipfrom its mold
  • Use biopsy puncher to drill input and output holes
  • Clean chip with isopropanol

Get full protocol here