this site is beautiful! turned into a template (repo attached) so everyone can have pretty websites https://github.com/ali-abassi/aster-landing-page-template…

ali-abassi/aster-landing-page-template

Source: https://github.com/ali-abassi/aster-landing-page-template

Why this exists

Most free landing-page templates give you a hero, three feature cards, and a footer. This one gives you a complete marketing page — the kind that actually ships — with the parts that are tedious to build already built: a layered parallax hero, a product mockup made of real HTML, six illustrated feature stages, a comparison table, a review wall, and an accordion FAQ.

It is deliberately plain HTML, CSS, and one short script. Open index.html in a browser and it works. Nothing to install, nothing to compile, nothing to keep up to date.

Credit where it’s due

This is an homage — an attempt to learn from and reconstruct the structural craft of unive.ai, whose homepage is genuinely beautifully designed. Their page is what taught this template its section rhythm: a wide emotional hero that hands off fast to concrete product evidence, proof kept inside the first fold, a compact feature grid instead of endless full-bleed sections, and a dense wall of social reviews.

Nothing from Unive is reproduced here. No copy, artwork, UI, logos, branding, fonts, or code. Aster is a fictional product with its own world, palette, typography, hierarchy, and original graphics. If you like the shape of this page, the credit for that shape belongs to the Unive team — go look at their site.

The full page

Mobile — hero, menu, and reviews at 390px

The menu opens from a hamburger and closes on Escape, on link choice, and on any outside click. Everything reflows to a single column; nothing is hidden without a replacement.

Quick start

git clone https://github.com/ali-abassi/aster-landing-page-template.git
cd aster-landing-page-template
python3 -m http.server 4173

Open http://localhost:4173. That is the entire toolchain.

npx wrangler pages project create my-site --production-branch main
npx wrangler pages deploy . --project-name my-site

Customizing

1. Brand block — 2 minutes

Everything you must change is fenced at the top of index.html:

<!-- TEMPLATE: replace every value in this block with your own brand. -->
<title>…</title>          <meta name="description" …>
<link rel="canonical" …>  <meta property="og:*" …>   <meta name="twitter:*" …>
<link rel="icon" …>       <meta name="theme-color" …>
<!-- END TEMPLATE brand block -->

Then replace favicon.svg, replace assets/og-image.jpg (1200×630 — this is what shows in link previews), and put your domain in robots.txt and sitemap.xml.

2. Design tokens — the whole look

Every colour, font, radius, and measure lives in one block at the top of styles.css. Change these and the page follows:

:root {
  /* Palette */
  --canvas: #f4efe5;  --canvas-soft: #f8f4ec;  --white: #fffdf8;
  --ink: #17201b;     --ink-soft: #506057;     --forest: #17271f;
  --coral: #d8755a;   --moss: #485b3e;         --brass: #b28a42;
  --sage: #cbd2b3;    --blue: #9bc4cc;         --gold: #e4be69;   --lilac: #c9badd;

  /* Type — system stacks only: no network request, no layout shift */
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Measure and shape */
  --wrap: 1180px;
  --radius-sm: 14px;  --radius-md: 24px;  --radius-lg: 36px;

  /* Hero rhythm and feature-stage scaling */
  --hero-h: clamp(980px, calc(880px + 24svh), 1130px);
  --hero-copy-top: clamp(92px, 13svh, 120px);
  --stage-scale: 0.53;
}

3. Hero artwork

Replace the three files in assets/, keeping the filenames:

All three are 2172×724 with alpha transparency, bottom-anchored, and clipped by the hero’s lower edge. Keep your subject mass in the lower two-thirds — the upper field is reserved for live text.

4. Copy, links, and the fake proof

Placeholder destinations are marked data-placeholder-link — grep for it and point each one somewhere real.

Everything that looks like proof in this template is invented. The mastheads (THE LONG VIEW, NORTHWARD, SIGNAL & NOISE, THE MERIDIAN), the 4.9/5 rating, the “2,408 people” count, and all twelve reviews with their names, dates, and countries are fictional placeholders chosen to demonstrate the layout. Replace them with claims you can actually support, or delete those blocks. Shipping them as-is would be fabricating endorsements and reviews.

5. Motion

Add or remove data-reveal on any element and the IntersectionObserver in script.js picks it up at load — no registration. Everything animates on transform and opacity only, and prefers-reduced-motion is honoured throughout with a defined zero-motion resting state.

What’s verified

Checked at 1440×900, 1440×780, 1280×720, 1280×633, 834×1112, 390×844, and 320×568:

• No horizontal overflow at any viewport or scroll depth
• The primary action stays inside the first fold
• The hero artwork reaches the fold and its opaque mass clears the action row — measured by alpha-sampling the panoramas, since their bounding boxes include wide transparent margins
• All three layers terminate on a single clip line at every scroll position
• Navigation is reachable at every width
• FAQ is keyboard-operable; no decorative control sits in the tab order
• Reduced motion leaves nothing stranded at zero opacity
• No console errors and no failing requests across a full-page scroll

Accessibility: skip link, visible focus rings, accessible names on star ratings, role="group" on the press row, and semantic <details> for the FAQ.

DESIGN.md records the visual thesis, the reference ledger, the typography and colour decisions including the rejected alternatives, and the measured pass conditions. Read it before making structural changes.

Project layout

index.html      One page. Brand block fenced at the top.
styles.css      Design tokens at the top, then sections in page order.
script.js       Scroll progress, reveals, parallax, nav, FAQ.
assets/         Three alpha panoramas + the OG image.
evidence/       Screenshots from the verified build.
_headers        Cache and security headers for Pages / Netlify.
DESIGN.md       The design system and its reasoning.

License

MIT — use it commercially, modify it, ship it. Attribution appreciated, not required.

The generated artwork in assets/ is included under the same terms.

Jonathan Wilke (@jonathan_wilke): Just found https://t.co/fUhTNIyVCD on todays top 3 of https://t.co/ZElVA2hguv and I just wanted to give a shoutout to them as their website is a masterclass in web design ✨

Please make more websites look this beautiful!