|
|
(117 intermediate revisions not shown) |
Line 1: |
Line 1: |
| {{:Team:UCL/Template:headerx}} | | {{:Team:UCL/Template:headerx}} |
| + | {{:Team:UCL/Template:BioprocessStyles}} |
| <html> | | <html> |
| | | |
Line 13: |
Line 14: |
| <![endif]--> | | <![endif]--> |
| | | |
- | <div style="background-color:white;width:100%;height:50px;z-index:-10"></div>
| |
- | <div id=overviewholdero>
| |
- | <img src="https://static.igem.org/mediawiki/2014/6/6c/Overview_Graphic-01.png" style="width:100%;z-index:-10;" />
| |
| | | |
- | <div syle="background:red; width:30%; float:left; margin:1.5%; height:600px; z-index:200;position:relative; top:-800px"></div>
| |
- |
| |
- |
| |
- | </div>
| |
| | | |
| | | |
| | | |
| <div id="skrollr-body"> | | <div id="skrollr-body"> |
- |
| |
- |
| |
- |
| |
| <header class="banner-image-background"> | | <header class="banner-image-background"> |
| <div class="banner-image-overlay"> | | <div class="banner-image-overlay"> |
- | <div style="opacity:1"><img src="https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg" alt="" class="banner-image-logo"/><div> | + | <div style="opacity:1"><img src="https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg" alt="" class="banner-image-logo"/></div> |
| </div> | | </div> |
| </header> | | </header> |
- |
| |
| <main> | | <main> |
- |
| |
| <div id="slideabout" class="slide"> | | <div id="slideabout" class="slide"> |
- | | + | <div id="slideaboutcontent" class="slidecontent" style="margin:3% 3% 3% 3%;"> |
- | <div id="slideaboutcontent" class="slidecontent">
| + | |
- | | + | <h2>OUR PROJECT</h2> |
- | <h2>WHO ARE WE?</h2>
| + | |
- | <p>We are University College London's iGEM 2014 team.</p>
| + | <p>We are using Synthetic Biology to beat <b>AZO DYE</b> Pollution. Azo Dyes are the most common synthetic dye and are used everywhere, from food colouring to clothes. You're probably wearing clothes dyed with Azo-Dyes! But, when they get into waste water, dumped from textile factories, they're very toxic. Our team is engineering bacteria that break down these dyes by producing a group of powerful enzymes. These bacteria make the Dye colourless and safe for the environment</p> |
- | <h2>WHAT ARE WE DOING?</h2>
| + | |
- | <p>We are using Synthetic Biology to combat <b>AZO-DYE</b> Pollution. Azo Dyes are the most common synthetic dye and are used everywhere, from food colouring to clothes. You're probably wearing clothes dyed with Azo-Dyes! But, when they get into waste water they're very toxic. Our team is engineering bacteria that degrade these dyes, using enzymes, to make them colourless and less harmful to the environment</p>
| + | |
- | | + | |
- | <br/><br/><p>FIND OUT MORE</p>
| + | |
- | | + | |
- | <div id="grid1">
| + | |
- | <div class="box" id="about-pro"><a href="https://2014.igem.org/Team:UCL/Project/About"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="biobricks-pro"><a href="https://2014.igem.org/Team:UCL/Project/Biobricks"><span class="overlayx"></span></a></div>
| + | |
- | <!--=================place the sequences box next to biobricks? --oran ===================-->
| + | |
- | <div class="box" id="sequences-pro"><a href="https://2014.igem.org/Team:UCL/Project/Sequences"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="achievements-pro"><a href="https://2014.igem.org/Team:UCL/Project/Achievements"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="future-pro"><a href="https://2014.igem.org/Team:UCL/Project/Future"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="manuf-pro"><a href="https://2014.igem.org/Team:UCL/Science/Bioprocessing#anchor"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="xeno-pro"><a href="https://2014.igem.org/Team:UCL/Project/Xenobiology"><span class="overlayx"></span></a></div>
| + | |
- | | + | |
| </div> | | </div> |
| </div> | | </div> |
- | </div>
| |
| | | |
- | <div id="slidescience" class="slide">
| + | <div style="position:relative"> |
| | | |
- | <div class="banner-image-overlay">
| + | <div id="buttons"> |
| | | |
- | <div style="opacity:1;">
| + | <div class="SCJBBHIGHLIGHT SCJBLACK" style="position:absolute;left:4%;top:1%;"><a href="https://2014.igem.org/Team:UCL/Project/About"><p> What we did </p></a></div> |
| | | |
- | <div id="slidesciencecontent" class="slidecontent">
| + | <div class="SCJBBHIGHLIGHT SCJRED" style="position:absolute;left:10%;top:22%;"><a href="https://2014.igem.org/Team:UCL/Science"><p>We solidified the SCIENCE in the wet Lab</p></a></div> |
| + | <div class="SCJMMHIGHLIGHT SCJYELLOW" style="position:absolute;left:65%;top:20%;"><a href="https://2014.igem.org/Team:UCL/Science/Model"><p>We MODELLED the data to see the pathways</p></a></div> |
| + | <div class="SCJBBHIGHLIGHT SCJGREEN" style="position:absolute;left:25%;top:40%;"><a href="https://2014.igem.org/Team:UCL/Science/Bioprocessing""><p>We designed an entire MANUFACTURING and detoxifying facility</p></a></div> |
| + | <div class="SCJBBHIGHLIGHT SCJINDIGO" style="position:absolute;left:55%;top:55%;"><a href="https://2014.igem.org/Team:UCL/Project/Xenobiology"><p>We made our bacteria super safe using our XENOBIOLOGY</p></a></div> |
| + | <div class="SCJBBHIGHLIGHT SCJBLUE" style="position:absolute;left:5%;top:86%;"><a href="https://2014.igem.org/Team:UCL/Humans/Soci"><p>We ran an intense investigation into the SOCIOLOGICAL interactions of our team.</p></a></div> |
| + | <div class="SCJBBHIGHLIGHT SCJORANGE" style="position:absolute;left:65%;top:92%;"><a href="https://2014.igem.org/Team:UCL/Science/MicroF"><p>We de-mystified the magic of MICROFLUIDICS</a></p></div> |
| + | <div class="SCJBBHIGHLIGHT SCJVIOLET" style="position:absolute;left:10%;top:60%;"><a href="https://2014.igem.org/Team:UCL/Humans/Story"><p>We became a player in the PUBLIC AND INDUSTRY</a></p></div> |
| + | </div> |
| | | |
- | <h2>IN THE LAB</h2>
| + | <div id="overviewholdero"> |
| + | <img src="https://static.igem.org/mediawiki/2014/6/6c/Overview_Graphic-01.png" style="width:100%;z-index:-10; position:relative;" /> |
| + | <!---<p style="margin-top:30px;margin-left:50%;margin-boottom:30px"><b>And much much more..........</b><br/></p>---> |
| + | </div> |
| | | |
- | <p>Some text about our lab work here</p>
| + | </div> |
- | | + | |
- | <br/><br/><p>FIND OUT MORE</p>
| + | |
- | | + | |
- | <div id="grid2">
| + | |
- | <div class="box" id="results-sci"><a href="https://2014.igem.org/Team:UCL/Science/Results"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="protocols-sci"><a href="https://2014.igem.org/Team:UCL/Science/Proto"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="experiments-sci"><a href=" https://2014.igem.org/Team:UCL/Science/Experiment"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="modelling-sci"><a href="https://2014.igem.org/Team:UCL/Science/Model"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="bioprocessing-sci"><a href="https://2014.igem.org/Team:UCL/Science/Bioprocessing"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="primers-sci"><a href="https://2014.igem.org/Team:UCL/Science/Primers"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="micro-faq"><a href="https://2014.igem.org/Team:UCL/Science/MicroF"><span class="overlayx"></span></a></div>
| + | |
- | </div>
| + | |
- | | + | |
- | </div>
| + | |
- | | + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | <div id="slidehumans" class="slide">
| + | |
- | | + | |
- | <div id="slidehumanscontent" class="slidecontent">
| + | |
- | | + | |
- | <h2>OUR STORY</h2>
| + | |
- | | + | |
- | <p>Humans are the engine behind the machine that is our project, and it is through humans that we tell our story. Be it who we are or the who we've influenced this is where you will find anything and everything to do with the humans involved in this project. Click <a href="https://2014.igem.org/Team:UCL/Humans/Story">here</a> to see the full story how we as a team engaged the public and ourselves, or click one of the boxes to see some of the more individual aspects of the humans in our project.
| + | |
- | </p>
| + | |
- | | + | |
- | <br/><br/><p>FIND OUT MORE</p>
| + | |
- | | + | |
- | <div id="grid3">
| + | |
- | <div class="box" id="team-human"><a href="https://2014.igem.org/Team:UCL/Humans/Team"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="collaborations-human"><a href="https://2014.igem.org/Team:UCL/Humans/Collab"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="risk-human"><a href="https://2014.igem.org/Team:UCL/Humans/Risk"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="soc-human"><a href="https://2014.igem.org/Team:UCL/Humans/Soci"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="sponsor-human"><a href="https://2014.igem.org/Team:UCL/Humans/Sponsor"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="gallery-human"><a href="https://2014.igem.org/Team:UCL/Humans/Gallery"><span class="overlayx"></span></a></div>
| + | |
- | <div class="box" id="attributions-human"><a href="https://2014.igem.org/Team:UCL/Humans/Attributions"><span class="overlayx"></span></a></div>
| + | |
- | </div>
| + | |
- | | + | |
- | </div>
| + | |
- | | + | |
- | </div>
| + | |
| | | |
| </main> | | </main> |
- |
| |
| </div> | | </div> |
| | | |
| <style> | | <style> |
- | #grid1, #grid2, #grid3 {
| + | |
- | width: 96%; | + | div.SCJBBHIGHLIGHT p { |
- | margin:2% 0% 2% 2%; | + | color:white; |
- | position: relative; | + | border: solid 4px; |
- | font-size: 25px; | + | border-radius: 10px; |
- | font-family: 'Helvetica'; | + | display: table; |
- | color: #eaeaea; | + | padding: 1%; |
| + | margin: 1px 1px 0px 1px; |
| + | box-shadow: 10px 10px 5px #888888; |
| + | font-size:0.8em; |
| } | | } |
| | | |
- | #linkappearo {
| + | div.SCJMMHIGHLIGHT p { |
- | background:red;
| + | color:black; |
- | width:30%;
| + | border: solid 4px; |
- | float:left;
| + | border-radius: 10px; |
- | margin:1.5%;
| + | display: table; |
- | height:600px;
| + | padding: 1%; |
- | z-index:200;
| + | margin: 1px 1px 0px 1px; |
- | position:relative;
| + | box-shadow: 10px 10px 5px #888888; |
- | top:-800px;
| + | font-size:0.8em; |
| } | | } |
| | | |
- | | + | .SCJRED p { |
- | .box { | + | background-color: red; |
- | background-color: #c23822; | + | |
- | box-shadow: 0px 0px 1px #222;
| + | |
- | float: left;
| + | |
- | position: relative;
| + | |
| } | | } |
- | #fillers{
| + | .SCJORANGE p { |
- | display: none; | + | background-color: orange; |
| } | | } |
- | .fillerBox { | + | .SCJORANGE a { |
- | background-color: #751e11; | + | color: white; |
- | box-shadow: 0px 0px 1px #222;
| + | |
- | float: left;
| + | |
- | position: relative;
| + | |
| } | | } |
- | | + | .SCJYELLOW p { |
- | .overlayx { | + | color:black; |
- | position: absolute;
| + | background-color: yellow; |
- | width: 100%;
| + | |
- | height: 100%;
| + | |
- | top: 0;
| + | |
- | left: 0;
| + | |
- | z-index: 1;
| + | |
- | background-image: url('empty.gif'); | + | |
| } | | } |
- | | + | .SCJGREEN p { |
- | #about-pro {
| + | background-color: green; |
- | background: white url('https://static.igem.org/mediawiki/2014/d/d8/About_logoUCL.png') center no-repeat;
| + | |
- | background-size:59%;
| + | |
- | }
| + | |
- | #biobricks-pro {
| + | |
- | background: white url('https://static.igem.org/mediawiki/2014/b/b8/BiobrickUCL.png') center no-repeat;
| + | |
- | background-size:58%;
| + | |
| } | | } |
- | #sequences-pro {
| + | .SCJBLUE p { |
- | background: white url('https://static.igem.org/mediawiki/2014/e/e8/Sequences_logo.png') center no-repeat;
| + | background-color: blue; |
- | background-size:60%;
| + | |
| } | | } |
- | #achievements-pro {
| + | .SCJINDIGO p { |
- | background: white url('https://static.igem.org/mediawiki/2014/5/5a/Achievements_logoUCL.png') center no-repeat;
| + | background-color: indigo; |
- | background-size:60%;
| + | color:white; |
| } | | } |
- | #future-pro {
| + | .SCJVIOLET p { |
- | background: white url('https://static.igem.org/mediawiki/2014/9/9a/FutureUCL.png') center no-repeat;
| + | color:white !important; |
- | background-size:59%;
| + | background-color: violet; |
| } | | } |
- | #manuf-pro {
| + | .SCJVIOLET p a:visited { |
- | background: white url('https://static.igem.org/mediawiki/2014/e/ef/ManufacturingUCL.png') center no-repeat;
| + | color:white !important; |
- | background-size:56%;
| + | |
| } | | } |
- | #xeno-pro {
| + | |
- | background: white url('https://static.igem.org/mediawiki/2014/6/63/Xenobiology_LogoUCL.png') center no-repeat;
| + | |
- | background-size:56%;
| + | .SCJBLACK p { |
| + | margin-top:20px !important; |
| + | margin-left:40px !important; |
| + | margin-right:40px !important; |
| + | margin-bottom:20px !important; |
| + | |
| + | font-size:2.2em !important; |
| + | background-color: black; |
| + | |
| } | | } |
| | | |
- | #team-human {
| + | |
- | background: white url('https://static.igem.org/mediawiki/2014/7/75/Team_and_SupervisorsUCL.png') center no-repeat;
| + | |
- | background-size:56%;
| + | .slidecontent p { |
- | }
| + | text-align:center; |
- | #collaborations-human {
| + | |
- | background: white url('https://static.igem.org/mediawiki/2014/0/0c/CollaborationsUCL.png') center no-repeat;
| + | |
- | background-size:56%;
| + | |
| } | | } |
- | #risk-human {
| + | .buttonPrime { |
- | background: white url('https://static.igem.org/mediawiki/2014/b/be/Risk_AssessmentUCL.png') center no-repeat;
| + | margin:0 auto; |
- | background-size:56%;
| + | text-align:center; |
| + | width:65%; |
| + | padding:20px 0px; |
| + | margin-top:10px; |
| + | background-color:grey; |
| } | | } |
- | #soc-human {
| + | .buttonPrime:hover { |
- | background: white url('https://static.igem.org/mediawiki/2014/e/eb/SociologicalImagUCL.png') center no-repeat;
| + | opacity:0.7; |
- | background-size:56%;
| + | |
| } | | } |
- | #sponsor-human {
| + | .buttonKnob { |
- | background: white url('https://static.igem.org/mediawiki/2014/3/32/SponsorshipUCL.png') center no-repeat;
| + | margin:0 auto; |
- | background-size:56%;
| + | text-align:center; |
| + | width:25%; |
| + | padding:30px 0px; |
| + | background-color:black; |
| + | color:white; |
| + | margin-top:50px; |
| } | | } |
- | #gallery-human {
| + | .imageOverlayMain { |
- | background: white url('https://static.igem.org/mediawiki/2014/5/55/GalleryUCL.png') center no-repeat;
| + | position:absolute; |
- | background-size:56%;
| + | z-index:999; |
| + | width:100%; |
| + | text-align:center; |
| } | | } |
- | #attributions-human {
| + | .topCover { |
- | background: white url('https://static.igem.org/mediawiki/2014/7/75/UCLAttributions_logo_transparent-01.png') center no-repeat;
| + | width:100%; |
- | background-size:56%;
| + | height:50%; |
| } | | } |
- | #results-sci {
| + | .bottomCover { |
- | background: white url('https://static.igem.org/mediawiki/2014/c/c9/ResultsUCL.png') center no-repeat;
| + | width:100%; |
- | background-size:60%;
| + | height:50%; |
- | }
| + | |
- | #protocols-sci {
| + | |
- | background: white url('https://static.igem.org/mediawiki/2014/5/53/ProtocolsUCL.png') center no-repeat;
| + | |
- | background-size:58%;
| + | |
| } | | } |
- | #experiments-sci { | + | #topLeft { |
- | background: white url('https://static.igem.org/mediawiki/2014/f/f8/ExperimentsUCL.png') center no-repeat;
| + | float:left; |
- | background-size:60%;
| + | width:49%; |
| + | height:100%; |
| } | | } |
- | #modelling-sci { | + | #topLeft a:hover { |
- | background: white url('https://static.igem.org/mediawiki/2014/3/34/Modeling_logoUCL.png') center no-repeat;
| + | display:block; |
- | background-size:60%;
| + | |
| } | | } |
- | #primers-sci { | + | #topRight { |
- | background: white url('https://static.igem.org/mediawiki/2014/e/ef/Primer_design.png') center no-repeat;
| + | float:right; |
- | background-size:60%;
| + | width:49%; |
| + | height:100%; |
| } | | } |
- | #bioprocessing-sci { | + | #topRight a:hover { |
- | background: white url('https://static.igem.org/mediawiki/2014/f/fd/BioprocessingUCL.png') center no-repeat;
| + | display:block; |
- | background-size:60%;
| + | |
| } | | } |
- | #redd { | + | #bottomLeft { |
- | background: white center no-repeat;
| + | float:left; |
- | background-size:100%;
| + | width:49%; |
- | opacity:1;
| + | height:100%; |
| } | | } |
- | #micro-faq { | + | #bottomLeft a:hover { |
- | background: white url('https://static.igem.org/mediawiki/2014/0/0a/Microfluidics_logoUCL.png') center no-repeat;
| + | display:block; |
- | background-size:56%;
| + | } |
| + | #bottomRight { |
| + | float:right; |
| + | width:49%; |
| + | height:100%; |
| + | } |
| + | #bottomRight a:hover { |
| + | display:block; |
| + | } |
| + | #linkappearo { |
| + | background:red; |
| + | width:30%; |
| + | float:left; |
| + | margin:1.5%; |
| + | height:600px; |
| + | z-index:200; |
| + | position:relative; |
| + | top:-800px; |
| + | } |
| + | #slideheader { |
| + | position: relative; |
| } | | } |
- |
| |
- |
| |
- |
| |
| </style> | | </style> |
| | | |
- | <script type="text/javascript" src="https://2014.igem.org/Team:UCL/Template:mason.js?action=raw&ctype=text/javascript"></script> | + | </body> |
- | <script>
| + | |
- | $(document).ready(function () {
| + | |
- | $(function () {
| + | |
- | $("#grid1").mason({
| + | |
- | itemSelector: ".box",
| + | |
- | ratio: 1.5,
| + | |
- | sizes: [
| + | |
- | [1, 1]
| + | |
- | ],
| + | |
- | columns: [
| + | |
- | [0, 200, 1],
| + | |
- | [200, 400, 2],
| + | |
- | [400, 600, 3],
| + | |
- | [600, 800, 4],
| + | |
- | [800, 1000, 5],
| + | |
- | [1000, 1200, 6],
| + | |
- | [1200, 1400, 7]
| + | |
- | ],
| + | |
- | filler: {
| + | |
- | itemSelector: '.fillerBox',
| + | |
- | filler_class: 'custom_filler'
| + | |
- | },
| + | |
- | layout: 'fluid',
| + | |
- | gutter: -20
| + | |
- | });
| + | |
- | });
| + | |
| | | |
- | $(function () {
| |
- | $("#grid2").mason({
| |
- | itemSelector: ".box",
| |
- | ratio: 1.5,
| |
- | sizes: [
| |
- | [1, 1]
| |
- | ],
| |
- | columns: [
| |
- | [0, 200, 1],
| |
- | [200, 400, 2],
| |
- | [400, 600, 3],
| |
- | [600, 800, 4],
| |
- | [800, 1000, 5],
| |
- | [1000, 1200, 6],
| |
- | [1200, 1400, 7]
| |
- | ],
| |
- | filler: {
| |
- | itemSelector: '.fillerBox',
| |
- | filler_class: 'custom_filler'
| |
- | },
| |
- | layout: 'fluid',
| |
- | gutter: -20
| |
- | });
| |
- | });
| |
| | | |
- | $(function () {
| |
- | $("#grid3").mason({
| |
- | itemSelector: ".box",
| |
- | ratio: 1.5,
| |
- | sizes: [
| |
- | [1, 1]
| |
- | ],
| |
- | columns: [
| |
- | [0, 200, 1],
| |
- | [200, 400, 2],
| |
- | [400, 600, 3],
| |
- | [600, 800, 4],
| |
- | [800, 1000, 5],
| |
- | [1000, 1200, 6]
| |
- | ],
| |
- | filler: {
| |
- | itemSelector: '.fillerBox',
| |
- | filler_class: 'custom_filler'
| |
- | },
| |
- | layout: 'fluid',
| |
- | gutter: -20
| |
- | });
| |
- | });
| |
- | });
| |
- | </script>
| |
- |
| |
- | <script src="https://2014.igem.org/Team:UCL/Template:grid.js?action=raw&ctype=text/javascript"></script>
| |
- | <script>
| |
- | $(function () {
| |
- | Grid.init();
| |
- | });
| |
- | </script>
| |
- |
| |
- | </body>
| |
- |
| |
- | <style>
| |
- | #slideheader {
| |
- | position: relative;
| |
- | }
| |
- | </style>
| |
| | | |
| </html> | | </html> |
| {{:Team:UCL/Template:footerx}} | | {{:Team:UCL/Template:footerx}} |