Header Ads Widget

html css footer

My codding spot October 07, 2023

This post will describe how to design the footer section using just HTML and CSS.

What is the footer on the website?

The footer is a very essential part of any website. It is always placed at the bottom of the website. It contains crucial information such as owner information, address, email, links to other websites, etc… 

Here are some important components that are common in footer design. 

Navigation-links:

These links include some important pages of the website that help the user quickly navigate through the website.

Copyright information:-

It includes a copyright symbol, owner information either name or website name, year, and one statement about the rights.  Some of the websites attached links to the privacy policy and terms and conditions page.

Social media:-

Nowadays, social media is the platform for promoting your brand.  Many websites include social media links in the footer section.

Location information:-

This information includes the physical location of the company in the form of a map or address.

Newsletter:-

It provides a subscription to a user to get updated about new activities on the website. 

Contact information:-

It includes an email address and phone number. 

The content of the footer varies from one website to another website and it depends on the type of website.

html css footer
html css footer design 


Here is the source code of the footer design.

Source code of footer design 

HTML 

<!DOCTYPE html>
<html>
<head>
<title>Footer Design</title>
<link rel="stylesheet" href="footer.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<section class="main">
<header>
<h1>HEADER</h1>
</header>
<section class="content">
<p class="maincontent">MAIN SECTION</p>
</section>
<footer>
<section class="logo">
<img src="20231004_142847_0000.png" height="70" width="70">
<p class="logotxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</section>
<section class="newsletter">
<p class="newslt">Subscribe our Newsletter</p>
<input type="email" name="em" id="mail"/>
<button type="button" id="sub">SUBSCRIBE</button>
</section>
<section class="links">
<p class="menu">Quick links</p>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Blog</a>
<a href="#">Help</a>
</section>
<section class="address">
<p class="addr">Address</p>
<p class="addrline">Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit,<br>
 sed do eiusmod tempor incididunt,<br> ut labore et dolore magna aliqua.</p>
</section>
<section class="social">
<p class="socialicon">Get in touch with</p>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-instagram"></a>
</section>
<section class="contact">
<p class="reach">Reach us</p>
<p class="email">abc123.vbn@gmail.com</p>
<p class="ph">1120-78-3984</p>
</section>
<section class="copy">
<p class="copyright">&copy;2023 mycoddigsite. All Rights Reserved. <a href="#">Terms of Used</a>|<a href="#">Privacy Policy</a>
</p>
</section>
</footer>
</section>
</body>
</html>

CSS 

 
*
{
font-family:"Times New Roman", Times, serif;
}
.main
{
display:grid;
grid-template-rows:100px 500px auto;
grid-template-columns:auto;
}
header
{
background-color:#6b75df;
}
h1
{
text-align:center;
margin-top:40px;
}
.content
{
background-color:#d6e7fc;
}
.maincontent
{
text-align:center;
margin-top:18%;
font-size:large;
}
footer
{
background-color:#202e55;
display:grid;
grid-template-rows:auto auto auto;
grid-template-columns:30% 40% 30%;
}
.logo
{
margin:5%;
}
.logo img
{
border-radius:50%;
}
.logotxt
{
color:#ffdd83;
}
a
{
text-decoration:none;
display:block;
margin:5pt;
color:#fc6b21;
}
.newslt
{
font-size:16pt;
margin-left:20%;
}
input[type="email"]
{
border:none;
outline:none;
border-radius:20px 0px 0px 20px;
height:15%;
width:50%;
padding:5px;
margin-top:30px;
}
button
{
border-radius:0px 20px 20px 0px;
border:none;
width:30%;
height:20%;
background-color:#ec837f;
font-size:12pt;
font-weight:500;
color:#3333ff;
}
.links
{
margin:5%;
}
.newslt,.menu,.addr,.contact,.socialicon,.copyright
{
color:#fcfcfc;
}
.social,.address,.contact
{
margin:3%;
}
.addrline
{
color:#ffcc99;
}
.email,.ph
{
color:#ffff99;
}
.copy
{
grid-coulmn-start:1;
grid-column-end:3;
}
.copyright a
{
display:inline;
}
.social
{
grid-column-start:3;
grid-column-end:4;
grid-row-start:1;
grid-row-end:2;
}
.fa
{
padding:5%;
font-size:24pt;
width:5%;
text-align:center;
text-decoration:none;
margin:25px 2px;
display:inline;
border-radius:50%;
}
.fa:hover
{
box-shadow:3px 3px 5px #ffffff;
}
.fa-facebook
{
background-color:#003399;
color:#ffffff;
}
.fa-facebook:hover
{
background-color:#ffffff;
color:#003399;
}
.fa-twitter
{
background-color:#0099cc;
color:#ffffff;
}
.fa-twitter:hover
{
background-color:#ffffff;
color:#0099cc;
}
.fa-pinterest
{
background-color:#ff0000;
color:#ffffff;
}
.fa-pinterest:hover
{
background-color:#ffffff;
color:#ff0000;
}
.fa-instagram
{
background:linear-gradient(#d62976,#962fbf,#4f5bd5) ;
color:#ffffff;
}
.fa-instagram:hover
{
background:#ffffff;
color:#d62976;
}

Final Output of footer design 


Summary

In this post, you learned to create a simple footer design with HTML and CSS only. I have mentioned three sections for a better understanding of the layout - header, main section, and footer.


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments