|
|
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">✉</a></li>
| + | |
− | <li class="social" title="Twitter"><a href="http://twitter.com/julienw5"></a></li>
| + | |
− | <li class="social" title="Google+"><a href="https://plus.google.com/u/0/+JulienWatelet/about"></a></li>
| + | |
− | <li class="social" title="Linkedin"><a href="https://www.linkedin.com/pub/julien-watelet/44/3a6/830"></a></li>
| + | |
− | <li class="social" title="Pinterest"><a href="http://www.pinterest.com/julienw5/"></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> |