# Atelier

An original, single-page MRHTML portfolio template for architecture, interiors or a small design practice. Warm paper tones, editorial typography, an asymmetric project grid and original CSS studies give it a quiet visual character.

## Open it

Unzip the complete folder and open `index.html` in a modern browser. No installation, build process, account, web font or network dependency is needed. Keep `index.html`, `styles.css`, `script.js` and `assets/` together. To publish, upload the folder contents to your static host while preserving the relative paths.

The bundled image is local. The external MRHTML creator link is only visited when clicked. No analytics, cookies or tracking scripts are included.

## Make it yours

1. Edit the title, description, studio name, introduction and project text in `index.html`. Atelier and its projects are fictional sample content, not completed commissions, architectural services or verified client work. Replace them with accurate information about your own practice.
2. Set your colors in the `:root` variables at the beginning of `styles.css`. Typography uses local system fonts. Change `--serif` and `--sans` there if needed.
3. Replace the architectural photograph in `assets/`. Update the image's `src`, `alt`, `width` and `height` attributes to match the replacement. The bundled photograph is a visual reference, not a project attributed to the sample practice. Read `ASSETS.md` for its separate license and provenance.
4. Edit or replace the two `.project` articles. Native `<details>` blocks contain inline project descriptions, so no extra pages or scripts are necessary. The CSS floor plan is illustrative and must not be used as a construction drawing.
5. Replace the clearly marked contact setup note with your own verified email address, booking link or contact information. If you add a `mailto:` link, it opens the visitor's mail app. It does not submit a message through this site.
6. **Before publishing your customized real site, remove `<meta name="robots" content="noindex,follow" />`.** It is included to keep the uncustomized MRHTML demonstration out of search results. Use an accurate title and description. Add a canonical URL only after you know your real public URL. Search indexing is not guaranteed.

## Contact and services

There is no contact form, submission handler, newsletter service, backend or fake success message. The contact section is intentionally a visible customization placeholder. Add and test any real service yourself before presenting it as working. This template does not establish email delivery or store visitor data.

## Navigation and accessibility

The small-screen menu opens with its button and closes after choosing a link or pressing Escape. Without JavaScript, its links remain visible. All project notes use native keyboard-operable disclosures. A skip link, visible focus rings, semantic landmarks, responsive layouts and reduced-motion styles are included.

Keep these behaviors when customizing. Supply meaningful alt text for replacement images, check your text/background contrast, test at 320px width and with browser zoom, and verify keyboard operation after changing controls. No template can certify the accessibility of your customized site.

## Files and licensing

- `index.html`: content and semantic structure.
- `styles.css`: layout, responsive rules, color tokens and original CSS artwork.
- `script.js`: the small-screen menu only.
- `assets/architecture.webp`: locally optimized reference photograph, licensed separately.
- `ASSETS.md`: photographer credit, source URL, download URL, dimensions and license information.
- `LICENSE`: MIT license for the original MRHTML template code and documentation. It does not relicense the Unsplash photograph.

The footer includes **Designed by MRHTML**, linking to `https://mrhtml.com/` with `rel="nofollow"` as creator credit. The MIT license does not require a followed SEO link or a visible footer link. Keep the MIT copyright and permission notice with copies or substantial portions of the code.