|
|
| (94 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| | {{Pasteur_Paris/MenuBlock}} | | {{Pasteur_Paris/MenuBlock}} |
| | + | {{Pasteur_Paris/Vignettes}} |
| | <html> | | <html> |
| − | | + | <style type="text/css"> |
| − | <style> | + | #runningchip { |
| − | .vignette { /*element that contains ONE vignette*/ | + | left: 605px; |
| − | height:20em;
| + | |
| − | width:20em;
| + | |
| − | margin:0;
| + | |
| − | position:relative;
| + | |
| − | display: inline-block; | + | |
| | } | | } |
| − |
| + | #labwork_small { |
| | + | background-color: #292929; |
| | + | } |
| | + | #bannerchanged{ |
| | + | width: 100%; |
| | + | overflow: hidden; |
| | + | margin: 0 auto; |
| | + | } |
| | + | @media screen and (max-width: 760px) { |
| | + | /*#wrapper { |
| | + | width: 100%; |
| | + | overflow: hidden; |
| | + | } |
| | + | #container { |
| | + | width: 100%; |
| | + | margin: 0 auto; |
| | + | }*/ |
| | + | .banner-img { |
| | + | width: 100%; |
| | + | } |
| | + | } |
| | | | |
| − | .vignette_for { /*foreground part of the vignettes, gets transparent*/
| + | </style> |
| − | width: 15em;
| + | |
| − | height: 16em;
| + | |
| − | position:absolute;
| + | |
| − | left:2.5em;
| + | |
| − | top:2em;
| + | |
| | | | |
| − | z-index:2;
| + | <div id="bannerchanged"> |
| − | border: 1px solid #333;
| + | <img class="banner-img" src="https://static.igem.org/mediawiki/2018/3/3e/T--Pasteur_Paris--Banner_Protocols.jpg"> |
| − | 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;
| + | |
| − | }
| + | |
| − | | + | |
| − | #for_0 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/a/aa/T--Pasteur_Paris--Logo-PDMS-Chips-Fabrication.jpg");
| + | |
| − | }
| + | |
| − | | + | |
| − | #for_1 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/8/8a/T--Pasteur_Paris--Logo-PDMS-Chip-Demolding.jpg");
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .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:4em;
| + | |
| − | 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 {
| + | |
| − | width: 90%;
| + | |
| − | padding: 0px 18px;
| + | |
| − | background-color: white;
| + | |
| − | max-height: 0;
| + | |
| − | text-align:left;
| + | |
| − | 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 black;
| + | |
| − | -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: -o-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;
| + | |
| − | }
| + | |
| − | | + | |
| − | .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;
| + | |
| − | }
| + | |
| − | #vign_4 {
| + | |
| − | order:10;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #pan_0 {
| + | |
| − | order:6;
| + | |
| − | }
| + | |
| − | #pan_1 {
| + | |
| − | order:7;
| + | |
| − | }
| + | |
| − | #pan_2 {
| + | |
| − | order:8;
| + | |
| − | }
| + | |
| − | #pan_3 {
| + | |
| − | order:11;
| + | |
| − | }
| + | |
| − | #pan_4 {
| + | |
| − | order:12;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 850px) and (min-width: 572px) {
| + | |
| − | | + | |
| − | #pan_0 {
| + | |
| − | order: 5;
| + | |
| − | }
| + | |
| − | | + | |
| − | #pan_1 {
| + | |
| − | order: 6;
| + | |
| − | }
| + | |
| − | | + | |
| − | #vign_2 {
| + | |
| − | order: 7;
| + | |
| − | }
| + | |
| − | | + | |
| − | #vign_3 {
| + | |
| − | order: 8;
| + | |
| − | }
| + | |
| − | | + | |
| − | #pan_2 {
| + | |
| − | order: 9;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 572px) {
| + | |
| − | | + | |
| − | #pan_0 {
| + | |
| − | order: 4;
| + | |
| − | }
| + | |
| − | | + | |
| − | #vign_1 {
| + | |
| − | order: 5;
| + | |
| − | }
| + | |
| − | | + | |
| − | #pan_1 {
| + | |
| − | order: 6;
| + | |
| − | }
| + | |
| − | | + | |
| − | #vign_2 {
| + | |
| − | order: 7;
| + | |
| − | }
| + | |
| − | | + | |
| − | #pan_2 {
| + | |
| − | order: 8;
| + | |
| − | }
| + | |
| − | | + | |
| − | #vign_3 {
| + | |
| − | order: 9;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="block title">
| + | |
| − | <h1> PROTOCOLS </h1>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="block separator-mark">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="block full" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
| + | |
| − | | + | |
| − | <h2 style="order:1">Microfluidics</h2>
| + | |
| − | | + | |
| − | <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>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="vignette" id="vign_0">
| + | |
| − | <div class="vignette_for" id="for_0">
| + | |
| | </div> | | </div> |
| | + | <h1></h1> |
| | + | </div> |
| | | | |
| − | <div class="vignette_back" id=" back_0"> | + | <div id=" GeneralContent"> |
| − | </div> | + | <div id="MainContent"> |
| | | | |
| − | <div class=" vignette_text"> | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Protocols/CellBio"> |
| − | <p style="margin:auto; text-align:center;font-weight:bold;" >PDMS Chips Fabrication</p>
| + | <div class=" block onglet"> |
| − | </div>
| + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/c/c1/T--Pasteur_Paris--Logo-Big-Vignette-Cellular-Biology.png);"> |
| − | </div>
| + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Microbiology</h1> |
| | + | </div> |
| | + | </div> |
| | + | </a> |
| | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Experiments/Microflu"> |
| | + | <div class="block onglet"> |
| | + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/1/13/T--Pasteur_Paris--Logo-Big-Vignette-Microfluidics.png);"> |
| | + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Microfluidics</h1> |
| | + | </div> |
| | + | </div> |
| | + | </a> |
| | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Protocols/CellBio2"> |
| | + | <div class="block onglet"> |
| | + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/3/3c/T--Pasteur_Paris--Logo-Big-Vignette-Molecular-Biology.png);"> |
| | + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Cellular Biology</h1> |
| | + | </div> |
| | + | </a> |
| | + | </div> |
| | | | |
| − | <div class="vignette" id="vign_1">
| |
| − | <div class="vignette_for" id="for_1">
| |
| − | </div>
| |
| − |
| |
| − | <div class="vignette_back" id="back_1">
| |
| − | </div>
| |
| − |
| |
| − | <div class="vignette_text">
| |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Demolding</p>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | <div class="vignette" id="vign_2">
| + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Technicals"> |
| − | <div class=" vignette_for"> | + | <div class=" block onglet"> |
| − | </div>
| + | <div class=" ongletImg" style=" background-image: url(https://static.igem.org/mediawiki/2018/e/ed/T--Pasteur_Paris--Big-Vignette-Design.png);"> |
| − |
| + | </div> |
| − | <div class=" vignette_back" id=" back_2"> | + | <div class= " textOnglet" style=" background- color: #dedede;"> |
| − | </div>
| + | <h1>Design*</h1> |
| − |
| + | </div> |
| − | <div class=" vignette_text" > | + | </a> |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Bonding</p>
| + | </div> |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| − | <div class="vignette" id="vign_3">
| |
| − | <div class="vignette_for">
| |
| − | </div>
| |
| − |
| |
| − | <div class="vignette_back" id="back_3">
| |
| − | </div>
| |
| − |
| |
| − | <div class="vignette_text">
| |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Treatment for Nerve Growth</p>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | <div class="vignette" id="vign_4">
| + | <p> (*) There are not really protocols in design, but rather methodologies. You will be redirected to Product Design - Methodology. </p> |
| − | <div class="vignette_for">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_4">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Microchannel Chip Mold Fabrication</p> | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| | | | |
| − | <div class="panel" id="pan_0" style="text-align:left;">
| |
| − | <div class="close_button">
| |
| | </div> | | </div> |
| − | <br>
| |
| − | <h3>Materials</h3>
| |
| − | <ul>
| |
| − | <li> Sylgard 184 Elastomer Kit (Sigma-aldrich, 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 target="_blank" rel="noopener noreferrer" 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> |
| − |
| |
| − | <div class="panel" id="pan_1" style="text-align:left;">
| |
| − | <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>
| |
| − | </ul>
| |
| − | <br>
| |
| − | <div class="protocol_box">
| |
| − | <p> Get full protocol here </p>
| |
| − | </div>
| |
| − | <br>
| |
| − | </div>
| |
| − |
| |
| − | <div class="panel" id="pan_2" style="text-align:left;">
| |
| − | <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 into 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="panel" id="pan_3" style="text-align:left;">
| |
| − | <div class="close_button">
| |
| − | </div>
| |
| − | <br>
| |
| − | <h3>Materials</h3>
| |
| − | <ul>
| |
| − | <li> Poly-D-Lysine solution 1.0 mg/mL (Sigma aldrich, A-003-E) </li>
| |
| − | <li> Laminin (Sigma aldrich, Laminin from Engelbreth-Holm-Swarm murine sarcoma basement membrane, L2020-1MG) </li>
| |
| − | </ul>
| |
| − | <br>
| |
| − | <h3>Protocol</h3>
| |
| − | <br>
| |
| − |
| |
| − | <ul>
| |
| − | <li> Pour poly-D-lysine with concentration 10 &mu g/mL into the chip </li>
| |
| − | <li> Incubate over night </li>
| |
| − | <li> Pour laminine with concentration 4 &mu g/mL </li>
| |
| − | <li> Incubate for a few hours</li>
| |
| − | <br>
| |
| − | <div class="protocol_box">
| |
| − | <p> Get full protocol here </p>
| |
| − | </div>
| |
| − | <br>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div class="panel" id="pan_4" style="text-align:left;">
| |
| − | <div class="close_button">
| |
| − | </div>
| |
| − | <br>
| |
| − | <p> We were allowed to use the molds made by Institut Curie. We were not involved in the process of their fabrication. Here is a short video we made about how these molds were created </p>
| |
| − | <br>
| |
| − | <video width="640" height="360" controls>
| |
| − | <source src="https://static.igem.org/mediawiki/2018/d/d1/T--Pasteur_Paris--Mold-Fabrication-iGEM.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | <br>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <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 = "4em";
| |
| − | }
| |
| − | 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 = "4em";
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*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() {
| |
| − | 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 = "4em";
| |
| − | });
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
| | + | <footer> |
| | + | </footer> |
| | | | |
| | | | |
| | | | |
| | </html> | | </html> |
