Team:UCL/Homex

From 2014.igem.org

(Difference between revisions)
(Undo revision 88432 by Adamdenyer (talk))
Line 1: Line 1:
-
/* =Header Banner */
+
{{:Team:UCL/Template:headerx}}
-
.banner-image-background {
+
<html>
-
    background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
+
<!-- ============= CSS for Humans Main ================= -->
-
    background-size: 150%;
+
<link rel="stylesheet" href="https://2014.igem.org/Team:UCL/Template:HomeMain.css?action=raw&ctype=text/css" type="text/css" />
-
    background-color: #e7e7e7;
+
-
    position: relative;
+
-
    height: 700px;
+
-
z-index: 10;
+
-
}
+
-
    .banner-image-logo{
+
-
        width: 363.5px;
+
-
        height: 251.5px;
+
-
        background: url('https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg') no-repeat top right;
+
-
        background-size: 300px 200px;
+
-
        position: absolute;
+
-
        top: 150px;
+
-
        left: 30%;
+
-
        margin-left: -150px;
+
-
z-index: 11;
+
-
    }
+
-
/* =Profiles */
+
-
main {
+
-
    z-index: 1;
+
-
    position: relative;
+
-
}
+
-
/* =Slide 1 Moving Text */
+
<!-- ============= BODY SLIDERS ======================== -->
-
    #Slide1 {
+
<body>
-
        background: blue;
+
<div id="skrollr-body">
-
        background-attachment: fixed;
+
         <!--[if lt IE 7]>
-
        color: #fff;
+
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-
        position: relative;
+
         <![endif]-->
-
        background-size: auto 45px;
+
-
height: 3500px;
+
-
    }
+
-
/* =Slide 2 */
+
-
#Slide2People {
+
-
        background: yellow /*url('../img/bcg_profiles.png')*/ repeat-y top center;
+
-
        color: #fff;
+
-
        position: relative;
+
-
        background-size: auto 45px;
+
-
        z-index: 20;
+
-
    }
+
-
#Slide2People:before{
+
-
content:'Human Elements';
+
-
display: block;
+
-
position: absolute;
+
-
top: 50px;
+
-
left: 50%;
+
-
width: 75px;
+
-
margin-left: -39px;
+
-
text-align: center;
+
-
font-size: 1.5em;
+
-
font-family: 'Open Sans', sans-serif;
+
-
}
+
-
    .Commander {
+
-
         width: 45%;
+
-
        margin: 2% 2%;
+
-
        padding: 0 0 0 0;
+
-
        position: relative;
+
-
    }
+
-
    .Commander h2 {
+
-
        margin-top: 0;
+
-
        font-size: 1.2em;
+
-
        line-height: 1.2em;
+
-
        text-transform: uppercase;
+
-
        text-align: center;
+
-
        border:none;
+
-
    }
+
-
    .PhotoPile { float: left;}
+
-
    .Clipboard { float: right;}
+
-
    .ComImg {
+
-
         width: 138px;
+
-
        height: 152px;
+
-
        position: absolute;
+
-
        top: 30px;
+
-
        left: 50%;
+
-
        margin-left: -69px;
+
-
    }
+
-
    .PhotoPile .ComImg  {
 
-
        background: url('https://static.igem.org/mediawiki/2014/f/f7/UCL_Pile_of_Polaroids.png') no-repeat top left;
 
-
        background-size: 100%;
 
-
    }
 
-
    .Clipboard .ComImg  {
 
-
        background: url('https://static.igem.org/mediawiki/2014/d/d1/UCL_clipboard.png') no-repeat top left;
 
-
        background-size: 100%;
 
-
    }
 
-
.slide {
+
<header class="banner-image-background">
-
}
+
        <div class="banner-image-logo">
 +
        </div>
 +
</header>
-
.slide h2 {
+
        <main>
-
    font-weight:bold;
+
-
    border-bottom:none;
+
-
}
+
-
.slide p, .slide h2 {
+
    <div id="slide-about" class="slide">
-
    text-align:center;
+
                <div class="wrapper clearfix">
-
}
+
-
#slide-about {
+
<h2>WHAT ARE WE DOING?</h2>
-
    padding-top:150px;
+
<p>We are University College London's iGEM team. We are using Synthetic Biology to combat Dye Pollution.</p>
-
    padding-left:100px;
+
<h2>AZO-DYES</h2>
-
    padding-right:100px;
+
<p>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>
-
    height:500px;
+
-
}
+
 +
</div>
 +
            </div>
 +
