Footer layout with four columns, including a subscribe form

Footer layout with four columns, including a subscribe form

—

by

Webbiz.ID
in

Here’s an enhanced footer layout with four columns, including a subscribe form. The design is clean, modern, and responsive.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with Footer</title>
    <link rel="stylesheet" href="footer-styles.css">
</head>
<body>
    <!-- Footer -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-row">
                <!-- About Us -->
                <div class="footer-col">
                    <h4>About Us</h4>
                    <p>We are a team of passionate developers and designers committed to creating high-quality websites and applications.</p>
                </div>
                <!-- Quick Links -->
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <!-- Contact Us -->
                <div class="footer-col">
                    <h4>Contact Us</h4>
                    <ul>
                        <li>Email: support@example.com</li>
                        <li>Phone: +123-456-7890</li>
                        <li>Address: 123 Street, City</li>
                    </ul>
                </div>
                <!-- Subscribe Form -->
                <div class="footer-col">
                    <h4>Subscribe</h4>
                    <form class="subscribe-form" action="#" method="POST">
                        <input type="email" name="email" placeholder="Enter your email" required>
                        <button type="submit">Subscribe</button>
                    </form>
                    <p>Subscribe to our newsletter for the latest updates.</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2024 Your Company. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>
HTML
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 40px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-col {
    flex: 1;
    min-width: 220px;
    margin: 20px;
}

.footer-col h4 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    color: #ecf0f1;
}

.footer-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 50px;
    background: #e74c3c;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #bdc3c7;
}

.footer-col ul li a {
    text-decoration: none;
    color: #bdc3c7;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #e74c3c;
}

.subscribe-form {
    display: flex;
    flex-direction: column;
}

.subscribe-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
}

.subscribe-form button {
    padding: 10px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.subscribe-form button:hover {
    background: #c0392b;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    border-top: 1px solid #34495e;
    padding-top: 10px;
    color: #bdc3c7;
}
CSS

See the Pen Footer Website by WebbizID (@De-Orchids) on CodePen.

Features

  1. Four Columns:
    • About Us
    • Quick Links
    • Contact Us
    • Subscribe Form
  2. Subscribe Form:
    • Includes an email input field and a submit button.
    • Easily customizable for newsletter integration.
  3. Responsive Design:
    • Adjusts to different screen sizes, ensuring it looks good on mobile, tablet, and desktop.
  4. Modern Aesthetic:
    • Clean design with subtle color contrast and transitions.

Usage

  1. Save the HTML code as index.html.
  2. Save the CSS code as footer-styles.css.
  3. Link the footer-styles.css file in your HTML file.
  4. Open the index.html file in a browser to view your footer.

Let me know if you want additional features or modifications!

Leave a Reply

Your email address will not be published. Required fields are marked *

Artikel Terbaru ⭐