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
download the sources
Before we start, I would like to show you the result which we are going to achieve:
HTML markyp
Below you can see the general html markup of the page:
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:
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:
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, forst of all we provide the most general styles:
css/styles.css
First line imports the ‘Zocial’ font, that applies for all elements with the attribute ‘data-icon’. In order to specify a partucular 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:
The stripped splitter line has the following styles:
As you can see – it’s just tilted at a 45-degree gradient.
Next are three columns:
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:
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:
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:
Live Demo
download the sources
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.