|
|
(256 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%; | + | |
- | } | + | |
- | | + | |
- | .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)
| + | |
- | }
| + | |
- | | + | |
- | }
| + | |
- | }
| + | |