<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Footer with Social Icons</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
footer {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: #fff;
padding: 50px 0 20px;
}
.footer-content {
margin-bottom: 30px;
}
.footer-logo {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 15px;
color: #fff;
}
.footer-description {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.footer-links h5 {
font-weight: 600;
margin-bottom: 20px;
color: #fff;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links ul li a:hover {
color: #fff;
padding-left: 5px;
}
.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background: #fff;
transform: translateY(-5px);
}
.social-icon.facebook:hover {
color: #1877f2;
}
.social-icon.twitter:hover {
color: #1da1f2;
}
.social-icon.instagram:hover {
color: #e4405f;
}
.social-icon.linkedin:hover {
color: #0077b5;
}
.social-icon.youtube:hover {
color: #ff0000;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
margin-top: 30px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
.newsletter-form {
margin-top: 20px;
}
.newsletter-form .input-group input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
}
.newsletter-form .input-group input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-form .btn {
background: #fff;
color: #2a5298;
font-weight: 600;
border: none;
}
.newsletter-form .btn:hover {
background: rgba(255, 255, 255, 0.9);
}
</style>
</head>
<body>
<!-- Main Content (Demo) -->
<main>
<div class="text-center text-white">
<h1 class="display-4 mb-3">Your Website Content</h1>
<p class="lead">Scroll down to see the footer</p>
</div>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="row footer-content">
<!-- Company Info -->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<div class="footer-logo">YourBrand</div>
<p class="footer-description">
Creating amazing digital experiences for businesses worldwide. Let's build something great together.
</p>
<div class="social-icons">
<a href="#" class="social-icon facebook" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-icon twitter" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-icon instagram" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="social-icon linkedin" aria-label="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="social-icon youtube" aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<!-- Quick Links -->
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0 footer-links">
<h5>Quick Links</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Services -->
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0 footer-links">
<h5>Services</h5>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</div>
<!-- Newsletter -->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5>Newsletter</h5>
<p class="footer-description">Subscribe to get updates on our latest offers!</p>
<form class="newsletter-form">
<div class="input-group">
<input type="email" class="form-control" placeholder="Enter your email" aria-label="Email">
<button class="btn" type="submit">Subscribe</button>
</div>
</form>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom">
<p class="mb-0">© 2024 YourBrand. All rights reserved. | <a href="#" class="text-white-50 text-decoration-none">Privacy Policy</a> | <a href="#" class="text-white-50 text-decoration-none">Terms of Service</a></p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
No comments yet. Be the first!