Difference between revisions of "Team:ZJU-China/template/foot"

Line 1: Line 1:
−
<html>
+
/* global footer
−
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/globe/ZJU-gl-footset?action=raw&ctype=text/css" />
+
  ========================================================================== */
  
  
−
<div id="gl-footer" class="cf" style="max-width:1440px">
+
#gl-footer {
−
+
    display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
−
     <div id="gl-footer-menu" class="cf">
+
    width: 100%;
−
<div class="row">
+
     background-image:url(https://static.igem.org/mediawiki/2015/b/bf/ZJU-wood-white.png);
−
      <div class="gl-col footIDT"></div>
+
    color: #666;
−
  <div class="gl-col footSynenergene"></div>
+
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
−
      <div class="gl-col footZJU1"></div>
+
    font-weight: 400;
−
      <div class="gl-col footZJU2"></div>
+
border:2px solid #ddd;
−
</div>
+
border-radius:2em;
−
<div class="row">
+
-moz-box-shadow: 10px 10px 5px #888888;
−
      <div class="gl-col footZJU3"></div>
+
box-shadow: 0px 0px 2em #888888;
−
      <div class="gl-col footZJU4"></div>
+
text-align:center;
−
      <div class="gl-col footZJU5"></div>
+
    margin-top: 10px;
−
      <div class="gl-col footZJU6"></div>
+
      
−
     </div>
+
}
−
</div>
+
−
+
  
−
    <div id="gl-footer-copyright" class="cf">
+
#gl-footer a:link,
−
        <div class="gl-col1 cf">
+
#gl-footer a:visited {
−
            <span>© 2015 ZJU-IGEM TERMINATE.</span>
+
    color: #666;
−
        </div>
+
     text-decoration: none;
−
+
}
−
+
−
        <ul class="gl-col2 cf">
+
−
            <li><a href="http://www.igem.org/Main_Page">IGEM</a></li>
+
−
            <li><a href="http://www.zju.edu.cn">Zhejiang University</a></li>         
+
−
        </ul>
+
−
     </div>
+
−
+
−
</div>
+
  
−
</html>
+
#gl-footer a:hover,
 +
#gl-footer a:active {
 +
    color: #c02942;
 +
}
 +
 
 +
/* menu ============================= */
 +
 
 +
#gl-footer-menu {
 +
    width: 90%;   
 +
    margin-left:auto;
 +
margin-right:auto;
 +
}
 +
 
 +
#gl-footer-menu .gl-col {
 +
    float: left;
 +
    width: 20%;
 +
}
 +
 
 +
#gl-footer-menu .gl-col-1 {
 +
    margin-left: 0%;
 +
}
 +
 
 +
#gl-footer-menu .gl-col-5 {
 +
    margin-right: 0%;
 +
}
 +
 
 +
#gl-footer-menu ul {
 +
    margin: 0px 0px;
 +
text-align:center;
 +
}
 +
 
 +
#gl-footer-menu  {
 +
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
 +
    list-style: none;
 +
margin-left:12%;
 +
height:80px;
 +
}
 +
 
 +
 
 +
/* set======================== */
 +
#gl-footer-menu .footIDT,
 +
#gl-footer-menu .footSynenergene,
 +
#gl-footer-menu .footZJU1,
 +
#gl-footer-menu .footZJU2,
 +
#gl-footer-menu .footZJU3,
 +
#gl-footer-menu .footZJU4,
 +
#gl-footer-menu .footZJU5,
 +
#gl-footer-menu .footZJU6,
 +
#gl-footer-menu .footZJU7,
 +
#gl-footer-menu .footZJU8
 +
{
 +
float: left;
 +
height:50px;
 +
background-repeat: no-repeat;
 +
background-position:left;
 +
cursor:pointer;
 +
z-index:9999;
 +
background-size:140px 50px;
 +
transition-property:all;
 +
transition-duration:0.3s;
 +
transition-timing-function:linear;
 +
/* Firefox 4 */
 +
-moz-transition-property:all;
 +
-moz-transition-duration:0.3s;
 +
-moz-transition-timing-function:linear;
 +
/* Safari and Chrome */
 +
-webkit-transition-property:all;
 +
-webkit-transition-duration:0.3s;
 +
-webkit-transition-timing-function:linear;
 +
/* Opera */
 +
-o-transition-property:all;
 +
-o-transition-duration:0.3s;
 +
-o-transition-timing-function:linear;
 +
 
 +
}
 +
 
 +
#gl-footer-menu .footIDT{
 +
background-image:url(https://static.igem.org/mediawiki/2015/2/2f/IDT-Logo-0.png);
 +
}
 +
 
 +
#gl-footer-menu .footIDT:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/0/0f/IDT-Logo-1.png);
 +
}
 +
 
 +
#gl-footer-menu .footSynenergene{
 +
 
 +
background-image:url(https://static.igem.org/mediawiki/2015/2/29/Synenergene-logo-0.png);
 +
}
 +
