Register Login Featured
Stats: 1510 members, 1444 topics. Date: Saturday, 17th March 2018

General Wordpress Blogspot Forums Crypto Traffic Money

HTML – Black responsive footer template For Every Sites

Now Trending on GithubNG

HTML – Black responsive footer template For Every Sites by : 12:51 pm On November 18, 2017

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.

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.

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”HTML CSS”]<div class="php3"><ol><li>&lt;style&gt;</li><li>.screen {max-width: 1024px; margin: auto;}</li><li>.footer { background: #404040; color: white; padding: 5px;}</li><li>.footer .sect { width: 325px; display: inline-block; padding: 5px; vertical-align: top;}</li><li>.footer .sect .tit {font-weight: bold; border-bottom: 1px grey solid; padding: 6px 0px; }</li><li>.footer .sect a .social { color: white; display: block; display: inline-block; width: 130px; }</li><li>.footer .sect a .social:hover { background: #656565; color: white; } </li><li>.footer .sect a .lin { width: 90px; padding: 4px; color: #dedede; line-height: 24px; display: inline-block;} </li><li>.footer .sect a .lin:hover { color: white; background: #656565;} </li><li>.footer .end { line-height: 30px; padding: 8px; border-top: 1px grey solid; font-weight: bold; } </li><li>.footer span {float: right;} &lt;/style&gt;</li></ol></div>[/css]



It is the footer code fully writed on html only. Add this on footer autocontent ( bottom autocontent)

[sourcecode language=”plain”]<ul><li>&lt;div class="footer"&gt; &lt;div class="screen"&gt; &lt;div class="sect"&gt;&lt;div class="tit"&gt;FIND US ON&lt;/div&gt; &lt;a href=""&gt;&lt;div class="social"&gt;&lt;img src="" alt="facebook" /&gt; facebook&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="social"&gt;</li><li>&lt;img src="" alt="twitter" /&gt; twitter&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="social"&gt;&lt;img src="" alt="google" /&gt; google+&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="social"&gt;&lt;img src="" alt="vk" /&gt; vk&lt;/div&gt;&lt;/a&gt;&lt;/div&gt; </li><li>&lt;div class="sect"&gt;&lt;div class="tit"&gt;BROWSE MORE&lt;/div&gt; &lt;a href="#"&gt;&lt;div class="lin"&gt;Home&lt;/div&gt;&lt;/a&gt; &lt;a href="#login"&gt;&lt;div class="lin"&gt;Login&lt;/div&gt;&lt;/a&gt; &lt;a href="#reg"&gt;&lt;div class="lin"&gt;Register&lt;/div&gt;&lt;/a&gt; &lt;a href="#forum"&gt;&lt;div class="lin"&gt;Forums&lt;/div&gt;&lt;/a&gt; &lt;a href="#contact"&gt;&lt;div class="lin"&gt;Contact us&lt;/div&gt;&lt;/a&gt; &lt;a href="#about"&gt;&lt;div class="lin"&gt;About us&lt;/div&gt;&lt;/a&gt; &lt;a href="#privacy"&gt;&lt;div class="lin"&gt;Privacy&lt;/div&gt;&lt;/a&gt; &lt;a href="#terms"&gt;&lt;div class="lin"&gt;Terms of use&lt;/div&gt;&lt;/a&gt; &lt;a href="#members"&gt;&lt;div class="lin"&gt;Members&lt;/div&gt;&lt;/a&gt; &lt;/div&gt;</li><li>&lt;div class="sect"&gt;&lt;div class="tit"&gt;ABOUT Us&lt;/div&gt; 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. &lt;/div&gt; </li><li>&lt;div class="end"&gt;&lt;font color="yellow"&gt;Your Blog&lt;/font&gt; © :time-beg:Y:time-end: All rights reserved! &lt;span&gt;esigned by &lt;a href=""&gt;&lt;font color="yellow"&gt;Your Name&lt;/font&gt;&lt;/a&gt; &lt;/span&gt;&lt;/div&gt;</li><li>&lt;/div&gt; &lt;/div&gt;</li></ul>[/sourcecode]


Publication author

offline 4 months


18 - An All in one Solution Forum Where we discuss Blogging related Issues, Make Money Online, Traffic and Adsense tips. Etc.

Comments: 101Publics: 662Registration: 31-10-2017

Re: HTML – Black responsive footer template For Every Sites by Spark: 9:12 pm On November 29, 2017


You must be logged in to post a comment.


(Go Up)

Links: (0) (1) (2) (3) (4) (5) (6) (7) (8) (9)

GitHubNg.Com - Copyright © 2017 - Henry Ijogu. All rights reserved. See How To Advertise.
Disclaimer: Every member is solely responsible for anything that he/she posts or uploads on this Forum.


Password generation