Team:Imperial College/Templates/Banner

From 2013.igem.org

(Difference between revisions)
 
(19 intermediate revisions not shown)
Line 1: Line 1:
-
  <a name="top"></a>
+
<html>
 +
<style type="text/css">
 +
    #imperial-banner {
 +
        position: relative; /* this is to allow positioning of elements within */
 +
        text-align: right;
 +
        height: 100px;
 +
        margin: 0 15px 1em 15px;
 +
        line-height: 100px;
 +
    }
-
<div id="imperial-banner">
+
    #imperial-igem-banner {
-
  <div id='imperial-igem-banner'>
+
        position: absolute;
-
<a href='https://2013.igem.org/Team:Imperial_College'>
+
        left: 0;
-
  <img src="https://static.igem.org/mediawiki/2013/6/67/Imperiallogo.png" height="140"/>
+
        top: 0;
-
</a>
+
    }
-
  </div>
+
-
  <div id='igem-logo'>
+
    #igem-logo,
-
<a href='https://2013.igem.org/Main_Page' target="_blank">
+
    #imperial-logo {
-
  <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' height="140px" />
+
        display: inline-block;
-
</a>
+
        margin-left: 5px;
-
  </div>
+
    }
-
  <div id='imperial-logo'>
+
    #imperial-igem-banner img,
-
<a href='http://www3.imperial.ac.uk/' target="_blank">
+
    #igem-logo img {
-
  <img src='https://static.igem.org/mediawiki/2011/1/19/ImperialLogo.png' height="40" />
+
        height: 100px;
-
</a>
+
    }
-
  </div>
+
-
</div>
+
-
  <div id="BackToTop">
+
     #igem-logo img {
-
  <a href="#top">
+
        -webkit-transition: all 1s ease-in-out;
-
     <img src="https://static.igem.org/mediawiki/2011/6/62/ICL_BackToTop2.png" width="48px" />
+
        -moz-transition: all 1s ease-in-out;
-
  </a>
+
        -ms-transition: all 1s ease-in-out;
-
  </div>
+
        -o-transition: all 1s ease-in-out;
 +
        transition: all 1s ease-in-out;
 +
    }
-
  <div id="Sitemap">
+
    #igem-logo img:hover {
-
  <a href="https://2011.igem.org/Team:Imperial_College_London/Sitemap">
+
        -webkit-transform: rotate(360deg);
-
    <img src="https://static.igem.org/mediawiki/2011/f/f5/ICL_SitemapBtn.png" width="80px" />
+
        -moz-transform: rotate(360deg);
-
  </a>
+
        -o-transform: rotate(360deg);
-
  </div>
+
        -ms-transform: rotate(360deg);
 +
        transform: rotate(360deg);
 +
    }
 +
 
 +
    #imperial-logo img {
 +
        height: 50px;
 +
    }
 +
 
 +
#BackToTop,
 +
#BackToTop:link,
 +
#BackToTop:visited {
 +
    position: fixed;
 +
    bottom: 5px;
 +
    right: 5px;
 +
    text-decoration: none;
 +
    color: #36a9e1;
 +
}
 +
 
 +
#BackToTop:hover {
 +
    color: #a3c4e9;
 +
}
 +
      #Sitemap {
 +
      position:fixed;
 +
      bottom:5px;
 +
      left:5px;
 +
      }
 +
</style>
 +
    <a name="top"></a>
 +
 
 +
    <div id="imperial-banner">
 +
      <a id='imperial-igem-banner' href='https://2013.igem.org/Team:Imperial_College'>
 +
        <img src="https://static.igem.org/mediawiki/2013/d/d9/ImperialLogo2013.png"  />
 +
      </a>
 +
 
 +
        <a id='igem-logo' href='https://2013.igem.org/Main_Page' target="_blank">
 +
          <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png'  />
 +
        </a>
 +
 
 +
        <a id='imperial-logo' href='http://www3.imperial.ac.uk/' target="_blank">
 +
          <img src='https://static.igem.org/mediawiki/2011/1/19/ImperialLogo.png' />
 +
    </div>
 +
 
 +
<a class="" href="#top" id="BackToTop"><i class="icon-chevron-sign-up icon-3x"></i></a>
 +
 
 +
    <div id="Sitemap">
 +
        <a href="https://2013.igem.org/Team:Imperial_College/Sitemap">
 +
            <img src="https://static.igem.org/mediawiki/2013/8/84/ICL_SitemapBtn13.png" width="80px" />
 +
        </a>
 +
    </div>
 +
</html>

Latest revision as of 14:54, 28 August 2013