Portfolio & Agency Footer Template

End your page with a bold statement and an unmissable call-to-action for new projects.

Designed for creatives, freelancers, and agencies, this footer acts as the final, compelling pitch to a potential client. It trades extensive link lists for a large, direct, and visually striking invitation to start a conversation.

Screenshot of a stylish portfolio footer with a large 'Let's Work Together' heading and a prominent contact email link.

Get Source Code Preview

About this Portfolio Footer Template

This footer focuses entirely on maximizing conversions. It uses a large, attention-grabbing heading and a prominent contact link to ensure that interested visitors know exactly what to do next. The design is clean and modern, with a simple two-part structure that separates the main call-to-action from the secondary navigation and copyright information. This creates a powerful focal point while still providing essential links.

Features

Ideal Use Cases

Code Breakdown

The footer is split into two sections, s.footer-agency__cta and .footer-agency__bottom, each with its own background color for visual separation. The top section centers its content using Flexbox. The bottom section also uses Flexbox to align three distinct groups of content: a small navigation menu, social media icons, and the copyright notice. On mobile screens, these items stack vertically and then align horizontally on larger screens.

Code

Here's the full code for the footer template:

​x
 
<!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>

View Output