#gl-footer-menu .footSynenergene:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/7/77/Synenergene-logo-1.png);
 +
}
 +
 
 +
#gl-footer-menu .footZJU1{
 +
background-image:url(https://static.igem.org/mediawiki/2015/6/6c/ZJU-logo-0.gif);
 +
}
 +
#gl-footer-menu .footZJU1:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/1/19/ZJU-logo-1.gif);
 +
}
 +
 
 +
 
 +
#gl-footer-menu .footZJU2{
 +
background-size:auto 50px;
 +
background-image:url(https://static.igem.org/mediawiki/2015/e/e1/ZJU-jijinghui-0.png);
 +
}
 +
#gl-footer-menu .footZJU2:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/0/05/ZJU-jijinghui.png);
 +
}
 +
 
 +
#gl-footer-menu .footZJU3{
 +
background-image:url(https://static.igem.org/mediawiki/2015/f/f6/ZJU-yi-0.png);
 +
}
 +
#gl-footer-menu .footZJU3:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/4/40/ZJU-yi-1.png);
 +
}
 +
 
 +
#gl-footer-menu .footZJU4{
 +
background-size:auto 50px;
 +
background-image:url(https://static.igem.org/mediawiki/2015/0/08/ZJU-LI-0.gif);
 +
}
 +
#gl-footer-menu .footZJU4:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/2/2d/ZJU-LI-1.gif);
 +
}
 +
 
 +
#gl-footer-menu .footZJU5{
 +
background-size:180px 40px;
 +
background-image:url(https://static.igem.org/mediawiki/2015/a/a8/ZJU-BKS-10.png);
 +
}
 +
#gl-footer-menu .footZJU5:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/4/44/ZJU-BKS-1.png);
 +
}
 +
 
 +
#gl-footer-menu .footZJU6{
 +
background-size:180px 50px;
 +
background-image:url(https://static.igem.org/mediawiki/2015/3/36/ZJU-SKSY-0.gif);
 +
}
 +
#gl-footer-menu .footZJU6:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/b/b8/ZJU-SKSY-1.gif);
 +
}
 +
 
 +
#gl-footer-menu .footZJU7{
 +
background-image:url(https://static.igem.org/mediawiki/2015/6/65/ZJU-SKY-0.gif);
 +
}
 +
#gl-footer-menu .footZJU7:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/d/df/ZJU-SKY-1.gif);
 +
}
 +
 
 +
#gl-footer-menu .footZJU8{
 +
background-image:url(https://static.igem.org/mediawiki/2015/4/44/ZJU-YXY-0.gif);
 +
}
 +
#gl-footer-menu .footZJU8:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/0/08/ZJU-YXY-1.gif);
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* copyright ======================== */
 +
 
 +
#gl-footer-copyright {
 +
    width: 90%;
 +
    margin: 0 auto;
 +
    padding: 8px 0 0px 0;
 +
    border-top: 1px solid #ccc;
 +
}
 +
 
 +
#gl-footer-copyright .gl-col1 {
 +
    display: block;
 +
    float: left;
 +
    margin: 0 0 6px 24px;
 +
    font-size: 12px;
 +
    line-height: 14px;
 +
}
 +
 
 +
#gl-footer-copyright .gl-col1 span {
 +
    display: block;
 +
    float: left;
 +
    padding: 4px 0;
 +
}
 +
 
 +
 
 +
#gl-footer-copyright .gl-col2 {
 +
    display: block;
 +
    float: right;
 +
    margin: 0 24px 6px 0;
 +
}
 +
 
 +
#gl-footer-copyright .gl-col2 li {
 +
    display: block;
 +
    float: left;
 +
    color: #666;
 +
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; /* m8 override */
 +
    font-size: 12px;
 +
    line-height: 14px;
 +
    font-weight: 400; /* m8 override */
 +
    list-style: none;
 +
    margin:0;
 +
}
 +
 
 +
#gl-footer-copyright .gl-col2 a {
 +
    display: block;
 +
    float: left;
 +
    padding: 4px 0;
 +
}
 +
 
 +
#gl-footer-copyright .gl-col2 li:after {
 +
    display: block;
 +
    float: left;
 +
    content: '|';
 +
    margin: 4px 10px;
 +
}
 +
 
 +
#gl-footer-copyright .gl-col2 li.gl-last:after {
 +
    content: '';
 +
    margin: 0;
 +
}

Revision as of 04:38, 12 September 2015

/* global footer 

  ========================================================================== */


  1. gl-footer {
   display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
   width: 100%;
   background-image:url(ZJU-wood-white.png);
   color: #666;
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   font-weight: 400;

border:2px solid #ddd; border-radius:2em; -moz-box-shadow: 10px 10px 5px #888888; box-shadow: 0px 0px 2em #888888; text-align:center; 

   margin-top: 10px;

}

  1. gl-footer a:link,
  2. gl-footer a:visited {
   color: #666;
   text-decoration: none;

}

  1. gl-footer a:hover,
  2. gl-footer a:active {
   color: #c02942;

}

