Foliage Coffee.

Description

Foliage Coffee is a warm, editorial landing page for a fictional specialty slow coffee bar. It opens with a floating cup hero and a live “today’s featured bean” card with a rating, then flows through the brand story, menu, experience, a bean-sourcing journey, testimonials, and a visit or order call-to-action.

Background

This “One Day One Code” build was a focused exercise in warm, editorial web design and typography. The goal was to capture the calm, considered feel of a slow coffee bar in a single page, leaning on generous type and subtle motion rather than heavy imagery or frameworks.

Goal

The goal was to design and build a polished, atmosphere-first landing page in a single self-contained file, with tasteful scroll reveals and hover interactions, and no framework or build step involved.

Features

• A hero section, “Where every sip tells a story,” with a floating cup, a featured-bean card, and a rating.
• Our Story, Menu, and Experience sections carrying the brand narrative and offerings.
• An Our Beans section presenting a single-origin sourcing journey.
• Testimonials and a Visit section with community quotes and a location and order call-to-action.
• Scroll-based reveal animations and hover interactions written in plain JavaScript.

Technologies

• Vanilla JavaScript for scroll-based reveals and hover interactions.
• HTML and inline CSS in a single self-contained file, with typography from Playfair Display and Lato via Google Fonts.

How to Run

Clone the shared one-day-one-code repository and open the project’s folder, then open index.html directly in a browser, since it is a self-contained single file. Google Fonts load from a CDN, so an internet connection gives the intended typography, though it still works offline with system-font fallbacks. You can optionally serve it with a static server such as python3 -m http.server 8000. A live version is available at the demo link.

Technical Decisions

Everything lives in a single HTML file with inline CSS and JavaScript, keeping the project fully self-contained and easy to drop anywhere. The design relies on a Playfair Display and Lato pairing for an editorial serif-and-sans contrast, and interactions are limited to lightweight scroll reveals and hover effects to keep the calm, unhurried tone the brand is going for.

What I Learned

I reinforced how much a considered type pairing and restrained motion can carry the mood of a landing page, and practiced building refined scroll-reveal and hover interactions in plain JavaScript without reaching for a framework.

Notes

This is part of the shared one-day-one-code repository and is a small daily build for design practice; the coffee bar is fictional. A preview image is included in the project folder.