Footer using HTML and CSS3

Using HTML and CSS you can design awesome interface. There is no limitations of creativity, only you have to know how to play with codes and you can create awesome stuffs.

HTML File:-

Index.html:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”footer.css” />
</head>
<body>
<div id=”footer”>
<ul id=”footer_menu”>
<li class=”homeButton”><a href=”#”></a></li>
<!– Account Button Single column Layout –>
<li><a href=”#”>Account</a>
<div class=”one_column_layout”>
<div class=”col_1″>
<a class=”headerLinks”>Stream</a>

<a class=”headerLinks”>Messages</a>
<a class=”listLinks”>Inbox(5)</a>
<a class=”listLinks”>Sent</a>
<a class=”listLinks”>Trash</a>
<a class=”listLinks”>Compose</a>

<a class=”headerLinks”>Pictures</a>
<a class=”listLinks”>Manage Album</a>
<a class=”listLinks”>Manage Photos</a>
<a class=”listLinks”>View All</a>

<a class=”headerLinks”>Information</a>
<a class=”listLinks”>basic info</a>
<a class=”listLinks”>Contact</a>
<a class=”listLinks”>Eduation</a>
<a class=”listLinks”>Employement</a>
<a class=”listLinks”>Links</a>

<a class=”headerLinks”>Friends</a>
<a class=”listLinks”>All</a>
<a class=”listLinks”>requested(14)</a>
<a class=”listLinks”>Pending</a>
</div>
</div>
</li>
<!– Profile button Three Column layout –>

<li><a href=”#”>Profile</a>
<div class=”three_column_layout”>
<div class=”col_3″>
<h2>Example of Three Column</h2>
</div>

<div class=”clear”></div>

<div class=”col_1″>
<p> I Love you Anish so Much.</p>
</div>
<div class=”col_1″>
<p> I Love you Anish so so so so soMuch.</p>
</div>
<div class=”col_1″>
<p> I Love you Guys so Much.</p>
</div>

<div class=”clear”></div>

<div class=”col_1″>
<p class=”black_box”> I’m a Single Column Block. </p>
</div>
<div class=”col_2″>
<p> I’m a Single Column Block but jeet beaware i’m not like above block. EasyGoing Girlfiend(Noun)..! An Easygoing Girlfriend is a
mythical Creature, There Is No Proof Of There Existance But Legend has It That a Few Brave Men Thought they Have Spotted Some of
These Creatures and Tried To Date Them, No One Has Heard From These men Ever Since.</p>
</div>

<div class=”clear”></div>

<div class=”col_3″>
<h2> My Profile</h2>
</div>

<div class=”clear”></div>

<div class=”col_3″>
<p>
<img src=”image/ani.jpg” class=”image_left whiteBorder”/>
<a href=”#” style=”display: inline; font-weight: bold; color: white;”>Anish Singh</a>
<a href=”#”>Read More..</a>
</p>
</div>
</div>
</li>

<!– Recent Activity Two column Layout –>
<li><a href=”#”>Recent Activity</a>
<div class=”two_column_layout”>
<div class=”col_2″>
<h2>Example of Two Column</h2>
</div>

<div class=”clear”></div>

<div class=”col_1″>
<p> I Love you Anish so Much.</p>
</div>
<div class=”col_1″>
<p> I Love you Anish so so so so soMuch.</p>
</div>

<div class=”clear”></div>

<div class=”col_2″>
<p> I’m a Single Column Block but jeet beaware i’m not like above block.</p>
</div>
</div>
</li>

<!– Program Button –>
<li><a href=”#”>Programs</a>
<ul class=”dropUp”>
<li><a href=”#”>Group Chat</a></li>
<li><a href=”#”>Image Editor</a></li>
<li><a href=”#”>Instant Messenger</a></li>
<li><a href=”#”>Forum</a></li>
<li><a href=”#”>Text Editor</a></li>
<li><a href=”#”>Notes</a></li>

</ul>
</li>

<!– Log Out Button –>
<li class=”right”><a href=”#”>Log Out</a></li>

</ul>

<ul id=”notifications” >
<li><a href=”www.google.com” class=”notificationIcons”><img src=”image/google.png”></a></li>
<li><a href=”www.twitter.com” class=”notificationIcons”><img src=”image/twitter.png”></a></li>
<li><a href=”www.facebook.com” class=”notificationIcons”><img src=”image/facebook.png”>
<span>
<img src=”image/pk.jpg” style=”float: left; width: 24px; margin-right: 5px;”>
<div style=”display:inline; color: #cc0000; font-weight: bold;”>Priyatosh yadav</div> Commentd on your post: “I Quit”
<hr style=”border: none; border-bottom: 1px solid #777777;”/>

<img src=”image/pk.jpg” style=”float: left; width: 24px; margin-right: 5px;”>
<div style=”display:inline; color: #cc0000; font-weight: bold;”>Priyatosh yadav</div> Shared your post: “I Quit”
<hr style=”border: none; border-bottom: 1px solid #777777;”/>

<img src=”image/pk.jpg” style=”float: left; width: 24px; margin-right: 5px;”>
<div style=”display:inline; color: #cc0000; font-weight: bold;”>Priyatosh yadav</div> liked your post: “I Quit”
<hr style=”border: none; border-bottom: 1px solid #777777;”/>
</span>
</a>
</li>

</ul>
</div>
</body>
</html>

CSS3 File:-

Footer.css:

body {
background: url(“image/wood.png”) repeat;
}

#footer {
position: fixed;
bottom: 0px;
margin: 0;
padding: 0;
left: 0;
right: 0;
width: 100%;
height: 40px;
font-family: Arial;
text-shadow: 1px 1px 1px black;
border-top: 1px solid rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
inset 0 10px rgba(255, 255, 255, 0.2),
inset 0 10px 20px rgba(255, 255, 255, 0.25),
inset 0 -15px 30px rgba(0, 0, 0,, 0.3);
}

#footer h2{
font-weight: normal;
font-size: 14px;
text-decoration: underline;
color: #cc0000;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 10px;
}`

#footer p{
color: white;
font-size: 12px;
float: left;
padding: 0px 10px;
margin: 10px 0px;
}

#footer image{
border: none;
}

#footer li ul{
list-style: none;
padding: 0px;
margin-bottom: 12px;
}

.clear {
clear: both;
display: block;
overflow: hideen;
visibility: hidden;
width: 0px;
height: 0px;
}

#footer .whiteBorder{
border: 1px solid white;
}

#footer .image_left{
float: left;
margin-right: 10px;
width: 40px;
}

#footer .black_box{
background: rgba(0,0,0,0.4);
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
}

#footer #notifications {
float: right;
width: auto;
margin: 5px 15px 0px;
padding: 0px;
overflow: hidden;
}

#footer #notifications li{
margin-right: 12px;
float: left;
width: 24px;
padding: 0px;
height: 32px;
list-style: none;
}

#footer #notifications li:hover{
margin-top: -1px;
}

a.notificationIcons span{
display: none;
font-size: 12px;
color: white;
bottom: 45px;
width: 150px;
position: absolute;
border: 1px solid #333333;
border-radius: 3px;
padding: 5px;
margin-left: -75px;
background: rgba(0,0,0,0.4);
}

a.notificationIcons:hover span{
display: block;
}

#footer_menu{
margin: 0px;
padding: 0px;
width: auto;
}

#footer_menu li{
list-style: none;
float: left;
font-size: 12px;
padding: 12px 14px 14px 14px;
border-right: 1px solid rgba(0,0,0,0.4);
background: rgba(0,0,0,0.1);
}

#footer_menu li:hover{
background: rgba(0,0,0,0.3);
}

#footer_menu li a{
display: block;
color: #cccccc;
text-decoration: none;
}

#footer_menu li a:hover{
color: white;
}

#footer_menu .homeButton{
padding: 5px 8px 0px 14px;
border: none;
background: none;
}

#footer_menu .homeButton:hover{
background: none;
}

#footer_menu .homeButton a{
background: url(“image/home.png”) top left no-repeat;
width: 36px;
height: 30px;
}

#footer_menu .homeButton a:hover{
background: url(“image/home1.png”) top left no-repeat;
}

/*Programs menu Drop-up */

#footer_menu li ul.dropUp{
display: none;
}

#footer_menu li:hover ul.dropUp{
display: block;
position: absolute;
margin: 0 0 0 -15px;
bottom: 40px;
border: 1px solid #111111;
border-bottom: none;
background: rgba(0,0,0,0.5);
border-radius: 7px 7px 0px 0px;
}

#footer_menu li:hover li{
float:none;
background: none;
border: none;
border-bottom: 1px solid #111111;
padding: 12px 10px 12px 10px;
}

/*Drop Up default Link*/

#footer_menu li:hover a{
color: #aaaaaa;
}
#footer_menu li:hover a:hover{
color: white;
}

/*Header Links (Stream, Messages, etc….)*/

#footer_menu li:hover a.headerLinks{
font-size: 14px;
text-decoration: underline;
color: #cc0000;
margin-top: 10px;
margin-left: 10px;
}

#footer_menu li:hover a.headerLinks:hover{
color: white;
cursor: pointer;
}

/*List Links*/

#footer_menu li:hover a.listLinks{
font-size: 12px;
color: #aaaaaa;
margin-left: 10px;
}

#footer_menu li:hover a.listLinks:hover{
color: white;
cursor: pointer;
}

#footer_menu .right{
float: right;
right: 0px;
margin-right: 2px;
border-right: none;
border-left: 1px solid rgba(0,0,0,0.3);
}

/* Layouts */

#footer .one_column_layout,
#footer .two_column_layout,
#footer .three_column_layout{
margin: 4px;
position: absolute;
padding-bottom: 15px;
display: none;
text-align: left;
}

/* Width of Each Layout */

#footer .one_column_layout{
width: 140px;
}

#footer .two_column_layout{
width: 280px;
}

#footer .three_column_layout{
width: 420px;
}

/* Display drop up menu on Hover */

#footer li:hover .one_column_layout,
#footer li:hover .two_column_layout,
#footer li:hover .three_column_layout{
display: block;
position: absolute;
margin: 0 0 0 -15px;
bottom: 40px;
background: rgba(0,0,0,0.5);
border-radius: 7px 7px 0px 0px;
}

#footer .col_1,
#footer .col_2,
#footer .col_3{
display: inline;
color: white;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}

#footer .col_1{ width: 130px;}
#footer .col_2{ width: 270px;}
#footer .col_3{ width: 410px;}

Image used in css and html:

facebook google home home1 twitter ani pkwood

Final Designed Layout:

awesome footer

I will  anticipate your Feedback and Suggestion so don’t forget to comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s