An app landing page has one job: get the right people to install. Lead with what the app does in one sentence, show it running inside a phone frame, and place the official App Store and Google Play badges near the top and again at the end. Follow each store's badge rules on size and spacing.
| Rule | App Store badge | Google Play badge |
|---|---|---|
| Wording | Download on the App Store | Get it on Google Play |
| Minimum onscreen height | 40 px | 28 px |
| Clear space around it | One quarter of badge height | One quarter of badge height |
| Next to other badges | Place it first; use the black badge | Same size or larger than the others |
| Changes allowed | None: do not modify, angle or animate | None: no recolouring or rearranging |
Updated
Most app page roundups are galleries of screenshots. This page gives you the sections themselves in plain HTML and CSS, built for made-up apps, plus a small generator for the hero. The badge spots are placeholders because the real artwork has to come from Apple and Google.
Type a headline, a supporting line and a screen colour to build a hero section with a CSS phone frame and two badge slots, then copy the HTML.
A CSS-only phone frame beside the headline. On narrow screens the phone drops under the copy.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: #0f172a }
.badge-slot { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 2px dashed #64748b; border-radius: 8px; font-size: 12px; color: #334155 }
.badges { display: flex; flex-wrap: wrap; gap: 10px }
.phone { width: 180px; height: 360px; border: 10px solid #0f172a; border-radius: 34px; background: #fff; position: relative; overflow: hidden; flex: none }
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 60px; height: 14px; margin-left: -30px; background: #0f172a; border-radius: 10px }
.hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 24px }
.copy { flex: 1 1 240px }
.copy h1 { font-size: 28px; line-height: 1.15; margin: 0 0 10px }
.copy p { color: #334155; margin: 0 0 16px }
.screen { padding: 34px 12px 12px; background: #0d9488; height: 100%; color: #fff }
.screen div { background: rgb(255 255 255 / .2); border-radius: 10px; padding: 10px; margin-bottom: 8px; font-size: 12px }
</style>
<section class="hero">
<div class="copy">
<h1>Split rent without the awkward chat</h1>
<p>Housemates add bills once, and Tallyhouse works out who owes what each month.</p>
<div class="badges">
<span class="badge-slot">Official App Store badge here</span>
<span class="badge-slot">Official Google Play badge here</span>
</div>
</div>
<div class="phone" role="img" aria-label="Split rent without the awkward chat app screen">
<div class="screen"><div>Today</div><div>3 tasks left</div><div>Next: 2:30 pm</div></div>
</div>
</section>Each card starts with what the person gets, not the feature name.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: #0f172a }
.badge-slot { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 2px dashed #64748b; border-radius: 8px; font-size: 12px; color: #334155 }
.badges { display: flex; flex-wrap: wrap; gap: 10px }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 16px }
.card { border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px }
.card h3 { margin: 0 0 6px; font-size: 16px } .card p { margin: 0; color: #475569; font-size: 14px }
</style>
<div class="grid">
<div class="card"><h3>Never chase a payment</h3><p>Reminders go out on the day rent is due.</p></div>
<div class="card"><h3>See the full picture</h3><p>One screen shows every bill and who has paid.</p></div>
<div class="card"><h3>Fair splits</h3><p>Split evenly, by room size or by custom amounts.</p></div>
</div>Numbered steps make onboarding feel short. Use an ordered list so the order is announced.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: #0f172a }
.badge-slot { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 2px dashed #64748b; border-radius: 8px; font-size: 12px; color: #334155 }
.badges { display: flex; flex-wrap: wrap; gap: 10px }
ol { list-style: none; counter-reset: s; display: grid; gap: 12px; padding: 16px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
li { counter-increment: s; background: #f1f5f9; border-radius: 14px; padding: 14px }
li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0f172a; color: #fff; font-weight: 700; margin-bottom: 8px }
</style>
<ol>
<li>Create a house and invite housemates by link.</li>
<li>Add rent and bills with their due dates.</li>
<li>Everyone sees what they owe and pays their share.</li>
</ol>Repeats the badges at the end. The QR slot is for desktop visitors who want to switch to their phone.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: #0f172a }
.badge-slot { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 2px dashed #64748b; border-radius: 8px; font-size: 12px; color: #334155 }
.badges { display: flex; flex-wrap: wrap; gap: 10px }
.band { margin: 12px; padding: 22px; border-radius: 18px; background: #0f172a; color: #fff; display: flex; flex-wrap: wrap; gap: 20px; align-items: center }
.band h2 { margin: 0 0 6px; font-size: 22px } .band p { margin: 0 0 14px; color: #cbd5e1 }
.band .badge-slot { border-color: #94a3b8; color: #e2e8f0 }
.qr { width: 96px; height: 96px; border: 2px dashed #94a3b8; border-radius: 10px; display: grid; place-items: center; font-size: 12px; text-align: center }
.text { flex: 1 1 220px }
</style>
<section class="band">
<div class="text"><h2>Get Tallyhouse free</h2><p>Free for houses of up to four people.</p>
<div class="badges"><span class="badge-slot">App Store badge</span><span class="badge-slot">Google Play badge</span></div></div>
<div class="qr">QR code to your store page</div>
</section>A horizontal strip that scrolls inside its own box, so the page itself never scrolls sideways.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: #0f172a }
.badge-slot { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 2px dashed #64748b; border-radius: 8px; font-size: 12px; color: #334155 }
.badges { display: flex; flex-wrap: wrap; gap: 10px }
.phone { width: 180px; height: 360px; border: 10px solid #0f172a; border-radius: 34px; background: #fff; position: relative; overflow: hidden; flex: none }
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 60px; height: 14px; margin-left: -30px; background: #0f172a; border-radius: 10px }
.strip { display: flex; gap: 14px; overflow-x: auto; padding: 16px; scroll-snap-type: x mandatory }
.phone { width: 140px; height: 280px; border-width: 8px; scroll-snap-align: start }
.phone p { margin: 40px 10px 0; font-size: 13px }
</style>
<div class="strip" tabindex="0" aria-label="App screens">
<div class="phone"><p>Home: bills due this week</p></div>
<div class="phone"><p>Add a bill in two taps</p></div>
<div class="phone"><p>Who has paid</p></div>
<div class="phone"><p>Monthly summary</p></div>
</div>| Item | Detail |
|---|---|
| Headline says what the app does | One plain sentence |
| Real screens in the mockup | No features the app lacks |
| Official badges, unchanged | Downloaded from Apple and Google |
| Each badge links to its store listing | Not to a generic store homepage |
| Badge alt text matches its wording | For screen reader users |
| Privacy policy linked in the footer | Easy to find for visitors and reviewers |
| Badges repeated at the end | For people who read to the bottom |
Top: headline, one supporting line, badges and the phone mockup. Middle: features as outcomes, then a three-step how-it-works strip. Bottom: a repeat of the badges with a short reason to install today.
Keep the page short. A visitor who has decided wants the badge, not more scrolling.
Both stores ask for clear space of one quarter of the badge height around the artwork. Apple prefers the black badge when several store badges appear together and asks for its badge to come first.
Use alt text that matches the badge wording, such as Download on the App Store, so screen reader users hear where the link goes.
A one-sentence headline that says what the app does, a phone mockup showing a real screen, three or four features written as outcomes, a short how-it-works strip, the official store badges, and a privacy policy link. A final download band repeats the badges.
No. Both companies require their official badge artwork, unchanged. Apple's page says not to modify, angle or animate the badge, and Google's says not to alter colours or rearrange elements. Download the files from their marketing resources.
Apple sets a minimum onscreen height of 40 pixels for the App Store badge, and Google sets 28 pixels for the Google Play badge. When both appear together, Google asks that its badge be the same size or larger than the other badges.
A page on your own domain is where you can link from ads, emails and social posts, host your privacy policy, and rank in web search for what the app does. Store listings alone cannot do all of that.
Related: Hero section examples, Mobile app cost calculator, App terms of service template, How to create a landing page.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.