Overview

ROARINK is a premium multi-section HTML template kit built around an original comic-universe IP (kaiju, moon-city detectives, woodland adventurers) and shipped as six coordinated mini-sites in a single download. It is designed for indie comic studios, webtoon creators, convention organizers, sketch artists, and merch brands that want a complete, ready-to-customize web presence without touching a build tool.

Every page is hand-authored in clean semantic HTML5, styled with Bootstrap 5 utilities plus a custom design system (core.css + per-folder CSS), and driven by lightweight vanilla JavaScript. There is no framework lock-in, no bundler, no node_modules — open any HTML file and it just works.

What's Inside

The kit is organized as a portal (template/index.html) that routes visitors into six self-contained product verticals:

• Comics (template/comics/) — 30 pages: home, explore, trending, genres, genre-details, series-details, latest-chapters, reader (paged + webtoon), characters, creators, creator-profile, comics-studio, journal, article, reviews, search, library, account, sign-in, sign-up, forgot-password, about, help, privacy, terms, copyright, 404 and more.
• Store (template/store/) — 16 pages: storefront home, catalog, product detail, bundles, mystery capsules, cart, checkout, orders, wishlist, vault (COA/graded slabs), crowdfund, print studio, crate builder, dashboard, and a dedicated CSS + JS pair.
• Tube (template/tube/) — 14 pages: motion-comic home, browse, watch, shorts, live, channels, playlists, saved, schedule, soundtrack, animatics, studio, and supporting assets.
• Festival (template/festival/) — 14 pages: convention landing, lineup, schedule, tickets, venue, alley, cosplay, autographs, ink-battle, stamp-rally, awards, dashboard.
• Portfolio (template/portfolio/) — 14 pages: artist home, resume, projects, gallery, sketchbook, character sheets, brushes, ink-compare, commissions, mentorship, pitch-deck, studio.
• Dashboard (template/dashboard/) — 16 pages: creator analytics, series, chapters, storyboard, characters, comments, subscribers, earnings, schedule, journal, assets, localization, team, settings.

Plus a top-level 404 page, a shared portal landing (template/index.html + portal.css + portal.js), and a full documentation site under documentation/.

Design System

• Palette — --roar-navy, --roar-lime, --roar-orange, --roar-turquoise, --roar-surface, --roar-ink (all exposed as CSS custom properties on :root for one-line theming).
• Typography — four self-hosted families in /template/assets/fonts/: Anton (display), Barlow Condensed (headline), Space Grotesk (UI), Plus Jakarta Sans (body), Comic Neue (accent). All are .woff2 subsets.
• Signature motifs — comic-book halftone gradients, hard offset "spotlight" shadows (box-shadow: 6px 6px 0 …), outlined badges, and 4-corner card treatments. Product image containers use aspect-ratio: 1 / 1 with object-fit: contain so artwork never crops.
• Icon system — Bootstrap Icons v1.11 (bundled under assets/vendor/), plus 3 hand-authored SVGs (favicon.svg, logo-roarink.svg, logo-roarink-light.svg).
• Imagery — 14 numbered editorial illustrations (.png + .webp) and 12 dedicated store product shots (.png) provided under assets/images/. Every PNG in the Comics / Tube / Dashboard / Festival / Portfolio verticals references the lighter .webp sibling; store pages use store-N.png.

Technical Highlights

• Pure static HTML — 100+ hand-authored pages, no server required, drop into any host (Netlify, Vercel, S3, nginx, GitHub Pages).
• Bootstrap 5.3 utilities and grid, vendored locally with a custom core.css override layer.
• Responsive — tuned breakpoints for mobile (portrait webtoon), tablet, and desktop; every vertical has a dedicated media query pass.
• Accessible — semantic landmarks (<header> <main> <footer> <nav>), labelled buttons, aria-live regions for cart/stepper states, visible focus rings on all interactive elements, WCAG 2.1 AA contrast on body copy.
• Performance — WebP for all editorial imagery, loading="lazy" on long-list thumbnails, explicit width/height hints on every product <img> to eliminate CLS, self-hosted woff2 fonts with font-display: swap.
• Zero build step — plain CSS/JS; ready for WordPress, Shopify (custom Liquid), Hugo, Astro, Webflow code export, or as a static starter.
• Modular folder structure — each vertical (comics/, store/, tube/, festival/, portfolio/, dashboard/) ships its own CSS and JS file, so teams can delete or reuse one vertical without touching the others.
• Documentation included — a full documentation/index.html reference covering setup, folder map, design tokens, component recipes, image licensing, and customization guidance.

Use Cases

1. Independent comic studio or small press with a webshop.
2. Webtoon or manga serialization site with a reader page.
3. Convention / Comic-Con microsite with schedule, tickets, and after-party gallery.
4. Freelance illustrator portfolio with commission tiers and pitch-deck page.
5. Print-on-demand merch drop or blind-box capsule campaign.
6. Creator membership hub with earnings, subscriber, and analytics panels.
7. Motion-comic or animated-series channel (Tube vertical).
8. Any editorial brand that wants a bold, comic-book visual language out of the box.

Browser Support

• Chrome / Edge 108+
• Firefox 110+
• Safari 16+ (iOS 16+, macOS Ventura+)
• Opera 94+