Skip to content
15 years of IT experience
CybexsoftConsultancy Services
Booking template · HTML & Next.js
Norvik - Hotel Booking HTML Template

A booking front end, finished — in both stacks

Thirty-two pages of a stay-booking site — search, results with a map, listing detail, checkout, trips and a host dashboard — built twice over one token layer. Take the HTML/Bootstrap edition and open it off the disk, or take the Next.js edition and npm run dev. Same site, same pixels, one licence.

Both editions, one licence32 pages, every state drawnEight palettes from one token layer
norvik · /listing
Cabin above Fjelldal
Whole cabin · 3 bedrooms · sleeps 6
$246 night
Reserve
Check in12 Mar
Check out17 Mar
Guests4
Reserve
One quote() behind the card, the checkout and the receipt — the price cannot drift
HTML edition
open index.html
Next.js edition
npm run dev
2
Editions — HTML and Next.js
32
Pages, in each edition
8
Colour palettes, one token layer
0
Build steps for the HTML edition

Two editions

The same site, built twice

Not a template with a React port bolted on afterwards. Both editions render from the same token package and load the same stylesheet bridge in the same order, which is why the two look identical page for page — and why a colour change lands in both from one edit.

HTML / Bootstrap 5.3

No build step

Thirty-two .html files and the assets they need. Double-click index.html and the whole site works — offline, straight off the disk, with nothing installed and nothing compiled.

# nothing to install
open index.html
What lands on disk
main-files/
  index.html  results.html  listing.html …
  components.html      the style guide
  assets/css  assets/js  assets/img
  scss/                optional token source
Reach for this one when

Handing finished markup to a back-end team, dropping into a PHP or Rails app, or shipping to a plain web root.

Next.js 16 / React 19

App Router

The same thirty-two pages as routes. Server components by default, a client island wherever something holds state, and Bootstrap's JavaScript replaced by eight React primitives written against Bootstrap's own class contract.

npm install
npm run dev
# http://localhost:3000
What lands on disk
apps/nextjs/
  src/app/(site) (custom) (bare)   route groups
  src/components/site/             15 islands
  src/components/ui/               8 primitives
  src/data/  src/lib/  public/img
Reach for this one when

Building the product in React, where the template is the first commit rather than a reference to translate.

What is actually different

Everything not in this table is deliberately the same.

 HTML / BootstrapNext.js / React
Getting it runningDouble-click a file. No Node, no npm, no compile.npm install, then npm run dev.
Header, footer, iconsCopied into all 32 pages, so each page stands alone.One Header, Footer and icon sprite in the root layout.
ContentThe nine homes, the journal and the help centre live in the markup.Typed data in src/data/, rendered by the pages.
BehaviourBootstrap's data API plus vanilla scripts, one per concern.React state, and eight primitives in src/components/ui/.
BootstrapThe CSS and the JS, both bundled in the package.The CSS only, from the npm package.
ImagesLocal files at fixed paths — swap a file, keep the name.The same local files, served through next/image.
Where it deploysAny web root or static host. Upload and done.Anywhere Next runs — Node, or a platform that hosts it.

What is in it

All 32 pages, in both editions

Page for page, one to one. Nothing is an edition-only extra, and nothing is a placeholder that says “your content here” — every page is written and filled, including the empty states, the 404 and the style guide.

The booking loop

9

Search to confirmation, and everything the guest does afterwards.

  • Home
  • Home, second cut
  • Search results + map
  • Listing detail
  • Checkout
  • Trips
  • Trip detail
  • Saved
  • Inbox

The host side

4

The pitch, the dashboard, and the wizard that lists a place.

  • Become a host
  • Host dashboard
  • Add a listing
  • Host plans

Discovery and prose

10

The pages a booking site needs before anybody trusts it.

  • Destinations
  • Journal
  • Journal article
  • How it works
  • About
  • Help centre
  • Contact
  • Careers
  • Safety
  • Cancellation

Accounts

3

Validated properly, wired to nothing — see the FAQ.

  • Log in
  • Join
  • Account settings

Utility

6

The pages that are missing from most template packages.

  • Style guide
  • Sitemap
  • Terms
  • Privacy
  • Coming soon
  • 404

How it is built

Decisions you would have had to make anyway

A booking front end is mostly state: which dates, how many guests, what it costs, what happens when the card declines. Norvik answers those once and answers them the same way in both editions.

The URL is the state

Dates, guests and the booking reference travel in the query string, so the search, the listing, the checkout and the trip all agree — and every page stands up on a direct visit with nothing set. One quote() works out every total, which is why the price on the card and the price at checkout cannot drift apart.

Nothing loads from the internet

Bootstrap, the twenty font slices and every image are in the package. No CDN, no Google Fonts, no analytics, no phoning home. The template renders identically with the network switched off — which is also how it survives an offline client review.

Nothing is faked as sent

Every form validates properly, says what would have happened next, and discards what it was given. No payment is processed, no account is created, and the pages say so under the button — so a demo cannot mislead anyone, and you know exactly which seams to wire up.

Accessible by construction

Semantic markup, visible focus, labelled controls, and a layout that holds from a narrow phone to a wide desktop. The reduced-motion preference is respected everywhere. The earnings chart puts every value in its aria-label and behind a real table — no figure is reachable by pointer alone.

Bootstrap's behaviour, rewritten in React

