Overview

An industrial, yellow-and-ink HTML template for a freight forwarder that moves goods for businesses by road, sea, air and rail. Cargora ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: freight quotes from the chargeable weight, the lane and the service level; shipment tracking with dated events; the next departures and their cut-offs in the origin’s own time; every office’s local time and open status; a load planner for containers and pallets; and customs documents, Incoterms and the landed cost.

What’s included

• 3 home pages, each with its own scroll moment: Take-Off (a cargo freighter rolls down the runway and climbs out across the section as you scroll), Box Sizes (the stage opens close on a EUR pallet and draws back until a 20 ft and a 40 ft container stand beside it, all at one scale) and The Aisle (forklifts drive pallets along the racks and lift them into their bays)
• A light theme by default and the night shift on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• The WebGL Graticule — a globe’s lines of latitude and longitude turning slowly beside the page titles and the night bands — and the footer’s container ship riding Gerstner waves, both tinted by the theme colours
• The freight quote: 4 modes on 12 lanes, the chargeable weight by each mode’s divisor, the lane minimum, 3 service levels, dangerous goods, fuel, door collection and delivery, clearance and insurance, with the transit days, the next departure and the modes compared side by side
• Shipment tracking: a shipment number gives its status, progress and dated timeline, on the tracking page and from Home 02’s track bar
• Sailings and departures: the next departure on every lane with its cut-off and the time left, counted in the origin’s own time; the local time and open status of 15 offices
• The container and pallet guide: 7 boxes and 5 pallet sizes, the load planner (floor plan, layers, payload) and which box fits a shipment
• Customs: the documents a shipment needs by mode, route and goods (22 documents), the 11 Incoterms with who pays each step, and the landed cost with duty and import VAT for 8 markets
• A five-step freight request that carries a quote over, never blocks on Continue and checks everything on Send
• Barcode Scan preloader, Thermal Print reveals (each photograph printed downward in bands, as a label printer feeds a label), word-rise titles and a barcode on the cards on hover
• Services, industries, case studies, team and profiles, careers and roles, the office network, freight notes with post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive, from phones to wide screens

Getting Started

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

1. Open locally

Unzip the downloaded package and open cargora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the quote, the tracking, the departures, the load planner and the customs tools all work straight from the files.

2. Deploy to a server

Upload the contents of the cargora/ 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 modes, lanes, rates, departures, shipments, boxes, documents and offices live in one place — see Freight Logic.

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 cargora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

cargora/
├── *.html                              the 30 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 (35 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/                      6 files
        ├── clients/                     6 files
        ├── containers/                  4 files
        ├── cutouts/                     10 files
        ├── flags/                       6 files
        ├── icons/                       40 files
        ├── logo/                        7 files
        ├── menu/                        3 files
        ├── modes/                       10 files
        ├── moments/                     8 files
        ├── photos/                      20 files
        └── team/                        9 files

To publish the site, upload the contents of cargora/ to your web root. Photos 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 --cg-yellow-rgb) — change both together.

Cargo yellow is the brand: the button faces, the bar on the current menu item, Home 02’s ground and the hairlines of the tools. Yellow shade is its pressed and folded side; yellow ink is the same yellow made dark enough for small text on white. Ink sets the headings and the buttons’ text, deep the night bands and the footer; the grey band and the studio grey are the quieter rooms. --cg-bg, --cg-surface, --cg-band, --cg-heading and --cg-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Sarabun (headings, body, navigation, buttons and figures) and Martian Mono (the label lines over the titles, shipment numbers, clocks and codes, like the print on a shipping label). Swap them by editing the Google Fonts link and the --cg-ff-body / --cg-ff-mono variables.

Logo

The logo is the word Cargora in Sarabun Bold beside a double chevron — an ink chevron behind a yellow one, pointing the way the freight moves. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white and yellow headers and the light theme
• logo-light.png — for dark grounds: the header over the photo heroes, the footer and the dark theme
• logo-word.png / logo-word-light.png — the word alone (the preloader)
• mark.png / mark-light.png — the chevrons alone (the preloader’s scan)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Cargora opens light: the white page is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that turns the site to the night shift. The choice is saved in the browser under the key cargora-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a white flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that keep their colour — sections with the class is-night or is-deep (the night bands, the footer) are dark in both themes, and is-yellow stays yellow; is-studio, Home 03’s studio grey, turns to a dark grey with the night shift.
• Pictures — the line icons and the drawn mode pictures ship in an ink and a light version, and the right one shows by theme and ground.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Freight Logic

