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

Line 185: Line 185:
 
#banner h1 {padding-top: 100px;}
 
#banner h1 {padding-top: 100px;}
 
}
 
}
 +
 +
 +
 +
                .vignette {                            /*element that contains ONE vignette*/
 +
                    height:25em;
 +
                    width:25em;
 +
                    margin:2em;
 +
                    position:absolute;
 +
                }
 +
 +
                .vignette_for {              /*foreground part of the vignettes, gets transparent*/
 +
                    width: 20em;
 +
                    height: 21em;
 +
                    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: 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;
 +
              }
  
 
</style>
 
</style>
Line 724: Line 795:
  
 
</style>
 
</style>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 879: Line 919:
  
 
<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> PROTOCOLS </h1>
−
<div class="block title"><h1>FLOWERS, MY LIFE</h1>
+
                                </div>
−
</div>
+
−
 
+
                                <div class="block separator-mark">
−
<div class="block two-third">
+
                                </div>
−
<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 class="block full">
−
</div>
+
                                    <h2 style="text-align: left;">Microfluidics</h2>
−
 
+
−
<div class="block one-third">
+
−
<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="block one-third">
+
−
<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 two-third">
+
−
<a href=""><img src="http://www.chaussurezoo.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/h/m/hmax313-1.jpg"></a>
+
−
<div class="legend">
+
−
<p><b>Figure 2 : </b>Flowers and shoes</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class=" block separator-mark">
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="block title"><h1>THERE ARE NOT ONLY FLOWERS IN LIFE </h1></div>
+
−
 
+
−
<div class="block two-third center">
+
−
<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>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 class="block full">
+
−
<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">
+
−
<p><b>Figure 3 : </b>This is not a flower</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="block separator"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="block two-third">
+
−
<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">
+
−
<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 4 : </b>Okay, this is a flower</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="block separator-mark"></div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="block title"><h1>REASONABLE ARGUMENTS FOR LOVING FLOWERS</h1></div>
+
−
 
+
−
 
+
−
<div class="block one-third">
+
−
<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 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 5 : </b>I already showed these, but I really like these shoes</p>
+
−
</div>
+
−
</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>
+
  
 +
                                    <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>                           
  
  
Line 1,046: Line 941:
  
  
 +
                                    <div class="vignette">
  
 +
                                        <div class="vignette_for">
 +
                                        </div>
 +
       
 +
                                        <div class="vignette_back" id="back_0">
 +
                                        </div>
 +
       
 +
                                        <div class="vignette_text">
 +
                                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chips</p>
 +
                                        </div>
  
 +
                                    </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>                       
 +
 
 +
                            </div>
 
 
 
</div>
 
</div>

Revision as of 10:58, 4 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