<!--
-
@media only screen and (min-width: 768px) {
+
            <div id="Slide1">
-
 
+
                <div class="wrapper clearfix">
-
  /* =Header Banner */
+
<div id="QOne"
 +
data-anchor-target="#Slide1"
 +
data-top="opacity: 0; transform[sqrt]:translateX(-200%)"
 +
data--400-top="opacity: 1; transform[sqrt]:translateX(0%)"
 +
>WHAT ARE WE DOING?</br> We are University College London's iGEM team. We are using Synthetic Biology to combat Dye Pollution. </div>
 +
<div id="QTwo"
 +
data-anchor-target="#Slide1"
 +
data--400-top="opacity: 0; transform:translateX(200%) rotate(0deg)"
 +
data--800-top="opacity: 1; transform:translateX(0%) rotate(-10deg)"
 +
></div>
 +
<div id="QThree"
 +
data-anchor-target="#Slide1"
 +
data--1000-top="opacity: 0; transform:translateX(-200%) rotate(0deg)"
 +
data--1100-top="opacity: 1; transform:translateX(0%) rotate(15deg)"
 +
></div>
 +
<div id="QFour"
 +
data-anchor-target="#Slide1"
 +
data--600-top="opacity: 0; transform[sqrt]:translateX(200%)"
 +
data--1600-top="opacity: 1; transform[sqrt]:translateX(0%)"
 +
>AZO-DYES</br> 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</div>
 +
</div>
 +
            </div>
-
    .banner-image-background {
+
-->
-
    background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
+
-
    background-size:100%;
+
-
    color: #fff;
+
-
    position: relative;
+
-
    z-index:10;
+
-
    /* height: 1000px; */
+
-
}
+
-
.banner-image-logo {
+
-
width: 727px;
+
-
height: 503px;
+
-
background: url('https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg') no-repeat center;
+
-
background-size: 727px 503px;
+
-
position: absolute;
+
-
/* top: 25%; */
+
-
left: 50%;
+
-
margin-left: -359px;
+
-
}
+
-
+
-
+
-
    /* =Slide1 */
+
-
#QOne {
+
-
padding: 20px 30px;
+
-
            font-size: 1.25em;
+
-
            background-color: #222222;
+
-
            color: White;
+
-
            width: 600px;
+
-
            text-align: left;
+
-
            position: fixed;
+
-
            top: -20px;
+
-
            left: 20px;
+
-
z-index:2;
+
-
        }
+
-
#QTwo {
+
-
            padding: 20px 30px;
+
-
            font-size: 1em;
+
-
            background: url('../img/GroupPhotoQuad.jpg') no-repeat center;
+
-
background-size:70%;
+
-
            text-align: center;
+
-
            position: fixed;
+
-
height:400px;
+
-
width:600px;
+
-
            top: 0px;
+
-
            right: 20px;
+
-
z-index:1;
+
-
}
+
-
#QThree {
+
-
          padding: 20px 30px;
+
-
            font-size: 1em;
+
-
            background: url('../img/UCLLogo.jpeg') no-repeat center;
+
-
background-size:100%;
+
-
            text-align: center;
+
-
            position: fixed;
+
-
height:300px;
+
-
width:600px;
+
-
            top: 390px;
+
-
            left: 70px;
+
-
z-index:1;
+
-
}
+
-
#QFour {
+
-
            padding: 20px 30px;
+
-
            font-size: 1.35em;
+
-
            background-color: #222222;
+
-
            color: White;
+
-
            width: 600px;
+
-
            text-align: right;
+
-
            position: fixed;
+
-
            top: 340px;
+
-
            right: 20px;
+
-
z-index:2;
+
-
}
+
-
/* =Slide 2 */
+
-
#Slide2People {
+
-
        background-size: auto auto;
+
-
        z-index:20;
+
-
    }
+
-
#Slide2People:before{
+
-
top: 30px;
+
-
width: 400px;
+
-
margin-left: -180px;
+
-
font-size: 2.5em;
+
-
}
+
-
        .Commander {
+
-
            padding-top: 470px;
+
-
        }
+
-
        .Commander h2 {
+
-
            font-size: 2.5em;
+
-
            line-height: 1.12em;
+
-
            text-align: left;
+
-
        }
+
-
        .ComImg  {
+
-
            width: 552px;
+
-
            height: 610px;
+
-
            top: 50px;
+
-
            background-size: 100%;
+
-
        }
+
-
        .PhotoPile .ComImg ,
+
-
        .Clipboard .ComImg  {
+
-
            background-size: 100%;
+
-
        }
