|
|
Line 1: |
Line 1: |
| {{ Template:uo2014_common }} | | {{ Template:uo2014_common }} |
| | | |
- | content
| + | <style type="text/css"> |
| + | /* gplay background */ |
| + | html { background-image: url("https://static.igem.org/mediawiki/2014/9/98/Uo2014-gplay.png"); |
| + | </style> |
| + | |
| + | <script> |
| + | $(function() { |
| + | var currentTileset = 0; |
| + | var duration = 500; |
| + | |
| + | $(".hover").parents(".ig-tile").hover(function() { |
| + | $(this).find(".hover").slideDown(300); |
| + | }, function() { |
| + | $(this).find(".hover").slideUp(300); |
| + | }); |
| + | |
| + | $(".leftarrow").click(function(e) { |
| + | scrollTo(currentTileset - 1); |
| + | }); |
| + | $(".rightarrow").click(function(e) { |
| + | scrollTo(currentTileset + 1); |
| + | }); |
| + | |
| + | $(window).resize(function() { |
| + | scrollTo(currentTileset, true); |
| + | }); |
| + | |
| + | function scrollTo(tileset, instant) { |
| + | if (!instant) instant = false; |
| + | |
| + | if (tileset < 0 || tileset > 3) return; |
| + | |
| + | // Scroll to the chosen tile |
| + | currentTileset = tileset; |
| + | var tileWidth = $(".ig-tileset-outer").width() |
| + | + 2 * parseInt($(".ig-tileset-outer").css("margin-left")); |
| + | var scrollTarget = -tileset * tileWidth; |
| + | var t = instant ? 0 : duration; |
| + | $(".ig-scroller").animate({ left: scrollTarget }, t); |
| + | |
| + | // Hide the arrows |
| + | if (tileset == 0) |
| + | $(".leftarrow").fadeOut(300); |
| + | else |
| + | $(".leftarrow").fadeIn(300); |
| + | if (tileset == 3) |
| + | $(".rightarrow").fadeOut(300); |
| + | else |
| + | $(".rightarrow").fadeIn(300); |
| + | } |
| + | |
| + | setTimeout(function(){ |
| + | $(".ig-tile").each(function() { |
| + | if (Math.random() < 0.5) |
| + | $(this).fadeIn(700); |
| + | else |
| + | $(this).slideDown(700); |
| + | }); |
| + | }, 400); |
| + | }); |
| + | </script> |
| + | |
| + | <header class="ig-main-header"> |
| + | <div class="row"> |
| + | <a href="#" class="title"><span class="igem">iGEM</span>uOttawa</a> |
| + | <nav> |
| + | <a href="project.html">project</a> |
| + | <a href="drylab.html">dry lab</a> |
| + | <a href="policy.html">policy</a> |
| + | <a href="team.html">team</a> |
| + | </nav> |
| + | <img src="r/uo2014-igemlogo.png" alt="" class="igem-logo no-k"> |
| + | </div> |
| + | </header> |
| + | |
| + | <img src="r/uo2014-arrow-left.png" alt="" class="ig-arrow leftarrow no-k" hidden> |
| + | <img src="r/uo2014-arrow-right.png" alt="" class="ig-arrow rightarrow no-k"> |
| + | |
| + | <div class="ig-scroll-wrapper"> |
| + | <div class="ig-scroller"> |
| + | |
| + | <!-- ====== WET LAB ====== --> |
| + | <div class="ig-tileset-outer"><div class="ig-tileset-inner"> |
| + | <div class="ig-tile wl-1"> |
| + | <img src="r/uo2014-tile2.jpg" alt=""> |
| + | <div class="text"> |
| + | <h2>Take the tour!</h2> |
| + | <p>How we built the tri-stable switch in <em>S. cerevisae</em>.</p> |
| + | <p class="hover" hidden>Let us take you through our creative and scientific process of building one of the most interesting proposed genetic networks — one that may shed light on how stem cells specialize and allow us to create similar behaviour in a lab.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile wl-2"> |
| + | <img src="r/uo2014-tile1.jpg" alt=""> |
| + | <div class="text"> |
| + | <h2>The project</h2> |
| + | <p>Modelling stem cell differentiation using a tri-stable switch.</p> |
| + | <p class="hover" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reprehenderit, minima consequuntur enim corporis quod quis unde iusto ratione consectetur! Quibusdam quas voluptas necessitatibus alias aspernatur quasi a maxime impedit.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile wl-3"> |
| + | <img src="r/uo2014-tile3.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Results</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile wl-4"> |
| + | <img src="r/uo2014-tile4.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Methods</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile wl-5"> |
| + | <img src="r/uo2014-tile16.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Measurement</h3> |
| + | <p>Interlab study</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile wl-6"> |
| + | <img src="r/uo2014-tile15.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Biobricks</h3> |
| + | </div> |
| + | </div> |
| + | </div></div> |
| + | |
| + | <!-- ====== DRY LAB ====== --> |
| + | <div class="ig-tileset-outer"><div class="ig-tileset-inner"> |
| + | <div class="ig-tile dl-1"> |
| + | <img src="r/uo2014-tile5.jpg" alt=""> |
| + | <div class="text"> |
| + | <h2>The tri-stable switch</h2> |
| + | <p>Modelling stem cell differentiation in <em>S. cerevisae</em>.</p> |
| + | <p class="hover" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reprehenderit, minima consequuntur enim corporis quod quis unde iusto ratione consectetur! Quibusdam quas voluptas necessitatibus alias aspernatur quasi a maxime impedit.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile dl-2"> |
| + | <img src="r/uo2014-tile6.jpg" alt=""> |
| + | <div class="text"> |
| + | <h2>The tri-stable switch</h2> |
| + | <p>Modelling stem cell differentiation in <em>S. cerevisae</em>.</p> |
| + | <p class="hover" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reprehenderit, minima consequuntur enim corporis quod quis unde iusto ratione consectetur! Quibusdam quas voluptas necessitatibus alias aspernatur quasi a maxime impedit.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile dl-3"> |
| + | <img src="r/uo2014-tile7.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Results</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile dl-4"> |
| + | <img src="r/uo2014-tile8.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Methods</h3> |
| + | </div> |
| + | </div> |
| + | </div></div> |
| + | |
| + | <!-- ====== HP ====== --> |
| + | <!-- |
| + | Headings: - OGEM |
| + | - Let's Talk Science + Classroom presentations |
| + | - Festivals |
| + | - Mini-enrichment |
| + | --> |
| + | |
| + | <div class="ig-tileset-outer"><div class="ig-tileset-inner"> |
| + | <div class="ig-tile hp-1"> |
| + | <img src="r/uo2014-tile9.jpg" alt=""> |
| + | <div class="text"> |
| + | <h2>The tri-stable switch</h2> |
| + | <p>Modelling stem cell differentiation in <em>S. cerevisae</em>.</p> |
| + | <p class="hover" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reprehenderit, minima consequuntur enim corporis quod quis unde iusto ratione consectetur! Quibusdam quas voluptas necessitatibus alias aspernatur quasi a maxime impedit.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile hp-2"> |
| + | <img src="r/uo2014-tile10.jpg" alt=""> |
| + | <div class="text"> |
| + | <h2>The tri-stable switch</h2> |
| + | <p>Modelling stem cell differentiation in <em>S. cerevisae</em>.</p> |
| + | <p class="hover" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reprehenderit, minima consequuntur enim corporis quod quis unde iusto ratione consectetur! Quibusdam quas voluptas necessitatibus alias aspernatur quasi a maxime impedit.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile hp-3"> |
| + | <img src="r/uo2014-tile11.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Results</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile hp-4"> |
| + | <img src="r/uo2014-tile12.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Methods</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile hp-5"> |
| + | <img src="r/uo2014-tile12.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Methods</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile hp-6"> |
| + | <img src="r/uo2014-tile12.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Methods</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile hp-7"> |
| + | <img src="r/uo2014-tile12.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Methods</h3> |
| + | </div> |
| + | </div> |
| + | </div></div> |
| + | |
| + | <!-- ====== Team ====== --> |
| + | <div class="ig-tileset-outer"><div class="ig-tileset-inner"> |
| + | <div class="ig-tile te-1"> |
| + | <video src="r/uo2014-timelapse.mp4" width="100%" autoplay loop preload="auto" muted> |
| + | </video> |
| + | <div class="text"> |
| + | <h2>The hardest-working team in iGEM.</h2> |
| + | <p><s>Working hard</s> Hardly working 24/7 since 2008.</p> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile te-2"> |
| + | <img src="r/uo2014-tile10.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Safety</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile te-3"> |
| + | <img src="r/uo2014-tile11.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Notebook</h3> |
| + | </div> |
| + | </div> |
| + | <div class="ig-tile te-4"> |
| + | <img src="r/uo2014-tile12.jpg" alt=""> |
| + | <div class="text"> |
| + | <h3>Attributions</h3> |
| + | </div> |
| + | </div> |
| + | </div></div> |
| + | </div> |
| + | </div> |
| | | |
| <!-- ================= | | <!-- ================= |