Section
Mobile App Showcase
Mobile app showcase with two phone mockups and store buttons.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Products/product-mobile-app Vanilla/Sections/Products/product-mobile-app <!-- Snippet Name: Mobile App Showcase | Family: Products | Description: Mobile app showcase with two phone mockups and store buttons. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile App Showcase | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: product-mobile-app. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.pm .grid{grid-template-columns:1fr;gap:40px;align-items:center}
.pm h2{margin:14px 0 10px}.pm .lead{margin-bottom:22px;max-width:44ch}
.pm .stores{display:flex;gap:12px;flex-wrap:wrap}
.pm .store{display:inline-flex;align-items:center;gap:10px;border:3px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);padding:12px 16px;text-decoration:none;font-weight:700}
.pm .store small{display:block;color:var(--muted);font-size:.7rem}
.pm .phones{display:flex;justify-content:center;gap:0;position:relative}
.pm .phone{width:220px;aspect-ratio:9/19;border:3px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:var(--shadow-lg);padding:14px;position:relative}
.pm .phone .notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:80px;height:14px;background:var(--border);border-radius:0 0 10px 10px}
.pm .phone .screen{height:100%;border-radius:18px;border:2px solid var(--border);display:grid;place-items:center;font-weight:800;background:linear-gradient(160deg,var(--primary),var(--pink));color:#fff}
.pm .phone:nth-child(2){transform:translateY(20px);background:var(--accent)}.pm .phone:nth-child(2) .screen{background:linear-gradient(160deg,var(--accent),var(--lime));color:#0a0a0a}
@media(min-width:900px){.pm .grid{grid-template-columns:1fr 1fr;gap:60px}.pm .phone:nth-child(2){margin-left:-50px}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="pm" aria-labelledby="pm-title">
<div class="container">
<div class="grid">
<div>
<span class="eyebrow"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2v6M12 16v6M2 12h6M16 12h6M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/></svg> Mobile</span>
<h2 id="pm-title">Your app, in their pocket.</h2>
<p class="lead">Native-feeling mobile UIs that sync with the web — same data, same speed.</p>
<div class="stores">
<a class="store" href="#"><span><svg class="None" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg></span><span><small>Download on</small>App Store</span></a>
<a class="store" href="#"><span><svg class="None" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M8 5v14l11-7z'/></svg></span><span><small>Get it on</small>Google Play</span></a>
</div>
</div>
<div class="phones" aria-hidden="true">
<div class="phone"><div class="notch"></div><div class="screen">Home</div></div>
<div class="phone"><div class="notch"></div><div class="screen">Stats</div></div>
</div>
</div>
</div>
</section>
</body>
</html># Mobile App Showcase
Mobile app showcase with two phone mockups and store buttons.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / products
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** product, mobile, phones
**Features:** light/dark, responsive
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 109 lines UTF-8 · LF · Spaces: 2
Continue browsing