Difference between revisions of "Template:Hamilton McMaster Footer"

 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<style type="text/css">
 
−
* {
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  box-sizing: border-box;
 
−
}
 
  
 +
<div class = "band"; style = "background-color:#AEA8A9">
 +
<nav id="menu" align="center">
 +
<h4>Follow Us</h4>
 +
<ul>
 +
<li>
 +
<a title="Check us out on Facebook" href="https://facebook.com/igemmcmaster" class="menu-item" style="text-decoration:none;">
 +
    <img src="https://static.igem.org/mediawiki/2015/9/92/Fb1.png"/>
 +
</a>
 +
</li>
 +
<li>
 +
<a title="Follow uson Twitter" href="https://twitter.com/iGEM_McMaster" class="menu-item" style="text-decoration:none;">
 +
    <img src="https://static.igem.org/mediawiki/2015/6/6f/Twit1.png"/>
 +
</a>
 +
</li>
 +
<li>
 +
<a title="See us on Instagram" href="https://www.instagram.com/igemmcmaster" class="menu-item" style="text-decoration:none;">
 +
    <img src="https://static.igem.org/mediawiki/2015/9/97/Insta1.png"/>
 +
</a>
 +
</li>
 +
<li>
 +
 +
<a title="Check out our website" href="http://mcmastergem.com" class="menu-item" style="text-decoration:none;">
 +
    <img src="https://static.igem.org/mediawiki/2015/e/e7/Mgem1.png"/>
 +
</a>
 +
</li>
 +
</ul>
  
−
/* Font */
+
<h5>&copy; 2015 mGEM - Designed by <a href="http://kushalpanchal.me" alt="Kushal Panchal">Kushal Panchal</a></h5>
−
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
+
</nav>
−
 
+
−
@import url(http://weloveiconfonts.com/api/?family=zocial);
+
</div>
−
 
+
−
[class*="zocial-"]:before {
+
−
  font-family: 'zocial', sans-serif;
+
−
  font-size: 1.2em;
+
−
  speak: none;
+
−
}
+
−
 
+
−
 
+
−
$border: #e3e3e3;
+
−
 
+
−
body {
+
−
  background-color: #fff;
+
−
  padding: 2em 0 0;
+
−
  font-family: Roboto, sans-serif;
+
−
  font-size: 75%;
+
−
  color: #444;
+
−
}
+
−
 
+
−
footer {
+
−
  display: block;
+
−
  height: 100px;
+
−
  padding: 1em 0 0;
+
−
}
+
−
 
+
−
.inner {
+
−
  height: 100px;
+
−
  width: 100%;
+
−
}
+
−
 
+
−
.copyright {
+
−
  line-height: 100px;
+
−
  width: 56.6%;
+
−
  float: left;
+
−
  border-left: 1px solid $border;
+
−
  border-top: 1px solid $border;
+
−
  border-bottom: 1px solid $border;
+
−
  span {
+
−
    margin-left: 10%;
+
−
    letter-spacing: 2px;
+
−
  }
+
−
}
+
−
 
+
−
.social {
+
−
  float: left;
+
−
  width: 43.3%;
+
−
  background-color: $border;
+
−
  line-height: 100px;
+
−
  border-top: 1px solid $border;
+
−
  border-bottom: 1px solid $border;
+
−
  .icons {
+
−
    list-style: none;
+
−
    .col-4 {
+
−
      width: 25%;
+
−
      float: left;
+
−
     
+
−
      a {
+
−
        text-align: center;
+
−
        background-color: white;
+
−
        margin: 0 0 0px 1px;
+
−
        display: block;
+
−
        transition: background-color 0.7s;
+
−
        &:hover {
+
−
          transition: background-color 0.7s;
+
−
          background-color: $border;
+
−
          cursor: pointer;
+
−
        }
+
−
      }
+
−
    }
+
−
  }
+
−
}
+
−
</style>
+
−
<footer>
+
−
  <div class="inner">
+
−
    <div class="copyright">
+
−
      <span>&copy; 2013 Legal Stuff</span>
+
−
    </div>
+
−
   
+
−
    <div class="social">
+
−
      <ul class="icons">
+
−
        <li class="col-4">
+
−
          <a class="zocial-facebook"></a>
+
−
        </li>
+
−
        <li class="col-4">
+
−
          <a class="zocial-home"></a>
+
−
        </li>
+
−
        <li class="col-4">
+
−
          <a class="zocial-twitter"></a>
+
−
        </li>
+
−
        <li class="col-4">
+
−
          <a class="zocial-instagram"></a>
+
−
        </li>
+
−
      </ul>
+
−
    </div>
+
−
   
+
−
  </div>
+
−
</footer>
+
 
</html>
 
</html>

Latest revision as of 05:46, 18 September 2015