"
Team:UCL/Homex
From 2014.igem.org
/* =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 */
- 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 { }
.slide h2 {
font-weight:bold; border-bottom:none;
}
.slide p, .slide h2 {
text-align:center;
}
- slide-about {
padding-top:150px; padding-left:100px; padding-right:100px; height:500px;
}
@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: 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) {
#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) }
} }
