Overview

An HTML template for one fashion creator’s own site: friendly, commercial and built to be booked. Trendia ships three home pages, a light and a dark theme, right-to-left support, a dollar / euro / pound switch, and logic that is worked out rather than typed in: a media kit with the audience by platform, age, gender and country; a collab rate card that turns platforms, post types, paid usage and exclusivity into a quote; a six-step collab request; shop my looks with each look’s pieces and its total; brand partners with their campaign results; the weekly lives and the letter from the clock; and the creator’s own label shop with sizes, a size finder, a bag, a coupon, shipping zones and sales tax.

What’s included

• 3 home pages, each with its own scroll moment: The Creator (the feed scrolls inside a phone as the page travels), Journal & Growth (the follower growth line draws across three years and lights its milestones) and Shop & Collabs (platform tiles fly onto a quote card and snap into its lines, the total stepping up with each)
• A white theme by default and a dark theme 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
• WebGL pixel hearts drifting up through the blush bands, the page titles and the footer, and the footer’s TRENDIA logo with a living reaction-diffusion pattern growing inside its letters
• The media kit: 6 platforms, 1.8M across them all (1.64M on social), 81% women, the audience by age, gender and country for each platform, the growth line and the content mix
• The rate card: 17 post types by platform with quantities, paid usage, exclusivity, add-ons and bundle savings; the quote with the views, the cost per thousand views, the 50% deposit and the dates
• The collab request in six steps with the quote or a package carried through, a review and a reference on screen
• Shop my looks: 8 looks with occasion tabs, a budget for the whole look and search; each look with its hotspots on the photograph, its pieces, the pieces you already own and what the rest costs
• The label shop: 12 pieces with categories, colours, price, sort and search, quick add by size, the product page with the size finder and the size chart, bag, coupon, shipping zones, sales tax, checkout with an order number, wishlist
• Brand partners and a partner’s campaign, services and packages, the portfolio with filters and a lightbox, the journal, the letter, events with seats, FAQ with search, account pages, coming soon, 404
• Story Bars preloader, Swipe Up photo reveals, soft-rise copy, a double-tap heart on photographs, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open trendia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the media kit, the quote, the looks, the live line, the shop and the size finder all work straight from the files.

2. Deploy to a server

Upload the contents of the trendia/ 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 platforms and their audience, the growth, the rates, the looks, the partners, the lives, the events, the label and the shop rules live in one place — see Creator 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 trendia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

trendia/
├── *.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/                      16 files
        ├── blog/                        12 files
        ├── campaign/                    16 files
        ├── events/                      5 files
        ├── faces/                       11 files
        ├── feed/                        9 files
        ├── flags/                       6 files
        ├── hero/                        6 files
        ├── label/                       22 files
        ├── logo/                        3 files
        ├── looks/                       8 files
        ├── me/                          7 files
        ├── menu/                        3 files
        ├── pieces/                      17 files
        └── team/                        4 files

To publish the site, upload the contents of trendia/ 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 --td-pink-rgb) — change both together.

White is the ground; the soft grey panel and the blush take turns behind the bands. Pink is the brand colour — the hearts, the story bars under the titles, the price tags and the splashes behind the photographs — and rose is the same family deepened so that small text in pink stays readable. Ink sets the headings, the black top bar, the footer and the primary buttons. Each platform keeps its own colour in the charts (--td-c-instagram, --td-c-tiktok and so on). --td-bg, --td-surface, --td-panel, --td-heading and --td-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: Poppins (every heading in capitals, the buttons, the prices and the figures) and Raleway (body text, the menu and the italic eyebrows above the titles). Swap them by editing the Google Fonts link and the --td-ff-head / --td-ff-body variables.

Logo

The logo is the word TRENDIA in Poppins capitals with a small pink heart over the I, the way a like lands on a post. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering, for white grounds (every header in the light theme, the mobile menu)
• logo-light.png — light lettering, for the headers over the hero photographs, the footer and the dark theme
• favicon.png — a white T under the pink heart on an ink square, 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. The footer’s pattern logo draws the letters itself (see WebGL & Pattern).

Light & Dark Mode

Trendia opens white: the light theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key trendia-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees the white page first. 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.
• Charts and canvases — the growth line, the audience bars and the pattern logo read their colours from the tokens, and the hearts read --gl-1 to --gl-3, which the dark block swaps.
• Logo — the light logo shows on photographs and in the dark theme.
• 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.

Creator Logic

