|
|
(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> |