Hey there, coding enthusiasts! Today, we’re going to tackle a fun project – creating a responsive footer using just HTML and CSS.
Why should you care? Well, responsive design is a crucial skill in the web development world. Whether you’re a coding pro or a beginner, this tutorial is a great opportunity to level up your skills.
We’re not just building a footer; we’re exploring the beauty of making web elements look good on any screen. So, join us in this coding adventure, where every line of code is a step toward creating something both functional and stylish.
Let’s keep it simple, dive into the code, and craft a responsive footer that will make your web projects shine. Ready to start coding? Let’s go!
HTML :
The given code snippet represents a responsive footer for a website. It includes a logo, social media icons, and several link boxes categorized under “Company,” “Services,” “Account,” and “Courses.” There is also an input box for users to subscribe by entering their email. At the bottom, there is copyright information and links to the privacy policy and terms & conditions. The footer is designed to be visually appealing and user-friendly.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive footer</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<footer>
<div class="content">
<div class="top">
<div class="logo-details">
<i class="fab fa-slack"></i>
<span class="logo_name">CodeStella</span>
</div>
<div class="media-icons">
<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>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="link-boxes">
<ul class="box">
<li class="link_name">Company</li>
<li><a href="#">Home</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Get started</a></li>
</ul>
<ul class="box">
<li class="link_name">Services</li>
<li><a href="#">App design</a></li>
<li><a href="#">Web design</a></li>
<li><a href="#">Logo design</a></li>
<li><a href="#">Banner design</a></li>
</ul>
<ul class="box">
<li class="link_name">Account</li>
<li><a href="#">Profile</a></li>
<li><a href="#">My account</a></li>
<li><a href="#">Prefrences</a></li>
<li><a href="#">Purchase</a></li>
</ul>
<ul class="box">
<li class="link_name">Courses</li>
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
<ul class="box input-box">
<li class="link_name">Subscribe</li>
<li><input type="text" placeholder="Enter your email"></li>
<li><input type="button" value="Subscribe"></li>
</ul>
</div>
</div>
<div class="bottom-details">
<div class="bottom_text">
<span class="copyright_text">Copyright © 2024 <a href="#">CodingStella </a>All rights reserved</span>
<span class="policy_terms">
<a href="#">Privacy policy</a>
<a href="#">Terms & condition</a>
</span>
</div>
</div>
</footer>
</body>
</html>
CSS :
The given code is a CSS stylesheet that defines the styling for a footer section of a webpage. It sets the font family to “Poppins”, sets the background color, and positions the footer at the bottom of the page. It also includes social media icons and link boxes. The styling is responsive and adjusts for different screen sizes.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #eeeceb;
}
footer {
position: fixed;
background: #10182f;
width: 100%;
bottom: 0;
left: 0;
}
footer::before {
content: "";
position: absolute;
left: 0;
top: 100px;
height: 1px;
width: 100%;
background: #afafb6;
}
footer .content {
max-width: 1250px;
margin: auto;
padding: 30px 40px 40px 40px;
}
footer .content .top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}
.content .top .logo-details {
color: #fff;
font-size: 30px;
}
.content .top .media-icons {
display: flex;
}
.content .top .media-icons a {
height: 40px;
width: 40px;
margin: 0 8px;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 17px;
text-decoration: none;
transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1) {
background: #4267b2;
}
.top .media-icons a:nth-child(1):hover {
color: #4267b2;
background: #fff;
}
.top .media-icons a:nth-child(2) {
background: #1da1f2;
}
.top .media-icons a:nth-child(2):hover {
color: #1da1f2;
background: #fff;
}
.top .media-icons a:nth-child(3) {
background: #e1306c;
}
.top .media-icons a:nth-child(3):hover {
color: #e1306c;
background: #fff;
}
.top .media-icons a:nth-child(4) {
background: #0077b5;
}
.top .media-icons a:nth-child(4):hover {
color: #0077b5;
background: #fff;
}
.top .media-icons a:nth-child(5) {
background: #ff0000;
}
.top .media-icons a:nth-child(5):hover {
color: #ff0000;
background: #fff;
}
footer .content .link-boxes {
width: 100%;
display: flex;
justify-content: space-between;
}
footer .content .link-boxes .box {
width: calc(100% / 5 - 10px);
}
.content .link-boxes .box .link_name {
color: #fff;
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
position: relative;
}
.link-boxes .box .link_name::before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 35px;
background: #fff;
}
.content .link-boxes .box li {
margin: 6px 0;
list-style: none;
}
.content .link-boxes .box li a {
color: #fff;
font-size: 14px;
font-weight: 400;
text-decoration: none;
opacity: 0.8;
transition: all 0.4s ease;
}
.content .link-boxes .box li a:hover {
opacity: 1;
text-decoration: underline;
}
.content .link-boxes .input-box {
margin-right: 55px;
}
.link-boxes .input-box input {
height: 40px;
width: calc(100% + 55px);
outline: none;
border: 2px solid #afafb6;
background: #eaeaea;
border-radius: 4px;
padding: 0 15px;
font-size: 15px;
color: #000000;
margin-top: 5px;
}
.link-boxes .input-box input::placeholder {
color: #afafb6;
font-size: 16px;
}
.link-boxes .input-box input[type="button"] {
background: #fff;
color: #3824d2;
border: none;
font-size: 18px;
font-weight: 500;
margin: 4px 0;
opacity: 0.8;
cursor: pointer;
transition: all 0.4s ease;
}
.input-box input[type="button"]:hover {
opacity: 1;
}
footer .bottom-details {
width: 100%;
background: #2e2748;
}
footer .bottom-details .bottom_text {
max-width: 1250px;
margin: auto;
padding: 20px 40px;
display: flex;
justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
font-size: 14px;
font-weight: 300;
color: #fff;
opacity: 0.8;
text-decoration: none;
}
.bottom-details .bottom_text a:hover {
opacity: 1;
text-decoration: underline;
}
.bottom-details .bottom_text a {
margin-right: 10px;
}
@media (max-width: 900px) {
footer .content .link-boxes {
flex-wrap: wrap;
}
footer .content .link-boxes .input-box {
width: 40%;
margin-top: 10px;
}
}
@media (max-width: 700px) {
footer {
position: relative;
}
.content .top .logo-details {
font-size: 26px;
}
.content .top .media-icons a {
height: 35px;
width: 35px;
font-size: 14px;
line-height: 35px;
}
footer .content .link-boxes .box {
width: calc(100% / 3 - 10px);
}
footer .content .link-boxes .input-box {
width: 60%;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
font-size: 12px;
}
}
@media (max-width: 520px) {
footer::before {
top: 145px;
}
footer .content .top {
flex-direction: column;
}
.content .top .media-icons {
margin-top: 16px;
}
footer .content .link-boxes .box {
width: calc(100% / 2 - 10px);
}
footer .content .link-boxes .input-box {
width: 100%;
}
}
If you run into any hiccups with your project, worry not. You can easily grab the source code for this project. Just hit the Download button to get started on your coding adventure. Happy coding!
