Modern and Responsive Footer Design with Subscription Feature

Craft a modern, dark-themed footer using Bootstrap 5, featuring a logo, navigation, social icons, and an email subscription form with sleek hover effects.

HTML

CSS

#footer_snippet_4 {
    padding-top: 100px;
    background-color: #282828;
    color: #fff;
}
#footer_snippet_4 .top_column {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
}
#footer_snippet_4 .top_column .logo img {
    width: 120px;
}
#footer_snippet_4 .top_column ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
#footer_snippet_4 .top_column ul.menu li a {
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    transition: all 0.4s;
}
#footer_snippet_4 .top_column ul.menu li a:hover {
    color: #ff9801;
}
#footer_snippet_4 .social {
    display: flex;
}
#footer_snippet_4 .social .icon {
    margin: 0 10px;
}
#footer_snippet_4 .subscribe {
    display: flex;
    justify-content: center;
    margin: 50px 0;
    align-items: center;
}
#footer_snippet_4 .subscribe h6 {
    text-transform: capitalize;
    margin-right: 30px;
    margin-bottom: 0;
}
#footer_snippet_4 form {
    position: relative;
}
#footer_snippet_4 form input {
    background: transparent;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0px 20px 0px 20px;
    color: #fff;
    opacity: 0.7;
    outline: none;
    width: 100%;
    height: 45px;
}
#footer_snippet_4 form button {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
    height: 43px;
    line-height: 43px;
    text-align: center;
    border: 0;
    background-color: #ff9801;
    font-size: 20px;
}
.copyright {
    padding-bottom: 50px;
}
.copyright p {
    margin: 0;
}
@media (max-width: 767.9px) {
    #footer_snippet_4 .top_column {
        flex-direction: column;
    }
    #footer_snippet_4 .top_column ul.menu {
        margin: 30px 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    #footer_snippet_4 {
        padding-top: 50px;
    }
}
@media (max-width: 576px) {
    #footer_snippet_4 .subscribe {
        flex-direction: column;
    }
    #footer_snippet_4 .subscribe h6 {
        margin-bottom: 20px;
    }
}

JS

Width:

Height:

Elevate your website's appearance with our modern footer design, featuring a clean and stylish look with a focus on user engagement. The footer includes a centered logo, a flexible menu for easy navigation, and prominent social media icons to connect with your audience. An eye-catching subscription form invites visitors to stay updated with your latest news and offers. Designed for responsiveness and aesthetic appeal, this footer adapts seamlessly to different screen sizes, making it ideal for businesses and brands seeking a professional online presence with enhanced functionality.