Home » Tutorials

Stylish responsive footer

Tutorials
Author Reading 19 min Views 758 Published by Modified by

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.

Contents
  1. HTML markyp
  2. CSS
  3. css/styles.css
  4. Conclusion
Live Demo

Before we start, have a look at the result (in the beginning of our tutorial) which we are going to achieve:

Stylish responsive footer - result

HTML markyp

Below you can see the general html markup of the page:

01 <!DOCTYPE HTML>
02 <html>
03 <head>
04     <meta charset="utf-8" />
05     <meta name="author" content="Script Tutorials" />
06     <title>Stylish responsive footer | Script Tutorials</title>
07     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
08     <!-- css font and stylesheet -->
09     <link href="css/styles.css" rel="stylesheet">
10 </head>
11 <body>
12     <!-- Your custom main content is here -->
13     <footer>
14         <div class="splitter"></div>
15         <ul>
16             <!-- three footer columns are here -->
17         </ul>
18         <div class="bar">
19             <div class="bar-wrap">
20                 <ul class="links"> <!-- footer menu -->
21                     <li><a href="#">Home</a></li>
22                     <li><a href="#">License</a></li>
23                     <li><a href="#">Contact Us</a></li>
24                     <li><a href="#">Advertise</a></li>
25                     <li><a href="#">About</a></li>
26                 </ul>
27                 <div class="social">
28                     <!-- social icons are here -->
29                 </div>
30                 <div class="clear"></div>
31                 <div class="copyright">&copy;  2014 All Rights Reserved</div>
32             </div>
33         </div>
34     </footer>
35 </body>
36 </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:

01 <ul>
02     <li>
03         <div class="icon" data-icon="E"></div>
04         <div class="text">
05             <h4>About</h4>
06             <div>Lorem 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>
07         </div>
08     </li>
09     <li>
10         <div class="icon" data-icon="a"></div>
11         <div class="text">
12             <h4>Archive</h4>
13             <div>Lorem 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>
14         </div>
15     </li>
16     <li>
17         <div class="icon" data-icon="s"></div>
18         <div class="text">
19             <h4>Cloud</h4>
20             <div>Lorem 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>
21         </div>
22     </li>
23 </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:

01 <div class="bar">
02     <div class="bar-wrap">
03         <ul class="links">
04             <li><a href="#">Home</a></li>
05             <li><a href="#">License</a></li>
06             <li><a href="#">Contact Us</a></li>
07             <li><a href="#">Advertise</a></li>
08             <li><a href="#">About</a></li>
09         </ul>
10         <div class="social">
11             <a href="#" class="fb">
12                 <span data-icon="f" class="icon"></span>
13                 <span class="info">
14                     <span class="follow">Become a fan Facebook</span>
15                     <span class="num">9,999</span>
16                 </span>
17             </a>
18             <a href="#" class="tw">
19                 <span data-icon="T" class="icon"></span>
20                 <span class="info">
21                     <span class="follow">Follow us Twitter</span>
22                     <span class="num">9,999</span>
23                 </span>
24             </a>
25             <a href="#" class="rss">
26                 <span data-icon="R" class="icon"></span>
27                 <span class="info">
28                     <span class="follow">Subscribe RSS</span>
29                     <span class="num">9,999</span>
30                 </span>
31             </a>
32         </div>
33         <div class="clear"></div>
34         <div class="copyright">&copy;  2014 All Rights Reserved</div>
35     </div>
36 </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

01 @import url(http://weloveiconfonts.com/api/?family=zocial);
02 * {
03     margin: 0;
04     padding: 0;
05 }
06 @font-face {
07     font-family: 'zocial', sans-serif;
08 }
09 [data-icon]:before {
10     font-family: 'zocial';
11     content: attr(data-icon);
12     -webkit-font-smoothing: antialiased;
13 }
14 body {
15     font-family: 'Verdana', sans-serif;
16 }
17 a {
18     text-decoration: none;
19     -webkit-transition: all .2s linear;
20     -moz-transition: all .2s linear;
21     -ms-transition: all .2s linear;
22     -o-transition:  all .2s linear;
23     transition: all .2s linear;
24 }
25 .clear {
26     clear: both;
27 }

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:

1 footer {
2     background-color: #2E3639;
3     position: relative;
4     z-index: 1;
5 }

The stripped splitter line has the following styles:

01 footer .splitter {
02     background-color: #ac0;
03     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
04         color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
05         color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
06         to(transparent));
07     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
08         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
09         transparent 75%, transparent);
10     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
11         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
12         transparent 75%, transparent);
13     background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
14         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
15         transparent 75%, transparent);
16     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
17         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
18         transparent 75%, transparent);
19     background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
20         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
21         transparent 75%, transparent);
22     -webkit-background-size: 50px 50px;
23     -moz-background-size: 50px 50px;
24     background-size: 50px 50px;
25     -moz-box-shadow: 1px 1px 8px gray;
26     -webkit-box-shadow: 1px 1px 8px gray;
27     box-shadow: 1px 1px 8px gray;
28     height: 20px;
29 }

