A single-page landing site for a specialty coffee roastery. Built for a portfolio: focused on modern design, responsiveness and tasteful animations. Pure stack, no build tools or dependencies.
Just open index.html in a browser. Or spin up a local server (recommended so relative paths work correctly):
cd aurora-coffee
python3 -m http.server 5173
# then open http://localhost:5173- Hero with bold typography, stats and an animated scroll indicator
- Marquee ticker of coffee origins
- About — a photo collage plus a list of benefits
- Coffee collection — product cards with price, tasting notes and roast level
- Roasting — a step-by-step "farm to cup" process
- Customer reviews
- CTA / subscription — a form with client-side validation (demo, no submission)
- Footer with navigation and contacts
- Mobile menu, header-on-scroll effect, scroll-reveal animations
prefers-reduced-motionsupport
aurora-coffee/
├── index.html # markup
├── css/styles.css # styles and design tokens
├── js/main.js # menu, scroll-reveal, form validation
└── README.md
- Semantic HTML5
- CSS (custom properties, grid/flex, clamp, media queries)
- Vanilla JavaScript (IntersectionObserver)
- Google Fonts: Fraunces + Inter
- Images loaded from Unsplash (internet required to display them)
Functionality is intentionally minimal — this is a showcase landing page. The "Add to cart" buttons and the subscription form don't send data to a server; the form only shows demo validation.