Team:UCL/Homex

From 2014.igem.org

(Difference between revisions)
 
(263 intermediate revisions not shown)
Line 1: Line 1:
-
/* =Header Banner */
+
<html lang="en-US">
-
.banner-image-background {
+
     <head>
-
     background: url('https://static.igem.org/mediawiki/2014/8/86/UCLfabricSampleCSM.jpg') no-repeat center;
+
        <meta charset="UTF-8">
-
    background-size: 150%;
+
        <meta http-equiv="refresh" content="1;url=https://2014.igem.org/Team:UCL">
-
    background-color: #e7e7e7;
+
         <script type="text/javascript">
-
    position: relative;
+
            window.location.href = "https://2014.igem.org/Team:UCL"
-
    height: 700px;
+
         </script>
-
z-index: 10;
+
         <title>Page Redirection</title>
-
}
+
     </head>
-
    .banner-image-logo{
+
    <body>
-
        width: 363.5px;
+
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
-
        height: 251.5px;
+
        If you are not redirected automatically, follow the <a href='https://2014.igem.org/Team:UCL'>link to UCL iGEM</a>
-
        background: url('https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg') no-repeat top right;
+
     </body>
-
         background-size: 300px 200px;
+
</html>
-
        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 */
+
-
#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)
+
-
}
+
-
 
+
-
}
+
-
}
+

Latest revision as of 19:52, 16 October 2014

Page Redirection If you are not redirected automatically, follow the link to UCL iGEM