Difference between revisions of "Template:Hamilton McMaster Footer"

Line 1: Line 1:
 
<html>
 
<html>
−
<link href="//2015.igem.org/Template:Hamilton_McMaster/css/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet">
+
<style>
−
<link href="//2015.igem.org/Template:Hamilton_McMaster/css/style?action=raw&ctype=text/css" rel="stylesheet"></script>
+
* {
−
<link href="//2015.igem.org/Template:Hamilton_McMaster/css/layersmin?action=raw&ctype=text/css" rel="stylesheet"></script>
+
  margin: 0;
−
<footer role="contentinfo">
+
  padding: 0;
−
<div class="row">
+
  box-sizing: border-box;
−
<div class="row-content buffer clear-after">
+
}
−
<section id="top-footer">
+
−
<div class="widget meta-social column five">
+
−
<h4>Follow Us</h4>
+
−
<ul class="inline">
+
−
<li><a href="https://twitter.com/iGEM_McMaster" class="twitter-share border-box"><i class="fa fa-twitter fa-lg"></i></a></li>
+
−
<li><a href="https://www.facebook.com/igemmcmaster" class="facebook-share border-box"><i class="fa fa-facebook fa-lg"></i></a></li>
+
−
<li><a href="https://instagram.com/igemmcmaster/" class="instagram-share border-box"><i class="fa fa-instagram fa-lg"></i></a></li>
+
−
<li><a href="https://mcmastergem.com" class="pinterest-share border-box"><i class="fa fa-home fa-lg"></i></a></li>
+
−
</ul>
+
−
</div>
+
−
</section><!-- top-footer -->
+
−
<section id="bottom-footer">
+
−
<p class="keep-left">&copy; 2015 mGEM - Designed by <a href="http://kushalpanchal.me" alt="Kushal Panchal">Kushal Panchal</a></p>
+
−
</section><!-- bottom-footer -->
+
−
</div><!-- row-content -->
+
−
</div><!-- row -->
+
−
</footer>
+
  
 +
 +
/* Font */
 +
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
 +
 +
@import url(http://weloveiconfonts.com/api/?family=zocial);
 +
 +
[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>

Revision as of 01:15, 18 September 2015

© 2013 Legal Stuff