30
Footer Page
Learn how to create a modern and professional website footer using only HTML and CSS. This complete tutorial provides full source code, responsive design techniques, and stylish animations to help you build a visually appealing footer section that enhances your website’s overall look and user experience.
Introduction
Welcome to this tutorial on building a modern website footer using only HTML and CSS. Whether you are designing developing a professional business site. This project will help you create a clean, visually appealing and fully responsive footer section that add a very nice touch to your website.
In this tutorial I will teach you the process of creating a modern layout, incorporating gradient backgrounds, subtle animations and social media icons all without the need for JavaScript. You will also learn how to structure your footer with flexbox or grid making it adaptable to any screen size.
This project is perfect for developers of all levels looking to build a user friendly stylish footer that enhances both usability and design on any kind of web project.
Requirements to build Modern Website Footer
Basic Skills Needed
- Fundamental knowledge of HTML elements,structure and forms.
- Basic understanding of CSS.
- Knowledge with responsive design principles.
Tools Required
Code Editor:
- VS Code
- Sublime Text
- Notepad++
- Atom
Web Browser
For previewing your design Chrome, Firefox, Microsoft Edge and etc.
Setup
Create new folder by press Ctrl+Shift+N or press right click into screen then click “New” and choose Folder.
rename with name (Footer).
Open with Visual Studio or code editors like Sublime and create inside the folder two files:
1. Index.html.
2. style.css.
HTML Code
Open the Index.html file and paste the code shown below.
<!DOCTYPE html>
<html lang="en">
<!-- Created by Codeweave24-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern Animated Footer|Codeweave24</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<footer class="footer-container">
<div class="footer-wave"></div>
<div class="footer-content">
<div class="footer-column">
<h3>About Us</h3>
<p>
We deliver innovative solutions to transform your business and help
you achieve your goals in the digital era.
</p>
<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-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Services</h3>
<ul class="footer-links">
<li><a href="#">Web Design</a></li>
<li><a href="#">App Development</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">SEO Services</a></li>
<li><a href="#">UI/UX Design</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter for the latest updates and offers.</p>
<form class="newsletter-form">
<input type="email" placeholder="Your Email" required />
<button type="submit"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Affigoo. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
Explained
<!DOCTYPE html>
<html lang="en">Tells the browser this an HTML5 Document and the pae language is English.
Head Section
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern Animated Footer|Codeweave24</title>- <meta charset> ensures proper display of special characters.
- Make website mobile friendly.
- Set the title that appears in the browser tab.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>- Loads Font Awesome (used for social icons like Facebook, Twitter and etc.).
- Links to an external CSS file (style.css) for styling the footer.
Body Section
This is where the visible content of the footer is written.
<footer class="footer-container">
<div class="footer-wave"></div>
<div class="footer-content">- <footer class=”footer-container”> Start the footer and gives it a CSS class for styling.
- <div class=”footer-wave”></div> This adds a decorative wave design at the top of the footer.
- <div class=”footer-content”>This section holds all the footer columns (like About Us, Links, Services and Newsletter).
<div class="footer-column">
<h3>About Us</h3>
<p>
We deliver innovative solutions to transform your business and help
you achieve your goals in the digital era.
</p>
<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-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>- A brief description about the company.
- Social media icons (Facebook, Twitter, LinkedIn, Instagram).
<div class="footer-column">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>These are links that quickly take the user to other parts of the website.
<div class="footer-column">
<h3>Services</h3>
<ul class="footer-links">
<li><a href="#">Web Design</a></li>
<li><a href="#">App Development</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">SEO Services</a></li>
<li><a href="#">UI/UX Design</a></li>
</ul>
</div>A list a services the company provides.
<div class="footer-column">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter for the latest updates and offers.</p>
<form class="newsletter-form">
<input type="email" placeholder="Your Email" required />
<button type="submit"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>- Lets users subscribe by entering their email address.
- The submit button has a paper-plane icon.
<div class="footer-bottom">
<p>© 2025 Affigoo. All Rights Reserved.</p>
</div>This is the small text at the bottom, showing the copyright.
</footer> --- end footer section.
</body> --- end body section.
</html> --- end html.
CSS Code
We have finished the html part, now let’s start the styling part.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}Removes default spacing around all elements.
Sets a clean, modern font.
box-sizing:border-box ensures padding/margin doesn’t break layouts.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}- Ensures the page takes the full height of the screen.
- Makes the layout vertical (column), useful for pushing footer to the bottom.
.footer-container {
margin-top: auto;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
padding: 60px 0 30px;
position: relative;
overflow: hidden;
}- Dark gradient background for a modern look.
- margin-top: auto pushes footer to the bottom of the page.
- overflow: hidden hides anything outside the footer area.
.footer-wave {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background: url('...svg...');
background-size: cover;
}- Adds a wave design using an SVG image.
- Positioned at the top of the footer.
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}- Uses CSS Grid to create columns.
- Automatically fits items in rows depending on screen size.
- Looks great on desktops and mobile.
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}- Creates a colored line under each heading using ::after.
- Makes it visually attractive.
.footer-links a {
color: #b3b3b3;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.footer-links a:hover {
color: #fff;
transform: translateX(5px);
}
- Links are light gray by default.
- When you hover, they slide right and change to white.
- Adds a gradient underline on hover using ::before.
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.social-links a:hover {
background: linear-gradient(135deg, #00dbde 0%, #fc00ff 100%);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}- Circular icon buttons for Facebook, Twitter, etc.
- When hovered, they glow and slightly float up.
.newsletter-form {
display: flex;
margin-top: 20px;
}
.newsletter-form input {
flex: 1;
padding: 12px;
border: none;
border-radius: 4px 0 0 4px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
outline: none;
}
.newsletter-form button {
padding: 0 20px;
background: linear-gradient(135deg, #00dbde 0%, #fc00ff 100%);
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: all 0.3s ease;
}- Email input and submit button are styled to match the footer theme.
- Rounded corners and smooth animations on hover.
.footer-bottom {
text-align: center;
padding-top: 40px;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #b3b3b3;
font-size: 0.9rem;
}
.footer-bottom p {
position: relative;
display: inline-block;
}
.footer-bottom p::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background: linear-gradient(
90deg,
transparent 0%,
#00dbde 50%,
transparent 100%
);
animation: underlinePulse 3s infinite;
}- Bottom text is centered and separated by a thin line.
- Animated underline effect under the copyright.
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
}
.newsletter-form {
flex-direction: column;
}
}- On smaller screens (like phones), everything stacks vertically.
- Newsletter input and button are stacked too.
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.footer-column {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.footer-column:nth-child(1) {
animation-delay: 0.1s;
}- Makes each column fade in and slide up when the footer appears.
- Each column appears with a slight delay for a smoother effect.
The complete CSS is waiting for you bellow-go ahead, continue the building.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer-container {
margin-top: auto;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
padding: 60px 0 30px;
position: relative;
overflow: hidden;
}
.footer-wave {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%231a1a2e" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%231a1a2e" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%231a1a2e"/></svg>');
background-size: cover;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}
.footer-column h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 2px;
background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
border-radius: 2px;
}
.footer-column p {
margin-bottom: 20px;
line-height: 1.6;
color: #b3b3b3;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 15px;
}
.footer-links a {
color: #b3b3b3;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.footer-links a:hover {
color: #fff;
transform: translateX(5px);
}
.footer-links a::before {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
transition: width 0.3s ease;
}
.footer-links a:hover::before {
width: 100%;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.social-links a:hover {
background: linear-gradient(135deg, #00dbde 0%, #fc00ff 100%);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.footer-bottom {
text-align: center;
padding-top: 40px;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #b3b3b3;
font-size: 0.9rem;
}
.footer-bottom p {
position: relative;
display: inline-block;
}
.footer-bottom p::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background: linear-gradient(
90deg,
transparent 0%,
#00dbde 50%,
transparent 100%
);
animation: underlinePulse 3s infinite;
}
@keyframes underlinePulse {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
.newsletter-form {
display: flex;
margin-top: 20px;
}
.newsletter-form input {
flex: 1;
padding: 12px;
border: none;
border-radius: 4px 0 0 4px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
outline: none;
}
.newsletter-form button {
padding: 0 20px;
background: linear-gradient(135deg, #00dbde 0%, #fc00ff 100%);
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
opacity: 0.9;
transform: scale(1.02);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-column {
text-align: center;
}
.footer-column h3::after {
left: 50%;
transform: translateX(-50%);
}
.social-links {
justify-content: center;
}
.newsletter-form {
flex-direction: column;
}
.newsletter-form input {
border-radius: 4px;
margin-bottom: 10px;
}
.newsletter-form button {
border-radius: 4px;
padding: 12px;
}
}
/* Animation for footer elements */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.footer-column {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.footer-column:nth-child(1) {
animation-delay: 0.1s;
}
.footer-column:nth-child(2) {
animation-delay: 0.3s;
}
.footer-column:nth-child(3) {
animation-delay: 0.5s;
}
.footer-column:nth-child(4) {
animation-delay: 0.7s;
}
Output
Conclusion
This project is not just about creating a footer, It’s about building a modern website experience that feels clean and user-friendly. Even though it only uses HTML and CSS the small design touches like gradient backgrounds, smooth hover effects, stylish social icons and responsive layout.
The goal here is to make your footer not only look professional but also work smoothly across all screen sizes especially on mobile devices. It’s all about details spacing, alignment, colors and clean typography that help your footer feel like a natural part of your website.
If you are learning web development this is a great project to start with. You will practice combining HTML and CSS to create something practical and attractive. And once you have mastered this you can keep going. The more you experiment and build the better your skills will get.
