Table of Contents
Introduction:
In the realm of web design, the website footer stands as a humble yet pivotal element. Often overlooked, it holds immense potential, offering a canvas to showcase critical details while enhancing user experience. Have you contemplated crafting an impressive footer for your website, utilizing the power of HTML and CSS?
This guide is a doorway to unveiling the artistry behind constructing a captivating website footer. Within these lines, tailored for coding enthusiasts, we’ll unravel the step-by-step process, empowering you to create a dynamic and responsive footer. It’s not just about design but about providing a firm foundation for crucial links, contact information, and a touch of aesthetic finesse.
Embark on this journey of Website Footer in HTML CSS. Explore the steps meticulously crafted to transform a mere footer into an interactive space that not only anchors your website but also showcases vital information in an elegant and user-friendly manner.
Join Our Telegram Channel to Download the Project Source Code: Click Here
Steps to Create a Website Footer in HTML CSS:
Let’s break down the process into simple steps to help you build your own Website Footer in HTML CSS:
Start by organizing your project. Please create a new folder and name it appropriately. Inside this folder, create an HTML file (index.html) and a CSS file (style.css). The index.html file will hold the house of your HTML structure of the footer, while the CSS file will handle the stylizing it to perfection.
Step 1: HTML Structure:
Copy the HTML code provided below into your index.html file. This code consists of essential elements such as contact details, navigation links, and social media icons, all neatly organized within the footer section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Responsive footer</title>
</head>
<body>
<section id="footer">
<div class="main-footer">
<div class="logoinfo" data-aos="fade-up">
<h2>Responsive Footer</h2>
<div class="contact-details">
<h1>Contact Us</h1>
<li>
<div class="fa fa-phone"></div><a href="tel:+91">+91 77xxxxxxxxx</a>
</li>
<li>
<div class="fa fa-envelope"></div><a href="mailto:yourmail@gmail.com">yourmail@gmail.com</a>
</li>
</li>
</div>
</div>
<div class="com " data-aos="fade-up">
<h1>About</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="info" data-aos="fade-up">
<h1>Social Media</h1>
<div class="sociallogos">
<div class="logobox">
<i></i>
<a href="#" class="fa-brands fa-facebook"></a>
<a href="#" class="fa-brands fa-linkedin"></a>
<a href="#" class="fa-brands fa-youtube"></a>
</div>
</div>
</div>
</div>
<footer>© Your Copyright 2023 All Rights Reserved</footer>
</section>
</body>
</html>Step 2: CSS Styling:
Next, inject the CSS code provided into your style.css file. These lines of code bring life to your footer, applying styles that define the layout, color scheme, and responsiveness, ensuring a visually appealing and functional design.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
}
.main-footer {
padding: 70px 0;
display: flex;
justify-content: space-evenly;
background-color: #2f2b53;
}
.main-footer ul {
list-style: none;
}
.main-footer h1 {
font-size: 22px;
line-height: 117%;
color: #ffffff;
margin-bottom: 10px;
font-weight: 500;
}
.main-footer h2 {
color: #ffffff;
font-weight: 500;
}
.main-footer ul li a {
color: #ffffffcc;
text-decoration: none;
}
footer {
background-color: #2f2b53;
border-top: 1px solid #1d2742;
font-size: 17px;
padding: 15px 5px;
color: #ffffff;
text-align: center;
}
footer a {
text-decoration: none;
color: #ffffff;
}
.logoinfo p {
color: #6EB981;
font-size: 17px;
margin-top: 5px;
}
.contact-details {
margin-top: 20px;
}
.contact-details li {
list-style: none;
margin: 10px 0;
}
.contact-details li a {
text-decoration: none;
color: #f1f1f1;
}
.contact-details .fa {
color: #f1f1f1;
margin-right: 10px;
}
.sociallogos {
padding: 20px 0;
}
.sociallogos .logobox a {
padding: 0 10px;
text-decoration: none;
color: #ffffff;
font-size: 22px;
}
.com ul li {
padding: 5px 0;
}
@media only screen and (max-width: 749px) {
.main-footer {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.info {
padding: 20px 0;
}
}
@media (max-width: 480px) {
.main-footer {
grid-template-columns: 1fr;
}
.sociallogos {
padding: 20px 0;
}
.com {
padding: 20px 0;
}
}Conclusion:
In wrapping up, you’ve embarked on an insightful journey into crafting an impressive Website Footer in HTML CSS. By following these steps, you’ve now equipped your website with a professional and engaging footer that enhances user interaction and accessibility.
Remember, this footer design serves as a foundation; feel free to personalize it further, experiment with different styles, and adapt it to suit your website’s unique identity. Continue exploring diverse web design elements to elevate your HTML and CSS skills and further enrich your website’s appeal.
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
