Overview

A loud, framed, black HTML template for one illustrator and character designer with a shop of prints, tees and stickers. Doodlia ships three home pages, a black theme and a light theme, right-to-left support, its own mascot drawn in every pose, and logic that is worked out rather than typed in: a commission builder that prices characters by framing, style, usage and turnaround with extras and a deposit, a delivery date from the month’s commission queue, a five-step request, the work by series with tabs and search, a shop with sizes, a bag with shipping zones, a coupon and sales tax, the open studio’s hours and the dispatch cut-off on the visitor’s own clock, and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: Doodle turns round on a turnaround sheet (front, three-quarter, side, back), a sketch develops from the blue-pencil rough to the shading, and stickers slap onto a laptop lid one by one
• A black theme by default and a light theme on the smiley switch, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker; a currency switch (dollars, pounds, euros) that repaints every price
• WebGL Riso Grain: two inks printed as grain, a little out of register, drifting, as the ground of the framed bands; the mascot as a flip-book in the footer
• The Mascot Wave preloader, a pencil cursor that leans with the pointer and squishes on a click, the Line Boil reveal, the sticker pop and the doodle-frame hover
• The commission builder, the five-step request, the rates and the usage licences, how a commission works
• The work in six series with tabs, search and a lightbox; two piece layouts; the series page
• The shop: kinds, a price ceiling, sort and search, sizes on every card, two product pages, the bag, checkout with an order number, the wishlist
• About the artist, the studio, a team profile, what I draw, character design with the turnaround sheet
• Process notes, FAQ with search, contact with a map and the PHP form, account pages, coming soon with a countdown, 404
• Fully responsive from 390 px to wide screens

Getting Started

Thank you for choosing Doodlia. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open doodlia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the commission builder, the request, the shop and the bag all work straight from the files.

2. Deploy to a server

Upload the contents of the doodlia/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The pieces, the commission rates, the products and their sizes, shipping and the studio hours live in one place — see Commissions & Shop.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and doodlia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

doodlia/
├── *.html                              the 32 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (36 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      9 files
        ├── blog/                        8 files
        ├── decor/                       9 files
        ├── doodle/                      14 files
        ├── faces/                       4 files
        ├── flags/                       7 files
        ├── icons/                       6 files
        ├── inline/                      9 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── shop/                        8 files
        ├── stickers/                    22 files
        ├── team/                        4 files
        └── work/                        38 files

To publish the site, upload the contents of doodlia/ to your web root. Images keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --dl-pop-rgb) — change both together.

Black is the ground and white the ink, with white hairlines framing the header cells, the boxes and the cards (--dl-line). The art plates are white or pale grey. Doodle pink is the one interface accent: prices, the current page, the small square before every eyebrow and the live marks. Sun, tomato, bubble, sky, leaf and grape are the illustrations’ own inks, used for the stickers, the numerals and the colour bands; pink and blue are the two Riso inks.

Fonts

Two Google Fonts are loaded in the head of each page: Kanit (the capitals, with heavy and thin words in one title: wrap the thin words in <em>; the body, the menu and the buttons) and Roboto Mono (eyebrows, bylines, labels and the live lines). Swap them by editing the Google Fonts link and the --dl-ff-body / --dl-ff-mono variables.

Logo

The logo is Doodle, the studio’s mascot, beside DOODLIA in heavy Kanit capitals. It ships as ready-made PNG files in assets/img/logo/:

• logo-light.png — white wordmark, for the black theme, the side panel and the footer
• logo.png — black wordmark, for the light theme
• mark.png — Doodle alone, die-cut (the account pages and the account rows)
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Dark & Light Mode

Doodlia opens black. Every header (and the mobile menu) has the smiley switch that turns the light theme on. The choice is saved in the browser under the key doodlia-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="light" on the <html> tag.

• Tokens — the light values sit in one block, [data-theme="light"] { … }, right after :root in style.css.
• Bands that stay put — is-night stays black in both themes (the footer), is-sun is the yellow commission band and is-paper the white band.
• Start light — add data-theme="light" to the <html> tag of each page; the switch still works.

