Popsicle
A Pop Art landing page for a kids' app.
Popsicle is a landing page for a children's app, in the Pop Art style: comic-print primaries (cyan, magenta, lemon, tangerine) on paper, 4px ink outlines, hard ink shadows, Ben-Day dots and stripes inside shapes, speech balloons and starbursts, and a hero that floods one colour like a printed poster. It speaks to parents and still lets a child play on the page. The sample app, LetterPop, and every price and claim are invented.
- For
- Kids' app
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
Letter blocks that talk back: tap one and it squashes, turns over to a drawn picture and a speech balloon pops out with its sound; the hero phone does it on its own.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a cyan-flood hero with an outlined poster headline, vertical text up the edge, download pills (text only), a trial sticker and a tilted phone where a letter block talks; "Go on, tap one": six letter blocks that turn over to a drawn picture and shout their sound (with a progress line); "Why parents keep it" as a printed bento of colour blocks and motifs; the parent corner drawn on a tablet (a 26-letter grid with learned, trying and not-yet states); pricing with a monthly or yearly switch and a starburst; grown-up questions in speech-balloon cards; a magenta "Ready, set, pop!" band; footer. - For grown-ups (
parents.html): promises, the order of sounds as a table, and a "send the links" form with empty, invalid and sent states. - 404 (
404.html). - Light and a bedtime dark theme (navy ground, same inks): follows the system, with a toggle that remembers.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- For grown-ups
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
