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

 
(122 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">
−
         .section_container{                     /*element that contains a section */
+
         #runningchip {
−
            position:relative;
+
             left: 605px;
−
             margin-bottom:3em;
+
 
         }
 
         }
 +
        #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%;
 +
}
 +
}
  
 +
</style>
  
−
        .vignette {                            /*element that contains ONE vignette*/
+
<div id="bannerchanged">
−
            height:25em;
+
                <img class="banner-img" src="https://static.igem.org/mediawiki/2018/3/3e/T--Pasteur_Paris--Banner_Protocols.jpg">
−
            width:25em;
+
         </div>
−
            margin:2em;
+
<h1></h1>
−
            position:relative;
+
</div>
−
            display:inline-block;
+
−
         }
+
  
−
     
+
    <div id="GeneralContent">
−
         .vignette_for {              /*foreground part of the vignettes, gets transparent*/
+
         <div id="MainContent">
−
            width: 20em;
+
−
            height: 21em;
+
−
            position:absolute;
+
−
            left:2.5em;
+
−
            top:2em;
+
  
−
            z-index: 2;
+
<a href="https://2018.igem.org/Team:Pasteur_Paris/Protocols/CellBio">
−
            border: 1px solid #333;
+
<div class="block onglet">
−
            border-radius:20px;
+
<div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/c/c1/T--Pasteur_Paris--Logo-Big-Vignette-Cellular-Biology.png);">
−
            background-image: url("https://static.igem.org/mediawiki/2018/c/cd/T--Pasteur_Paris--Logo-Neuronarch_gradient.jpg");
+
</div>
−
            background-size:100%;
+
<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>
  
−
            pointer-events:none;
 
  
−
            -webkit-transition: opacity 0.7s;
+
<a href="https://2018.igem.org/Team:Pasteur_Paris/Technicals">
−
            -moz-transition: opacity 0.7s;
+
<div class="block onglet">
−
            -o-transition: opacity 0.7s;
+
<div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/e/ed/T--Pasteur_Paris--Big-Vignette-Design.png);">
−
            transition: opacity 0.7s;
+
</div>
−
        }
+
<div class= "textOnglet" style="background-color: #dedede;">
 +
<h1>Design*</h1>
 +
</div>
 +
                        </a>
 +
</div>
  
  
−
       
+
            <p> (*) There are not really protocols in design, but rather methodologies. You will be redirected to Product Design - Methodology. </p>
−
        .vignette_back {          /*background part of the vignettes, picture*/
+
−
            width: 20em;
+
−
            height: 21em;
+
−
            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: 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;
 
−
        }
 
−
       
 
−
       
 
−
        .panel {
 
−
            position:relative;
 
−
            top:25em;
 
−
            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: 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%);
 
−
            border-image: linear-gradient(to right, #C6234A 0%, #3C519F 100%);
 
−
            border-image-slice: 1;
 
−
        }
 
−
 
−
 
−
 
−
        .close_button {
 
−
        width:3em;
 
−
        height:3em;
 
−
        position:absolute;
 
−
        right: 1em;
 
−
        top:1em;
 
−
        z-index:6;
 
−
 
−
        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;
 
−
 
−
        }
 
−
 
−
 
−
    </style>
 
−
</head>
 
−
 
−
<body>
 
−
 
−
<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="section_container" id="microfluidics_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">
 
−
 
−
            <div class="vignette_for">
 
−
            </div>
 
−
       
 
−
            <div class="vignette_back">
 
−
            </div>
 
−
       
 
−
            <div class="vignette_text">
 
−
                <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Preparation</p>
 
−
            </div>
 
−
 
−
            <div class="panel">
 
−
                <div class="close_button">
 
−
                </div>
 
−
         
 
−
                <h3>Materials</h3>
 
−
                <ul>
 
−
                    <li> PDMS and curing agent (Sigma-aldrich, Sylgard 184, 761036-5EA)  </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> Pour PDMS into a beaker (80 g should be
 
−
            enough for most applications). Pour curing agent into the same beaker (10 :1
 
−
            proportion : if you used 80 g PDMS, you need 8 g curing     
 
−
            agent) and  mix with a 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>
 
−
        </div>
 
−
        <div class="vignette">
 
−
 
−
            <div class="vignette_for">
 
−
            </div>
 
−
       
 
−
            <div class="vignette_back">
 
−
            </div>
 
−
       
 
−
            <div class="vignette_text">
 
−
                <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Preparation</p>
 
−
            </div>
 
−
 
−
 
−
            <div class="panel">
 
−
                <div class="close_button">
 
−
                </div>
 
−
         
 
−
                <h3>Materials</h3>
 
−
                <ul>
 
−
                    <li> Bonjour  </li>
 
−
                    <li> Salut </li>
 
−
                </ul>
 
−
                <br>
 
−
                <h3>Protocol</h3>
 
−
                <p>J'en ai marre les amis</p>
 
−
 
−
            </div>
 
 
         </div>
 
         </div>
 
     </div>
 
     </div>
−
 
−
    <script>
 
−
         
 
−
        var acc = document.getElementsByClassName("vignette_back");
 
−
        var i;
 
−
 
−
        for (i = 0; i < acc.length; i++) {
 
−
            acc[i].addEventListener("click", function() {
 
−
                var panel = this.nextElementSibling.nextElementSibling;
 
−
                var vignFor = this.previousElementSibling;
 
−
                var vignText = this.nextElementSibling;
 
−
                   
 
−
                if (panel.style.maxHeight){
 
−
                    panel.style.maxHeight = null;
 
−
                    vignFor.style.opacity = 1;
 
−
                    vignText.style.opacity = 0.8;
 
−
                    vignText.style.top = "5em";
 
−
                    } else {
 
−
                    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 vignFor = this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling;
 
−
                var vignText = this.parentElement.previousElementSibling;
 
−
                panel.style.maxHeight = null;
 
−
                vignFor.style.opacity = 1;
 
−
                vignText.style.opacity = 0.8;
 
−
                vignText.style.top = "5em";
 
−
            });
 
−
        }
 
−
    </script>
 
−
 
−
 
−
   
 
−
    <h2 style="text-align: left;">Cell culture and whatnot</h2>
 
−
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
 
−
</div>
 
−
 
−
 
  
  
−
<div class="clear"></div>
+
    <footer>
 +
    </footer>
  
−
</body>
 
  
  
 
</html>
 
</html>

Latest revision as of 03:48, 18 October 2018

""

Microbiology

Microfluidics

Cellular Biology

Design*

(*) There are not really protocols in design, but rather methodologies. You will be redirected to Product Design - Methodology.