Local Business Map Footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local Business & Map Footer</title>
    <style>
        :root {
            --footer-bg: #333333;
            --footer-text: #e0e0e0;
            --footer-heading: #ffffff;
            --footer-link-hover: #f0f0f0;
            --footer-border: #4f4f4f;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-local {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0;
            font-size: 0.95rem;
            line-height: 1.6;
        }

.footer-local__main {
            display: grid;
            grid-template-columns: 1fr; /* Mobile-first: single column */
            gap: 2.5rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--footer-border);
        }

.footer-local__details h3 {
            color: var(--footer-heading);
            font-size: 1.25rem;
            margin: 0 0 1.5rem 0;
        }

.footer-local__details p {
            margin: 0 0 1rem 0;
        }
        .footer-local__details a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-local__details a:hover {
            color: var(--footer-link-hover);
            text-decoration: underline;
        }

.footer-local__hours-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .footer-local__hours-list li {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
        }
        .footer-local__hours-list li span:first-child {
            font-weight: 500;
        }

.footer-local__map iframe {
            width: 100%;
            height: 100%;
            min-height: 250px;
            border: 0;
            border-radius: 8px;
        }

.footer-local__bottom {
            padding-top: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
            font-size: 0.875rem;
        }
        
        .footer-local__copyright { margin: 0; }

.footer-local__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }
        .footer-local__social a { color: var(--footer-text); transition: color 0.2s; }
        .footer-local__social a:hover { color: var(--footer-link-hover); }
        .footer-local__social svg { width: 22px; height: 22px; fill: currentColor; }
        
        /* Media query for larger screens */
        @media (min-width: 992px) {
            .footer-local__main {
                grid-template-columns: 1fr 1.2fr; /* Give slightly more space to map */
                gap: 4rem;
            }
            .footer-local__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Local Business & Map Footer</h1>
            <p>Perfect for restaurants, shops, and offices.</p>
        </div>
    </main>

<footer class="footer-local" role="contentinfo">
        <div class="container">
            <div class="footer-local__main">
                <div class="footer-local__details">
                    <h3>Visit Our Cafe</h3>
                    <p>
                        123 Main Street<br>
                        Anytown, ST 12345
                    </p>
                    <p>
                        <strong>Phone:</strong> <a href="tel:+15551234567">(555) 123-4567</a><br>
                        <strong>Email:</strong> <a href="mailto:contact@yourcafe.com">contact@yourcafe.com</a>
                    </p>
                    <ul class="footer-local__hours-list">
                        <li><span>Monday-Friday</span> <span>7am - 6pm</span></li>
                        <li><span>Saturday</span> <span>8am - 5pm</span></li>
                        <li><span>Sunday</span> <span>8am - 3pm</span></li>
                    </ul>
                </div>
                <div class="footer-local__map">
                    
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.257581903086!2d-122.42172838468165!3d37.78443997975718!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809961d798f7%3A0x4a7947b146243886!2sSan%20Francisco%20City%20Hall!5e0!3m2!1sen!2sus!4v1630123456789!5m2!1sen!2sus" 
                        allowfullscreen="" 
                        loading="lazy"
                        aria-label="Google map showing location of our cafe">
                    </iframe>
                </div>
            </div>
            <div class="footer-local__bottom">
                <p class="footer-local__copyright">&copy; 2025 Your Cafe Name. All Rights Reserved.</p>
                <nav class="footer-local__social" aria-label="Social media">
                    <ul>
                        <li><a href="#" aria-label="Our Facebook Page"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a></li>
                        <li><a href="#" aria-label="Our Instagram Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.784.297-1.459.717-2.126 1.384S.926 3.356.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.297.784.717 1.459 1.384 2.126.667.666 1.342 1.089 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.784-.297 1.459-.718 2.126-1.384.666-.667 1.089-1.342 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.148-.558-2.913-.297-.784-.718-1.459-1.384-2.126C21.314 1.64 20.64 1.217 19.856.92c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.056 1.17-.249 1.805-.413 2.227-.217.562-.477.96-.896 1.382-.42.419-.819.679-1.381.896-.422.164-1.057.36-2.227.413-1.266.057-1.646.07-4.85.07s-3.585-.015-4.85-.074c-1.17-.056-1.805-.249-2.227-.413-.562-.217-.96-.477-1.382-.896-.419-.42-.679-.819-.896-1.381-.164-.422-.36-1.057-.413-2.227-.057-1.266-.07-1.646-.07-4.85s.015-3.585.074-4.85c.056-1.17.249-1.805.413-2.227.217.562.477.96.896-1.382.42-.419.819.679 1.381-.896.422-.164 1.057.36 2.227-.413 1.266-.057 1.646-.07 4.85-.07zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z"/></svg></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>
</body>
</html>