HTMLCSSJSLive

Landing Pages

A collection of static HTML/CSS/JS landing pages — agency clones, editorial layouts, and product detail pages — built to drill on layout, motion, and pixel-accurate design execution.

A growing collection of self-contained landing pages — Obys Agency, Dribbble, Premier Model Management, a Men's Fashion editorial cover, Trendline, A Cotton Weave, Shop Jacket, and more — each a focused exercise in a different facet of front-end craft: GSAP and Locomotive Scroll choreography, CSS Grid editorial layouts, responsive recreations, and minimal product detail pages.

All pages share a single repo and deploy together to Vercel — each page lives in its own subdirectory and is served at /<slug>/. Browse the live site to flip through them.

Live demo Source

Case study

Problem: Landing-page craft — type, rhythm, scroll behaviour, image composition — is its own discipline that doesn't get exercised much when working on data-heavy apps. Wanted a sandbox to drill those skills against tight references and award-winning agency sites.
Approach: Build each page as a standalone static site (HTML, CSS, vanilla JS, with GSAP, Locomotive Scroll, or Shery.js for the more motion-heavy clones). All of them live in one repo and deploy together, so iteration is cheap and the patterns are easy to compare side-by-side.
Outcome: A reference library of layout and motion patterns that flow into client work and into larger React projects — particularly the GSAP and Locomotive scroll work from Obys, and the CSS Grid editorial layouts.

Tech stack

HTML

CSS

JavaScript

GSAP

Locomotive Scroll