Overview

A soft, pastel HTML template for a fashion design and styling academy that teaches four schools — fashion design, styling, fashion photography, makeup & hair — through diplomas and short courses, full-time, part-time or online. The pages keep the studio-photography look (spaced Dosis capitals, blush rules, pastel backdrops) and the logic is worked out rather than typed in: every course’s intakes from the visitor’s date with the deadline, the days left, the places left and the early-application saving; a tuition calculator with payment plans and every payment’s date; a five-step application with a portfolio upload; open days from their repeat rules; the graduate show with a countdown and a live running order; a timetable that lights the class on now; and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: Sketch To Photograph (a croquis becomes the flat, the toile and the photographed dress), Semester Grid (the diploma’s modules drop into four semesters) and Portfolios Fan Out (the graduates’ portfolios open like a hand of cards)
• A white theme by default and a dark theme on one switch, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker; a currency switch (euros, pounds, dollars) that repaints every fee
• 8 courses in 4 schools with school tabs, level and study-mode filters and search; a diploma layout and a short-course layout; intakes & dates; the tuition page; how to apply; the application; open days; a weekly timetable; student work
• The graduate show with a countdown and a running order, 8 graduates by school, a portfolio page, past shows and a seat booking
• WebGL: Pastel Clouds drifting through the page titles and plain bands, and the academy crest shattering into Voronoi cells and re-forming in the footer
• Pin Cushion preloader, Swatch Flip photo reveals, soft-rise copy, the intake-badge hover on course cards, Swiper sliders and Fancybox
• About, the studios, faculty and a tutor profile, journal, FAQ with search, contact with a map and the PHP form, the student area and account pages, coming soon with a countdown, 404
• Fully responsive from 390 px to wide screens

Getting Started

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

1. Open locally

Unzip the downloaded package and open modara/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the intakes, the tuition calculator, the application, the open days, the show’s countdown, the timetable and the filters all work straight from the files.

2. Deploy to a server

Upload the contents of the modara/ 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 schools, the courses and their fees, the intakes, the payment plans, the open days, the show, the timetable, the faculty and the graduates live in one place — see Courses, Intakes & Tuition.

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

modara/
├── *.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
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (32 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── client/                      5 files
        ├── course/                      9 files
        ├── decor/                       3 files
        ├── flags/                       6 files
        ├── garment/                     1 files
        ├── grad/                        36 files
        ├── hero/                        9 files
        ├── icons/                       30 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── photo/                       20 files
        ├── team/                        8 files
        └── work/                        16 files

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

The site is white with ink and a soft mist band, and the colour comes from the photographs’ pastel backdrops. Ink is the headings, the square buttons and the footer. Blush is the short rule under every title, the tonal buttons, the bars and the selection; ink text sits on it. The four course colours — blush (design), lavender (styling), powder (photography) and peach (makeup & hair), with mint for theory — colour the school tags, the timetable and the semester grid through the classes t-blush, t-lavender, t-powder, t-peach and t-mint. --ma-accent-text is the deeper rose for small accent text on white. --ma-bg, --ma-band, --ma-surface, --ma-heading and --ma-text are the semantic names the components use — the dark theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Dosis (headings in tracked capitals, navigation, eyebrows, buttons and figures) and Commissioner (the body, the leads, the forms). Swap them by editing the Google Fonts link and the --ma-ff-head / --ma-ff-body variables.

Logo

The logo is MODARA in tracked Dosis capitals whose O is a ring of ten pin heads in the four course colours. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink, for white bars
• logo-light.png — white, in the dark theme and the footer
• mark.png — the ring of pins alone (the about band, the account, coming-soon and error pages)
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Dark & Light Mode

Modara opens white. Every header (and the mobile menu) has a theme switch that turns the dark pages on. The choice is saved in the browser under the key modara-theme and applied by a one-line script in the <head> before the page paints. 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.
• Bands that stay dark — sections with the class is-night (the footer, the mobile menu’s foot) are dark in both themes; photo bands keep their own wash.
• Icons and drawings — each line icon ships in an ink and a white version; the croquis keeps its white sketchbook page in both themes.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Courses, Intakes & Tuition

The figures on every page come from one data block, JS block 09 Modara Data near the top of main.js (var MODARA). Edit it once and the course cards, the course pages, the intakes, the tuition calculator, the application, the open days, the show, the timetable and the student area follow. Fees are in euros (the currency switch converts them); times are minutes after midnight (540 = 9:00); weekdays run 0 = Sunday to 6 = Saturday; months run 1 = January to 12 = December.

The fees

How the tuition adds up

The course’s tuition for the study mode, less 6% when the intake starts 90 days or more from today; then the payment plan: paying in full takes 4% off, ten monthly payments add 5%; then the school’s starter kit if wanted. The €500 deposit is due with the offer and comes off the first payment, which falls two weeks before the start; termly payments follow at a third and two thirds of the course, monthly payments every month.

Intakes, open days and the live line

Every date is worked out in the visitor’s browser from today: the next intakes of each course and their deadlines, the days left and the early-application window; the next open days; the graduate show and its countdown; the class in the studios now. The header’s live line says whether the studios are open, whether an open day or the show is on, and names the next open day (block 10). The pages print the same values for one day as their no-script text.

Applications and the chosen tuition plan are kept in the browser (localStorage) so they follow the visitor from page to page and show in the student area; the application confirms on screen with a reference — connect it to your own admissions system to take real applications. The tuition engine is block 21.

WebGL & Motion

A small WebGL shader draws Pastel Clouds: soft cloud forms in blush, lavender and powder drifting slowly sideways through the page titles and plain bands, quieter in the middle where the copy sits. It is one canvas:

<canvas class="ma-gl" data-gl="clouds" aria-hidden="true"></canvas>

• Colours — the layer reads its colours and strength from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• The footer’s crest — a canvas drawing: the academy’s pin-ring crest cut into Voronoi cells that drift apart every few seconds and glide back together.
• Performance — each layer only runs while it is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame.
• Remove one — delete the canvas; nothing else depends on it.

Reveals and hover

Add ma-swatch to a photo’s frame and it uncovers under a board of small pastel squares that flip over one by one along the diagonal, like a swatch board (block 04). ma-fade lifts text and titles into place; data-delay="0.2" staggers either. On a course card the next intake slides up into the photograph on hover.

RTL (Right To Left)

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

1. Set The Direction

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

2. Swap Three Stylesheets

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 32 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 Pin Cushion preloader, the header, the Swatch Flip reveals and soft rise, the theme and direction switch and the WebGL layer.
• 09–10 — Modara Data, Academy Live & The Dates. Modara Data holds every figure; Academy Live works out the intakes, deadlines, open days, the show, the class on now and the live line from the visitor’s own date and time.
• 11–19 — Custom Select, Currency, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, the currency switch, sliders, accordions, filters, search, forms.
• 20 — Scroll Moments. The three home pages’ scroll moments: Sketch To Photograph, Semester Grid, Portfolios Fan Out.
• 21–32 — Tuition Calculator, Application Wizard, Work Filters, Tab Sets, Contact Form, Account Forms, Student Area, Article Tools, Demo Forms, Launch Countdown, Footer Crest, FAQ Search. The feature pages: the tuition calculator, the application wizard, the listing filters, tabs, contact, accounts and the student area, the journal, demo forms, the countdown, the footer crest, 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.

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 brush daubs 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, application, open-day, seat, 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: Dosis, Commissioner

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.