Overview

Creatrix is an influencer marketplace template: brands browse, price and book creators across Instagram, YouTube, X and TikTok, and creators get a page that builds itself from the accounts they connect. It ships two homepages, a roster in three layouts, one roster page per network, ten creator profile pages in two styles, and the company, journal and utility pages — 32 pages sharing one header, platform mega menu and footer, in light and dark themes and left-to-right or right-to-left.

What’s included

• 2 homepages (Marketplace and Campaigns), each with its own scroll moment
• 4 network roster pages and the roster in three layouts with live filters, sorting and a market rail
• Profile Style 01 — five social-profile pages: cover and identity, reach on every network, a booking card with a live total, an availability calendar, the network’s own modules, collaborations, audience, brand reviews and a media kit
• Profile Style 02 — five creator hubs: a sticky identity card and a bento of tools built for each network (latest post, highlights, uploads, shorts, Spaces, clips, sounds, LIVE, shop, tip jar, newsletter)
• A “Claim Your Page” membership band with Continue With buttons for each network on every profile
• Light and dark themes with a switch in the header, the menu and the footer
• Right-to-left layout from the stylesheets, chosen from a language picker
• About, Services, Service Details, Pricing, Journal, Contact with a PHP form, FAQ, account pages, Coming Soon and 404
• GSAP + ScrollTrigger reveals, a three.js hero field, Swiper sliders and Fancybox popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Creatrix. Follow the steps below to get your marketplace live.

1. Open locally

Unzip the package and open index.html in any modern browser. No build tools or server are required.

2. Deploy to a server

Upload the template folder to your host with an FTP client or your hosting control panel. Once uploaded, the site loads from your domain straight away.

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 CSS variables — see Colors & Fonts.

File Structure

The key files and folders in the template.

Colors & Fonts

The design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card follows.

The story gradient

Every gradient — buttons, story rings, figures, the accent word in each title — is built from the same three stops through --cx-grad, --cx-grad-flip, --cx-grad-soft, --cx-grad-line and --cx-grad-ring.

