Team:UCL/Template:HomeMain.css

From 2014.igem.org

(Difference between revisions)
Line 32: Line 32:
#Slide1 {
#Slide1 {
     background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat center;
     background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat center;
-
     background-attachment: fixed;
+
     width:100%;
-
     color: #fff;
+
     height:100%;
-
     position: relative;
+
     height: 700px;
-
    background-size: auto 45px;
+
z-index: 10;
-
height: 3500px;
+
}
}

Revision as of 16:24, 26 August 2014

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

   background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center;
   background-size: 150%;
   /*background-color: #e7e7e7;*/
   position: relative;
   height: 700px;

z-index: 10; }

.banner-image-overlay { 

   background-color: rgba(0,0,0,0.5);
   width:100%;
   height:100%;

z-index: 11; }

.banner-image-logo { 

   top:150px;
   display: inline-block;
   vertical-align: middle;
   opacity:1;

}

/* =Profiles */ main { 

   z-index: 1;
   position: relative;

}

/* =Slide 1 Moving Text */

  1. Slide1 { 
   background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat center;
   width:100%;
   height:100%;
   height: 700px;

z-index: 10; }

/* =Slide 2 */

  1. Slide2People { 
       background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat 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 { 

   color: #a7a0a2;
   font-weight: 200;
   font-size: 1em;
   font-family: 'Lato', Arial, sans-serif;

}

.slide h2 { 

   font-weight:bold;
   border-bottom:none;
   color: #a7a0a2;

}

.slide p, .slide h2 { 

   text-align:center;

}

  1. slide-about { 
   padding-top:120px;
   padding-left:200px;
   padding-right:200px;
   height:600px;

}


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

  /* =Header Banner */

   .banner-image-background {
   background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center;
   background-size:100%;
   position: relative;
   z-index:10;
   /* height: 1000px; */

} 

   .banner-image-overlay {
       background-color:rgba(0,0,0,0.5);
       width:100%;
       height:100%;
       z-index:11;
   }

.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; 

       z-index:12;

} 


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

} }

Retrieved from "http://2014.igem.org/Team:UCL/Template:HomeMain.css"