Difference between revisions of "Template:Hamilton McMaster Footer"

Line 1: Line 1:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
* {
+
/* footer ---------------------------------------------------------------*/
−
  margin: 0;
+
−
  padding: 0;
+
−
  box-sizing: border-box;
+
−
}
+
  
 +
@import url('http://weloveiconfonts.com/api/?family=entypo');
  
−
/* Font */
+
a{
−
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
+
color: inherit;
 +
text-decoration: none;
 +
border-bottom:3px solid #22A7F0;
 +
padding-bottom: 1px;
 +
cursor: pointer;
 +
 +
}
  
−
@import url(http://weloveiconfonts.com/api/?family=zocial);
+
a:hover{
 +
border-bottom:2px dotted #22A7F0;
 +
}
  
−
[class*="zocial-"]:before {
+
footer{
−
   font-family: 'zocial', sans-serif;
+
clear: both;
−
   font-size: 1.2em;
+
height: 5px;
−
   speak: none;
+
background-color: #22A7F0;
 +
padding: 1%;
 +
   padding-left:0;
 +
  padding-right:0;
 +
position: relative;
 +
   margin-top:200px;
 +
  position:absolute;
 +
  bottom:0;
 +
  width:100%;
 +
   margin:0 auto;
 
}
 
}
  
 +
.text-footer{
 +
margin: 1% auto;
 +
width: 183px;
 +
color: white;
 +
}
  
−
$border: #e3e3e3;
+
footer ul li a{
 +
border: none;
 +
}
  
−
body {
+
.social-ul{
−
  background-color: #fff;
+
margin: 0 auto;
−
  padding: 2em 0 0;
+
width: 317px;
−
  font-family: Roboto, sans-serif;
+
margin-top: -39px;
−
  font-size: 75%;
+
−
  color: #444;
+
 
}
 
}
  
−
footer {
+
.social {
−
   display: block;
+
   display: inline-block;
−
   height: 100px;
+
  width: 40px;
−
   padding: 1em 0 0;
+
   height: 40px;
 +
   margin: 0 10px;
 +
  line-height: 40px;
 +
  font-family: Entypo;
 +
  font-size: 20px;
 +
  text-align: center;
 +
  color: #555;
 +
  border-radius: 50%;
 +
  background: #fff;
 +
  overflow: hidden;
 +
  transition: color .3s;
 
}
 
}
  
−
.inner {
+
.social:hover {
−
   height: 100px;
+
   color: #22A7F0;
−
   width: 100%;
+
   cursor: pointer;
−
}
+
  
−
.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 {
+
/* end footer ---------------------------------------------------------------*/
−
  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>
 
</style>
 
<footer>
 
<footer>
−
  <div class="inner">
+
<ul class="social-ul">
−
    <div class="copyright">
+
    <li class="social" title="moi"><a href="moi.html">&#9993;</a></li>
−
      <span>&copy; 2013 Legal Stuff</span>
+
    <li class="social" title="Twitter"><a href="http://twitter.com/julienw5">&#62217;</a></li>
−
    </div>
+
    <li class="social" title="Google+"><a href="https://plus.google.com/u/0/+JulienWatelet/about">&#62223;</a></li>
−
   
+
    <li class="social" title="Linkedin"><a href="https://www.linkedin.com/pub/julien-watelet/44/3a6/830">&#62232;</a></li>
−
    <div class="social">
+
    <li class="social" title="Pinterest"><a href="http://www.pinterest.com/julienw5/">&#62226;</a></li>
−
      <ul class="icons">
+
</ul>
−
        <li class="col-4">
+
 
−
          <a class="zocial-facebook"></a>
+
<!-- <p class="text-footer">
−
        </li>
+
© Julien Watelet - 2013-2014
−
        <li class="col-4">
+
</p> -->
−
          <a class="zocial-home"></a>
+
 
−
        </li>
+
</footer>
−
        <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:18, 18 September 2015