The Next.js edition replaces Bootstrap's JavaScript with eight primitives — Collapse, Modal, Offcanvas, Dropdown, Tabs, Carousel, Tooltip and a scroll-spy hook — written against Bootstrap's own class contract. They add no CSS, which is why the two editions animate the same.

A style guide that ships with it

One page puts every colour, size, radius, shadow and component in front of you, in both editions. It is the fastest way to see what you have, and it is built from the same tokens as everything else, so it stays true as the template changes.

One token layer

Eight palettes, thirteen roles, one source

Colour, type, spacing, radius, shadow, z-index and motion are defined once, as JSON, and built into the three shapes the editions consume. Both editions read the same values — so a new palette is one file and one build, not a search-and-replace through sixty-four pages.

The roles are named for their job, not their colour: brand carries chrome and links, accent is spent on Reserve and price emphasis and nowhere else. An unknown key fails the build with the list of valid ones, which is what keeps stray hex values from creeping back in.

HTML edition
<link rel="stylesheet" href="norvik-tokens.css">
Next.js edition
import { applyPalette } from '@norvik/theme';
SCSS, if you change the scale
@use "@norvik/theme/scss" as nk;
Pine & Terracotta
data-nk-theme="pine"
Ink & Coral
data-nk-theme="ink"
Midnight & Amber
data-nk-theme="midnight"
Slate & Sky
data-nk-theme="slate"
Forest & Sand
data-nk-theme="forest"
Espresso & Ochre
data-nk-theme="espresso"
Plum & Blush
data-nk-theme="plum"
Teal & Magenta
data-nk-theme="teal"

Schemes swap at runtime on the <html> element — the style guide page does it live, and reads the values back out of the cascade so it cannot drift from the token package.

The download

One zip, both editions

You are not choosing an edition at checkout. The licence covers the template, and the template is both builds of it — start in HTML, move to Next.js a year later, and you are still inside what you bought.

  • apps/html/The HTML edition

    32 .html files, plus assets/css, assets/js and assets/img. Upload the contents of this folder to a web root, or open index.html where it sits.

  • apps/nextjs/The Next.js edition

    The App Router application: routes, server components, the fifteen client islands and the eight UI primitives, with the same images under public/img.

  • packages/theme/The token layer

    The palettes and the scale as JSON, and the build that turns them into CSS custom properties, a SCSS entry and a typed JS module. Both editions read it.

  • documentation/The manual

    Structure, tokens, palettes, the scripts, and what to check before you ship. Written for the person who has to change this in six months.

  • licensing/Licences and credits

    Bootstrap and font licences, plus image credits. The images in the package are generated placeholders, not stock photography — the file says which is which.

Pricing

One licence, per number of sites

Yours to keep — includes one year of updates and re-downloads. Both editions are included at every tier. The price shown is what you pay — Indian orders include GST, everywhere else is tax-free.

Single site
1 site
Free
one payment
Use on one siteBoth editions — HTML and Next.jsAll 32 pages and the style guideOne year of updates and re-downloads
Buy licence
Most chosen
5 sites
5 sites
Free
one payment
Everything in Single siteUse on up to 5 sitesBoth editions, on every one of themEmail support
Buy licence
25 sites
25 sites
Free
one payment
Everything in 5 sitesUse on up to 25 sitesBoth editions, on every one of themPriority email support
Buy licence

Before you buy

Questions worth asking

Still unsure? Ask us — the people who answer wrote the template.

Do I get both editions, or do I pick one?

Both. One licence covers the template, and the download contains the HTML/Bootstrap edition and the Next.js edition together. Start prototyping in HTML and rebuild in React later without buying anything again.

Do I need Node or npm?

Only for the Next.js edition, which is a normal Next application — npm install, npm run dev. The HTML edition has nothing to install and nothing to compile: upload the folder to a web root, or double-click index.html and it runs off the disk.

Are the two editions really the same site?

Page for page, all 32 of them, and they load the same stylesheet over the same token layer in the same order, so they render identically. What differs is how they are built — the chrome is copied into every HTML page and lives in the root layout in Next; the content is in the markup in one and in typed data files in the other.

Is there a back end?

No — Norvik is the front end. Search, booking, payment and accounts are drawn and validated but not wired to anything, and the pages are explicit about it so nobody is misled during a demo. Connecting them to your own back end is the work you are buying a head start on.

How do I change the colours?

Eight palettes ship ready to switch between, and swapping one is a single attribute on the html element — at runtime, in both editions. A ninth palette, or a change to the spacing or type scale, is one edit to the token JSON and one build, and it lands in both editions at once.

Are the photographs included?

The download ships generated placeholders at the exact sizes the layouts expect, so nothing third-party is redistributed. The photographs in the live demo are from Unsplash and are credited in the package — drop your own images in at the same filenames and nothing else changes.

What happens when my year of updates ends?

Nothing you have stops working. The files you downloaded are yours to keep and keep using, on the number of sites your licence covers. What ends is access to new versions and re-downloads from the portal — renew to get those back.

Can I use it for a client project?

Yes. Each site you deploy it on counts as one of the sites on your licence — and an HTML build and a Next build of the same site is one site, not two. A studio building for several clients wants the 5- or 25-site plan.

See it before you buy it

The live preview is the real template — every page, every state, running from the same files you download. The Next.js edition renders the same site from the same tokens.