Hello, guys I am back with another fantastic project using HTML and CSS today I build a footer menu design using pure HTML and CSS don’t use any type of library like Bootstrap, tailwind, tailblock, etc.
The best part of this footer menu project it is also responsive which means any device is suitable for this menu mobile, tablet and laptop, etc.
Recently I shared a complete UI design for Profile Card Using HTML and CSS if you want to create so please check this project.
What is Footer Menu?
A footer menu is a section at the bottom of a webpage that contains links to important pages or sections of the website. It typically appears on every page of the website and can include links to the home page, contact page, social media pages, and other important sections.
Footer menus help users navigate a website more easily and can improve the overall user experience.
In addition to links, a footer menu can also contain other information such as copyright notices, legal disclaimers, and contact information. Some websites use the footer menu to display additional navigation options that may not fit in the main menu, such as links to specific categories of products or services.
Footer menus can be designed to be responsive, meaning that they adapt to different screen sizes and devices, such as mobile phones and tablets. This is important because users are increasingly accessing websites on mobile devices, and a well-designed footer menu can make it easier for them to navigate and find the information they need.
About This Project
This Project was created by the Coding Pakistan blog website it proposes to help students that are learning web development technology like HTML, CSS, JavaScript, React.js, and Next.js.
| Created By | Coding Pakistan |
| Languages | HTML and CSS |
| Source Code | Download GitHub |
| Preview | Take Preview |
| Responsive Design | Yes |
In this Footer menu UI design, you see the background color is black and the text color is white there are three categories that I created in this footer first for a company second for Get help and last one for an online shop.
Also, you can customize these categories as you want I only created three if you want to create four or five categories so yes can it is very easy.
In the last, I mention our website’s social media profile icon if any person wants to follow it is very easy to find our social media platform also it helps with user engagement and SEO.
How To Create Footer Menu Using HTML / CSS
There are some steps to create this type of Footer menu using HTML and CSS only that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two files one for HTML and the other one for CSS.
- Make sure the HTML file extension is (.html) and the CSS file extension will be (.css)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Source Code of Responsive Footer Menu Design
HTML FILE
<!DOCTYPE html> <html lang="en"> <head> <!-- Created By www.codingpakistan.com --> <title>Footer Design</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> </head> <body> <footer class="footer"> <div class="container"> <div class="row"> <div class="footer-col"> <h4>company</h4> <ul> <li><a href="#">about us</a></li> <li><a href="#">our services</a></li> <li><a href="#">privacy policy</a></li> <li><a href="#">affiliate program</a></li> </ul> </div> <div class="footer-col"> <h4>get help</h4> <ul> <li><a href="#">FAQ</a></li> <li><a href="#">shipping</a></li> <li><a href="#">returns</a></li> <li><a href="#">order status</a></li> <li><a href="#">payment options</a></li> </ul> </div> <div class="footer-col"> <h4>online shop</h4> <ul> <li><a href="#">watch</a></li> <li><a href="#">bag</a></li> <li><a href="#">shoes</a></li> <li><a href="#">dress</a></li> </ul> </div> <div class="footer-col"> <h4>follow us</h4> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> </div> </div> </footer> </body> </html>
CSS FILE
/* Created By www.codingpakistan.com */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
line-height: 1.5;
font-family: 'Poppins', sans-serif;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: #24262b;
padding: 70px 0;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
@media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
}
Video Tutorial – Responsive Footer Menu Design
If you don’t understand this code and you want to learn in deep so please watch this video and subscribe to this youtube channel for more videos like this.
Related Content
- Best way to learn JavaScript in 3 months
- 20 best web development services
- Is web development a good career in 2023
Conclusion
A responsive footer menu is an important element of a well-designed website. Providing easy access to important pages and information, can improve the user experience and make it easier for users to navigate a website.
With HTML and CSS, it is relatively simple to create a responsive footer menu that looks great on any device.
By following the steps outlined in this blog, you can create a footer menu that will help your website stand out and provide your users with a seamless browsing experience. So go ahead and give it a try!