webdevpuneet.com

Related Snippets

63 in Heroes category
28–33 of 60

App Hero with Phone Mockup and Store Badges

Hero with Video Testimonial Player

Hero Framed as Us vs. Them

Newsletter Hero with Benefit Checklist

Hero with Mouse-Parallax Layers

Hero with Auto-Rotating Background Carousel

App Hero with Phone Mockup and Store Badges — Free HTML CSS Snippet

App Hero with Phone Mockup and Store Badges · Heroes · Plain HTML & CSS · Live preview

CategoryHeroes
TagsSVGCSS OnlyE-CommerceMobile UILanding Page

Copy & paste

Source Code

<section class="asm-hero">
  <div class="asm-inner">
    <div class="asm-copy">
      <span class="asm-badge">★★★★★ 4.9 · 22K ratings</span>
      <h1 class="asm-title">Your whole day, <span>in one tap.</span></h1>
      <p class="asm-sub">Habits, focus timers, and journaling — built for people who open their phone 90 times a day and want fewer of those taps to matter.</p>

      <div class="asm-badges">
        <a href="#" class="asm-store-badge" aria-label="Download on the App Store">
          <svg viewBox="0 0 24 24" width="21" height="21" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8.72-.15 1.66-.85 2.99-.68 3.13.41 4.55 3.34 3.24 5.64-2.42 1.36-1.5 4.83.7 5.55-.5 1.24-1.15 2.47-2.01 3.66zM12.03 7.25c-.15-2.23 1.66-4.09 3.74-4.25.29 2.31-2.08 4.4-3.74 4.25z"/></svg>
          <span><small>Download on the</small>App Store</span>
        </a>
        <a href="#" class="asm-store-badge" aria-label="Get it on Google Play">
          <svg viewBox="0 0 24 24" width="21" height="21" fill="currentColor"><path d="M3.6 2.6c-.3.3-.5.7-.5 1.2v16.4c0 .5.2.9.5 1.2l.1.1L13 12.2v-.4L3.7 2.5l-.1.1z"/><path d="M16.1 15.3l-3.1-3.1v-.4l3.1-3.1 6.9 3.9c.7.4.7 1.1 0 1.5l-6.9 3.9z"/></svg>
          <span><small>Get it on</small>Google Play</span>
        </a>
      </div>

      <div class="asm-qr-row">
        <div class="asm-qr" aria-hidden="true">
          <div class="asm-qr-grid">
            <span style="grid-area:1/1/3/3"></span><span style="grid-area:1/6/3/8"></span><span style="grid-area:6/1/8/3"></span>
            <span style="grid-area:1/4/2/5"></span><span style="grid-area:3/1/4/2"></span><span style="grid-area:3/4/4/6"></span>
            <span style="grid-area:4/3/5/4"></span><span style="grid-area:4/6/5/8"></span><span style="grid-area:5/2/6/4"></span>
            <span style="grid-area:5/5/6/6"></span><span style="grid-area:6/5/7/7"></span><span style="grid-area:7/4/8/5"></span>
            <span style="grid-area:2/4/3/5"></span><span style="grid-area:1/3/2/4"></span><span style="grid-area:7/7/8/8"></span>
          </div>
        </div>
        <span class="asm-qr-label">Scan to get the app<br><small>(layout demo — not a scannable code)</small></span>
      </div>
    </div>

    <div class="asm-phone-wrap">
      <div class="asm-glow"></div>
      <div class="asm-phone">
        <div class="asm-notch"></div>
        <div class="asm-screen">
          <div class="asm-app-bar"><span>Today</span><span class="asm-app-dot"></span></div>
          <div class="asm-app-card asm-c1"><span class="asm-app-ring"></span><div><strong>Deep work</strong><small>52 / 90 min</small></div></div>
          <div class="asm-app-card asm-c2"><span class="asm-app-ring"></span><div><strong>Read</strong><small>3 of 4 done</small></div></div>
          <div class="asm-app-card asm-c3"><span class="asm-app-ring"></span><div><strong>Journal</strong><small>Streak: 14 days</small></div></div>
        </div>
      </div>
    </div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS-only phone frame
A notch, rounded edges, and inset screen built with no device image asset.
Mock app-screen content
Progress-ring cards give the phone something dynamic-feeling to show.
Accessible store badges
Real anchors with inline SVG and text, matching this library's footer convention.
Labeled QR placeholder
An 8x8 CSS grid pattern honestly marked as a layout demo, not scannable.
Star-rating proof line
Immediate social proof above the headline, costing one line of markup.
Soft radial glow
Lifts the phone mockup off the background without an image.
Pure HTML and CSS
No JavaScript, no external dependency, no image requests.
Responsive centering
Stacks and centers on narrow screens below 860px.

About this UI Snippet

