Little Lantern
A Vector Art template for a children's picture book.
A launch site for one picture book, for a small publisher, an author or an illustrator. Flat vector art in the manner of a printed picture book: one 3 px ink outline on every drawn shape, flat fills in kite red, sea teal, sun yellow and pale sky on warm paper, and small hard offset shadows. The sample publisher, Little Lantern Books, the book "Pip and the Night Kite", its story, author, illustrator, bookshops, dates and prices are fictional.
- For
- Children's book
- 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
The title sits over an open picture book: the stars come out one by one and the red kite lifts off from Pip's paw into the night page while the string pays out, then bobs on the wind and rises out of the book as you scroll; Look inside turns real 3D pages through four drawn spreads.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): the title over an open picture book (Pip on Bramble Hill, the kite in the night page), the book facts as a spine label, Look inside with four spreads and real page turns, the characters (tap one to hear their line), a colour-in teaser where crayons recolour the kite, the spring reading tour with Save a seat, a pre-order with format, copies, gift wrap, delivery and a worked-out total, questions, and a night-sky band. - Colouring page (
colour.html): fourteen shapes to fill on screen with twelve crayons (mouse or keyboard), undo, start again, "colours from the book", a coloured-shapes count with a done state, and a print layout that prints the sheet alone. Colours stay in the visitor's own browser (localStorage); the page works without it. - 404 (
404.html): an empty hill and a loose string; the kite has blown away. - Light and bedtime (dark) themes. In dark the site goes to a deep night blue and the book pages stay paper. The toggle remembers the choice; otherwise the system setting is followed. Phone to wide desktop, visible focus, reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Colouring page
- 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.
