INSTRUCTIONS

Avande is plain HTML, CSS and JavaScript. There is no build step and nothing to install: open index.html in a browser, or upload the folder to any static host (Netlify, Vercel, GitHub Pages, or your own server).

Where things live:

• Every page is an .html file at the top of the folder.
• assets/css/styles.css holds all of the styling and assets/js/main.js all of the behaviour.
• Images and fonts are in assets/images and assets/fonts.

The design is driven by CSS custom properties declared once in :root near the top of the design section of styles.css. Change a value there and every element that uses it follows.

Key global styles include:

• Heading sizes: --h1--font-size to --h6--font-size, with matching line heights and weights
• Body text: --text-regular--font-size and --text-small--font-size
• Spacing and gaps: the --_common-spacing---spacing--spacing-4x family
• Reusable parts: .primary-button, .section-wrap, .container and .section-title

The palette is a handful of variables. Replace a value in :root and every section that uses it updates.

The brand colors:

• --_color---main-color--green-neon — the neon accent (#D3FB43)
• --_color---main-color--pale — the page background (#F1EFE2)
• --_color---main-color--dark-pale — the darker cream of cards and tags (#DBDAC8)
• --_color---normal-color--black — text and dark sections

Some icons and decorative graphics are SVG files. To recolor one, open it in a text editor and replace its HEX value; the dashboard gauges are inline SVG inside index.html and are edited the same way.

Avande uses two families, both self-hosted in assets/fonts and declared in assets/fonts/fonts.css: Inter Tight for headings, body copy and buttons, and Stack Sans Notch for the notched labels and numerals.

To change a font:

• Add your WOFF2 font files to assets/fonts and declare them in fonts.css
• Point --_base---font-family--your-heading-font, --_base---font-family--your-body-font or --_base---font-family--third-family at the new family
• Every heading, paragraph and button follows the variable

Every page shares the same header, footer and .section-wrap / .container spacing, so a new page is a copy of an existing one with its sections swapped.

To create a new page:

• Duplicate the page closest to what you need, for example about-us.html
• Rename it, update its <title> and meta description
• Replace the sections, copy, images and links
• Link it from the header .main-header-navigation or the footer

Blog posts, case studies and solutions:

• Each item is its own page: blog-*.html, case-*.html and solution-*.html
• To add one, duplicate an existing item page, edit it, and add a card that links to it on blogs.html, case-study.html or solutions.html

All motion is hand-written in assets/js/main.js and section 4 of styles.css. No library is loaded; each effect is switched on by a class or attribute already in the markup.

What drives what:

• data-fade-up, data-scale-up and data-scale-y-up — scroll reveals; add one to any element to reveal it the same way
• .section-title and .utility-title — headings that rise in letter by letter
• .primary-button — the label roll on hover
• .faq-items — the FAQ accordion; the first item opens with the page
• data-slider — the testimonial and feature sliders

Visitors who ask their system for reduced motion get every section shown at once, with no reveals, loops or smooth scrolling.

To add a question, duplicate a whole .faq-items block inside .faq-wrap and change its text. Give the new .faq-title-flex button and .faq-ans-box answer a matching pair of ids in aria-controls and id, so screen readers can connect them.

The newsletter, contact and password forms are front-end demos: they validate, then show their success (or, for the password box, error) message. Every field keeps its name.

To connect a real service:

• Give the <form> an action and method from your provider
• Remove its data-demo-form attribute so main.js stops answering it

Recommended checks:

• Update each page's title, meta description and social image
• Add meaningful alt text to every image that carries content
• Compress new photos; the template ships AVIF and JPG
• Review every page on desktop, tablet and mobile
• Remove the pages and sections you do not use

If anything here is unclear, or you would like a hand adapting the template, get in touch at contact@kaziehsan.com. We are happy to help.