Modo escuro Rodapé do site HTML CSS Código

920 codex

Abrir no Editor Video Publique Seu Código

Modo escuro Rodapé do site HTML CSS Código

Recomendado

27 December 2025

Envelope de carta de amor animado em HTML com GSAP

23 April 2025

Um Código de Metehan

1 March 2025

HTML CSS Barra de Navegação Moderna

HTML

<!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>

Recomendado

Envelope de carta de amor animado em HTML com GSAP

Um Código de Metehan

HTML CSS Barra de Navegação Moderna

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS