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

1,149 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

26 October 2024

Bot de planes (página de inicio)

6 February 2025

Barra de navegación responsiva premium de CodePen Home

1 August 2024

Botones animados de redes sociales.

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>

CSS