Stylish responsive footer
Beautiful memorable footer is one of the most important parts of any website. Often it supplements the basic navigation on the website. Today we are going to show you how to the create responsive stylish footer which consists of two section, the first section will consist of three columns with the headings and some text, the second section will contain a menu with links and social icons.
Live Demo
Before we start, have a look at the result (in the beginning of our tutorial) which we are going to achieve:
HTML markyp
Below you can see the general html markup of the page:
!DOCTYPE HTML
html
head
meta charset="utf-8" /
meta name="author" content="Script Tutorials" /
titleStylish responsive footer | Script Tutorials/title
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
!-- css font and stylesheet --
link href="css/styles.css" rel="stylesheet"
/head
body
!-- Your custom main content is here --
footer
div class="splitter"/div
ul
!-- three footer columns are here --
/ul
div class="bar"
div class="bar-wrap"
ul class="links" !-- footer menu --
lia href="#"Home/a/li
lia href="#"License/a/li
lia href="#"Contact Us/a/li
lia href="#"Advertise/a/li
lia href="#"About/a/li
/ul
div class="social"
!-- social icons are here --
/div
div class="clear"/div
div class="copyright"copy; 2014 All Rights Reserved/div
/div
/div
/footer
/body
/html
As you can see, the main page content (of your project) should be placed before the footer element. The first child element in the footer is .splitter – it is narrow striped green line that visually separates our footer. Below are the three-column structure:
ul
li
div class="icon" data-icon="E"/div
div class="text"
h4About/h4
divLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique justo eu sollicitudin pretium. Nam scelerisque arcu at dui porttitor, non viverra sapien pretium. Nunc nec dignissim nunc. Sed eget est purus. Sed convallis, metus in dictum feugiat, odio orci rhoncus metus. a href="#"Read more/a/div
/div
/li
li
div class="icon" data-icon="a"/div
div class="text"
h4Archive/h4
divLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique justo eu sollicitudin pretium. Nam scelerisque arcu at dui porttitor, non viverra sapien pretium. Nunc nec dignissim nunc. Sed eget est purus. Sed convallis, metus in dictum feugiat, odio orci rhoncus metus. a href="#"Read more/a/div
/div
/li
li
div class="icon" data-icon="s"/div
div class="text"
h4Cloud/h4
divLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique justo eu sollicitudin pretium. Nam scelerisque arcu at dui porttitor, non viverra sapien pretium. Nunc nec dignissim nunc. Sed eget est purus. Sed convallis, metus in dictum feugiat, odio orci rhoncus metus. a href="#"Read more/a/div
/div
/li
/ul
Basically, this is the basic unordered list that holds three columns. Every column consists of an icon, title and text. The ‘data-icon’ attribute is used to define an icon to display on the left of column. We use the special font to display the icons – zocial (by Sam Collins). Below these three columns we have another section:
div class="bar"
div class="bar-wrap"
ul class="links"
lia href="#"Home/a/li
lia href="#"License/a/li
lia href="#"Contact Us/a/li
lia href="#"Advertise/a/li
lia href="#"About/a/li
/ul
div class="social"
a href="#" class="fb"
span data-icon="f" class="icon"/span
span class="info"
span class="follow"Become a fan Facebook/span
span class="num"9,999/span
/span
/a
a href="#" class="tw"
span data-icon="T" class="icon"/span
span class="info"
span class="follow"Follow us Twitter/span
span class="num"9,999/span
/span
/a
a href="#" class="rss"
span data-icon="R" class="icon"/span
span class="info"
span class="follow"Subscribe RSS/span
span class="num"9,999/span
/span
/a
/div
div class="clear"/div
div class="copyright"copy; 2014 All Rights Reserved/div
/div
/div
It consists of three elements: another unordered list for the menu, three social icons and the copyright text. Now we can start adding styles for all generated html elements.
CSS
As usual, first of all we provide the most general styles:
css/styles.css
@import url(http://weloveiconfonts.com/api/?family=zocial);
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: 'zocial', sans-serif;
}
[data-icon]:before {
font-family: 'zocial';
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
}
body {
font-family: 'Verdana', sans-serif;
}
a {
text-decoration: none;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.clear {
clear: both;
}
First line imports the ‘Zocial’ font, that applies for all elements with the attribute ‘data-icon’. In order to specify a particular icon of the font, we may use the ‘attr’ function of CSS to get the ‘data-icon’ attribute value. For the rest text we use the ‘Verdana’ font. For all a elements we removed it’s underline (text-decoration) and added the transition for all it’s styles. The main footer element has the gray background color:
footer {
background-color:
position: relative;
z-index: 1;
}
The stripped splitter line has the following styles:
footer .splitter {
background-color:
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
height: 20px;
}
As you can see – it’s just tilted at a 45-degree gradient.
Next are three columns:
footer ul {
list-style: none outside none;
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
padding: 25px 0;
position: relative;
width: 95%;
}
footer ul li {
float: left;
padding: 20px 15px;
width: 33.3%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
footer ul li:first-child {
padding-left: 0;
}
footer ul li:nth-child(3) {
padding-right: 0;
}
footer ul li .icon {
color:
float: left;
font-size: 80px;
line-height: 80px;
}
footer ul li .text {
color:
font-size: 13px;
line-height: 20px;
margin-left: 105px;
position: relative;
text-align: justify;
}
.text h4 {
color:
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.text a {
border-bottom: 1px dotted transparent;
color:
font-weight: bold;
}
.text a:hover {
border-color:
}
All three columns are floated from left to right. We use the increased font size for icons of this section (font-size: 80px). The header color is white, the color of ‘read more’ links is yellow (#FFDD00). The next ‘bar’ section has the short menu:
footer .bar {
background-color:
padding: 20px 0;
}
footer .bar-wrap {
font-size: 12px;
margin: 0 auto;
max-width: 1200px;
position: relative;
width: 95%;
}
.links {
float: left;
list-style: none outside none;
position: relative;
}
.links li {
float: left;
margin-right: 10px;
}
.links a {
color:
}
.links a:hover {
color:
}
All the menu elements are floated from left to right. The right of the menu, we have social icons and slightly below is the copyright text:
.social {
position: absolute;
right: 0;
top: 0;
}
.social a {
color:
margin-left: 20px;
}
.social a:hover {
color:
}
.social .icon {
display: inline-block;
font-size: 36px;
margin-right: 5px;
vertical-align: middle;
-webkit-transition: -webkit-transform .3s linear;
-moz-transition: -moz-transform .3s linear;
-ms-transition: -ms-transform .3s linear;
-o-transition: -o-transform .3s linear;
transition: transform .3s linear;
}
.social a:hover .icon {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.social .info {
display: inline-block;
vertical-align: middle;
}
.social .info .follow {
display: block;
}
.social .info .num {
display: block;
}
.copyright {
color:
margin-top: 5px;
}
If you hover the mouse on the social links – their icon rotates on 360 degrees.
Finally, and most importantly – responsive styles, they serve to our footer displayed well on any (mobile) screens:
@media screen and (max-width: 1000px){
.links, .social, .copyright{
float:none;
text-align:center;
}
.social {
position:relative;
margin:10px 0;
}
.links li {
display:inline-block;
float:none;
}
.bar {
position:relative;
}
.bar-wrap {
margin-bottom:0;
}
}
@media screen and (max-width: 835px) {
footer ul li {
float:none;
width:auto;
}
}
@media screen and (max-width: 768px) {
.links li {
margin-right:5px;
}
}
Live Demo
[sociallocker]
download the sources
[/sociallocker]
Conclusion
All ingenious – is simple, at least it should be so. That’s it for today, thanks for your attention. If you like what we have done today – share it with your friends in your social networks using the form below.
