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

 
(151 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:absolute;
+
            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.5s;
+
</div>
            -moz-transition: max-height 0.5s ;
+
                        </a>
            -o-transition: max-height 0.5s ;
+
</div>
            transition: max-height 0.5s ;
+
        }
+
  
    </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>
 
       
 
        <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">
 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br>
 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br>
 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>
  
  
 +
    <footer>
 +
    </footer>
  
 
 
</div>
 
 
 
 
 
 
 
<div class="clear"></div>
 
 
</body>
 
  
  
 
</html>
 
</html>

Latest revision as of 03:48, 18 October 2018

""

Microbiology

Microfluidics

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