Team:UCL/Homex

From 2014.igem.org

(Difference between revisions)
(Undo revision 88334 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%;
 
-
    }
 
 +
<header class="banner-image-background">
 +
        <div class="banner-image-logo">
 +
        </div>
 +
</header>
 +
        <main>
 +
            <div id="Slide1">
 +
                <div class="wrapper clearfix">
 +
<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>
-
@media only screen and (min-width: 768px) {
+
-
 
+
<div id="Slide2People">
-
  /* =Header Banner */
+
                <div class="wrapper clearfix">
-
    .banner-image-background {
+
                    <div class="Commander PhotoPile">
-
    background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
+
                        <div class="ComImg" id="Polroid"></div>
-
    background-size:100%;
+
                        <h2>Team</h2>
-
    color: #fff;
+
                    </div>
-
    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: 276px;
+
-
            height: 305px;
+
-
            top: 100px;
+
-
            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 class="Commander Clipboard">
-
  #QOne {
+
                        <div class="ComImg" id="Clpbrd"></div>
-
  top:120px;
+
                        <h2 style="float:right;">Safety</h2>
-
  }
+
                    </div>
-
}
+
-
 
+
-
@-webkit-keyframes animatedBackground {
+
                </div>
-
0% {
+
</div>
-
-webkit-transform: scale(1, 1);
+
-
-moz-transform: scale(1, 1);
+
<div id="Slide3Science">
-
-ms-transform: scale(1, 1);
+
                <div class="wrapper clearfix">
-
-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>
-
+
-
@-moz-keyframes animatedBackground {
+
<div id="Slide4FAQ">
-
0% {
+
                <div class="wrapper clearfix">
-
-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);
+
        </main>
-
-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>
 +
</body>
 +
 
 +
 
 +
</html>
 +
{{:Team:UCL/Template:footerx}}

Revision as of 13:40, 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

Safety

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"