App Hero with Phone Mockup and Store Badges — CSS Phone Frame, Both Store Badges, and a QR Placeholder

Screenshot of the App Hero with Phone Mockup and Store Badges snippet rendered live

A mobile app's marketing homepage needs to do three things in the hero: show the app itself, make it obvious how to download it, and reassure with real social proof. This snippet builds all three with plain HTML and CSS — a CSS-drawn phone frame showing a mock app screen, both App Store and Google Play badges as accessible anchors, and a QR code placeholder — no screenshots, no image assets, no JavaScript.

A CSS phone frame, not a screenshot

.asm-phone is a rounded rectangle with a notch cutout and an inset screen — built entirely from border-radius, box-shadow, and layered divs, no device-mockup image. The screen inside shows a small mock "today" app UI: three cards each with a colored progress-ring border and a label, giving the hero something dynamic-feeling to show without needing a real app screenshot or a canvas-based render. A soft radial glow sits behind the phone to lift it off the page background.

Store badges as real anchors, matching this library's convention

Both badges are inline SVG glyphs plus two-line text inside real <a> tags — the same approach used in App Download Footer, rather than screenshots of Apple's and Google's official badge artwork. That keeps them accessible, resizable, and recolorable with plain CSS, and avoids an extra image request. As with that snippet, swap in the official brand-compliant badge assets before shipping to production.

A QR code that's honest about being a placeholder

The QR "code" is a fixed 8×8 CSS grid with roughly a dozen cells positioned by grid-area to resemble a scan pattern — decorative only, and labeled directly under it as "(layout demo — not a scannable code)" so nobody mistakes it for something that actually decodes. Replace it with a real generated QR image (from a QR-generation tool or library) once you have the actual store link to encode.

Star rating as immediate proof

A small "★★★★★ 4.9 · 22K ratings" line sits above the headline — a lightweight social-proof signal that costs one line of markup and gives a first-time visitor an immediate reason to trust the download prompt before reading anything else.

Customizing it

Replace the mock app-screen cards with content representative of your actual app. Swap the accent colors (magenta/purple here) for your brand. Update the rating line with your real store rating. Wire both badge hrefs to your actual App Store and Play Store listings, and replace the QR placeholder with a real generated code once you have a link to encode.

Step by step

How to Use

  1. 1
    Paste the HTML and CSSA two-column hero renders with copy and badges on one side and a CSS phone mockup on the other.
  2. 2
    Replace the badge artworkSwap the inline SVG + text badges for the official Apple and Google badge assets before shipping.
  3. 3
    Wire the badge linksSet each anchor's href to your real App Store and Google Play listing URLs.
  4. 4
    Generate a real QR codeReplace .asm-qr-grid with an actual QR image encoding your download link.
  5. 5
    Customize the phone screenEdit the .asm-app-card elements to represent your actual app's UI.
  6. 6
    Update the rating lineSet the star rating and review count to your real current numbers.

Real-world uses

Common Use Cases

Mobile app marketing homepages
Lead with download intent, showing a CSS phone frame, accessible store badges and a clearly labelled QR placeholder.
Pre-launch pages
Pair with a coming soon hero before the app ships, then switch to live badges at release.
Cross-platform companion apps
Pair with an app download footer so the same badges appear again at the bottom of the page.
Store listing reinforcement
Reinforce the store presence of an app with real anchors containing inline SVG and text, matching official badge conventions.
Launch-day and mockup learning
Give Product Hunt traffic an obvious next step, and learn CSS-only device frames with progress-ring cards inside the phone screen.
Related: Bento Grid Showcase Hero
See the Bento Grid Showcase Hero for a related heroes pattern worth pairing with this one.
Related: Typed.js Rotating Headline
See the Typed.js Rotating Headline for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No — like the QR pattern in App Download Footer, it's a fixed CSS Grid pattern styled to resemble a scan code, and it's explicitly labeled as a layout demo underneath it. Replace it with a real generated QR image once you have your actual store link to encode.

The badges are built as accessible anchor tags with inline SVG and text to demonstrate the layout, not the official brand-compliant artwork Apple and Google provide. Replace them with the official downloadable badge assets from each platform's brand guidelines before shipping.

.asm-phone is a rounded div with a dark background, an inset box-shadow ring for depth, and a small notch element positioned absolutely at the top. The screen inside is another rounded div holding ordinary HTML cards styled to look like a small app UI — no image, canvas, or SVG device frame is used.

Replace the .asm-app-card elements with markup representative of your real app's home screen, or drop in a real screenshot image sized to fill .asm-screen with object-fit: cover if you'd rather show an actual capture instead of a mock UI.

Since there's no JavaScript, the conversion is a direct markup translation. Click JSX, Vue, or Angular in the export panel — replace the QR grid and badge artwork with your real assets in the resulting component, same as the plain HTML version.