[NEW] Black responsive footer template
yohans tesfaye
1 Thursday 28,April/2016 6:17 am
Falling hurts alot but it make make stronger for next attempt.
Webpage footer is a main thing that must be include on webpage the same as header. I saw some sites that doesn't have an approprate footer. Having a well designed,organized and structured footer make a website an impression on visitor.
[img]http://ethio-pic.mywapblog.com/files/black-responsive-footer.png[/img]
On the above i told you little about webpage footer. The main purpose i write this topic is to give you a simple but useful webpage footer for your site.

Okay let me tell key features of the footer i have designed.

1. RESPONSIVE - It will fit on all devices based on the screen size. That makes it work on all devices instead making a different footer for each device.

2. LINK TO SOCIAL ACCOUNTS - What i want to say is allow users to get you and to follow you on social networks like facebook and others.

3. LINKS TO SUB PAGES - If your site is not a single page website it will best adding links to sub pages for users to access your other page.

4. SITE DESCRIPTION - You can tell your visitors what you brand it is and what you do. It will make visitors to know what they can get from your site.

5. COPYRIGHT NOTICE - a copyright notice with publication year.

Now let us continue to code.

CSS
Add this css on head tag. It will be best if you add it on style sheet. You can change colors to much with your site design.
[php]<style>
.screen {max-width: 1024px; margin: auto;}
.footer { background: #404040; color: white; padding: 5px;}
.footer .sect { width: 325px; display: inline-block; padding: 5px; vertical-align: top;}
.footer .sect .tit {font-weight: bold; border-bottom: 1px grey solid; padding: 6px 0px; }
.footer .sect a .social { color: white; display: block; display: inline-block; width: 130px; }
.footer .sect a .social:hover { background: #656565; color: white; }
.footer .sect a .lin { width: 90px; padding: 4px; color: #dedede; line-height: 24px; display: inline-block;}
.footer .sect a .lin:hover { color: white; background: #656565;}
.footer .end { line-height: 30px; padding: 8px; border-top: 1px grey solid; font-weight: bold; }
.footer span {float: right;} </style>[/php]

HTML CODE
It is the footer code fully writed on html only. Add this on footer autocontent ( bottom autocontent)
[php]<div class="footer"> <div class="screen"> <div class="sect"><div class="tit">FIND US ON</div> <a href="http://facebook.com/yohe.ethiopic"><div class="social"><img src="http://ethio-pic.tk/img/601029/601029063_c1e3d37b6f.png" alt="facebook" /> facebook</div></a> <a href="http://twitter.com/ethio_pic"><div class="social">
<img src="http://ethio-pic.tk/img/601029/601029064_f0e541eb4c.png" alt="twitter" /> twitter</div></a> <a href="http://plus.google.com"><div class="social"><img src="http://ethio-pic.tk/img/601029/601029065_5ac0ea2181.png" alt="google" /> google+</div></a> <a href="http://vk.com"><div class="social"><img src="http://ethio-pic.tk/img/601029/601029066_e0c264bbff.png" alt="vk" /> vk</div></a></div>
<div class="sect"><div class="tit">BROWSE MORE</div> <a href="#"><div class="lin">Home</div></a> <a href="#login"><div class="lin">Login</div></a> <a href="#reg"><div class="lin">Register</div></a> <a href="#forum"><div class="lin">Forums</div></a> <a href="#contact"><div class="lin">Contact us</div></a> <a href="#about"><div class="lin">About us</div></a> <a href="#privacy"><div class="lin">Privacy</div></a> <a href="#terms"><div class="lin">Terms of use</div></a> <a href="#members"><div class="lin">Members</div></a> </div>
<div class="sect"><div class="tit">ABOUT ETHIO-PIC.TK</div> A community based forum for discussion on Mobile phones, Internet , Web development , Computer , Science , Technology and Other. Also you can meet and chat new peoples around the world. </div>
<div class="end"><font color="yellow">ETHIO-PIC.TK</font> © :time-beg:Y:time-end: All rights reserved! <span>esigned by <a href="http://ethio-pic.tk"><font color="yellow">YOHANS TESFAYE</font></a> </span></div>
</div> </div>
[/php]

Screen shot
some screen shots on computer and mobile
[img]http://ethio-pic.mywapblog.com/files/black-footer-web.jpg[/img]
[img]http://ethio-pic.mywapblog.com/files/black-footer-wap.jpg[/img]

Thank you
ethio-pic.tk
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
6 Vote · Reply · Quote · Report

shohag
2 Thursday 28,April/2016 8:03 am
tnx. Bro Now share Black responsive
Header template
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
6 Vote · Reply · Quote · Report

yohans tesfaye
3 Saturday 30,April/2016 3:26 am
Falling hurts alot but it make make stronger for next attempt.
[quote=shohag]tnx. Bro Now share Black responsive
Header template[/quote] okay i will share soon
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
6 Vote · Reply · Quote · Report

Hayordgr8
4 Saturday 30,April/2016 11:49 pm
Bro yohans quote button is needed please. Wat abt my request via facebook??? I av asked since long ago bt u refused to drop. Rite?
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
6 Vote · Reply · Quote · Report

nayeemnsk
5 Monday 12,June/2017 12:38 pm
nice bro! I am lucky , you are a great man. I am proud of you.
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report


Add Comment
bolditalicunderlineimageurlcodephp
Name:

Content:

Preview ( 0)
: ..››..1
Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Download Bollywood full movie for free
Download Android Game for Free
New Apps  IMO  UC Browser  more