1. What you have
Twenty-four hand-written HTML pages, one stylesheet, one JavaScript file and the images and fonts they use. There is no build step, no package manager and no framework: open any
.html file in a browser and it works, and upload the folder anywhere that serves static files and it is live.A. The folder
- *.html — every page, at the top level. Each one is complete and readable on its own.
- assets/css/styles.css — the whole design, in four commented sections.
- assets/js/main.js — every interaction, with no dependencies.
- assets/fonts/ — two self-hosted webfont families and the
@font-facerules for them. - assets/images/ — every photograph, icon and background.
2. Colours, type and spacing
Everything is driven by CSS custom properties declared once at the top of the design section in
assets/css/styles.css. Changing a value there changes it everywhere it is used, which is what the original Webflow variables did.A. Where to look
- Colours are
--color--*:--color--aureolinis the yellow,--color--darkthe near-black, and there are six accents used by the award and step cards. - Type is
--_typography---*: two font families, seven weights and a size and line height for every heading level. - Spacing and radii are
--_responsive---*, and they are re-declared at each of the three breakpoints, so a section's padding shrinks on smaller screens without any rule mentioning it.
The style guide page shows every one of them rendered, which is usually faster than reading the sheet.
3. Editing a page
The pages share a header and a footer by having the same markup in each file rather than by including a partial — that is what makes them work with no server. If you change the navigation, change it in every file; a find-and-replace across the folder is the intended way to do it.
A. Things worth knowing
- Class names are the design's own. Nothing is named after the tool that produced it.
- Every image that carries meaning has an
alt; decorative ones have an empty one on purpose. - Each page has exactly one
<h1>, a<main>landmark and a skip link.
4. Interactions
All of them live in
assets/js/main.js, which is about four hundred lines of plain JavaScript with no libraries. The animation VALUES are in the stylesheet, in section 4; the script only decides when.A. What is in there
- Scroll reveals — anything with class
reveal. - Split-text headings — anything with a
data-splitattribute. - Scroll scrubs — anything with
data-scrub; the script sets a--pcustom property from 0 to 1 and the stylesheet does the rest. - The navigation, the team carousel, the counters and the two demo forms.
5. The counters
Any element with a
data-count attribute counts up to that number the first time it scrolls into view. There are four on the about page.A. Changing a number
- Edit the attribute and the text between the tags. Both should say the same thing, so the figure is correct before the script runs and for anyone with JavaScript disabled.
<h2 data-count="98" class="display-02">98</h2>B. Changing the speed
- In
main.js, findvar duration = 2500;insideinitCounters. The value is milliseconds. - The count starts when the element is 15% inside the viewport; that threshold is the
rootMarginon the same function's observer.
C. Adding one
- Put
data-counton any element. Nothing else is needed — the script finds it on load.
6. Forms
The contact form and the password box on the protected-page demo are wired to nothing: a static template has no server to post to, so
main.js shows the success message in the page and stops.A. Connecting a real backend
- Every field keeps its
name, so pointing the form at a handler is a matter of putting back theactionandmethodattributes. - Remove the
data-demo-formattribute from the<form>and the script leaves it alone.
7. Fonts and licensing
This template ships two families, both self-hosted and both under the SIL Open Font License 1.1: Poppins for body copy and Archivo Expanded for display type. Both may be redistributed with a commercial product. The licence page lists the sources for the photography and the icons as well.
8. Still stuck?
Email contact@kaziehsan.com and we will help.