Honoring National Donut Day 2025

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

I created a fully responsive, accessible landing page to celebrate National Donut Day 2025 (June 7). The design highlights the history of National Donut Day, showcases special flavors, and includes a gallery and contact form. Key features:

• Accessibility: Semantic HTML, proper aria-labels, high color contrast, focus outlines, and skip-navigation considerations.
• Usability & UX: Sticky header with a toggleable mobile menu, clear “Explore Flavors” call-to-action buttons, and a legible, well-spaced layout on all screen sizes.
• Creativity: CSS-animated 3D donut in the hero section with rotating icing, drips, and animated sprinkles. Custom SVG background patterns in hero and contact sections to reinforce the celebratory mood.
• Code Quality:
  • CSS variables for a consistent color palette, shadow, and radius values.
  • Utility classes for reusable spacing and typography.
  • Media queries to ensure the donut art and grid layouts adapt seamlessly from mobile up to desktop.
  • Modular structure: header, hero, about, flavors, gallery, contact, and footer sections are clearly separated in both HTML and CSS.

Demo

(The above embed shows the live CodeSandbox with all HTML, CSS, and assets.)

Journey

I began by researching the history of National Donut Day to craft a concise “About” section. Next, I sketched a simple sitemap:

1. Header & Nav: A sticky navigation bar that collapses into a hamburger menu on mobile.
2. Hero: A bold greeting (“Happy National Donut Day!”) accompanied by a 3D CSS donut. I experimented with radial gradients, box-shadows, and keyframe animations to achieve a realistic dough and frosting look.
3. About: Two paragraphs summarizing the origin (Salvation Army “Donut Lassies” in WWI) and modern traditions. I used a centered container with a highlighted call-to-action at the bottom.
4. Flavors: A responsive CSS grid featuring four “flavor cards” (Classic Glazed, Chocolate Dream, Strawberry Delight, Rainbow Sprinkles). Each card uses pseudo-elements for donut hole and topping shapes, plus subtle hover transitions.
5. Gallery: Placeholder grid items to simulate real donut photography. Hover transforms add a playful tilt/scale for engagement.
6. Contact: A dual-column layout (form + shop info) that gracefully collapses on small screens. Input fields, labels, and buttons adhere to WCAG contrast guidelines.
7. Footer: Simple links with hover/focus states, plus a copyright notice.

Along the way, I focused on:

• Responsive Breakpoints:

  • Under 600px: Hero shrinks to 60vh, donut art scales down to 150px, grid items stack.
  • 600px–900px: Two-column grids for flavors and gallery.
  • Above 900px: Four-column flavor grid, three-column gallery.

• Accessibility Enhancements:

  • All interactive links and buttons have visible focus outlines.
  • The donut-art container uses role="img" and an aria-label for screen readers.
  • The mobile menu’s checkbox toggle has an associated label that transforms into an “X” icon when open.
  • Color variables were chosen to maintain at least a 4.5:1 contrast ratio for body text and buttons.

• Performance Considerations:

  • All CSS is in one <style> block to reduce HTTP requests.
  • SVG background patterns are inlined to avoid extra file loads.
  • Fonts loaded from Google Fonts with only two families (Pacifico for the logo, Poppins for body) to keep the payload minimal.

I’m particularly proud of the 3D rotating donut: layering radial gradients, multiple box-shadows, and keyframe animations produced a life-like effect without JavaScript.