DS
Back to HTML

purple-footer.html

html/components/purple-footer.html
HTML

HTML snippet: purple-footer.html

purple-footer.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Footer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        footer {
            background-color: #6b21a8;
            color: #fff;
            padding: 24px 40px;
            display: flex;
            align-items: flex-start;
            gap: 40px;
        }

        @media (max-width: 600px) {
            footer {
                flex-direction: column;
                align-items: center;
                padding: 24px 20px;
                gap: 20px;
                text-align: center;
            }

            .footer-logo {
                min-width: unset;
            }

            .footer-center {
                width: 100%;
            }

            .footer-links {
                justify-content: center;
            }

            .footer-right {
                width: 100%;
                text-align: center;
            }

            .footer-right-row {
                justify-content: center;
            }
        }

        /* ── Logo placeholder ── */
        .footer-logo {
            flex-shrink: 0;
            min-width: 160px;
        }

        .footer-logo img {
            display: block;
            width: 160px;
            height: 50px;
            object-fit: contain;
        }

        /* Shown only when the real image is missing */
        .footer-logo .img-placeholder {
            width: 160px;
            height: 50px;
            border: 1px dashed rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0.5px;
        }

        /* ── Center text block ── */
        .footer-center {
            flex: 1;
            font-size: 0.78rem;
            line-height: 1.7;
            color: #e9d5ff;
        }

        .footer-center a {
            color: #e9d5ff;
            text-decoration: none;
        }

        .footer-center a:hover {
            text-decoration: underline;
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0 6px;
            margin-bottom: 2px;
        }

        .footer-links .sep {
            color: rgba(255, 255, 255, 0.4);
        }

        /* ── Right link column ── */
        .footer-right {
            flex-shrink: 0;
            font-size: 0.78rem;
            text-align: right;
        }

        .footer-right-row {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .footer-right-row a {
            color: #e9d5ff;
            text-decoration: none;
            white-space: nowrap;
        }

        .footer-right-row a:hover {
            text-decoration: underline;
        }

        .footer-right-row .sep {
            color: rgba(255, 255, 255, 0.4);
        }

        sup {
            font-size: 0.6rem;
        }
    </style>
</head>

<body>

    <footer>

        <!-- ① Logo — swap src to your real image URL; placeholder shown below -->
        <div class="footer-logo">
            <!--
      Replace the div below with:
      <img src="YOUR_LOGO_URL" alt="Proximus logo" />
    -->
            <div class="img-placeholder">LOGO PLACEHOLDER</div>
        </div>

        <!-- ② Center info -->
        <div class="footer-center">
            <p>All rights reserved. &copy; 2026 Proximus</p>

            <div class="footer-links">
                <a href="#">General terms and conditions, consumer info</a>
                <span class="sep">|</span>
                <a href="#">Pricelist and tariffs</a>
                <span class="sep">|</span>
                <a href="#">Accessibility</a>
                <span class="sep">|</span>
                <a href="#">Privacy</a>
            </div>

            <div class="footer-links">
                <a href="#">Cookie policy</a>
                <span class="sep">|</span>
                <a href="#">Cookie manager</a>
                <span class="sep">|</span>
                <a href="#">Company data <sup>&#x2197;</sup></a>
            </div>

            <p>This site was created and is managed in accordance with Belgian law.</p>
            <p>Boulevard du Roi Albert II, 27 &ndash; B-1030 Brussels.</p>
        </div>

        <!-- ③ Right links — each URL is its own <a> tag -->
        <div class="footer-right">

            <div class="footer-right-row">
                <a href="#">Carrier &amp; Wholesale Solutions <sup>&#x2197;</sup></a>
            </div>

            <div class="footer-right-row">
                <a href="#">Proximus Group <sup>&#x2197;</sup></a>
                <span class="sep">|</span>
                <a href="#">Telindus <sup>&#x2197;</sup></a>
            </div>

            <div class="footer-right-row">
                <a href="#">Jobs <sup>&#x2197;</sup></a>
                <span class="sep">|</span>
                <a href="#">Sitemap</a>
            </div>

        </div>

    </footer>

</body>

</html>