--cx-color-flame:  #FD4401;
--cx-color-rose:   #E54873;
--cx-color-violet: #8A3FFC;
--cx-grad: linear-gradient(120deg, #FD4401 0%, #E54873 52%, #8A3FFC 100%);

Semantic roles

Components read roles rather than raw colours: --cx-bg (page), --cx-surface and --cx-surface-2 (cards and quiet bands), --cx-heading, --cx-color-body, --cx-color-muted, --cx-color-line and --cx-tonal (the soft face of secondary buttons, chips and tiles). The dark theme redefines only these roles.

Network accents

Badges use each network’s own colour: --cx-grad-ig, --cx-color-yt, --cx-color-x and --cx-color-tt.

Fonts

Two Google Fonts load in the head of each page: Parkinsans for headings and figures and Manrope for body text, buttons and navigation. Swap them by editing the Google Fonts link and --cx-ff-display / --cx-ff-body.

Spacing and wide screens

Sections use .sec-pt-130 / .sec-pb-130 (and 90px variants), stepped down at each breakpoint in responsive.css. From 1600px the container widens to 1440px and from 1960px to 1560px, so large screens are not left with empty margins.

Dark Mode & RTL

Light and dark themes

The moon / sun button in the header (and the Dark Mode switches in the menu and the footer) set data-theme="dark" on <html> and remember the choice in localStorage (cx-theme). A small script in the head applies it before the page paints, so there is no flash. The dark values live in one block, [data-theme="dark"] { ... }, next to :root — for example --cx-bg: #0C0A0F and --cx-surface: #17131C.

To ship one theme only, delete the switches and set data-theme on <html> yourself.

Right to left

Every page is a single file. The language picker stores a right-to-left choice (cx-dir) and the head script then sets dir="rtl" and swaps each stylesheet marked data-rtl for its twin: bootstrap.rtl.min.css, style.rtl.css and responsive.rtl.css. The demo copy stays in English; the layout mirrors.

For a site that is always right to left, put dir="rtl" on <html> and link the .rtl.css files directly. If you edit style.css, regenerate its twin with any RTLCSS tool, or make the same change in both files.

Creator Profiles

The ten profile pages are the creator’s own page — the place a brand books them from, and the reason a creator signs up. They come in two styles; each style has an overview page and one page per network.

Style 01 — the social profile

• Cover and identity: cover photo, story-ring avatar with the network badge, verified name, handle, niche and city, bio and link-in-bio links; Book, Follow, Message and Media Kit actions.
• Reach row: total reach and one cell per network; a network that is not connected shows a Connect button.
• Section tabs: stick under the header and follow the scroll.
• Booking card: tick the deliverables and the total adds up; pick an open day on the calendar and it appears on the card.
• The network’s own modules: story highlights with a full-screen viewer and a grid / reels / guides switcher (Instagram); latest upload with chapters, the catalogue and a community poll (YouTube); Spaces, replays and a thread reader (X); a For You player, sounds, duets and a LIVE countdown (TikTok).
• Collaborations, audience, reviews: brand cases with results, gender / age / country charts and segments, and brand reviews.
• Claim Your Page: the membership pitch — Continue With buttons per network, Free and Creator Pro, and the tools a member gets.

Style 02 — the creator hub

A blurred-cover band with a sticky identity card (networks, link in bio, Book and Follow), this week’s figures, and a bento of tiles chosen for the network: the latest post in its native shape, insights, highlights, reels, grid, uploads, shorts, poll, pinned post, Spaces, threads, clips, sounds and LIVE — plus the shared tools: booking builder, shop, tip jar, calendar, audience, newsletter, media kit, brand wall and reviews. Each hub links to its Style 01 page (“Classic View”).

Marketplace Logic

The controls on screen calculate what they show. Everything is plain jQuery in main.js with no backend.

• Creator Filters (block 11) — network tabs read each card’s data-platform; the hero search shares the same filter.
• Sidebar Filters (block 19) and Directory Sort (block 18) — network and niche checkboxes, the budget slider on data-rate, and sorting by rate, reach or engagement.
• World Search (block 22) — the market rail filters the roster on data-country alongside the other filters.
• Rate Calculator (block 13) — prices a placement from the network’s cost per thousand, the audience size and the deliverable.
• Profile Hub (block 35) — the booking total (sum of the ticked data-price values), the calendar for the real current month with booked days from data-booked, follow, copy link, section tabs and the audience meters (data-meter).
• Tip Jar (block 36) — the send button always shows the amount picked.
• Community Poll (block 25) — percentages recomputed from each option’s data-votes when you vote.
• Save Toggles (block 31) — hearts on cards and posts keep their state and move the like count.
• Counters (block 06) and Countdown (block 21) — counters from data-count; the countdown rolls forward from data-days, so the demo never shows an expired date.

JavaScript Guide

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

• 01–08 — Core: preloader, sticky header, offcanvas, search, reveals, counters, back to top, magnetic buttons
• 09–16 — Home sections: hero field, story rail, creator filters and search, rate calculator, quotes, handle marquee, contact form
• 17–22 — Pages: accordion, directory sort, sidebar filters, video popup, countdown, world search
• 23–28 — Network modules: story viewer, feed switcher, community poll, waveform players, thread reader, FYP player
• 29–37 — 2.0: theme & language, grid ripple, save hearts, hero stage, side switch, page build, profile hub, tip jar, brief deal

Each block is a self-contained doSomething() function that skips pages where its section is not present, so any block can be deleted. Every animation respects prefers-reduced-motion, and anything hidden for a reveal is shown again on every path that skips the animation.

The signature motion

• Preloader (block 01): a story ring draws round the creators’ faces, then the curtain closes to a point.
• Grid Ripple (block 30): card grids and bento walls arrive as a ripple from their centre; give any grid data-ripple.
• Hero Stage (block 32): the Home 01 slider of one post per network.
• Page Build (block 34): Home 01 — the phone page fills tile by tile as its band scrolls through the screen.
• Brief Deal (block 37): Home 02 — the open briefs are dealt from a pile to their places; mark the grid data-deal.
• Theme & Language (block 29) and Side Switch (block 33) — the light / dark switch, the language picker and the Brands / Creators switch.

Images

The download ships with neutral placeholder images at the exact dimensions of the demo photography, so every layout keeps its shape. Replace them with your own photos using the same file names, or change the src attributes.

The logo files, favicon and flags are included and ready to use. All demo photography on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact page posts to sendmail.php, a lightweight AJAX mail handler — the success or error message appears under the Send button without reloading the page. To activate it 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 = 'hello@yourdomain.com';

2. Upload to a PHP host

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

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is built into the handler and stays dormant until the form sends a token. 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 contact 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 requests. The newsletter, account, comment and coming-soon forms are front-end only — point their action at your backend.

Credits

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

• Bootstrap 5.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• three.js r128
• Fancybox 3
• Font Awesome Free
• Google Fonts: Parkinsans, Manrope
• Flag icons (SVG)

All plugin files and icon fonts load locally. The only external requests are the Google Fonts stylesheet and the Google Maps embeds.

Support

If you have a question or need help with the template, contact us through the support page of the marketplace where you purchased it. We aim to reply within 24–48 hours.