Open demo

CSS code

HTML 
<footer class="fapp">
  <div class="top">
    <div class="pitch">
      <h2>Take the board with you</h2>
      <p>Everything from the web app, on a screen you actually carry. Offline edits sync when you reconnect.</p>
      <p class="rate"><span class="stars" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg></span> 4.8 from 2,140 ratings</p>
    </div>
    <div class="stores">
      <a class="store" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2"/></svg><span><small>Download on the</small><b>App Store</b></span></a>
      <a class="store" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3l12 9-12 9z"/><path d="M4 3l9 9-9 9"/></svg><span><small>Get it on</small><b>Google Play</b></span></a>
      <div class="qr">
        <!-- The checkerboard is a placeholder: replace .qrbox with an <img> of your real QR code and update its alt text. -->
        <span class="qrbox" role="img" aria-label="QR code (placeholder)"></span>
        <span>On a computer? Scan the code with your phone camera to get the app.</span>
      </div>
    </div>
  </div>
  <div class="base">
    <p>© Northwind Ltd.</p>
    <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Support</a></li></ul></nav>
  </div>
</footer>
CSS 
/* App-download footer: a pitch with a star rating, two store buttons built from HTML, CSS and inline SVG, and a QR block. */
.fapp{--fapp-bg:#0f1320;--fapp-text:#9aa3b8;--fapp-focus:#a5b4fc;
  background:var(--fapp-bg);color:var(--fapp-text);padding:48px 34px 26px;line-height:normal}
.fapp,.fapp *{box-sizing:border-box}
.fapp h2,.fapp p,.fapp ul{margin:0;padding:0}
.fapp a{color:inherit;text-decoration:none;border-radius:4px}
.fapp a:focus-visible{outline:2px solid var(--fapp-focus);outline-offset:2px}
.fapp svg{display:block}
.fapp .top{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;max-width:1000px;margin:0 auto}
.fapp h2{color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;max-width:16ch}
.fapp .pitch p{font-size:.9rem;line-height:1.7;margin-top:10px;max-width:40ch}
.fapp .pitch .rate{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:.83rem}
.fapp .stars{display:flex;gap:2px}
.fapp .stars svg{width:14px;height:14px;fill:#fbbf24}
.fapp .stores{display:flex;flex-direction:column;gap:11px}
.fapp .store{display:flex;align-items:center;gap:13px;padding:11px 20px;border-radius:12px;background:#fff;color:var(--fapp-bg);transition:transform .15s}
.fapp .store:hover{transform:translateY(-2px)}
.fapp .store svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.fapp .store small{display:block;font-size:.66rem;letter-spacing:.03em;color:#5b6070}
.fapp .store b{display:block;font-size:.95rem;letter-spacing:-.01em}
.fapp .qr{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:.8rem;line-height:1.5}
.fapp .qrbox{width:64px;height:64px;flex-shrink:0;border-radius:10px;
  background:conic-gradient(#fff 25%,var(--fapp-bg) 0 50%,#fff 0 75%,var(--fapp-bg) 0);background-size:16px 16px}
.fapp .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1000px;margin:40px auto 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.fapp .base ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px}
.fapp .base a:hover{color:#fff}
@media (max-width:767.98px){.fapp{padding:40px 20px 26px}.fapp .top{grid-template-columns:1fr;gap:30px}}
@media (prefers-reduced-motion:reduce){.fapp *{transition:none!important}.fapp .store:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fapp">
  <div class="top">
    <div class="row align-items-center">
      <div class="pitch col-12 col-md-7">
        <h2>Take the board with you</h2>
        <p>Everything from the web app, on a screen you actually carry. Offline edits sync when you reconnect.</p>
        <p class="rate d-flex align-items-center"><span class="stars d-flex" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg></span> 4.8 from 2,140 ratings</p>
      </div>
      <div class="stores col-12 col-md-5 d-flex flex-column">
        <a class="store btn d-flex align-items-center" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2"/></svg><span><small>Download on the</small><b>App Store</b></span></a>
        <a class="store btn d-flex align-items-center" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3l12 9-12 9z"/><path d="M4 3l9 9-9 9"/></svg><span><small>Get it on</small><b>Google Play</b></span></a>
        <div class="qr d-flex align-items-center">
          <!-- The checkerboard is a placeholder: replace .qrbox with an <img> of your real QR code and update its alt text. -->
          <span class="qrbox" role="img" aria-label="QR code (placeholder)"></span>
          <span>On a computer? Scan the code with your phone camera to get the app.</span>
        </div>
      </div>
    </div>
  </div>
  <div class="base d-flex flex-wrap justify-content-between">
    <p class="mb-0">© Northwind Ltd.</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="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Support</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Bootstrap .row / .col-md-* halves, store badges as white .btn links, a .nav legal row. */
.fapp{--fapp-bg:#0f1320;--fapp-text:#9aa3b8;--fapp-focus:#a5b4fc;
  background:var(--fapp-bg);color:var(--fapp-text);padding:48px 34px 26px;line-height:normal}
.fapp svg{display:block}
.fapp .top{max-width:1000px;margin:0 auto}
.fapp .top>.row{--bs-gutter-x:44px;--bs-gutter-y:30px}
.fapp h2{color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;max-width:16ch;margin:0}
.fapp .pitch p{font-size:.9rem;line-height:1.7;margin:10px 0 0;max-width:40ch}
.fapp .pitch .rate{gap:9px;margin-top:16px;font-size:.83rem}
.fapp .stars{gap:2px}
.fapp .stars svg{width:14px;height:14px;fill:#fbbf24}
.fapp .stores{gap:11px}
.fapp .store{--bs-btn-padding-x:20px;--bs-btn-padding-y:11px;--bs-btn-border-radius:12px;--bs-btn-border-width:0;--bs-btn-bg:#fff;--bs-btn-color:var(--fapp-bg);
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--fapp-bg);--bs-btn-active-bg:#fff;--bs-btn-active-color:var(--fapp-bg);
  gap:13px;text-align:start;line-height:normal;transition:transform .15s}
.fapp .store:hover{transform:translateY(-2px)}
.fapp .store svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.fapp .store small{display:block;font-size:.66rem;letter-spacing:.03em;color:#5b6070}
.fapp .store b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.fapp .qr{gap:14px;margin-top:6px;font-size:.8rem;line-height:1.5}
.fapp .qrbox{width:64px;height:64px;flex-shrink:0;border-radius:10px;
  background:conic-gradient(#fff 25%,var(--fapp-bg) 0 50%,#fff 0 75%,var(--fapp-bg) 0);background-size:16px 16px}
.fapp .base{gap:16px;max-width:1000px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.fapp .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.82rem;--bs-nav-link-color:var(--fapp-text);--bs-nav-link-hover-color:#fff;gap:8px 20px}
.fapp .nav-link{border-radius:4px}
.fapp a:focus-visible{outline:2px solid var(--fapp-focus);outline-offset:2px;box-shadow:none}
@media (max-width:767.98px){.fapp{padding:40px 20px 26px}.fapp .top>.row{--bs-gutter-x:30px}}
@media (prefers-reduced-motion:reduce){.fapp *{transition:none!important}.fapp .store:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="bg-[#0f1320] px-5 pt-10 pb-[26px] leading-[normal] text-[#9aa3b8] md:px-[34px] md:pt-12 [&_a]:rounded [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[#a5b4fc]">
  <div class="mx-auto grid max-w-[1000px] items-center gap-[30px] md:grid-cols-[1.2fr_1fr] md:gap-11">
    <div>
      <h2 class="max-w-[16ch] text-[1.5rem] leading-[1.2] font-bold tracking-[-.025em] text-white">Take the board with you</h2>
      <p class="mt-2.5 max-w-[40ch] text-[.9rem] leading-[1.7]">Everything from the web app, on a screen you actually carry. Offline edits sync when you reconnect.</p>
      <p class="mt-4 flex items-center gap-[9px] text-[.83rem] leading-[1.7]"><span class="flex gap-0.5 [&_svg]:size-3.5 [&_svg]:fill-[#fbbf24]" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.9 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3.1 1.3-6.2L3 9.6l6.3-.7z"/></svg></span> 4.8 from 2,140 ratings</p>
    </div>
    <div class="flex flex-col gap-[11px] [&_.store]:flex [&_.store]:items-center [&_.store]:gap-[13px] [&_.store]:rounded-xl! [&_.store]:bg-white [&_.store]:px-5 [&_.store]:py-[11px] [&_.store]:text-[#0f1320] [&_.store]:transition-transform [&_.store]:duration-150 [&_.store:hover]:-translate-y-0.5 motion-reduce:[&_.store]:transition-none motion-reduce:[&_.store:hover]:translate-y-0 [&_.store_svg]:size-6 [&_.store_svg]:shrink-0 [&_.store_svg]:fill-none [&_.store_svg]:stroke-current [&_.store_svg]:stroke-[1.8] [&_.store_svg]:[stroke-linejoin:round] [&_small]:block [&_small]:text-[.66rem] [&_small]:tracking-[.03em] [&_small]:text-[#5b6070] [&_b]:block [&_b]:text-[.95rem] [&_b]:tracking-[-.01em]">
      <a class="store" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2"/></svg><span><small>Download on the</small><b>App Store</b></span></a>
      <a class="store" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3l12 9-12 9z"/><path d="M4 3l9 9-9 9"/></svg><span><small>Get it on</small><b>Google Play</b></span></a>
      <div class="mt-1.5 flex items-center gap-3.5 text-[.8rem] leading-normal">
        <!-- The checkerboard is a placeholder: replace this span with an <img> of your real QR code and update its alt text. -->
        <span class="size-16 shrink-0 rounded-[10px] bg-[conic-gradient(#fff_25%,#0f1320_0_50%,#fff_0_75%,#0f1320_0)] bg-size-[16px_16px]" role="img" aria-label="QR code (placeholder)"></span>
        <span>On a computer? Scan the code with your phone camera to get the app.</span>
      </div>
    </div>
  </div>
  <div class="mx-auto mt-10 flex max-w-[1000px] flex-wrap justify-between gap-4 border-t border-white/10 pt-[22px] text-[.82rem]">
    <p>© Northwind Ltd.</p>
    <nav aria-label="Legal"><ul class="flex flex-wrap gap-x-5 gap-y-2 [&_a:hover]:text-white"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Support</a></li></ul></nav>
  </div>
</footer>

About this set

A footer that sends visitors to your mobile app. The left side has a short pitch, Take the board with you, a line of copy and a five-star rating with a review count. The right side stacks two white store buttons, Download on the App Store and Get it on Google Play, built from HTML, CSS and inline SVG rather than pasted badge images, so they are crisp, restylable and readable by screen readers. Beneath them is a QR block for desktop visitors: the checkerboard is a CSS placeholder, and a comment in the markup shows where to drop in your real QR code image. A slim base row carries the copyright and legal links. Below 768px the two halves stack with the pitch first. The store buttons lift slightly on hover unless reduced motion is requested. Use it for product sites of mobile apps, SaaS tools with companion apps and app landing pages. The Bootstrap version uses .row and .col-md columns, the store buttons are .btn links, and the legal links a .nav.

What’s included

  • App Store and Google Play buttons in HTML, CSS and SVG
  • Star rating with a review count
  • QR block with a clearly marked placeholder
  • Stacks into one column below 768px
  • Hover lift removed for reduced motion

Accessibility

Store links are named by their visible text, such as Download on the App Store, with the icons hidden. The stars are hidden because the rating is written out in text, and the QR placeholder is labelled as a placeholder until you replace it. Links show a 2px light indigo focus outline, all text reaches 4.5:1 and the hover lift is off under prefers-reduced-motion.

Customise it

Change --fapp-bg, --fapp-text and --fapp-focus on .fapp in the plain CSS and Bootstrap versions; the store buttons also read --bs-btn-* in Bootstrap. In Tailwind edit bg-[#0f1320], text-[#9aa3b8] and fill-[#fbbf24] for the stars.