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 footZJU6"></div>
+
     font-weight: 400;
−
  <div class="gl-col footZJU4"></div>
+
border:2px solid #ddd;
−
  <div class="gl-col footZJU7"></div>
+
border-radius:2em;
−
</div>
+
-moz-box-shadow: 10px 10px 5px #888888;
−
<div class="row">
+
box-shadow: 0px 0px 2em #888888;
−
     
+
text-align:center;
−
      <div class="gl-col footZJU2"></div>
+
    margin-top: 10px;
−
     
+
      
−
  <div class="gl-col footZJU12"></div>
+
}
−
     </div>
+
−
<div class="row">
+
−
  <div class="gl-col footZJU3"></div>
+
−
      <div class="gl-col footZJU5"></div>
+
−
  <div class="gl-col footZJU9"></div>
+
−
     
+
−
  <div class="gl-col footZJU8"></div>
+
−
  <div class="gl-col footZJU11"></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;
 +
font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
 +
    list-style: none;
 +
}
 +
 
 +
#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 .row{   
 +
height:60px;
 +
}
 +
 
 +
/* 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,
 +
#gl-footer-menu .footZJU9,
 +
#gl-footer-menu .footZJU10,
 +
#gl-footer-menu .footZJU11,
 +
#gl-footer-menu .footZJU12
 +
{
 +
    float: left;
 +
    height: 50px;
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    cursor: pointer;
 +
    z-index: 9999;
 +
    background-size: auto 50px;
 +
    transition-property: all;
 +
    transition-duration: 0.3s;
 +
    transition-timing-function: linear;
 +
    -moz-transition-property: all;
 +
    -moz-transition-duration: 0.3s;
 +
    -moz-transition-timing-function: linear;
 +
    -webkit-transition-property: all;
 +
    -webkit-transition-duration: 0.3s;
 +
    -webkit-transition-timing-function: linear;
 +
    -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:200px 40px;
 +
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-size: 200px 40px;
 +
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-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-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-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/9/99/ZJU-PHY-0.png);
 +
}
 +
#gl-footer-menu .footZJU8:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/f/f2/ZJU-PHY-1.png);
 +
}
 +
 
 +
 
 +
#gl-footer-menu .footZJU9{
 +
background-size: 230px 40px;
 +
background-image:url(https://static.igem.org/mediawiki/2015/1/19/ZJU-Optical-0.png);
 +
}
 +
#gl-footer-menu .footZJU9:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/c/c3/ZJU-Optical.png);
 +
}
 +
 
 +
 
 +
#gl-footer-menu .footZJU10{
 +
background-image:url(https://static.igem.org/mediawiki/2015/f/f3/ZJU-STM-0.png);
 +
}
 +
#gl-footer-menu .footZJU10:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/8/83/ZJU-STM-1.png);
 +
}
 +
 
 +
 
 +
#gl-footer-menu .footZJU11{
 +
background-image:url(https://static.igem.org/mediawiki/2015/8/87/ZJU-dianqi-0.png);
 +
}
 +
#gl-footer-menu .footZJU11:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/f/f4/ZJU-dianqi-1.png);
 +
}
 +
 
 +
#gl-footer-menu .footZJU12{
 +
background-size: 230px 40px;
 +
background-image:url(https://static.igem.org/mediawiki/2015/3/39/ZJU-LI-2.png);
 +
}
 +
#gl-footer-menu .footZJU12:hover{
 +
background-image:url(https://static.igem.org/mediawiki/2015/7/7c/ZJU-LI-1.png);
 +
}
 +
 
 +
/* 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 05:25, 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; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 

   list-style: none;

}

  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 .row{

height:60px; }

/* 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,
  11. gl-footer-menu .footZJU9,
  12. gl-footer-menu .footZJU10,
  13. gl-footer-menu .footZJU11,
  14. gl-footer-menu .footZJU12

{ 

   float: left;
   height: 50px;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
   z-index: 9999;
   background-size: auto 50px;
   transition-property: all;
   transition-duration: 0.3s;
   transition-timing-function: linear;
   -moz-transition-property: all;
   -moz-transition-duration: 0.3s;
   -moz-transition-timing-function: linear;
   -webkit-transition-property: all;
   -webkit-transition-duration: 0.3s;
   -webkit-transition-timing-function: linear;
   -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:200px 40px; 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-size: 200px 40px; 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-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-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-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-PHY-0.png); }

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

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


  1. gl-footer-menu .footZJU9{

background-size: 230px 40px; background-image:url(ZJU-Optical-0.png); }

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

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


  1. gl-footer-menu .footZJU10{

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

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

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


  1. gl-footer-menu .footZJU11{

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

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

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

  1. gl-footer-menu .footZJU12{

background-size: 230px 40px; background-image:url(ZJU-LI-2.png); }

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

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

/* 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;

}