Instructions

How to use the Ferea HTML template

Ferea 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.

Customizing colors

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

The key colors:

  • --_color---burnt-sienna — headings, body copy and the dark sections (#7E4124)
  • --_color---copper-brown — buttons, labels and the hero band (#AC6D36)
  • --_color---pale-cream — the page background (#F3EFEA)
  • --_color---warm-ivory — cards and panels (#E7DFD3)
  • --_color---golden-amber and --_color---soft-taupe — accents

Icons and stickers are SVG files in assets/images. To recolor one, open it in a text editor and replace its HEX value.

Changing fonts

Ferea uses two families, both self-hosted in assets/fonts and declared in assets/fonts/fonts.css: Fira Sans Extra Condensed for headings and Akshar for body copy, labels and buttons.

To change a font:

  • Add your WOFF2 files to assets/fonts and declare them in fonts.css
  • Point --_base---font-family--your-heading-font or --_base---font-family--your-body-font at the new family
  • The heading and text sizes are the --h1--font-size to --h6--font-size and --text-regular--font-size families beside them

Pages and content

Every page shares the same header and footer and the same .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.html
  • Rename it and update its <title> and meta description
  • Replace the sections, copy, images and links
  • Link it from the header's .nav-menu or the footer

Menu items, categories and blog posts:

  • Each item is its own page: product-*.html, category-*.html and blog-*.html
  • To add one, duplicate an existing item page, edit it, and add a card that links to it on menu.html or blog.html

Cart and checkout

The cart is a working front-end basket kept in the visitor's browser (localStorage). Each product page's .add-to-cart-form carries the item's name, price and picture in data-product-name, data-product-price and data-product-image; change those and the cart, the checkout summary and the order confirmation follow.

Place Order on checkout.html saves the order and opens order-confirmation.html. No payment is taken: connect the checkout form to your payment provider before going live.

Interactions and animations

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 an attribute already in the markup.

What drives what:

  • data-fade-up, data-fade, data-fade-left and data-fade-right — the scroll reveals; add one to any element to reveal it the same way
  • data-fade-group on a wrapper and data-fade-item on its children — a staggered reveal
  • data-label-pop — the section labels that drop in
  • data-roll — the label roll on a button's hover
  • data-load — the opening sequence at the top of each page
  • data-marquee — the running word strip
  • data-spin and data-sway — the turning badge and the swaying stickers
  • data-slider — the home page's menu slider; its arrows, swipe and autoplay are in main.js
  • .faq-item — the FAQ accordion

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

Forms

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

Before you publish

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, SVG and PNG
  • Review every page on desktop, tablet and mobile
  • Remove the pages and sections you do not use

Still have questions?

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.