Team:UCL/Homex

From 2014.igem.org

Revision as of 14:27, 26 August 2014 by Adamdenyer (Talk | contribs)

/* =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%;
   }

.slide { }

.slide h2 {

   font-weight:bold;
   border-bottom:none;

}

.slide p, .slide h2 {

   text-align:center;

}

  1. 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) }

} }