webdevpuneet.com

Related Snippets

63 in Heroes category
55–60 of 60

Coming Soon Hero

Agency Hero

Portfolio Hero

App Download Hero

Gradient Mesh Hero

Product Hero

App Download Hero — Free HTML CSS Snippet

App Download Hero · Heroes · Plain HTML & CSS · Live preview

CategoryHeroes
TagsSVGText EffectsCSS OnlyLanding PageCSS Grid

Copy & paste

Source Code

<section class="hero">
  <div class="glow-l"></div>
  <div class="glow-r"></div>

  <div class="left">
    <div class="rating-row">
      <span class="stars">★★★★★</span>
      <span class="rating-text">4.9 · 28,000 ratings</span>
    </div>

    <h1 class="headline">Your fitness<br>journey, <span class="accent">reinvented</span></h1>

    <p class="sub">Track workouts, plan meals, and hit personal records — all from one beautifully designed app that adapts to your goals, not the other way around.</p>

    <div class="badges">
      <a href="#" class="store-badge apple">
        <svg class="store-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
        <div class="store-text">
          <span class="store-sub">Download on the</span>
          <span class="store-name">App Store</span>
        </div>
      </a>
      <a href="#" class="store-badge google">
        <svg class="store-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M3.18 23.76c.3.17.65.2.98.09l12.46-7.19-2.78-2.78-10.66 9.88zm-1.12-20.8a1.54 1.54 0 0 0-.06.44v17.19c0 .15.02.3.06.44l.08.07 9.62-9.63v-.22L2.14 2.89l-.08.07zm20.4 9.04-2.72-1.57-3.06 3.06 3.06 3.07 2.75-1.59a1.56 1.56 0 0 0 0-2.97zm-19.28 10.6 12.46-7.19-2.78-2.77-9.68 9.96z"/></svg>
        <div class="store-text">
          <span class="store-sub">Get it on</span>
          <span class="store-name">Google Play</span>
        </div>
      </a>
    </div>

    <div class="users-row">
      <div class="user-avs">
        <div class="uav" style="background:linear-gradient(135deg,#6366f1,#a78bfa)">J</div>
        <div class="uav" style="background:linear-gradient(135deg,#ec4899,#f97316)">M</div>
        <div class="uav" style="background:linear-gradient(135deg,#10b981,#0ea5e9)">R</div>
      </div>
      <span class="users-text">Join <strong>2M+ active users</strong></span>
    </div>
  </div>

  <div class="right">
    <div class="phone">
      <div class="phone-notch"></div>
      <div class="phone-screen">
        <div class="app-header">
          <span class="app-greeting">Good morning 👋</span>
          <div class="app-av">J</div>
        </div>
        <div class="stats-grid">
          <div class="stat-card orange">
            <div class="stat-icon">🔥</div>
            <div class="stat-val">2,840</div>
            <div class="stat-lbl">Calories</div>
          </div>
          <div class="stat-card blue">
            <div class="stat-icon">👟</div>
            <div class="stat-val">8,432</div>
            <div class="stat-lbl">Steps</div>
          </div>
        </div>
        <div class="prog-section">
          <div class="prog-label"><span>Weekly goal</span><span>68%</span></div>
          <div class="prog-track"><div class="prog-fill" style="width:68%"></div></div>
        </div>
        <div class="workout-list">
          <div class="workout-item">
            <div class="w-icon">💪</div>
            <div class="w-info"><div class="w-name">Upper Body</div><div class="w-meta">42 min · 380 cal</div></div>
            <div class="w-badge done">Done</div>
          </div>
          <div class="workout-item">
            <div class="w-icon">🏃</div>
            <div class="w-info"><div class="w-name">Morning Run</div><div class="w-meta">5.2 km · Today</div></div>
            <div class="w-badge upcoming">Next</div>
          </div>
        </div>
      </div>
    </div>
    <div class="phone-shadow"></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

Two-column layout: left copy + right phone mockup — flex with flex-wrap for mobile
CSS phone mockup: border-radius + border + box-shadow — no image files
Notch simulation: narrow div with border-radius: 0 0 14px 14px
App UI inside phone: stats grid, progress bar, workout list — all CSS
Apple App Store badge with inline SVG Apple logo — no image needed
Google Play badge with inline SVG Google Play logo and white card styling
Star rating row: ★ Unicode + amber colour + letter-spacing
Gradient progress bar: linear-gradient indigo→green on CSS bar fill
Social proof user avatar stack with user count text

About this UI Snippet

App Download Hero — Phone Mockup, App Store Badges, Rating Row & Social Proof

Screenshot of the App Download Hero snippet rendered live

If you are building a mobile app landing page and need an above-the-fold hero that shows the app in action, communicates quality via ratings, and drives downloads via store badges, this snippet gives you everything in a two-column layout: left side has the star rating, headline, subtitle, App Store and Google Play badges, and a user count social proof row; the right side shows a CSS phone mockup with a realistic app UI.

The CSS phone mockup

The phone frame is built entirely with CSS — no images, no SVG. A 240px wide div with border-radius: 36px, border: 8px solid #1e293b, and box-shadow: 0 30px 80px rgba(0,0,0,0.2) creates the handset. A narrower div at the top with border-radius: 0 0 14px 14px simulates the notch. Inside, the app UI shows a greeting header, a stats grid (calories and steps), a weekly goal progress bar, and a workout list — all CSS layout with no images.

App Store and Google Play badges

Both badges are built with HTML and inline SVG icons — no image files needed. The Apple badge uses background: #000 and the Google Play badge uses a white card with border. Both have hover lift effects via translateY(-2px) and box-shadow. The SVG paths are Apple's and Google Play's actual brand icons, safe to use in personal and commercial projects.