As you can see – it’s just tilted at a 45-degree gradient.

Next are three columns:

01 footer > ul {
02     list-style: none outside none;
03     margin: 0 auto;
04     max-width: 1200px;
05     overflow: hidden;
06     padding: 25px 0;
07     position: relative;
08     width: 95%;
09 }
10 footer > ul li {
11     float: left;
12     padding: 20px 15px;
13     width: 33.3%;
14     box-sizing:border-box;
15     -webkit-box-sizing:border-box;
16     -moz-box-sizing:border-box;
17 }
18 footer > ul li:first-child {
19     padding-left: 0;
20 }
21 footer > ul li:nth-child(3) {
22     padding-right: 0;
23 }
24 footer > ul li .icon {
25     color: #999999;
26     float: left;
27     font-size: 80px;
28     line-height: 80px;
29 }
30 footer > ul li .text {
31     color: #848889;
32     font-size: 13px;
33     line-height: 20px;
34     margin-left: 105px;
35     position: relative;
36     text-align: justify;
37 }
38 .text h4 {
39     color: #FFFFFF;
40     font-size: 24px;
41     font-weight: bold;
42     margin-bottom: 10px;
43 }
44 .text a {
45     border-bottom: 1px dotted transparent;
46     color: #FFDD00;
47     font-weight: bold;
48 }
49 .text a:hover {
50     border-color: #FFDD00;
51 }

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:

01 footer .bar {
02     background-color: #1E2629;
03     padding: 20px 0;
04 }
05 footer .bar-wrap {
06     font-size: 12px;
07     margin: 0 auto;
08     max-width: 1200px;
09     position: relative;
10     width: 95%;
11 }
12 .links {
13     float: left;
14     list-style: none outside none;
15     position: relative;
16 }
17 .links li {
18     float: left;
19     margin-right: 10px;
20 }
21 .links a {
22     color: #778888;
23 }
24 .links a:hover {
25     color: #FFFFFF;
26 }

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:

01 .social {
02     position: absolute;
03     right: 0;
04     top: 0;
05 }
06 .social a {
07     color: #778888;
08     margin-left: 20px;
09 }
10 .social a:hover {
11     color: #FFFFFF;
12 }
13 .social .icon {
14     display: inline-block;
15     font-size: 36px;
16     margin-right: 5px;
17     vertical-align: middle;
18     -webkit-transition: -webkit-transform .3s linear;
19     -moz-transition: -moz-transform .3s linear;
20     -ms-transition: -ms-transform .3s linear;
21     -o-transition:  -o-transform .3s linear;
22     transition: transform .3s linear;
23 }
24 .social a:hover  .icon {
25     -webkit-transform: rotate(360deg);
26     -moz-transform: rotate(360deg);
27     -ms-transform: rotate(360deg);
28     -o-transform: rotate(360deg);
29     transform: rotate(360deg);
30 }
31 .social .info {
32     display: inline-block;
33     vertical-align: middle;
34 }
35 .social .info .follow {
36     display: block;
37 }
38 .social .info .num {
39     display: block;
40 }
41 .copyright {
42     color: #778888;
43     margin-top: 5px;
44 }

If you hover the mouse on the social links – their icon rotates on 360 degrees.

1

Finally, and most importantly – responsive styles, they serve to our footer displayed well on any (mobile) screens:

01 @media screen and (max-width: 1000px){
02     .links, .social, .copyright{
03         float:none;
04         text-align:center;
05     }
06     .social {
07         position:relative;
08         margin:10px 0;
09     }
10     .links li {
11         display:inline-block;
12         float:none;
13     }
14     .bar {
15         position:relative;
16     }
17     .bar-wrap {
18         margin-bottom:0;
19     }
20 }
21 @media screen and (max-width: 835px)  {
22     footer > ul li {
23         float:none;
24         width:auto;
25     }
26 }
27 @media screen and (max-width: 768px)  {
28     .links li {
29         margin-right:5px;
30     }
31 }
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.

Rate article
© 2026 Script Tutorials