Portfolio Agency Footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio & Agency Footer</title>
    <style>
        :root {
            --cta-bg: #f0f2f5;
            --cta-heading-color: #1c1e21;
            --cta-link-color: #007bff;
            --cta-link-hover-color: #0056b3;

--footer-bg: #1c1e21;
            --footer-text: #adb5bd;
            --footer-link-hover: #ffffff;
        }

/* 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;
            background-color: #ffffff;
        }
        
        main {
            flex-grow: 1;
        }

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

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

/* FOOTER STYLES START HERE */
        
        .footer-agency {
            text-align: center;
        }

/* CTA Section */
        .footer-agency__cta {
            background-color: var(--cta-bg);
            padding: 4rem 1.5rem;
        }

.footer-agency__cta-heading {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--cta-heading-color);
            margin: 0 0 1rem 0;
        }

.footer-agency__cta-link {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--cta-link-color);
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-agency__cta-link:hover {
            color: var(--cta-link-hover-color);
            text-decoration: underline;
        }

/* Bottom Bar Section */
        .footer-agency__bottom {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 2rem 0;
        }

.footer-agency__bottom-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }

.footer-agency__nav ul,
        .footer-agency__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
        }

.footer-agency__nav a,
        .footer-agency__social a {
            color: var(--footer-text);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

.footer-agency__nav a:hover,
        .footer-agency__social a:hover {
            color: var(--footer-link-hover);
        }

.footer-agency__social svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }

.footer-agency__copyright {
            font-size: 0.875rem;
        }
        
        /* Media query for larger screens */
        @media (min-width: 768px) {
            .footer-agency__cta-heading { font-size: 3rem; }
            .footer-agency__cta-link { font-size: 1.75rem; }
            .footer-agency__bottom-container {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Portfolio & Agency Footer</h1>
            <p>This footer is designed to get you new clients.</p>
        </div>
    </main>

<footer class="footer-agency" role="contentinfo">
        <section class="footer-agency__cta" aria-labelledby="cta-heading">
            <div class="container">
                <h2 id="cta-heading" class="footer-agency__cta-heading">Let's Work Together.</h2>
                <a href="mailto:hello@youragency.com" class="footer-agency__cta-link">hello@youragency.com</a>
            </div>
        </section>

<section class="footer-agency__bottom">
            <div class="container footer-agency__bottom-container">
                <nav class="footer-agency__nav" aria-label="Footer Navigation">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </nav>
                <nav class="footer-agency__social" aria-label="Social Media">
                    <ul>
                        <li>
                            <a href="#" aria-label="Our Dribbble Profile">
                                <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/></svg>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Our Behance Profile">
                                <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Behance</title><path d="M16.969 16.927a2.561 2.561 0 0 0 1.901.677 2.501 2.501 0 0 0 1.531-.475c.362-.235.636-.584.779-.99h2.585a5.091 5.091 0 0 1-1.9 2.896 5.292 5.292 0 0 1-3.091.88 5.839 5.839 0 0 1-2.284-.433 4.871 4.871 0 0 1-1.723-1.211 5.657 5.657 0 0 1-1.08-1.874 7.057 7.057 0 0 1-.383-2.393c-.005-.8.129-1.595.396-2.349a5.313 5.313 0 0 1 5.088-3.604 4.87 4.87 0 0 1 2.376.563c.661.362 1.231.87 1.668 1.485a6.2 6.2 0 0 1 .943 2.133c.194.821.263 1.666.205 2.508h-7.699c-.063.79.184 1.574.688 2.187ZM6.947 4.084a8.065 8.065 0 0 1 1.928.198 4.29 4.29 0 0 1 1.49.638c.418.303.748.711.958 1.182.241.579.357 1.203.341 1.83a3.506 3.506 0 0 1-.506 1.961 3.726 3.726 0 0 1-1.503 1.287 3.588 3.588 0 0 1 2.027 1.437c.464.747.697 1.615.67 2.494a4.593 4.593 0 0 1-.423 2.032 3.945 3.945 0 0 1-1.163 1.413 5.114 5.114 0 0 1-1.683.807 7.135 7.135 0 0 1-1.928.259H0V4.084h6.947Zm-.235 12.9c.308.004.616-.029.916-.099a2.18 2.18 0 0 0 .766-.332c.228-.158.411-.371.534-.619.142-.317.208-.663.191-1.009a2.08 2.08 0 0 0-.642-1.715 2.618 2.618 0 0 0-1.696-.505h-3.54v4.279h3.471Zm13.635-5.967a2.13 2.13 0 0 0-1.654-.619 2.336 2.336 0 0 0-1.163.259 2.474 2.474 0 0 0-.738.62 2.359 2.359 0 0 0-.396.792c-.074.239-.12.485-.137.734h4.769a3.239 3.239 0 0 0-.679-1.785l-.002-.001Zm-13.813-.648a2.254 2.254 0 0 0 1.423-.433c.399-.355.607-.88.56-1.413a1.916 1.916 0 0 0-.178-.891 1.298 1.298 0 0 0-.495-.533 1.851 1.851 0 0 0-.711-.274 3.966 3.966 0 0 0-.835-.073H3.241v3.631h3.293v-.014ZM21.62 5.122h-5.976v1.527h5.976V5.122Z"/></svg>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Our LinkedIn Profile">
                                <svg role="img" viewBox="0 0 24 24" fill="currentColor"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg>
                            </a>
                        </li>
                    </ul>
                </nav>
                <p class="footer-agency__copyright">&copy; 2025 Your Agency</p>
            </div>
        </section>
    </footer>
</body>
</html>