Team:UCL/Homex

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* =Header Banner */
+
{{:Team:UCL/Template:headerx}}
-
.banner-image-background {
+
<html>
-
    background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center;
+
-
    background-size: 150%;
+
-
    /*background-color: #e7e7e7;*/
+
-
    position: relative;
+
-
    height: 700px;
+
-
z-index: 10;
+
-
}
+
-
+
-
.banner-image-overlay {
+
-
    background-color: rgba(0,0,0,0.5);
+
-
    width:100%;
+
-
    height:100%;
+
-
z-index: 11;
+
-
}
+
-
.banner-image-logo {
+
<!-- ============= CSS for Humans Main ================= -->
-
    top:150px;
+
<link rel="stylesheet" href="https://2014.igem.org/Team:UCL/Template:HomeMain.css?action=raw&ctype=text/css" type="text/css" />
-
    display: inline-block;
+
<script src="https://2014.igem.org/Team:UCL/Template:modernizr.js?action=raw&ctype=text/javascript"></script>
-
    vertical-align: middle;
+
-
    opacity:1;
+
-
}
+
-
/* =Profiles */
+
<!-- ============= BODY SLIDERS ======================== -->
-
main {
+
<body>
-
    z-index: 1;
+
<div id="skrollr-body">
-
    position: relative;
+
-
}
+
-
.slide {
+
    <!--[if lt IE 7]>
 +
        <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>
 +
    <![endif]-->
-
    color: #a7a0a2;
 
-
    font-weight: 200;
 
-
    font-size: 1em;
 
-
    font-family: 'Lato', Arial, sans-serif;
 
-
}
+
    <header class="banner-image-background">
 +
            <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>
 +
    </header>
-
.slide .tellmemore {
+
    <main>
-
    color: #a7a0a2;
+
<div id="slideabout" class="slide">
-
    font-family: 'Lato', Arial, sans-serif;
+
            <div class="wrapper clearfix">
-
    font-size:0.75em;
+
-
}
+
<div id="slideaboutheader" class="slideheader"
 +
data-anchor-target="#slideabout"
 +
data-bottom-top="transform[sqrt]:translateX(300%)"
 +
data-150-top="transform[sqrt]:translateX(60%)">
 +
 +
<h1><span>PROJECT</span></h1>
-
.slide .tellmemore p {
+
</div>
-
    text-align:left;
+
                <div id="slideaboutmore" class="slidemore"
 +
data-anchor-target="#slideabout"
 +
data-bottom-top="transform[sqrt]:translateX(-300%)"
 +
data-150-top="transform[sqrt]:translateX(70%)">
-
}
+
                    <a href="#" class="tellmemore">
 +
                        <img src="https://static.igem.org/mediawiki/2014/2/23/Team_Icons-05.png" alt="" />
 +
        <p>Tell me more</p>
 +
                    </a>
-
.slide h1 {
+
                </div>
-
    background-color:black;
+
-
    font-weight:bold;
+
-
    border-bottom:none;
+
-
    color: white;
+
-
}
+
-
.slide h2 {
+
                <div id="slideaboutcontent" class="slidecontent"
-
    font-weight:bold;
+
data-anchor-target="#slideabout"
-
    border-bottom:none;
+
data-bottom-top="opacity:0;"
-
    color: #a7a0a2;
+
data-150-top="opacity:1;">
-
}
+
-
.slide .tellmemore img {
+
    <h2>WHO ARE WE?</h2>
-
    height:50%;
+
    <p>We are University College London's iGEM 2014 team.</p>
-
    width:50%;
+
    <br/>
-
}
+
    <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>
-
.slide h1 {
+
                </div>
-
    padding-top:-10px;
+
-
    padding-left:30px;
+
-
    text-align:left;
+
-
}
+
-
.slide h1 span {
+
</div>
-
    top:-10px;
+
        </div>
-
}
+
-
.slide p, .slide h2 {
+
        <div id="slidescience" class="slide">
-
    text-align:right;
+
-
}
+
 +
            <div class="wrapper clearfix">
-
.slidemore {
+
<div id="slidescienceheader" class="slideheader"
-
    float:left;
+
data-anchor-target="#slidescience"
-
}
+
data-bottom-top="transform[sqrt]:translateX(300%)"
 +
data-200-top="transform[sqrt]:translateX(60%)">
-
#slideabout {
+
<h1><span>SCIENCE</span></h1>
-
    padding-left:200px;
+
-
    padding-right:200px;
+
-
    height:600px;
+
-
}
+
-
#slidescience {
+
</div>
-
    background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat;
+
-
    background-position-y:-400px;
+
-
    background-size:100%;
+
-
    height:500px;
+
-
z-index: 10;
+
-
}
+
-
#slidesciencecontent .experiments {
+
                <div id="slidesciencecontent" class="slidecontent"