The star rating row

The five stars use the ★ Unicode character with letter-spacing: 2px and amber colour. The rating text shows the score and review count. This pattern is the strongest trust signal above the fold on an app landing page — place it immediately above the headline.

The gradient phone progress bar

The weekly goal progress bar inside the phone mockup uses background: linear-gradient(90deg, indigo, green) for a branded gradient fill — communicating goal completion visually without a number.

Making it your own

Update the app greeting, stat values, workout names, and progress percentage in the HTML. Change the phone border colour to match your app brand. Replace the placeholder content with your actual app screens using a screenshot in the .phone-screen background.

Using with real App Store data

For production, pull real store ratings via the App Store Connect API or iTunes Search API and inject them server-side. Replace the hardcoded "4.9 · 28,000 ratings" with fetched data rendered at build time in Next.js via getStaticProps or an RSC fetch. This keeps the rating current without client-side fetching on the landing page load, maintaining fast first-paint performance.

Step by step

How to Use

  1. 1
    Update the rating and headlineChange the star rating score ("4.9") and review count ("28,000 ratings") to your App Store or Play Store actual ratings. Edit the headline to match your app value proposition.
  2. 2
    Wire the store badge linksSet href="#" on .store-badge.apple to your App Store URL (https://apps.apple.com/...) and on .store-badge.google to your Play Store URL. Both open with standard link behaviour.
  3. 3
    Update the phone screen contentIn the HTML, change the greeting text, stat values (calories, steps), progress percentage (style="width:68%"), and workout item names and metadata to match your actual app content.
  4. 4
    Replace the CSS phone with a screenshotTo show a real screenshot: remove the .phone-notch and .phone-screen content, set background: url("screenshot.png") center top / cover on the phone div, and adjust height: 500px. Keep the border and shadow CSS for the frame.
  5. 5
    Update the user countChange "2M+ active users" to your real download or user count. Update the avatar initials and gradients. Replace the badge colour from indigo/green to your app brand colours in .accent and .prog-fill.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" to download as a React component, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Mobile app download and installation landing pages
The two-column layout with phone mockup and dual store badges is the standard pattern for mobile app download pages. The phone shows users what the app looks like before they download it, reducing sign-up hesitation.
Health, fitness, and wellness app marketing pages
The fitness-themed phone UI (calories, steps, workouts, progress bar) maps directly to health app data. Adapt stat labels to your app domain — "Distance", "Sleep", "Meditation" — and update the stat values and icons.
App Store Optimisation and pre-launch web presence
The star rating row above the headline is the most high-impact trust signal on an app landing page. Users trust App Store ratings — displaying them prominently above the fold communicates quality before they read a word of copy.
SaaS products with mobile companion apps
If your web SaaS has a mobile app, use this hero variant for the mobile app page. Pair it with your main product hero (see Startup Hero or Product Hero) for the web version. Both can share the same brand colour in the .accent gradient.
Learn CSS phone frame and app mockup technique
The phone mockup uses only border-radius, border, and box-shadow — no SVG or images. The notch is a narrow div with rounded bottom corners. The phone shadow is a blurred, scaled-down div below. All are pure CSS techniques applicable to any device mockup.
Productivity, finance, and utility app landing pages
Adapt the phone UI content for any app domain — a finance app would show account balance and transactions; a productivity app would show tasks and deadlines. The card grid, progress bar, and list structure accommodate any data type.
Related: Hero with Announcement Ticker Bar
See the Hero with Announcement Ticker Bar for a related heroes pattern worth pairing with this one.
Related: Mega CTA Banner
See the Mega CTA Banner for a related heroes pattern worth pairing with this one.
Related: Hero with Live Slug Generator Demo
See the Hero with Live Slug Generator Demo for a related heroes pattern worth pairing with this one.
Related: Hero with Interactive Product Configurator
See the Hero with Interactive Product Configurator for a related heroes pattern worth pairing with this one.
Related: Hero with Integration Ecosystem Grid
See the Hero with Integration Ecosystem Grid for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The phone frame is a 240px div with border-radius: 36px (matching iPhone corner radius), border: 8px solid #1e293b (the dark bezel), and box-shadow: 0 30px 80px rgba(0,0,0,0.2) for depth. The notch is a separate div inside the phone positioned at the top — width: 80px, border-radius: 0 0 14px 14px, with the same dark background as the bezel. The phone shadow below is a blurred, elliptical div with filter: blur(8px) at 12% black opacity.

Replace the .phone-screen div content with an img tag: <img src="screenshot.png" style="width:100%; display:block;" alt="App screenshot" />. Or set background: url("screenshot.png") center top / cover no-repeat; height: 480px on the .phone-screen div and remove its child elements. For a crisp result, export the screenshot at the phone display width × 2 (480px × 2 = 960px wide) for Retina/HiDPI screens.

Both Apple and Google provide usage guidelines for their app store badges. The standard policy: use official badge artwork in your marketing materials to promote your listed app. Apple provides official badge assets at apple.com/app-store/marketing/guidelines/. Google provides them at play.google.com/intl/en_us/badges/. For production, download the official badge image assets — the SVG icons in this snippet are functional placeholders that match the standard badge appearance.

The .hero already uses flex-wrap: wrap so the layout collapses to a single column when the viewport is too narrow to fit both columns. The .left has min-width: 280px so it never gets squeezed below 280px. For better mobile control, add @media (max-width: 640px) { .right { display: none; } } to hide the phone mockup on small screens and let the copy take full width, or add flex-direction: column-reverse to show the phone above the copy on mobile.