Open demo

CSS code

HTML 
<footer class="fp">
  <div class="fp-in">
    <p class="fp-eyebrow">Start a project</p>
    <a class="fp-mail" href="mailto:[email protected]">[email protected]</a>
    <div class="fp-row">
      <p class="fp-studio">Northmark is a six-person studio in Bristol working on brand, product and the space between them.</p>
      <nav class="fp-links" aria-label="Footer">
        <div><h2>Work</h2><ul><li><a href="#">Selected</a></li><li><a href="#">Archive</a></li><li><a href="#">Clients</a></li></ul></div>
        <div><h2>Studio</h2><ul><li><a href="#">About</a></li><li><a href="#">Process</a></li><li><a href="#">Careers</a></li></ul></div>
        <div><h2>Elsewhere</h2><ul><li><a href="#">Instagram</a></li><li><a href="#">Are.na</a></li><li><a href="#">LinkedIn</a></li></ul></div>
      </nav>
    </div>
    <div class="fp-base">
      <p>© Northmark Studio</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Imprint</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Studio footer: the email address is set in display type and gets an underline that draws in on hover
   and focus. The size scales with the viewport between 1.4rem and 4.6rem. */
.fp{background:#0c0c0d;color:#8d8d92;padding:70px 34px 26px}
.fp,.fp *{box-sizing:border-box}
:where(.fp) a{color:inherit;text-decoration:none}
:where(.fp) ul{list-style:none;margin:0;padding:0}
:where(.fp) :is(p,h2){margin:0}
.fp a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fp-in{max-width:1180px;margin:0 auto}
.fp-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7b7b82}
.fp-mail{display:inline-block;color:#fff;font-size:clamp(1.4rem,7vw,4.6rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.06;margin-top:16px;position:relative;overflow-wrap:anywhere}
.fp-mail::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.05em;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.fp-mail:hover::after,.fp-mail:focus-visible::after{transform:scaleX(1);transform-origin:left}
.fp-row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:52px}
.fp-studio{max-width:26ch;font-size:.86rem;line-height:1.7}
.fp-links{flex:1 1 auto;max-width:640px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.fp h2{color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px}
.fp-links ul{display:flex;flex-direction:column;gap:9px;font-size:.88rem}
.fp-links a:hover,.fp-base a:hover{color:#fff}
.fp-base{margin-top:48px;padding-top:20px;border-top:1px solid #222226;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.79rem;color:#7b7b82}
.fp-base ul{display:flex;gap:18px}
@media (max-width:560px){.fp{padding:56px 20px 26px}}
@media (prefers-reduced-motion:reduce){.fp-mail::after{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fp">
  <div class="fp-in">
    <p class="fp-eyebrow mb-0">Start a project</p>
    <a class="fp-mail" href="mailto:[email protected]">[email protected]</a>
    <div class="row gx-4 gy-4 justify-content-between mt-5">
      <div class="col-lg-4"><p class="fp-studio mb-0">Northmark is a six-person studio in Bristol working on brand, product and the space between them.</p></div>
      <nav class="col-lg-6" aria-label="Footer">
        <div class="row row-cols-3 g-4">
          <div class="col"><h2>Work</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Selected</a></li><li class="nav-item"><a class="nav-link" href="#">Archive</a></li><li class="nav-item"><a class="nav-link" href="#">Clients</a></li></ul></div>
          <div class="col"><h2>Studio</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Process</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li></ul></div>
          <div class="col"><h2>Elsewhere</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Instagram</a></li><li class="nav-item"><a class="nav-link" href="#">Are.na</a></li><li class="nav-item"><a class="nav-link" href="#">LinkedIn</a></li></ul></div>
        </div>
      </nav>
    </div>
    <div class="fp-base d-flex flex-wrap justify-content-between gap-3 mt-5 pt-3">
      <p class="mb-0">© Northmark Studio</p>
      <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Imprint</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap grid and .nav.flex-column lists; the display-size email link and its drawn underline
   are the only custom parts. */
.fp{background:#0c0c0d;color:#8d8d92;padding:70px 34px 26px}
.fp a{text-decoration:none}
.fp a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.fp-in{max-width:1180px;margin:0 auto}
.fp-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7b7b82}
.fp-mail{display:inline-block;color:#fff;font-size:clamp(1.4rem,7vw,4.6rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.06;margin-top:16px;position:relative;overflow-wrap:anywhere}
.fp-mail:hover{color:#fff}
.fp-mail::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.05em;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.fp-mail:hover::after,.fp-mail:focus-visible::after{transform:scaleX(1);transform-origin:left}
.fp-studio{max-width:26ch;font-size:.86rem;line-height:1.7}
.fp h2{color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px;line-height:normal}
.fp .nav{--bs-nav-link-color:#8d8d92;--bs-nav-link-hover-color:#fff;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.88rem;gap:9px}
.fp-base{border-top:1px solid #222226;font-size:.79rem;color:#7b7b82}
.fp-base .nav{--bs-nav-link-color:#7b7b82;--bs-nav-link-font-size:.79rem;gap:18px}
@media (max-width:575.98px){.fp{padding:56px 20px 26px}}
@media (prefers-reduced-motion:reduce){.fp-mail::after{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="bg-[#0c0c0d] px-5 pt-14 pb-[26px] text-[#8d8d92] min-[561px]:px-[34px] min-[561px]:pt-[70px]">
  <div class="mx-auto max-w-[1180px]">
    <p class="text-[.76rem] font-bold tracking-[.14em] text-[#7b7b82] uppercase">Start a project</p>
    <a class="relative mt-4 inline-block text-[clamp(1.4rem,7vw,4.6rem)] leading-[1.06] font-extrabold tracking-[-.04em] wrap-anywhere text-white after:absolute after:inset-x-0 after:bottom-[.06em] after:h-[.05em] after:origin-right after:scale-x-0 after:bg-white after:transition-transform after:duration-[400ms] after:ease-[cubic-bezier(.4,0,.2,1)] after:content-[''] hover:after:origin-left hover:after:scale-x-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white focus-visible:after:origin-left focus-visible:after:scale-x-100 motion-reduce:after:transition-none" href="mailto:[email protected]">[email protected]</a>
    <div class="mt-[52px] flex flex-wrap justify-between gap-[30px]">
      <p class="max-w-[26ch] text-[.86rem] leading-[1.7]">Northmark is a six-person studio in Bristol working on brand, product and the space between them.</p>
      <nav class="flex max-w-[640px] flex-auto flex-wrap justify-between gap-[30px] [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-white" aria-label="Footer">
        <div><h2 class="mb-[13px] text-[.74rem] font-extrabold tracking-[.1em] text-white uppercase">Work</h2><ul class="flex flex-col gap-[9px] text-[.88rem]"><li><a href="#">Selected</a></li><li><a href="#">Archive</a></li><li><a href="#">Clients</a></li></ul></div>
        <div><h2 class="mb-[13px] text-[.74rem] font-extrabold tracking-[.1em] text-white uppercase">Studio</h2><ul class="flex flex-col gap-[9px] text-[.88rem]"><li><a href="#">About</a></li><li><a href="#">Process</a></li><li><a href="#">Careers</a></li></ul></div>
        <div><h2 class="mb-[13px] text-[.74rem] font-extrabold tracking-[.1em] text-white uppercase">Elsewhere</h2><ul class="flex flex-col gap-[9px] text-[.88rem]"><li><a href="#">Instagram</a></li><li><a href="#">Are.na</a></li><li><a href="#">LinkedIn</a></li></ul></div>
      </nav>
    </div>
    <div class="mt-12 flex flex-wrap justify-between gap-4 border-t border-[#222226] pt-5 text-[.79rem] text-[#7b7b82]">
      <p>© Northmark Studio</p>
      <nav aria-label="Legal"><ul class="flex gap-[18px] [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-white"><li><a href="#">Privacy</a></li><li><a href="#">Imprint</a></li></ul></nav>
    </div>
  </div>
</footer>

About this set

A black footer for a studio or freelancer where the email address is the design. A small uppercase Start a project line sits above a mailto link set in heavy display type that scales with the viewport between 1.4rem and 4.6rem through clamp(). On hover or keyboard focus a white underline draws in from the left and retracts to the right when the pointer leaves. Below it, a short studio description sits beside three link columns (Work, Studio, Elsewhere), and a quiet legal bar with Privacy and Imprint closes the footer. Use it on a portfolio, an agency site or a personal site where the main thing you want from a visitor is an email. The address wraps with overflow-wrap: anywhere if it is longer than the screen is wide, so a long domain never causes sideways scrolling on a phone. The underline is a pseudo-element scaled on the x axis, and its transition is removed under reduced motion. The Bootstrap version keeps that one custom rule and builds the rest from the grid and .nav.flex-column lists.

What’s included

  • Email link in display type sized with clamp()
  • Underline that draws in on hover and on keyboard focus
  • Long addresses wrap instead of overflowing at 375px
  • Muted grey text lightened to meet 4.5:1 on black
  • Underline transition removed under prefers-reduced-motion

Accessibility

The email is a real mailto link whose text is the address, and it shows both the underline and a 2px white outline on keyboard focus. Link columns sit in a nav labelled Footer, the legal links in one labelled Legal. The eyebrow and legal text were lightened from #5f5f66 to #7b7b82 to reach 4.5:1.

Customise it

Change the clamp() values on .fp-mail for size, #0c0c0d for the background and #8d8d92 for body text. In Bootstrap the link colours are --bs-nav-link-* on .fp .nav; in Tailwind edit text-[clamp(...)] and the after: utilities that draw the underline.