-
    position:relative;
+
data-anchor-target="#slidescience"
-
    top:50px;
+
data-bottom-top="opacity:0;"
-
    left:250px;
+
data-150-top="opacity:1;">
-
}
+
-
#slidesciencecontent .results {
+
                    <div style="float:left;">
-
    position:relative;
+
-
    top:50px;
+
-
    left:-250px;
+
-
}
+
-
#slidesciencecontent .experiments p {
+
                        <a href="#" class="experiments">
-
    color:white;
+
                            <img src="https://static.igem.org/mediawiki/2014/c/c3/Team_Icons-01.png" alt="" />
-
    position:relative;
+
            <p>Experiments</p>
-
    left:-38px;
+
                        </a>
-
}
+
                    </div>
-
#slidesciencecontent .results p {
+
                    <div style="float:right;">
-
    color:white;
+
-
    position:relative;
+
-
    left:-60px;
+
-
}
+
-
#slidehumans {
+
                        <a href="#" class="results">
-
    padding-left:200px;
+
                            <img src="https://static.igem.org/mediawiki/2014/1/1d/Team_Icons-04.png" alt="" />
-
    padding-right:200px;
+
            <p>Results</p>
-
    padding-bottom:200px;
+
                        </a>    
-
}
+
-
.og-grid {
+
                    </div>
-
    list-style: none;
+
-
    padding: 20px 0;
+
-
    margin: 0 auto;
+
-
    text-align: center;
+
-
    width: 100%;
+
-
}
+
-
+
-
.og-grid li {
+
-
    display: inline-block;
+
-
    margin: 10px 5px 0 5px;
+
-
    vertical-align: top;
+
-
    height: 250px;
+
-
}
+
-
.og-grid li > a,
+
                </div>
-
.og-grid li > a img {
+
-
    border: none;
+
-
    outline: none;
+
-
    display: block;
+
-
    position: relative;
+
-
}
+
-
.og-grid li.og-expanded > a::after {
+
</div>
-
    top: auto;
+
        </div>
-
    border: solid transparent;
+
-
    content: " ";
+
-
    height: 0;
+
-
    width: 0;
+
-
    position: absolute;
+
-
    pointer-events: none;
+
-
    border-bottom-color: #ddd;
+
-
    border-width: 15px;
+
-
    left: 50%;
+
-
    margin: -20px 0 0 -15px;
+
-
}
+
-
.og-expander {
+
<div id="slidehumans" class="slide">
-
    position: absolute;
+
            <div class="wrapper clearfix">
-
    background: #ddd;
+
-
    top: auto;
+
-
    left: 0;
+
-
    width: 100%;
+
-
    margin-top: 10px;
+
-
    text-align: left;
+
-
    height: 0;
+
-
    overflow: hidden;
+
-
}
+
-
+
-
.og-expander-inner {
+
-
    padding: 50px 30px;
+
-
    height: 100%;
+
-
}
+
-
.og-close {
+
<div id="slidehumansheader" class="slideheader"
-
    position: absolute;
+
data-anchor-target="#slidehumans"
-
    width: 40px;
+
data-bottom-top="transform[sqrt]:translateX(300%)"
-
    height: 40px;
+
data-200-top="transform[sqrt]:translateX(60%)">
-
    top: 20px;
+
-
    right: 20px;
+
<h1><span>HUMANS</span></h1>
-
    cursor: pointer;
+
-
}
+
-
+
-
.og-close::before,
+
-
.og-close::after {
+
-
    content: '';
+
-
    position: absolute;
+
-
    width: 100%;
+
-
    top: 50%;
+
-
    height: 1px;
+
-
    background: #888;
+
-
    transform: rotate(45deg);
+
-
}
+
-
+
-
.og-close::after {
+
-
    transform: rotate(-45deg);
+
-
}
+
-
+
-
.og-close:hover::before,
+
-
.og-close:hover::after {
+
-
    background: #333;
+
-
}
+
-
.og-fullimg
+
                </div>
-
{
+
-
    width: 50%;
+
-
    float: left;
+
-
    height: 100%;
+
-
    overflow: hidden;
+
-
    position: relative;
+
-
}
+
-
.og-details {
+
                <div id="slidehumanscontent" class="slidecontent">
-
    width: 50%;
+
-
    float: left;
+
-
    height: 100%;
+
-
    overflow: hidden;
+
-
    position: relative;
+
-
}
+
-
+
-
.og-fullimg {
+
-
    text-align: center;
+
-
}
+
-
+
-
.og-fullimg img {
+
-
    display: inline-block;
+
-
    max-height: 100%;
+
-
    max-width: 100%;
+
-
}
+
-
.og-details h3 {
+
                    <ul id="og-grid" class="og-grid">
-
    font-weight: 300;
+
    <li>
-
    font-size: 52px;
+
    <a href="https://2014.igem.org/" data-largesrc="/wiki/images/3/37/DanielDLTPhotoEd.png" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
-
    padding: 40px 0 10px;
+
    <img src="/wiki/images/3/37/DanielDLTPhotoEd.png" alt="img01" height="300px" width="225px"/>
-
    margin-bottom: 10px;
+
    </a>
-
}
+
                            <div class="og-expander">
