Ember and grain

Ember & Grain — handcrafted coffee and artisan pastries served daily in a warm, community-focused space. Slow-roasted beans, house-baked goods, and moments that bring people together.

Comment

Inspiration

A modern, cozy coffee shop experience focusing on handcrafted coffee and fresh-baked goods. The design aims to evoke warmth, slow mornings, and neighborhood connection through serif headlines, soft neutrals, and tactile layouts.

What it does

  • Presents a landing site for a small artisan coffee & bakery: hero, about, menu highlights, experience, visit information and newsletter signup.
  • Includes a decorative, CSS-only coffee machine animation to add personality without JavaScript.
  • Fully responsive layout using CSS Grid and flexible units so it looks good across desktop and mobile.

How we built it

  • Plain static site: HTML5 + semantic markup in index.html and styling in style.css.
  • No JavaScript — interactions use CSS only (mobile menu via a checkbox toggle, CSS animations for the coffee machine).
  • Fonts loaded from Google Fonts (Cormorant Garamond, Inter). Images use Unsplash links for placeholder photography.
  • Key techniques: CSS Grid, responsive media queries, custom properties (CSS variables), pseudo-elements for decorative shapes, and CSS keyframe animations for the machine liquid and steam.

Challenges we ran into

  • Positioning the coffee-machine animation: initially centered using absolute positioning which made it overlay the hero; fixed by switching the machine wrapper to a centered, relatively positioned container inside the Experience section.
  • Balancing visual detail for the machine while keeping markup simple and accessible (no SVGs or external assets for the animated parts).

Accomplishments that we're proud of

  • A visually rich hero layout with elegant typography and clear CTAs, built without complex frameworks.
  • A whimsical, CSS-only coffee machine illustration and animation that gives the page character while remaining performant.
  • Clean, accessible HTML structure and responsive CSS that adapts well across screen sizes.

What we learned

  • Small selector mistakes or mismatched class names can silently break visual features — careful cross-checking between HTML and CSS is essential.
  • CSS alone can create surprisingly expressive animations and UI patterns when combined with pseudo-elements and keyframes.
  • Relative positioning is important: absolute elements without a positioned ancestor will anchor to the viewport, which affects layout in unexpected ways.

What's next for Ember and Grain

  • Polish responsiveness and accessibility: add better keyboard focus states and ARIA labels where appropriate.
  • Replace placeholder images with optimized assets and add srcset for responsive image loading.
  • Create SVG versions of the machine illustration for crisper scaling, then animate using CSS or inline SMIL/JS only if needed.
  • Add content-driven pages (full menu, events, contact form) or a lightweight CMS integration for dynamic updates.

Built With

Share this project:

Updates