Commissions & Shop

The figures on every page come from one data block, JS block 09 Doodlia Data near the top of main.js (var DOODLIA). Edit it once and the builder, the request, the rates, the shop, the bag and the clocks follow. Prices are in dollars (the currency switch converts them); times are minutes after midnight (600 = 10am); weekdays run 0 = Sunday to 6 = Saturday.

The commission quote

The framing sets the first character’s price, the style scales it, each character more costs 60% of the first, the usage multiplies the total, rush and express add their fee, and the extras are priced per character or per order. Half is the deposit. A standard commission starts at the next free slot in the month’s queue; rush and express start today.

The queue

Six slots a month: a few are taken before the month opens and one more goes every eight days or so, so every page says how many are left this month and when the next commission can start. Replace slotsTaken() in block 25 with a call to your own calendar to show the real queue.

The shop

The bag, the wishlist, the coupon, the last quote, the sent requests and the placed orders are kept in the browser (localStorage), so the demo works without a server; connect checkout and the request form to your own systems to take real orders.

Motion & WebGL

• Mascot Wave (block 01) — Doodle pops up from the bottom edge, waves and pulls the panel down; once a session.
• Pencil cursor (block 20) — a pencil whose tip sits on the pointer, leaning with its speed and squishing on a click; fine pointers only, the system pointer over fields.
• Line Boil and the sticker pop (block 04) — cards arrive in three held frames at 12 fps; stickers slap on with an overshoot; copy rises.
• Doodle frame (block 21) — a scribbled outline drawn round a card on hover, boiling while the pointer stays.
• Riso Grain (block 08) — a WebGL layer on <canvas data-gl="riso">; its inks come from --gl-1, --gl-2 and --gl-alpha, so each theme repaints it.
• The flip-book (block 19) — the footer’s walk cycle, a sprite sheet drawn frame by frame on a canvas at 12 fps.
• The scroll moments — the turnaround, the sketch and the laptop lid follow their section’s own travel through the window; nothing is pinned.

Every animation respects prefers-reduced-motion: the page renders as authored, the moments show their finished state.

RTL

Pick a right-to-left language in the flag picker and the page turns round: the choice is saved (doodlia-dir), and the head script sets dir="rtl" and swaps the three stylesheets for their twins (bootstrap.rtl.min.css, style.rtl.css, responsive.rtl.css) before the page paints. The demo copy stays in English. To ship a right-to-left site, set dir="rtl" on <html> and point the three <link> tags at the twins.

JavaScript Guide

main.js is one file of 36 numbered blocks, each a self-contained function that returns early when its section is not on the page, so every page loads the same file. The JS INDEX at the top lists them:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Scroll Reveals
• 05 — Back To Top
• 06 — Anchor Scroll
• 07 — Light & Dark Mode, Direction
• 08 — WebGL Layers
• 09 — Doodlia Data
• 10 — Custom Select
• 11 — Currency
• 12 — Hero Sliders
• 13 — Card Sliders
• 14 — Accordion
• 15 — Filter Tabs
• 16 — Grid Search
• 17 — Newsletter
• 18 — Choice Cards
• 19 — Footer Flip-Book
• 20 — Pencil Cursor
• 21 — Doodle Frame Hover
• 22 — The Turnaround
• 23 — The Sketch Develops
• 24 — Stickers On The Lid
• 25 — Studio Clock
• 26 — Commission Quote
• 27 — Series Word List
• 28 — Commission Request
• 29 — Contact Form
• 30 — Shop
• 31 — Account Forms
• 32 — Account Page
• 33 — Article Tools
• 34 — Demo Forms
• 35 — Launch Countdown
• 36 — FAQ Search

Images

The logo files, the mascot, the drawn confetti, the illustrated icons and the language flags are included and ready to use. All demo artwork and photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, request, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Kanit, Roboto Mono

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embed and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.