Habitat architectural gallery · 1.0.0

An editorial architectural gallery with a panoramic lead image, staggered supporting images and a keyboard-operated viewer.

The gallery uses different image scales to tell a project story instead of placing every photograph in identical cards. Captions and a compact project index preserve a clear reading order on mobile.

HTML: open index.html to preview. Copy snippet.html into your page, load snippet.css after existing styles, and load snippet.js once with defer. Copy fonts/ and any images/ beside that CSS/HTML, or update paths. demo.css and demo page content are not the component.

Astro: copy Snippet.astro into src/components. Copy fonts/ and any images/ to public/snippet-assets/habitat-project-gallery/ so its fonts and images paths resolve. Import the component into your page or shared layout. One instance per page; use unique prefixes/IDs before duplicating it. This is a component, not a full Astro project.

Replace all sample names, destinations, prices and business claims. Form previews never send messages; configure a backend action, remove data-demo-form and disabled from the fieldset, remove the demo submit interception, then implement server validation, spam controls and delivery before collecting data. Pricing is demonstration content; specify your actual billing terms and tax treatment. No checkout backend is included.

Code: MIT. Fonts: SIL OFL, see fonts/. Photos retain separate licenses, see ASSETS.md. Retain included notices when redistributing. Test keyboard focus, zoom, mobile layouts, paths and content in your integrated website.