-
+
                                <div class="og-expander-inner">
-
.og-details p {
+
                                    <span class="og-close"></span>
-
    font-weight: 400;
+
                                    <div class="og-fullimg">
-
    font-size: 16px;
+
                                        <div class="og-loading"></div>
-
    line-height: 22px;
+
                                        <img src="images/2.jpg">
-
    color: #999;
+
                                    </div>
-
    text-align:left;
+
                                    <div class="og-details">
-
}
+
                                        <h3>Veggies sunt bona vobis</h3>
-
+
                                        <p>Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.</p>
-
.og-details a {
+
                                        <a href="http://cargocollective.com/jaimemartinez/">Visit website</a>
-
    font-weight: 700;
+
                                    </div>
-
    font-size: 16px;
+
                                </div>
-
    color: #333;
+
                            </div>
-
    text-transform: uppercase;
+
    </li>
-
    letter-spacing: 2px;
+
    <li>
-
    padding: 10px 20px;
+
    <a href="https://2014.igem.org/" data-largesrc="/wiki/images/6/6f/MauriceBPhotoEd.pngg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
-
    border: 3px solid #333;
+
    <img src="/wiki/images/6/6f/MauriceBPhotoEd.png" alt="img01" height="300px" width="225px"/>
-
    display: inline-block;
+
    </a>
-
    margin: 30px 0 0;
+
                            <div class="og-expander">
-
    outline: none;
+
                                <div class="og-expander-inner">
-
}
+
                                    <span class="og-close"></span>
-
+
                                    <div class="og-fullimg">
-
.og-details a::before {
+
                                        <div class="og-loading"></div>
-
    content: '\2192';
+
                                        <img src="images/2.jpg">
-
    display: inline-block;
+
                                    </div>
-
    margin-right: 10px;
+
                                    <div class="og-details">
-
}
+
                                        <h3>Veggies sunt bona vobis</h3>
-
+
                                        <p>Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.</p>
-
.og-details a:hover {
+
                                        <a href="http://cargocollective.com/jaimemartinez/">Visit website</a>
-
    border-color: #999;
+
                                    </div>
-
    color: #999;
+
                                </div>
-
}
+
                            </div>
 +
    </li>
 +
    </ul>
-
.og-loading {
+
</div>
-
    width: 20px;
+
-
    height: 20px;
+
-
    border-radius: 50%;
+
-
    background: #ddd;
+
-
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
+
-
    position: absolute;
+
-
    top: 50%;
+
-
    left: 50%;
+
-
    margin: -25px 0 0 -25px;
+
-
    animation: loader 0.5s infinite ease-in-out both;
+
-
}
+
-
+
-
@keyframes loader {
+
-
    0% { background: #ddd; }
+
-
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
+
-
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+
-
}
+
-
@media only screen and (min-width: 10000px) {
+
</div>
-
 
+
        </div>
-
  /* =Header Banner */
+
 +
    </main>
-
    .banner-image-background {
+
</div>
-
    background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center;
+
-
    background-size:100%;
+
-
    position: relative;
+
-
    z-index:10;
+
-
    /* height: 1000px; */
+
-
}
+
-
    .banner-image-overlay {
+
<script src="https://2014.igem.org/Team:UCL/Template:grid.js?action=raw&ctype=text/javascript"></script>
-
        background-color:rgba(0,0,0,0.5);
+
<script>
-
        width:100%;
+
    $(function () {
-
        height:100%;
+
         Grid.init();
-
         z-index:11;
+
     });
-
     }
+
</script>
-
.banner-image-logo {
+
</body>
-
width: 727px;
+
 
-
height: 503px;
+
 
-
background: url('https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg') no-repeat center;
+
</html>
-
background-size: 727px 503px;
+
{{:Team:UCL/Template:footerx}}
-
position: absolute;
+
-
/* top: 25%; */
+
-
left: 50%;
+
-
margin-left: -359px;
+
-
        z-index:12;
+
-
}
+
-
+
-
}
+

Revision as of 11:55, 2 September 2014

Goodbye Azodye UCL iGEM 2014

PROJECT

WHO ARE WE?

We are University College London's iGEM 2014 team.


WHAT ARE WE DOING?

We are using Synthetic Biology to combat AZO-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

HUMANS

  • img01

    Veggies sunt bona vobis

    Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.

    Visit website
  • img01

    Veggies sunt bona vobis

    Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.

    Visit website

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"