+
-
.PhotoPile .ComImg:hover  {
+
-
-webkit-animation: animatedBackground 1s ease-out 1;
+
-
-moz-animation: animatedBackground 1s ease-out 1;
+
-
animation: animatedBackground 1s ease-out 1;
+
-
-webkit-animation-fill-mode: forwards;
+
-
animation-fill-mode: forwards;
+
-
}
+
-
+
-
.Clipboard .ComImg:hover {
+
-
-webkit-animation: animatedBackground 1s ease-out 1;
+
-
-moz-animation: animatedBackground 1s ease-out 1;
+
-
animation: animatedBackground 1s ease-out 1;
+
-
-webkit-animation-fill-mode: forwards;
+
-
animation-fill-mode: forwards;
+
-
}
+
-
#Polroid {
+
-
                /* left:0; */
+
-
                }
+
-
                #Clpbrd {
+
-
                background-size:85%;
+
-
                }
+
-
+
-
/* =Slide 3 */
+
-
#Slide3Science {
+
-
background-color: Grey;
+
-
z-index: 5;
+
-
        position: relative;
+
-
        height: 925px;
+
-
}
+
-
+
-
/* =Slide 4 */
+
-
#Slide4FAQ {
+
-
background-color: black;
+
-
z-index: 5;
+
-
        position: relative;
+
-
        height: 925px;
+
-
}
+
-
+
-
    /* =Footer */
+
-
}
+
-
@media only screen and (min-width: 1140px) {
+
<div id="Slide2People">
-
  #QOne {
+
                <div class="wrapper clearfix">
-
  top:120px;
+
-
  }
+
-
}
+
-
 
+
-
@-webkit-keyframes animatedBackground {
+
                    <div class="Commander PhotoPile">
-
0% {
+
                        <div class="ComImg" id="Polroid"></div>
-
-webkit-transform: scale(1, 1);
+
                        <h2>Team</h2>
-
-moz-transform: scale(1, 1);
+
                    </div>
-
-ms-transform: scale(1, 1);
+
-
-o-transform: scale(1, 1);
+
-
transform: scale(1, 1)
+
-
}
+
-
100% {
+
-
-webkit-transform: scale(1.1, 1.1);
+
-
-moz-transform: scale(1.1, 1.1);
+
-
-ms-transform: scale(1.1, 1.1);
+
-
-o-transform: scale(1.1, 1.1);
+
-
transform: scale(1.1, 1.1)
+
-
}
+
-
}
+
<!--
-
+
                    <div class="Commander Clipboard">
-
+
                        <div class="ComImg" id="Clpbrd"></div>
-
@-moz-keyframes animatedBackground {
+
                        <h2 style="float:right;">Safety</h2>
-
0% {
+
                    </div>
-
-webkit-transform: scale(1, 1);
+
-->
-
-moz-transform: scale(1, 1);
+
-
-ms-transform: scale(1, 1);
+
-
-o-transform: scale(1, 1);
+
-
transform: scale(1, 1)
+
-
}
+
-
100% {
+
-
-webkit-transform: scale(1.1, 1.1);
+
-
-moz-transform: scale(1.1, 1.1);
+
-
-ms-transform: scale(1.1, 1.1);
+
-
-o-transform: scale(1.1, 1.1);
+
-
transform: scale(1.1, 1.1)
+
-
}
+
-
}
+
                </div>
-
@keyframes animatedBackground {
+
</div>
-
0% {
+
-
-webkit-transform: scale(1, 1);
+
<div id="Slide3Science">
-
-moz-transform: scale(1, 1);
+
                <div class="wrapper clearfix">
-
-ms-transform: scale(1, 1);
+
                   
-
-o-transform: scale(1, 1);
+
-
transform: scale(1, 1)
+
-
}
+
-
100% {
+
-
-webkit-transform: scale(1.1, 1.1);
+
-
-moz-transform: scale(1.1, 1.1);
+
-
-ms-transform: scale(1.1, 1.1);
+
-
-o-transform: scale(1.1, 1.1);
+
-
transform: scale(1.1, 1.1)
+
-
}
+
-
}
+
                </div>
-
}
+
            </div>
 +
 +
<div id="Slide4FAQ">
 +
                <div class="wrapper clearfix">
 +
                   
 +
 
 +
                </div>
 +
            </div>
 +
 +
        </main>
 +
 
 +
 
 +
</div>
 +
</body>
 +
 
 +
 
 +
</html>
 +
{{:Team:UCL/Template:footerx}}

Revision as of 14:27, 26 August 2014

Goodbye Azodye UCL iGEM 2014

WHAT ARE WE DOING?

We are University College London's iGEM team. We are using Synthetic Biology to combat Dye 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

Team

Contact Us

University College London
Gower Street - London
WC1E 6BT
Biochemical Engineering Department
Phone: +44 (0)20 7679 2000
Email: ucligem2014@gmail.com

Follow Us

Retrieved from "http://2014.igem.org/Team:UCL/Homex"