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

732 codex

Abrir en el editor Publica tu código

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

Recomendado

15 August 2025

Código HTML para tableta de dibujo con Javascript

18 August 2024

Casilla de verificación / ¿Desarrollador o diseñador?

22 September 2025

Animación CSS: Efecto de arrepentimiento cromático

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

Código HTML para tableta de dibujo con Javascript

Casilla de verificación / ¿Desarrollador o diseñador?

Animación CSS: Efecto de arrepentimiento cromático

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS