Header Elements are located at the top of the User Interface and are often items that draw users attention as soon as they load the page up. Effective use of a header element can enhance user experience with the product. One of the most common uses of header element is an image slideshow.
Basic Footer
HTML, CSS Code and JS Script
HTML Code
<![CDATA[
<div class="footer" style="height: 250px;">
<h3>Footer</h3>
</div>
]]>
CSS Code
<![CDATA[
.footer {
background-color: #ff6633;
height: 20%;
width: 100%;
color: #333333;
text-align: center;
}
]]>
3 Column Footer
HTML, CSS Code and JS Script
HTML Code
<![CDATA[
<div class="footer">
<div><p>Follow Us on</p>
<a href="#"><i class="fa fa-instagram"></i> Instagram</a><br />
<a href="#"><i class="fa fa-twitter"></i> Twitter</a><br />
<a href="#"><i class="fa fa-facebook"></i> Facebook</a><br />
</div>
<div>
<p>Support</p>
<a href="#"> Report Abuse</a><br />
<a href="#"> Community</a><br />
<a href="#"> Contact Support</a><br />
</div>
<div>
<p>Resources</p>
<a href="#"> Home</a><br />
<a href="#"> Site Map</a><br />
<a href="#"> Webmail</a><br />
</div>
</div>
]]>
CSS Code
<![CDATA[
.footer {
display: table;
table-layout: fixed;
background-color: #ff6633;
height: 20%;
width: 100%;
color: #f2f2f2;
text-align: center;
}
.footer > div {
display: table-cell;
}
]]>