A responsive, single-page website for a fictional artisan bakery, built with HTML5, the Tailwind CSS CDN, and a custom stylesheet. The page presents cookies, doughnuts, pastries, and cakes through a sequence of themed sections, and includes a mobile navigation menu that works without any JavaScript.
https://stackiid.github.io/wildflour-bakehouse/
- Features
- Page Sections
- Tech Stack
- Project Structure
- Prerequisites
- Getting Started
- Design System
- Responsive Design
- Accessibility
- SEO
- Performance Considerations
- Known Limitations
- License
- Acknowledgements
- Sticky header with a blurred translucent background, desktop navigation, and icon buttons for search and cart
- Mobile navigation menu implemented with a hidden checkbox and the CSS sibling selector, with no JavaScript
- Hero card with a headline, rating pill, Order Now button, floating decorative icons, a slowly rotating ring around the hero image, and an SVG drip divider
- Four feature cards: Premium Ingredients, Baked Fresh Daily, Made With Love, and 100% Natural & Healthy
- Limited-time offer banner alongside a "Today's Special" list showing item name, description, and price
- Category grid with six circular image links: Cupcakes, Brownies, Doughnuts, Pastries, Cookies, and Muffins
- "Our Story" section with an image and a pulsing "Freshly Baked Everyday" badge
- Three-image showcase grid with captions
- Dark "Crafted Menus" panel with three checklist-style highlights
- Statistics strip covering years of baking, recipes, customers, and average rating
- Four testimonial cards with star ratings and customer photos
- Footer with four trust badges, quick links, support links, social icons, and contact details
- Reduced-motion support that shortens animations and transitions for users who request it
| Order | Section | Anchor | Content |
|---|---|---|---|
| 1 | Header | - | Logo, five page links, Search and cart buttons, Book a Table button |
| 2 | Hero | #home |
Headline, supporting text, rating pill, Order Now button |
| 3 | Feature cards | - | Four value cards with colored backgrounds |
| 4 | Offer and special | - | 20% discount banner and Today's Special list |
| 5 | Categories | #categories |
Six product categories |
| 6 | Story | #story |
Bakery story text and image |
| 7 | Showcase | - | Three captioned images |
| 8 | Menu highlights | #menu |
Morning Bakes, Signature Cakes, Sweet Treats |
| 9 | Statistics | - | Four headline numbers |
| 10 | Testimonials | - | Four customer quotes |
| 11 | Footer | #footer |
Trust badges, links, contact details |
The text, prices, statistics, testimonials, and contact details on the page are sample content written to demonstrate the layout.
| Category | Technology |
|---|---|
| Markup | HTML5 with semantic elements (header, nav, main, section, article, footer) |
| Styling | Tailwind CSS via the Play CDN script, plus a custom stylesheet using custom properties, Grid, Flexbox, clamp(), position: sticky, and backdrop-filter |
| Fonts | Google Fonts: Fredoka (display) and Nunito (body) |
| Icons | Font Awesome 6.5.1, loaded from cdnjs |
| Images | Photographs loaded from Unsplash URLs, plus a local favicon |
| JavaScript | Only the inline tailwind.config object; no application scripts |
| Build tooling | None |
wildflour-bakehouse/
|-- assets/
| |-- favicon.png # Browser tab icon
| `-- wildflour-bakehouse.png # Full-page screenshot of the landing page
|-- styles/
| `-- style.css # Custom component styles layered on Tailwind utilities
|-- index.html # Complete page markup and inline Tailwind configuration
|-- LICENSE # MIT License
`-- README.md
- A modern web browser
- An internet connection, because Tailwind, fonts, icons, and photographs are loaded from external hosts
- Optional: Python 3, if you want to serve the site through a local web server
Clone the repository and move into it:
git clone https://github.com/stackiid/wildflour-bakehouse.git
cd wildflour-bakehouseOpen index.html directly in a browser, or serve the folder locally:
python3 -m http.server 8000Then visit http://localhost:8000.
There are no dependencies to install and no build step.
index.html extends the Tailwind theme through an inline tailwind.config object:
| Setting | Values |
|---|---|
| Extra breakpoint | xs at 400px |
| Colors | choc, chocLight, cream, gold, orange, beige, pink, skyblue, paleyellow, peach |
| Font families | display (Fredoka), body (Nunito) |
styles/style.css mirrors the palette as CSS custom properties on :root (--choc, --cream, --gold, --orange, and others), and defines radii (--radius-sm, --radius-md, --radius-lg) and shadows (--shadow-soft, --shadow-card).
Component styles cover the header, buttons (.btn-primary, .btn-secondary, .btn-outline), hero card, feature cards, offer banner, category circles, story section, showcase, menu panel, statistics, testimonial cards, and footer. Individual cards are themed through inline custom properties such as --card-bg, --icon-bg, and --ring.
The page combines Tailwind's responsive utilities with media queries in the custom stylesheet.
| Breakpoint | Behavior |
|---|---|
| Below 640px | Feature cards use two columns and the category grid uses three columns |
| 400px and wider | The header shows the full "Book a Table" label instead of "Book", and icon buttons gain extra spacing |
| 640px and wider | Search and cart buttons appear in the header, and the category grid expands to six columns |
| 768px and wider | The showcase, statistics, footer badges, and footer link layouts expand into multi-column grids |
| 1024px and wider | The desktop navigation appears and the hamburger button is hidden, and the hero, story, and menu sections switch to side-by-side layouts |
Typography, button sizes, and hero spacing also scale fluidly with clamp().
A hidden checkbox (#menuToggle) sits next to the mobile navigation panel. A <label> styled as the hamburger button toggles the checkbox, and the rule .menu-toggle-checkbox:checked ~ .mobile-menu expands the panel by animating max-height.
Implemented practices visible in the code:
lang="en"on the root element- Semantic landmarks and sectioning elements
- Separate
aria-labelvalues for the primary and mobile navigation, the Search and cart buttons, and the social links aria-hiddenon decorative icons, the logo mark, hero decorations, and the drip divider- Descriptive
alttext on every image - Visible
:focus-visiblestyles for links, buttons, labels, and inputs - A
prefers-reduced-motionrule that shortens animations, transitions, and smooth scrolling
No accessibility audit or WCAG conformance level is claimed.
The <head> of index.html contains:
- A page title and meta description
- A viewport meta tag
- A favicon link
The page does not include Open Graph tags, a canonical URL, a sitemap, or robots.txt.
- Images below the hero use
loading="lazy", and the hero image usesloading="eager" - Images declare
widthandheightattributes - Google Fonts are requested with
preconnecthints anddisplay=swap - The Tailwind Play CDN compiles styles in the browser at load time. It is intended for prototyping, and a compiled Tailwind build would be the usual choice for a production site
assets/wildflour-bakehouse.pngis a large screenshot (about 10 MB) and is not loaded by the page
- The Search and cart buttons have no behavior attached to them
- Book a Table, Order Now, Claim Discount, and Explore Menu are links to in-page anchors; there is no booking, ordering, or checkout functionality and no backend
- The social icons use placeholder
#targets, and the FAQ, Delivery Info, Terms of Service, and Privacy Policy links point back to the footer - The mobile menu button keeps the same "Open menu" label and hamburger icon whether the menu is open or closed
- Sample content is not fully consistent; for example, the hero rating pill says "since 1998", while the footer copyright starts in 2003
- Photographs depend on Unsplash URLs and will not load without an internet connection
This project is licensed under the MIT License. See the LICENSE file for details.
Copyright (c) 2026 Ubaid Ahmad
- Photographs from Unsplash
- Typefaces from Google Fonts: Fredoka and Nunito
- Icons from Font Awesome
- Styling utilities from Tailwind CSS