Team:UCL/Homex

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:UCL/Template:headerx}}
+
/* =Header Banner */
-
<html>
+
.banner-image-background {
-
<!-- ============= CSS for Humans Main ================= -->
+
    background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
-
<link rel="stylesheet" href="https://2014.igem.org/Team:UCL/Template:HomeMain.css?action=raw&ctype=text/css" type="text/css" />
+
    background-size: 150%;
 +
    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;
 +
}
-
<!-- ============= BODY SLIDERS ======================== -->
+
/* =Slide 1 Moving Text */
-
<body>
+
    #Slide1 {
-
<div id="skrollr-body">
+
        background: blue;
-
         <!--[if lt IE 7]>
+
        background-attachment: fixed;
-
            <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>
+
        color: #fff;
-
         <![endif]-->
+
        position: relative;
 +
        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">
+
 
-
                <div class="wrapper clearfix">
+
  /* =Header Banner */
-
                    <div class="Commander PhotoPile">
+
    .banner-image-background {
-
                        <div class="ComImg" id="Polroid"></div>
+
    background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
-
                        <h2>Team</h2>
+
    background-size:100%;
-
                    </div>
+
    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: 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 */
 +
}
-
                    <div class="Commander Clipboard">
+
@media only screen and (min-width: 1140px) {
-
                        <div class="ComImg" id="Clpbrd"></div>
+
  #QOne {
-
                        <h2 style="float:right;">Safety</h2>
+
  top:120px;
-
                    </div>
+
  }
 +
}
 +
 
-
                </div>
+
@-webkit-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">
+
@-moz-keyframes animatedBackground {
-
                <div class="wrapper clearfix">
+
0% {
-
                   
+
-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>
+
}
-
            </div>
+
@keyframes animatedBackground {
-
+
0% {
-
        </main>
+
-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>
+
}
-
</body>
+
-
 
+
-
 
+
-
</html>
+
-
{{:Team:UCL/Template:footerx}}
+

Revision as of 13:39, 26 August 2014

/* =Header Banner */ .banner-image-background { 

   background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
   background-size: 150%;
   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 */ 

   #Slide1 {
       background: blue;
       background-attachment: fixed;
       color: #fff;
       position: relative;
       background-size: auto 45px;

height: 3500px; 

   }

/* =Slide 2 */

  1. 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%;
   }


@media only screen and (min-width: 768px) { 

  /* =Header Banner */

   .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: 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) { 

 #QOne {
 top:120px;
 }

}


@-webkit-keyframes animatedBackground { 0% { -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) }

}


@-moz-keyframes animatedBackground { 0% { -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) }

} @keyframes animatedBackground { 0% { -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) }

} }

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