Dark Mode Website Footer HTML CSS Code

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Footer - Dark Mode</title>
    <style>
        /* Basic Body Styling for Dark Mode Context */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #282828; /* Dark background for the main content area */
            color: #e0e0e0; /* Light text color for contrast */
            min-height: 100vh; /* Ensures body takes full viewport height */
            display: flex;
            flex-direction: column; /* Stacks main and footer vertically */
        }

/* Main content area to push footer down */
        main {
            flex-grow: 1; /* Allows main content to take up available space */
            padding: 20px;
            text-align: center;
        }

/* Footer Specific Styles */
        .site-footer {
            background-color: #1a1a1a; /* Very dark background for the footer */
            color: #f0f0f0; /* Light text color for footer content */
            padding: 40px 20px;
            font-size: 0.9em;
            line-height: 1.6;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow at the top */
        }

.site-footer .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap; /* Allows sections to wrap on smaller screens */
            justify-content: space-around; /* Distributes items with space around them */
            align-items: flex-start; /* Aligns items to the top of the container */
            gap: 30px; /* Space between columns */
        }

.site-footer .footer-section {
            flex: 1; /* Allows sections to grow and shrink */
            min-width: 200px; /* Minimum width before wrapping */
            margin-bottom: 20px; /* Space below sections when wrapped */
        }

.site-footer h3 {
            color: #ffffff; /* Slightly brighter heading color */
            margin-bottom: 15px;
            font-size: 1.1em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

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

.site-footer ul li {
            margin-bottom: 8px;
        }

.site-footer ul li a {
            color: #b0b0b0; /* Lighter link color */
            text-decoration: none;
            transition: color 0.3s ease;
        }

.site-footer ul li a:hover {
            color: #ffffff; /* White on hover */
            text-decoration: underline;
        }

.site-footer .social-icons a {
            display: inline-block;
            margin: 0 10px;
            color: #b0b0b0;
            font-size: 1em; /* Adjust as needed, e.g., 1.5em for icons */
            text-decoration: none;
            transition: color 0.3s ease;
        }

.site-footer .social-icons a:hover {
            color: #ffffff;
        }

.site-footer .footer-bottom {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #333; /* Subtle separator line */
            text-align: center;
            color: #888; /* Lighter copyright text */
            font-size: 0.85em;
        }

.site-footer .footer-bottom a {
            color: #888;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.site-footer .footer-bottom a:hover {
            color: #f0f0f0;
            text-decoration: underline;
        }

/* Responsive Adjustments */
        @media (max-width: 768px) {
            .site-footer .footer-content {
                flex-direction: column; /* Stack sections vertically */
                align-items: center; /* Center align sections */
            }

.site-footer .footer-section {
                text-align: center;
                width: 100%; /* Full width on smaller screens */
                margin-bottom: 30px;
            }

.site-footer .footer-section:last-child {
                margin-bottom: 0;
            }
        }
    </style>
</head>
<body>

<main>
        <h1>Your Website Content Here</h1>
        <p>This is the main area of your website. Scroll down to see the dark mode footer.</p>
        <p>Add more content here to ensure the footer stays at the bottom of the page.</p>
        
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
    </main>

<footer class="site-footer">
        <div class="footer-content">
            <div class="footer-section about">
                <h3>About Us</h3>
                <p>We are a dedicated team providing innovative solutions and high-quality services to meet your needs.</p>
                <div class="social-icons">
                    <a href="#" aria-label="Facebook">Facebook</a>
                    <a href="#" aria-label="Twitter">Twitter</a>
                    <a href="#" aria-label="Instagram">Instagram</a>
                    <a href="#" aria-label="LinkedIn">LinkedIn</a>
                </div>
            </div>
            <div class="footer-section links">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="footer-section contact">
                <h3>Contact Info</h3>
                <p>123 Dark Street, Night City, DC 12345</p>
                <p>+1 (234) 567-8900</p>
                <p>info@yourwebsite.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            © 2023 YourCompany. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
        </div>
    </footer>

</body>
</html>

Dark Mode Website Footer HTML CSS Code

Recommended

HTML Social Icons

HTML Code Placeholder Comment

CSS Contact Form

HTML

CSS

JS

Recommended

HTML Social Icons

HTML Code Placeholder Comment

CSS Contact Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS