08:17 pm - April 19,2018
Private chat

[NEW] Black responsive footer template
yohans tesfaye on Apr 28/2016 6:17 am
yohans tesfaye
1 Apr 28/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.
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


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

shohag on Apr 28/2016 8:03 am
shohag
2 Apr 28/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 on Apr 30/2016 3:26 am
yohans tesfaye
3 Apr 30/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 on Apr 30/2016 11:49 pm
Hayordgr8
4 Apr 30/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 on Jun 12/2017 12:38 pm
nayeemnsk
5 Jun 12/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:

: ..››..1
Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Real Time Analytics

Clicky

Bollywood Movie
XVIDEOS GAMES
Download the best Android apps on Uptodown
Download Android Game for Free
IMO  Shareit  UC Browser  more