/* menu ============================= */

  1. gl-footer-menu {
   width: 90%;     
   margin-left:auto;

margin-right:auto; }

  1. gl-footer-menu .gl-col {
   float: left;
   width: 20%;

}

  1. gl-footer-menu .gl-col-1 {
   margin-left: 0%;

}

  1. gl-footer-menu .gl-col-5 {
   margin-right: 0%;

}

  1. gl-footer-menu ul {
   margin: 0px 0px;

text-align:center; }

  1. gl-footer-menu {
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
   list-style: none;

margin-left:12%; height:80px; }


/* set======================== */

  1. gl-footer-menu .footIDT,
  2. gl-footer-menu .footSynenergene,
  3. gl-footer-menu .footZJU1,
  4. gl-footer-menu .footZJU2,
  5. gl-footer-menu .footZJU3,
  6. gl-footer-menu .footZJU4,
  7. gl-footer-menu .footZJU5,
  8. gl-footer-menu .footZJU6,
  9. gl-footer-menu .footZJU7,
  10. gl-footer-menu .footZJU8

{ float: left; height:50px; background-repeat: no-repeat; background-position:left; cursor:pointer; z-index:9999; background-size:140px 50px; transition-property:all; transition-duration:0.3s; transition-timing-function:linear; /* Firefox 4 */ -moz-transition-property:all; -moz-transition-duration:0.3s; -moz-transition-timing-function:linear; /* Safari and Chrome */ -webkit-transition-property:all; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:linear; /* Opera */ -o-transition-property:all; -o-transition-duration:0.3s; -o-transition-timing-function:linear;

}

  1. gl-footer-menu .footIDT{

background-image:url(IDT-Logo-0.png); }

  1. gl-footer-menu .footIDT:hover{

background-image:url(IDT-Logo-1.png); }

  1. gl-footer-menu .footSynenergene{

background-image:url(Synenergene-logo-0.png); }

  1. gl-footer-menu .footSynenergene:hover{

background-image:url(Synenergene-logo-1.png); }

  1. gl-footer-menu .footZJU1{

background-image:url(ZJU-logo-0.gif); }

  1. gl-footer-menu .footZJU1:hover{

background-image:url(ZJU-logo-1.gif); }


  1. gl-footer-menu .footZJU2{

background-size:auto 50px; background-image:url(ZJU-jijinghui-0.png); }

  1. gl-footer-menu .footZJU2:hover{

background-image:url(ZJU-jijinghui.png); }

  1. gl-footer-menu .footZJU3{

background-image:url(ZJU-yi-0.png); }

  1. gl-footer-menu .footZJU3:hover{

background-image:url(ZJU-yi-1.png); }

  1. gl-footer-menu .footZJU4{

background-size:auto 50px; background-image:url(ZJU-LI-0.gif); }

  1. gl-footer-menu .footZJU4:hover{

background-image:url(ZJU-LI-1.gif); }

  1. gl-footer-menu .footZJU5{

background-size:180px 40px; background-image:url(ZJU-BKS-10.png); }

  1. gl-footer-menu .footZJU5:hover{

background-image:url(ZJU-BKS-1.png); }

  1. gl-footer-menu .footZJU6{

background-size:180px 50px; background-image:url(ZJU-SKSY-0.gif); }

  1. gl-footer-menu .footZJU6:hover{

background-image:url(ZJU-SKSY-1.gif); }

  1. gl-footer-menu .footZJU7{

background-image:url(ZJU-SKY-0.gif); }

  1. gl-footer-menu .footZJU7:hover{

background-image:url(ZJU-SKY-1.gif); }

  1. gl-footer-menu .footZJU8{

background-image:url(ZJU-YXY-0.gif); }

  1. gl-footer-menu .footZJU8:hover{

background-image:url(ZJU-YXY-1.gif); }




/* copyright ======================== */

  1. gl-footer-copyright {
   width: 90%;
   margin: 0 auto;
   padding: 8px 0 0px 0;
   border-top: 1px solid #ccc;

}

  1. gl-footer-copyright .gl-col1 {
   display: block;
   float: left;
   margin: 0 0 6px 24px;
   font-size: 12px;
   line-height: 14px;

}

  1. gl-footer-copyright .gl-col1 span {
   display: block;
   float: left;
   padding: 4px 0;

}


  1. gl-footer-copyright .gl-col2 {
   display: block;
   float: right;
   margin: 0 24px 6px 0;

}

  1. gl-footer-copyright .gl-col2 li {
   display: block;
   float: left;
   color: #666;
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; /* m8 override */
   font-size: 12px;
   line-height: 14px;
   font-weight: 400; /* m8 override */
   list-style: none;
   margin:0;

}

  1. gl-footer-copyright .gl-col2 a {
   display: block;
   float: left;
   padding: 4px 0;

}

  1. gl-footer-copyright .gl-col2 li:after {
   display: block;
   float: left;
   content: '|';
   margin: 4px 10px;

}

  1. gl-footer-copyright .gl-col2 li.gl-last:after {
   content: ;
   margin: 0;

}