The figures on every page come from one data block, JS block 09 Cargora Data near the top of main.js (var CARGORA), and one engine, block 10 Freight Engine & Clocks. Edit the data once and the prices, days, departures, events and documents follow. Prices are in US dollars and weights in kilograms; times are minutes after midnight (960 = 16:00) in the place’s own time zone; weekdays run 0 = Sunday to 6 = Saturday.

The modes

How a quote is priced

The chargeable weight is the greater of the real weight and the volume weight (the volume in cm³ divided by the mode’s divisor). The freight is the lane’s base plus its rate per chargeable kg, never below the lane’s minimum, times the service level; dangerous goods add to the freight, and the fuel surcharge is a share of both. Door collection and delivery are a fee plus a rate per chargeable kg; clearance and insurance are added last.

The same cargo by air is charged on its real 2,400 kg (its volume weight is only 1,000 kg) and totals $10,421 in 2–4 days; by sea at Express it totals $1,928 in 23–26 days. A full 40′ on the same lane is $2,968 with the bunker surcharge. The quote is kept for the tab (sessionStorage, key cargora-quote) so Book this carries it into the request.

Departures, cut-offs and the offices’ clocks

The next departures are counted in the origin’s own time zone: the first weekday in dep whose cut-off (cut days before, at its minute) is still ahead, with the time left to it. Economy takes the next-but-one departure. Every office shows its local time and Open until 18:00, Opens tomorrow 08:00 and so on, from the visitor’s own clock — Rotterdam keeps 08:00–18:00 on weekdays.

Tracking

A shipment’s events are dated from its booking day, and the events before now are done; the progress bar runs from the first event to the last. Any form with data-track-form, like Home 02’s track bar, hands the number to the tracking page (sessionStorage, key cargora-track).

The load planner

Customs and the landed cost

The document check lists what a shipment needs from its mode, its route and its goods; the Incoterms table lights the chosen term’s column and names where the risk passes. The landed cost adds insurance, duty on the customs value and import VAT or GST on the value plus duty, then the clearance fee.

The quote, the request, the account and the forms confirm on screen with a reference — connect them to your own systems to take real bookings.

WebGL & The Ship

One small WebGL scene, the Graticule, draws a globe’s lines of latitude and longitude every fifteen degrees, turning slowly at the side of the page titles and the night bands, with the equator and the prime meridian in yellow. Each is one canvas:

<canvas class="cg-gl" data-gl="graticule" aria-hidden="true"></canvas>

The footer’s container ship is drawn on a Canvas 2D: three Gerstner swells, the ship heaving with the water under its middle and pitching with the slope between bow and stern.

<canvas class="cg-ship" aria-hidden="true"></canvas>

• Colours — the Graticule reads its colours and opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha; the ship reads --sh-sea-1 to --sh-sea-3, --sh-hull, --sh-box-a to --sh-box-d and the rest from the footer. The theme switch repaints both.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Cargora is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys cargora-lang and cargora-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own. Prices, lanes, shipment numbers and the pictures of the scroll moments keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 35 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Graticule. The core every page shares: the Barcode Scan preloader, the sticky header and the menu, the Thermal Print reveals, the theme and direction switch and the WebGL Graticule.
• 09–10 — Cargora Data, Freight Engine & Clocks. Cargora Data holds every figure; the Freight Engine works out the chargeable weight and the price, the next departures with their cut-offs in the origin’s own time, every office’s local time and open status, and a shipment’s events from its booking day.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion & Tabs, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions and tabs, filters, search, the newsletter and the choice cards.
• 19–22 — Take-Off, Box Sizes, The Aisle, Footer Ship. The three home pages’ scroll moments and the footer ship.
• 23–35 — Track Forms, FCL Price, Mode Compare, Freight Quote, Shipment Tracking, Request Wizard, Sailings & Departures, Load Planner & Which Box, Contact Form, Customs Documents, Incoterms, Landed Cost, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the quick tools on the homes, the freight quote, tracking, the request wizard, the sailings, the load planner, contact, customs, accounts, articles, the demo forms, the coming-soon countdown and the FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the line icons, the drawn mode pictures, the pieces of the scroll moments, the client marks and the language flags are included and ready to use. All demo photography shown on the live preview, the container renders and the cut-outs among it, 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 quote, the request, the tracking, the newsletter, the job application, 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: Sarabun, Martian Mono

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

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.