|
|
| (148 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| − | {{Pasteur_Paris}} | + | {{Pasteur_Paris/MenuBlock}} |
| − | <html>´ | + | {{Pasteur_Paris/Vignettes}} |
| − | <head>
| + | <html> |
| − | <style> | + | <style type="text/css"> |
| − | .vignette_container{ /*element that contains the vignettes*/ | + | #runningchip { |
| − | position:relative;
| + | left: 605px; |
| − | height: 30em; | + | |
| | } | | } |
| − | .vignette_for { /*foreground part of the vignettes, gets transparent when hovering mouse over it*/ | + | #labwork_small { |
| − | position:absolute; | + | background-color: #292929; |
| − | width: 20em;
| + | } |
| − | height: 15em;
| + | #bannerchanged{ |
| − | z-index: 2;
| + | width: 100%; |
| − | border: 1px solid #333;
| + | overflow: hidden; |
| − | border-radius: 20px;
| + | margin: 0 auto; |
| − | padding: 50px 12px;
| + | } |
| − | background-image: url("https://static.igem.org/mediawiki/2018/c/cd/T--Pasteur_Paris--Logo-Neuronarch_gradient.jpg");
| + | @media screen and (max-width: 760px) { |
| − | background-size:100%;
| + | /*#wrapper { |
| − | margin: 35px;
| + | width: 100%; |
| − | pointer-events:none;
| + | overflow: hidden; |
| − | -webkit-transition: opacity 0.7s;
| + | } |
| − | -moz-transition: opacity 0.7s;
| + | #container { |
| − | -o-transition: opacity 0.7s;
| + | width: 100%; |
| − | transition: opacity 0.7s;
| + | margin: 0 auto; |
| | + | }*/ |
| | + | .banner-img { |
| | + | width: 100%; |
| | + | } |
| | + | } |
| | | | |
| − | }
| + | </style> |
| | | | |
| − | | + | <div id="bannerchanged"> |
| | + | <img class="banner-img" src="https://static.igem.org/mediawiki/2018/3/3e/T--Pasteur_Paris--Banner_Protocols.jpg"> |
| | + | </div> |
| | + | <h1></h1> |
| | + | </div> |
| | | | |
| − |
| + | <div id="GeneralContent"> |
| − | .vignette_back { /*background part of the vignettes, picture*/ | + | <div id="MainContent"> |
| − | position:absolute;
| + | |
| − | width: 20em;
| + | |
| − | height: 15em;
| + | |
| − | z-index: 1;
| + | |
| − | border: 1px solid #333;
| + | |
| − | border-radius: 20px;
| + | |
| − | padding: 50px 12px;
| + | |
| − | background-image:url("https://static.igem.org/mediawiki/2018/0/03/T--Pasteur_Paris--PDMS_prep.jpg");
| + | |
| − | background-size:100%;
| + | |
| − | margin: 35px;
| + | |
| − | pointer-events:none;
| + | |
| − | }
| + | |
| − | .vignette_text { /*small panel that slides down on the vignettes*/
| + | |
| − | position:relative;
| + | |
| − | top:7em;
| + | |
| − | width: 20em;
| + | |
| − | height: 1em;
| + | |
| − | z-index: 4;
| + | |
| − | border: 1px solid #333;
| + | |
| − | background-color:white;
| + | |
| − | box-shadow: 2px 2px 3px grey;
| + | |
| − | padding: 20px 24px;
| + | |
| − | margin: 23px;
| + | |
| − | opacity: 0.9;
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − |
| + | |
| | | | |
| − |
| + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Protocols/CellBio"> |
| − | .accordion {
| + | <div class="block onglet"> |
| − | background-color: transparent;
| + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/c/c1/T--Pasteur_Paris--Logo-Big-Vignette-Cellular-Biology.png);"> |
| − | position:relative;
| + | </div> |
| − | left:2em;
| + | <div class= "textOnglet" style="background-color: #dedede;"> |
| − | top:2em;
| + | <h1>Microbiology</h1> |
| − | padding: 18px;
| + | </div> |
| − | width: 27em;
| + | </div> |
| − | height:27em;
| + | </a> |
| − | text-align: left;
| + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Experiments/Microflu"> |
| − | cursor: pointer;
| + | <div class="block onglet"> |
| − | border: none;
| + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/1/13/T--Pasteur_Paris--Logo-Big-Vignette-Microfluidics.png);"> |
| − | outline: none;
| + | </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> |
| | | | |
| | | | |
| − |
| + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Technicals"> |
| − | .panel {
| + | <div class="block onglet"> |
| − | padding: 10px 18px;
| + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/e/ed/T--Pasteur_Paris--Big-Vignette-Design.png);"> |
| − | background-color: white;
| + | </div> |
| − | max-height: 0;
| + | <div class= "textOnglet" style="background-color: #dedede;"> |
| − | overflow: hidden;
| + | <h1>Design*</h1> |
| − | -webkit-transition: max-height 0.7s;
| + | </div> |
| − | -moz-transition: max-height 0.7s ;
| + | </a> |
| − | -o-transition: max-height 0.7s ;
| + | </div> |
| − | transition: max-height 0.7s ;
| + | |
| − | }
| + | |
| | | | |
| − | </style>
| |
| − | </head>
| |
| | | | |
| − | <body> | + | <p> (*) There are not really protocols in design, but rather methodologies. You will be redirected to Product Design - Methodology. </p> |
| | | | |
| − | <div class="column two_thirds_size">
| |
| − | <h3>What should this page contain?</h3>
| |
| − | <ul>
| |
| − | <li> Protocols </li>
| |
| − | <li> Experiments </li>
| |
| − | <li> Documentation of the development of your project </li>
| |
| − | </ul>
| |
| | | | |
| − | </div>
| |
| − |
| |
| − | <div class="column third_size">
| |
| − | <div class="highlight decoration_A_full">
| |
| − | <h3>Inspiration</h3>
| |
| − | <ul>
| |
| − | <li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
| |
| − | <li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
| |
| − | <li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div class="column full_size">
| |
| − |
| |
| − | <h1>Experiments</h1>
| |
| − |
| |
| − |
| |
| − | <p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed
| |
| − | enough for another team to repeat your experiments.</p>
| |
| − |
| |
| − | <p>
| |
| − | Please remember to put all characterization and measurement data for your parts on the corresponding Registry
| |
| − | part pages.
| |
| − | </p>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div class="vignette_container">
| |
| − | <h2 style="text-align: left;">Microfluidics</h2>
| |
| − |
| |
| − | <p>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.</p>
| |
| − |
| |
| − | <div class="vignette_for">
| |
| | </div> | | </div> |
| − |
| |
| − | <div class="vignette_back">
| |
| − | </div>
| |
| − |
| |
| − | <div class="vignette_text">
| |
| − | <p style="position: relative; bottom:15px; text-align:center;font-weight:bold;">PDMS Preparation</p>
| |
| − | </div>
| |
| − |
| |
| − | <button class="accordion" id="button1">Section 1</button>
| |
| − | <div class="panel">
| |
| − | <h3>Materials</h3>
| |
| − | <ul>
| |
| − | <li> PDMS and curing agent (Sigma-aldrich, Sylgard 184, 761036-5EA) </li>
| |
| − | <li> Mold (we recommend a mold made of epoxyy resin for chips with microfluidic circuits, although aluminium is fine for simpler molds) </li>
| |
| − | <li> Isopropanol (liquid) </li>
| |
| − | <li> Scale </li>
| |
| − | <li> Beaker</li>
| |
| − | <li> Vacuum machine </li>
| |
| − | <li> Spatula</li>
| |
| − | <li> Oven</li>
| |
| − |
| |
| − |
| |
| − | </ul>
| |
| − | <h3>Protocol</h3>
| |
| − | <p>Pour PDMS into a beaker (80 g should be enough for most applications). Pour curing agent into the same beaker (9 :1 proportion : if you used 80 g PDMS, you need 8 g curing
| |
| − | agent) and mix with the spatula for 30 seconds. Spatula can be cleaned afterwards with some paper dipped in isopropanol. Put beaker in vacuum machine in order to extract the
| |
| − | air bubbles from the mixture (at least 10 minutes vacuum, look out for overflowings). Pour mixture onto mold. Put mold+mixture in oven at 70 degrees Celsius for 3 hours at
| |
| − | least. We do not recommend letting the mold with the mixture more than 2 days in the oven, otherwise there is a chance you'll break the chip when demolding it.
| |
| − | </p>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | var acc = document.getElementsByClassName("accordion");
| |
| − | var vignForLis = document.getElementsByClassName("vignette_for") ;
| |
| − | var vignTextLis = document.getElementsByClassName("vignette_text") ;
| |
| − | var i;
| |
| − |
| |
| − |
| |
| − | for (i = 0; i < acc.length; i++) {
| |
| − | var vignFor = vignForLis[i];
| |
| − | var vignText = vignTextLis[i];
| |
| − | acc[i].addEventListener("click", function() {
| |
| − |
| |
| − | this.classList.toggle("active");
| |
| − | var panel = this.nextElementSibling;
| |
| − |
| |
| − | if (panel.style.maxHeight){
| |
| − | panel.style.maxHeight = null;
| |
| − | vignFor.style.opacity = 1;
| |
| − | vignText.style.opacity = 0.8;
| |
| − | vignText.style.top = "7em";
| |
| − | } else {
| |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| |
| − | vignFor.style.opacity = 0;
| |
| − | vignText.style.opacity = 1;
| |
| − | vignText.style.top = "23em";
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | <h2 style="text-align: left;">Cell culture and what not</h2>
| |
| − |
| |
| − |
| |
| − |
| |
| | </div> | | </div> |
| | | | |
| | | | |
| − | <br> | + | <footer> |
| − | <br>
| + | </footer> |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="clear"></div>
| + | |
| | | | |
| − | </body>
| |
| | | | |
| | | | |
| | </html> | | </html> |