The figures on every page come from one data block, JS block 09 Trendia Data near the top of main.js (var TRENDIA). Edit it once and the media kit, the rates, the looks, the dates and the totals follow. Prices are in US dollars; the currency switch shows them in USD 1, EUR 0.92, GBP 0.79 (key trendia-currency), and prices written in the pages carry a data-usd attribute so the switch can repaint them. Times are minutes after midnight (1140 = 7:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

The media kit

Each headline figure is worked out from the platforms: the audience is the sum of the followers; the share of women and the age mix are each platform’s figure weighted by its followers; the engagement rate is weighted the same way over the social platforms. Today: 1.8M across 6 platforms, 81% women, 37% aged 18–24 and 37% aged 25–34, and an engagement rate of 6.1%. Change a platform’s followers and every figure, bar and share follows (block 24).

The rate card

The content fee is each post type’s fee times its quantity. Paid usage, exclusivity and rush are each a share of the content fee; the flat add-ons are added as they are; the bundle saving comes off the content fee once there are enough deliverables. The views are each type’s share of its platform’s average views; the cost per thousand views is the total over the views. Drafts arrive after the longest production time plus a day for each further deliverable (at most ten), live dates 3 days later.

Shop my looks

A look’s total is the sum of its pieces. On a look’s page, tick the pieces you already own and the page shows what the rest costs and how many label pieces are left to add to the bag. The looks page filters by occasion, by a budget for the whole look and by search (block 27).

The size finder

Each measurement is matched to the first size whose range it stays under; dresses go by the largest of the three, pieces cut by the bust go by the bust alone (data-fit). Inches are turned into centimetres first (block 28).

How the shop totals

The coupon comes off the goods first; shipping is free once the goods reach the zone’s threshold; sales tax is the zone’s rate on the goods, rounded to the cent.

The clock

The top bar and the events page read the visitor’s clock: during a live it says Live Now with its platform, otherwise when the next one starts. Events are dated so many days from today, so they never go out of date; the letter’s latest issue is the last Sunday, numbered from the first (block 10). The coming-soon page counts down to 10:00 am on the first day of the month after next.

The bag, the wishlist, the applied coupon, the rate-card picks, the collab briefs and the orders are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 30 The Label Shop) to []. Checkout and the collab request confirm on screen with a reference — connect them to your own systems to take real orders and briefs.

WebGL & Pattern

One small WebGL shader draws the pixel hearts — tiny 8-bit hearts drifting slowly up the edges of the blush bands, the plain page titles and the footer, the way hearts float up a live stream: each sways a little as it rises, fades in at the foot and out at the top. Each field is one canvas:

<canvas class="td-gl" data-gl="hearts" data-gl-n="46" aria-hidden="true"></canvas>

• Count — data-gl-n sets how many hearts the field holds.
• Colours — pink, rose and a pale blush: --gl-1, --gl-2, --gl-3 and the strength --gl-alpha. The theme switch repaints them.
• Performance — a field 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.

The footer’s logo is a living pattern: a reaction-diffusion simulation (two chemicals feeding and consuming each other, the maths behind spots and stripes in nature) grows across the footer and shows through the letters of TRENDIA and its heart. It runs on a plain 2D canvas (data-rd-logo, block 20): a few drops seed in the first letters and in the heart, the pattern grows into a pink labyrinth so the word fills in, and moving the pointer over the word drops more of it. It only runs while the footer is on screen, its colours follow the theme tokens and it shows grown for reduced motion. The three scroll moments — the feed in a phone (data-feed-moment, block 21), the growth line (data-growth, block 22) and the rate-card snap (data-rate-snap, block 23) — are scrubbed against their own section’s travel, never pin the page and rest finished for reduced motion.

RTL (Right To Left)

Trendia 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 trendia-lang and trendia-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, handles, figures and the charts keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 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 Layers. The core every page shares: the Story Bars preloader, the header, the Swipe Up and soft-rise reveals with the double-tap heart, the theme and direction switch and the WebGL pixel hearts.
• 09–12 — Trendia Data, Live Clock, Custom Select, Currency. Trendia Data holds every figure; the live clock repaints the live line, the events and the letter from the visitor’s time; the custom selects; the dollar / euro / pound switch repaints every price.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, the newsletter, choice cards.
• 20–23 — Pattern Logo, Feed In A Phone, Follower Growth, Rate-Card Snap. The footer’s pattern logo (every page) and the scroll moments: the feed in a phone (Home 1), the follower growth line (Home 2) and the rate-card snap (Home 3).
• 24–36 — Media Kit, Rate Card, Collab Request, Shop My Looks, Size Finder, Contact Form, The Label Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the media kit, the rate card, the collab request, shop my looks, the size finder, contact, the label shop, accounts, the journal, demo forms, the countdown, 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 and the language flags are included and ready to use. All demo 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, collab 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: Poppins, Raleway

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.