Código HTML CSS del pie de página del sitio web en modo oscuro

1048 codex

Abrir en el editor Video Publica tu código

Código HTML CSS del pie de página del sitio web en modo oscuro

Recomendado

2 December 2025

Deslizarse.IO

19 January 2026

Henry Stickmin: Dirigible - Juega al juego flash con Ruffle

26 March 2025

Página de destino para un negocio de bicicletas

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

Deslizarse.IO

Henry Stickmin: Dirigible - Juega al juego flash con Ruffle

Página de destino para un negocio de bicicletas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS