Difference between revisions of "Template:Hamilton McMaster Footer"

Line 1: Line 1:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
/* footer ---------------------------------------------------------------*/
+
body {
 
+
margin:0;
@import url('http://weloveiconfonts.com/api/?family=entypo');
+
padding:0;
 
+
height:100%;
a{
+
color: inherit;
+
text-decoration: none;
+
border-bottom:3px solid #22A7F0;
+
padding-bottom: 1px;
+
cursor: pointer;
+
+
 
}
 
}
 
+
#wrapper {
a:hover{
+
min-height:100%;
border-bottom:2px dotted #22A7F0;
+
position:relative;
 
}
 
}
 
+
#header {
footer{
+
background:#ededed;
clear: both;
+
padding:10px;
height: 5px;
+
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;
+
 
}
 
}
 
+
#content {
.text-footer{
+
padding-bottom:100px; /* Height of the footer element */
margin: 1% auto;
+
width: 183px;
+
color: white;
+
 
}
 
}
 
+
#footer {
footer ul li a{
+
background:#ffab62;
border: none;
+
width:100%;
}
+
height:100px;
 
+
position:absolute;
.social-ul{
+
bottom:0;
margin: 0 auto;
+
left:0;
width: 317px;
+
margin-top: -39px;
+
 
}
 
}
 
.social {
 
  display: inline-block;
 
  width: 40px;
 
  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;
 
}
 
 
.social:hover {
 
  color: #22A7F0;
 
  cursor: pointer;
 
 
}
 
 
/* end footer ---------------------------------------------------------------*/
 
 
</style>
 
</style>
<div class = "band"; style = "background-color:#ebb211">
+
<body>
<footer>
+
<ul class="social-ul">
+
    <li class="social" title="moi"><a href="moi.html">&#9993;</a></li>
+
    <li class="social" title="Twitter"><a href="http://twitter.com/julienw5">&#62217;</a></li>
+
    <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>
+
    <li class="social" title="Pinterest"><a href="http://www.pinterest.com/julienw5/">&#62226;</a></li>
+
</ul>
+
  
<!-- <p class="text-footer">
+
<div id="wrapper">
© Julien Watelet - 2013-2014
+
</p> -->
+
<div id="header">
 +
</div><!-- #header -->
 +
 +
<div id="content">
 +
</div><!-- #content -->
 +
 +
<div id="footer">
 +
</div><!-- #footer -->
 +
 +
</div><!-- #wrapper -->
 +
 +
</body>
  
</footer>
 
</div>
 
 
</html>
 
</html>

Revision as of 01:24, 18 September 2015