AI website prompts, one for each free template

Build a website for a plumbing and heating business (or another trade) in the style of the free "Craftline" template (live demo: https://craftline.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Pages: home, one page per service, about, contact with the quote form, thank-you and 404.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Sticky header: logo, menu, phone number and a "Get a written price" button.
2. Hero as a scroll story: the headline "Plumbing and heating repairs, priced before we start" next to a line drawing of a house at night that stays pinned while six short steps scroll past (the house asleep, a drip under the kitchen sink, one form sent from a phone, a van on the way, price first, a dry floor and a two-year guarantee). Buttons: get a written price, call.
3. Trust strip: licensed, insured and local, with four numbers.
4. Services: six cards (emergency plumbing, leak detection, drain cleaning, water heaters, boilers and heating, fixtures and bathrooms), each saying what the job usually costs, plus an emergency line.
5. One customer quote on a band.
6. Service area: the towns covered.
7. Recent jobs: three customer reviews.
8. FAQ about price, timing and the guarantee (six questions in <details>).
9. Quote form: "Tell us what's wrong and get a written price", with the phone number beside it.
10. Footer: services, company and contact columns.

Colours (define them as CSS variables):
- Background: #0b0e1c
- Surface: #121628
- Raised surface: #191e34
- Text: #f2f3f7
- Muted text: #a5abc0
- Lines: #262b42
- Accent (buttons, highlights): #ff7a29
- Text on accent: #0b0e1c
- Success: #4ade80
- Error: #ff8f80

Fonts (Google Fonts): Urbanist for everything: bold for headings, regular for text.

Motion and hover:
- The scroll story runs on CSS scroll-driven animations (animation-timeline: view()), no animation library; the house lines draw themselves with stroke-dashoffset.
- The four numbers count up once when they scroll into view; cards rise in.
- Page changes cross-fade with view transitions.
- With reduced motion the story shows six still pictures instead.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Quote form fields: name, phone, email, service (select: Not sure yet plus the six services), message. After success show "Request received" and a "Send another request" button. Use these name attributes: name, phone, email, service, message. Add a hidden field _subject with the value "New quote request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a small consultancy or B2B service firm in the style of the free "Orrery" template (live demo: https://orrery.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Pages: home, services, about, contact with the form, thank-you and 404.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header: logo, menu and a "Book a call" button.
2. Hero: the headline "Answers from your own data" over a 3D particle network on a <canvas> that drifts on its own and moves away from the pointer, and four numbers (years of experience, projects delivered, models in use, consultants).
3. Statement (what we do): one large paragraph that fills letter by letter as you scroll.
4. How we work: a media panel that grows from the edge of the screen to full width.
5. Services: a heading whose words fill with colour as you scroll, then six service cards (data audit, reporting, demand forecasting, pricing, experiments, customer analysis) that arrive in a staircase and lock into a grid.
6. When we say no: a split block with a "Book a call" button.
7. How a project runs: four steps (diagnosis first, a single owner, your own tools, handover and review) with orbits turning beside them.
8. Final call to action: "Tell us the decision you are stuck on" with a "Get started" button.
9. Footer: enquiries, links, "Book a call".

Colours (define them as CSS variables):
- Background: #040319
- Surface: #0d0c26
- Text: #eeeeee
- Muted text: #949494
- Lines: #ffffff80 (white at 50%)
- Art and particles: #5c5b7f
- Accent (lime): #dcfd35
- Text on accent: #040319
- Error: #ff9a8a

Fonts (Google Fonts): Questrial for everything.

Motion and hover:
- Particle network: one small canvas script, drawn only while it is on screen and the tab is visible.
- Statement fill, staircase cards, the growing panel and the orbits are tied to scroll (IntersectionObserver or animation-timeline).
- Cards and text rise in; buttons and links react on hover.
- With reduced motion, no JavaScript or an older browser, every section shows its final state.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Contact page form fields: name, company, email, topic (select: Not sure yet plus the six services), message. Use these name attributes: name, company, email, topic, message. Add a hidden field _subject with the value "New enquiry from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a developer or design studio portfolio in the style of the free "Lattice" template (live demo: https://lattice.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header bar with the studio name and a menu button that opens a full menu.
2. Hero: the headline "Design that moves" on a dark grid.
3. Selected work: a pinned project switcher for six projects, each with a desktop and a phone screenshot, prev/next arrows and an open link.
4. Services, headed "Plan, design, ship", with a "Get in touch" button.
5. About the studio, with testimonials.
6. Contact: "Start a project" with the form.

Colours (define them as CSS variables):
- Background: #1c1c1c
- Grid lines: #404040
- Faint background grid: rgba(255,255,255,.024)
- Text: #fafafa
- Soft text: #dadadc
- Muted text: #b0b0b7
- Accent (teal): #43cabc
- Error: #e08a7c

Fonts (Google Fonts): Montserrat (light weights, 100 to 600) for everything; IBM Plex Mono for small labels.

Motion and hover:
- Every border sits on one grid; frames draw themselves from a corner as they scroll into view and boxes slide in (IntersectionObserver).
- A particle orb on a <canvas> travels between sections.
- Buttons fill on hover; the send button's arrow moves.
- Reduced motion switches the movement off.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Contact form fields: name, email, phone (optional), message. After success show a "received" state with a "Send another message" button. Use these name attributes: name, email, phone, message.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a luxury home builder (design and build) in the style of the free "Lattice Estate" template (live demo: https://estate.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header bar with the name and a menu button.
2. One long story section: the headline "Homes built to outlast" over a finished cliffside villa; scrolling turns it back into the shell under construction, then the bare concrete frame, then the first line drawing on a drafting grid, with a caption for each stage.
3. Contact: "Your idea starts here", a consultation form shown over a photo of the team.

Colours (define them as CSS variables):
- Background: #13110f
- Lines: #3d372f
- Text: #f4efe6
- Soft text: #e6ddce
- Muted text: #bab0a1
- Dim text: #8e8576
- Accent (gold): #c8a46a
- Panels over photos: rgba(19,17,15,.64)
- Error: #e08a7c

Fonts (Google Fonts): Cormorant Garamond for headings and captions, Montserrat for text, IBM Plex Mono for small labels.

Motion and hover:
- The four photos of one house cross-fade as you scroll, shot from the same spot so the stages line up.
- Borders sit on grid lines, frames draw themselves and boxes slide in.
- Reduced motion turns it off and shows the stages one under another.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Consultation form fields: name, email, phone (optional), budget (select with budget bands), message. Button: "Request a consultation"; after success a "Send another request" button. Use these name attributes: name, email, phone, budget, message.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a real estate agent in the style of the free "Shoal" template (live demo: https://shoal.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Pages: home, about, buying, selling, one page per area, notes, contact, thank-you and 404.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header that hides on the way down and comes back on the way up, with a side menu.
2. Hero: a full-screen photo with the agent's name.
3. Services: six photo tiles (meet the agent, buying, selling, second homes, client stories, moving help).
4. Meet the agent: a wide portrait on a dark band.
5. Areas: four area guides with photos, on a dark band.
6. Notes: three short articles with photos.
7. Call to action on a dark band: "Work with" the agent, with a "Let's connect" button.
8. Footer.
9. A floating "Let's connect" button; it, the header and every call to action open the same enquiry form in a <dialog>.

Colours (define them as CSS variables):
- Text and dark bands: #000000
- Background: #ffffff
- Muted text: #5e5e5e
- Rules: #d9d9d9
- Error text: #b42318

Fonts (Google Fonts): Newsreader for headings, Montserrat for text (the template uses Metropolis, which is not on Google Fonts; Montserrat is the closest match).

Motion and hover:
- Headings fade up into view once.
- Service tiles lift their title and darken on hover.
- The hero photo drifts slowly; the dialog and the side menu slide in.
- Reduced motion turns the movement off.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Enquiry form in the dialog ("Get in touch"): name, email, phone, topic (select), message. After success show "Thank you, your message is in." and a "Send another" button. Use these name attributes: name, email, phone, topic, message. Add a hidden field _subject with the value "New enquiry from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a maker of windows and doors in the style of the free "Lattice Atelier" template (live demo: https://atelier.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header bar with the name and a menu button.
2. Split hero: paper on the left with the name and project caption, the photo bleeding off the right edge. Scrolling through it changes the project.
3. Manifesto: one long sentence about slim frames and exact joints, with a photo of a frame detail.
4. Collections: four rows that fill with ink on hover, and an "Ask for samples" link.
5. Ateliers: addresses and opening hours.
6. Contact: "Write to us" with the enquiry form.
7. Dark footer with link columns.

Colours (define them as CSS variables):
- Background: #ffffff
- Ink: #262626
- Slate (dark blocks): #2f4c68
- Lines: #d5d5d5
- Lines on dark: #474747
- Muted text: #6e6e6e
- Faint text: #b0b0b0
- Error: #b3412f

Fonts (Google Fonts): Inter Tight (400 and 500) for everything.

Motion and hover:
- In the hero the photo wipes up and every label rolls letter by letter when the project changes.
- Every border sits on a grid line; frames draw themselves and boxes slide in.
- Collection rows fill with ink from the left on hover.
- Below 1080px the page flows in a phone layout; reduced motion turns the movement off.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Enquiry form fields: name, email, phone (optional), project type (select), message, consent checkbox. Use these name attributes: name, email, phone, project, message, consent.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a designer windows and doors brand in the style of the free "Soglia" template (live demo: https://soglia.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. A slate loader with rolling words that plays once per visit.
2. Header with a menu button that opens a dark three-column menu.
3. Home view: a one-screen slider. The wheel or a vertical swipe changes the category, the arrows or a sideways swipe change the piece; each slide is a full-screen photo with a caption.
4. Contacts view in the same page: ateliers in hairline rows, a dark customer-service card and the request form.
5. Light footer with link columns (index, windows and doors, complements, follow) and legal links.

Colours (define them as CSS variables):
- Ink: #2a2a2a
- Background: #ffffff
- Slate (loader, curtain, dark card): #34506e
- Lines: #e5e7eb
- Soft background: #f7f7f7
- Muted text: rgba(42,42,42,.55)
- Error: #b3412f

Fonts (Google Fonts): Geist (400 and 500) for everything.

Motion and hover:
- The slide photo wipes in and every label rolls letter by letter; autoplay waits while the pointer is on the caption.
- A slate curtain passes between the home and contacts views.
- Arrows nudge on hover.
- Reduced motion turns the movement off and stops autoplay.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Request form fields: name, email, phone, city, message, a required privacy checkbox and an optional newsletter checkbox. Use these name attributes: name, email, phone, city, message, privacy, marketing.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an architecture studio in the style of the free "Halftone" template (live demo: https://halftone.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. An orange loader: the page shown small and tilted in the middle, which straightens and fills the screen at 100%. Once per visit.
2. Header with a menu.
3. Hero: a photo behind a fine dot screen, the title "We design homes that hold light" split to the two edges.
4. Intro line about the studio, then four full-screen project photos that slide over each other, each with a white bar for the name, one line of text and a button.
5. Studio scene: huge words that a strip of photos rises over, then the middle photo opens to the whole screen.
6. Services: the full scope of the studio.
7. Numbers on orange that count up.
8. Footer: menu, a big wordmark, two studio addresses, legal links.
9. Contact: a full-screen section with a dot-screen photo and a card with the form.

Colours (define them as CSS variables):
- Accent (orange): #f2621c
- Second accent (title gradient end): #ffb04a
- Ink: #000000
- Paper: #ffffff
- Rules: #e5e5e5
- Error: #a3290c

Fonts (Google Fonts): Archivo, expanded width (125) at 600 and 700, for headings; Figtree for text.

Motion and hover:
- The hero turns into a second frame as you scroll; the project panels stack; the photo strip rises over the words (scroll position read with requestAnimationFrame).
- Numbers count up once in view.
- Buttons fill and their arrow moves on hover.
- Reduced motion turns every scroll effect and the loader off.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Contact card fields: name, email, message. Use these name attributes: name, email, message.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a ceramics studio that takes orders by message (or a bakery, florist or other maker) in the style of the free "Ocra" template (live demo: https://ocra.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with a menu and an orange "Order" button.
2. Hero: the wordmark filling the width, its O drawn as a citrus slice in SVG, two large buttons and a photo.
3. Shop ("The kiln"): product cards with orange price tags; "Order this" scrolls to the order form with that piece already picked.
4. About the studio, split text and photo.
5. Ask us: six rows, each with its own form (order, workshop booking, commission, wholesale, feedback, write to us).
6. Visit the studio: address and hours.
7. Newsletter: "One letter per firing" with an inline email field.
8. Footer.

Colours (define them as CSS variables):
- Paper: #fbf8f3
- Sand: #f2ece4
- Darker sand: #e9e1d6
- Ink: #1e1a16
- Muted text: #8b8176
- Lines: #e6ded3
- Orange (tags, buttons): #ef7a2e
- Soft orange: #fde2c4

Fonts (Google Fonts): Inter Tight (500, 600) for headings and the wordmark, Inter for text.

Motion and hover:
- The citrus slice turns as you scroll and the hero photo drifts.
- The big buttons roll their label up on hover and change colour.
- Forms have small touches: a progress line on the multi-step booking, faces that grow on the rating, a loading state on submit.
- Reduced motion stops every animation.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Write-to-us form fields: name, email, message. Use these name attributes: name, email, message. Add a hidden field request with the value "Message" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Each sends a hidden request field with its own value. Order (request "Order": piece, quantity, name, email, country), workshop booking in steps (request "Workshop": slot, date, experience, people, name, email), commission (request "Commission": message, reference as a file upload, name, email), wholesale (request "Wholesale": business, company, email), feedback (request "Feedback": rating 1 to 5, comment, email), newsletter (request "Newsletter": email, consent). Forms with a file use enctype="multipart/form-data".

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an interior design and renovation studio in the style of the free "Arcwell" template (live demo: https://arcwell.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header: transparent over the photos with a centred logo, the menu below and social links; once you scroll it turns white and shorter. A menu button on phones.
2. Hero: three rooms that cross-fade every five seconds, with dots to pick one, and a large uppercase title.
3. Intro: "Modern interior design".
4. Services in three columns.
5. Order a design: a two-column block with a short order form.
6. Why choose us: six reasons with icons.
7. Quote questionnaire: "Want an exact price for your interior?"
8. A light blue band: what a renovation estimate looks like, with a sample-estimate request.
9. Recent projects: a gallery of eight photos.
10. FAQ on a timeline: when do you need an interior designer?
11. The studio address and hours.
12. Final call to action: "Shall we talk about your project?" with a call-back request.
13. Footer with social links.

Colours (define them as CSS variables):
- Ink: #222222
- Text: #111111
- Black (buttons): #000000
- Muted text: #50595f
- Soft background: #f8f8f8
- Lines: #b5b5b5
- Light blue band: #c9dfee
- Background: #ffffff

Fonts (Google Fonts): Montserrat (400 to 700) for everything.

Motion and hover:
- The hero title drops in; the slideshow cross-fades.
- Gallery photos are grey and turn to colour on hover (filter: grayscale), with a slight zoom.
- Blocks rise in once in view (IntersectionObserver); menu links get an underline that grows.
- Reduced motion stops the slideshow and the fades.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Quote questionnaire fields: name, email, phone, city, type of space, area, renovation, message. Use these name attributes: name, email, phone, city, type, area, renovation, message. Add a hidden field request with the value "Quote" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Order a design (request "Design order": name, phone, email), sample estimate (request "Sample estimate": name, phone, email), call back (request "Call back": name, phone).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a premium interior design studio in the style of the free "AULA" template (live demo: https://aula.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Sticky dark header: a menu button that slides in a side menu (Projects opens a sub-list), an about panel, a centred wordmark, a "discuss a project" pill and the phone number.
2. Eight photo tiles under a dark veil, each naming a section or service.
3. Latest projects: five rows that swap sides, each in its own colour for the tag, details, title and a "view" link that opens the photo large in a <dialog>.
4. Discuss: "Let's create a premium space for living, work and business" with the project request form.
5. Footer, and a round phone button that opens a call-back window.

Colours (define them as CSS variables):
- Main dark grey: #4d4d4d
- Darker grey: #2e2e2e
- Active grey: #b5b5b5
- Pill grey: #d9d9d9
- Text on dark: #ffffff

Fonts (Google Fonts): PT Sans (400 and 700) for everything.

Motion and hover:
- On hover a tile's photo zooms, the veil lifts and a short line of text opens.
- "Services" and "furnishing" tiles jump to the form and tick that service.
- Rows and tiles rise in once in view; the round phone button wobbles like a ringing phone on hover.
- Reduced motion turns the zooms and slides off.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Project request fields: type of space (chips), area (chips), services (chips, several allowed), name, phone, email. Use these name attributes: space, area, services, name, phone, email. Add a hidden field request with the value "Project" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Call back in a small pop-up window next to the round phone button (request "Call back": phone).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an interior design and architecture studio that sells fixed-price services in the style of the free "Goldleaf" template (live demo: https://goldleaf.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header on the line grid with the menu (a menu button on phones).
2. Hero: spaced lines, an italic serif wordmark with a leaf, a bouncing arrow, and a red-orange arch that opens onto a hallway photo beside a mint armchair and a yellow floor lamp, all in SVG.
3. A black running line of text and a round "call us" badge that turns.
4. Services: nine cards in coral, sunflower yellow, mint and sky blue with serif titles and large pill buttons ("Sample", "Learn more").
5. Client reviews in a slider, with a "Leave a review" button.
6. Footer with the address.
7. On phones a sticky "Write to us" bar with messenger links.

Colours (define them as CSS variables):
- Background (warm white): #fffaf1
- Ink and lines: #231d1a
- Accent (red-orange): #ff4a24
- Arch: #ff5a36
- Inside the arch: #ffb23e
- Coral cards: #ff7f5c
- Sunflower cards: #ffcf3f
- Mint cards: #5fd6a8
- Sky cards: #7cc4ff

Fonts (Google Fonts): Fraunces (600, italic 500) for headings and the wordmark, Open Sans for text.

Motion and hover:
- Three columns between two side margins: every row, the header included, sits on the same lines.
- The running line scrolls, the badge rotates and the hero arrow bounces.
- Pill buttons invert on hover; cards rise in once in view.
- Reduced motion stops all of it.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- One write-to-us form in a <dialog> behind every button, opened with the topic filled in as a hidden topic field. Fields: name, phone, email, message. Use these name attributes: name, phone, email, message. Add a hidden field topic with the value "Message (or the topic of the button that opened it)" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Leave a review in a <dialog> (topic "Review": rating 1 to 5, name, review).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an architect or structural engineer portfolio in the style of the free "Quell" template (live demo: https://quell.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Hero: the studio name in two giant words over a full-screen photo.
2. Section menu that rises after the hero.
3. Work: a thin line down the middle of the page that fills as you scroll, with eight projects on both sides at different sizes and each year on the line.
4. Practice: a short text.
5. Approach: one large statement, "Where the structure is the architecture".
6. Notes: a quote.
7. Contact: "Start a project" with the project form.
8. How we work: two photos with a short text.
9. One wide photo.
10. Footer with the studio name across the full width, filled with a photo.

Colours (define them as CSS variables):
- Background: #0d1113
- Text: #e4e6e1
- Dim text: rgba(228,230,225,.4)
- Lines: rgba(228,230,225,.3)
- Accent (pale green): #a9c2b5

Fonts (Google Fonts): Archivo (variable: width 62 to 125, weight 100 to 900) for everything; the giant name uses a narrow width.

Motion and hover:
- As you scroll the two words of the name slide apart, the menu rises and a dark panel covers the photo.
- On the timeline, hovering a project dims the other photos and shows its name and structure.
- Text reveals line by line, headings word by word, photos come into focus as they scroll in.
- Reduced motion turns it all off.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Project form fields: name, email, project type (chips), location, timing, message. Use these name attributes: name, email, project, location, timing, message. Add a hidden field subject with the value "New project enquiry" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an interior design and architecture studio (dark, premium) in the style of the free "Kavelle" template (live demo: https://kavelle.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header: a centred logo with the menu split on both sides; transparent over the slider, solid once you scroll.
2. Hero: a full-screen slider of five projects with titles, progress bars, a counter and arrows.
3. Projects: categories in a row you can drag or scroll sideways.
4. Studio philosophy: a founder block and studio numbers.
5. Services: four cards.
6. Contact: "Ready to talk about your project?" under two lines of running text, with the form.
7. Footer.

Colours (define them as CSS variables):
- Background: #121414
- Darker background: #0b0c0c
- Text: #e6e4df
- Dim text: #9a9a96
- Accent (green): #34c49a
- Text on accent: #0b1c16
- Light section: #e7e4dd
- Text on light: #151716

Fonts (Google Fonts): Italiana for headings, the logo and numbers; DM Sans for text.

Motion and hover:
- Slides cross-fade every 5 seconds with a slow zoom; titles rise letter by letter.
- Category photos zoom on hover; service cards turn green on hover.
- Numbers count up; blocks fade in from their side; the two text lines run in opposite directions.
- Reduced motion stops all of it.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Contact form with floating labels: name, email (required), phone (required), service (choice of topic; clicking a service card fills it), message. Use these name attributes: name, email, phone, service, message. Add a hidden field subject with the value "New project from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a vet clinic for cats and dogs in the style of the free "Burrow" template (live demo: https://burrow.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with the menu.
2. Hero: "Vet visits your pet won't dread", a photo in a soft shape that slowly changes, colour shapes behind it and a turning round sticker.
3. Why pets don't mind us: a short statement.
4. Services: six cards (wellness exams, vaccinations, dental care, surgery, puppy and kitten packages, house calls) with "Book this".
5. Low-stress handling: "We let your pet set the pace."
6. How a visit works: steps.
7. The team.
8. Take a peek inside: photos of the waiting room.
9. Plans and prices.
10. Reviews from owners.
11. FAQ.
12. Book a visit: "Tell us who's coming in" with the booking form.
13. Footer with a monthly pet-care newsletter sign-up.

Colours (define them as CSS variables):
- Background (cream): #FFF5EB
- Ink: #2A1740
- Muted text: #5E4D6E
- Orange: #FF6B2C
- Deep orange (text-safe): #C2410C
- Violet: #6A3DF0
- Lilac: #B9A4FF
- Pink: #FF9FC6
- Peach: #FFD9C2
- White: #FFFFFF

Fonts (Google Fonts): Fredoka (500, 600) for headings, Nunito for text.

Motion and hover:
- The hero photo shape morphs slowly and the sticker spins.
- Service cards lift with a shadow on hover and their photo zooms; button icons nudge.
- Blocks rise in once in view.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Booking form fields: owner name, email, phone, pet name, species (cat, dog, other), visit type, preferred day, preferred time, a short note. "Book this" on a service card picks the visit type. Ask for no medical history. Use these name attributes: name, email, phone, pet_name, species, visit_type, preferred_day, preferred_time, message. Add a hidden field subject with the value "New visit request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Newsletter in the footer (subject "New newsletter sign-up": email).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a doctor-led skin clinic in the style of the free "Selune" template (live demo: https://selune.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with wide menu panels that comes back as a floating pill when you scroll.
2. A side rail with Book, Call, Hours and Find us.
3. Hero: "Calm, honest care for your skin.", a black-and-white portrait in an oval with a thin ring, a turning round badge and a headline in a light serif.
4. A booking strip with opening hours.
5. Our approach: a short message.
6. Concerns: "Start with what bothers you", ten skin concerns that pick the topic in the form.
7. Treatments: four rows.
8. Why us: what you can expect.
9. The team.
10. How a visit works.
11. Prices.
12. The clinic: a photo slider.
13. Reviews.
14. FAQ.
15. Book a consultation with the form.
16. Footer: visit, explore.

Colours (define them as CSS variables):
- Background (porcelain): #FBF7F2
- White: #FFFFFF
- Sand: #F4E9DE
- Clay: #E8CDB9
- Accent: #D2401B
- Deep accent: #B5370F
- Tint: #FBE2D7
- Ink (deep teal): #10302F
- Second ink: #3E5856
- Teal: #1C4A47

Fonts (Google Fonts): Instrument Serif for headings, Hanken Grotesk (300 to 600) for text.

Motion and hover:
- A short intro fades and spins in once; the badge turns; a line of text runs as a marquee.
- Shapes drift slowly behind the hero; the photo slider slides.
- Buttons fill and their icon moves on hover; the menu panels open with a fade and slide.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Consultation form fields: name, email, phone, treatment (choice), preferred date, preferred time, a short note. Ask for no medical details. Use these name attributes: name, email, phone, service, preferred_date, preferred_time, message. Add a hidden field subject with the value "New consultation request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a family dental practice in the style of the free "Brightmoss" template (live demo: https://brightmoss.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. A short intro with a sun rising behind the logo.
2. Header with the menu.
3. Hero on leaf green: "Gentle dentistry for the whole family", a framed photo and a tall photo that wipes in.
4. Why families choose us: one statement.
5. Treatments: six cards that start a booking.
6. Emergency band: "Toothache, a chipped tooth or a swollen face?" with a call button.
7. Plans and prices: a pay-as-you-go price list next to a monthly family plan.
8. How a first visit works: a wheel that turns as you scroll (a simple list on phones).
9. The team.
10. Two practices, with numbers that count up.
11. Reviews.
12. FAQ.
13. Book a visit with the appointment form.
14. Footer with both practices.

Colours (define them as CSS variables):
- Background (cream): #FFF8EA
- White: #FFFFFF
- Ink: #1E1B3A
- Muted text: #57536E
- Leaf green: #0D7A43
- Deep green: #0A6236
- Bright green: #3CC46B
- Sprout: #E9F6D3
- Sun yellow: #FFC93C
- Soft sun: #FFF0C7
- Coral: #FF6A3D

Fonts (Google Fonts): Bricolage Grotesque (500 to 800) for headings, Figtree for text.

Motion and hover:
- Treatment cards lift with a shadow on hover; pill buttons lift and their arrow moves.
- Photos wipe in, blocks rise, numbers count up once in view.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Appointment form fields: name, email, phone, treatment, who the visit is for, practice, preferred time, a short note. Ask for no medical details. Use these name attributes: name, email, phone, service, patient, practice, preferred_time, message. Add a hidden field subject with the value "New appointment request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a private medical clinic in the style of the free "Averin" template (live demo: https://averin.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with a wide Services menu on desktop and a full-screen menu on phones.
2. Hero: "See a doctor this week, not next month.", a large botanical photo in a rounded frame next to a serif headline.
3. A deep-green panel: "One clinic. The whole family." with huge type, a statement and numbers.
4. Services: six, each picks the topic in the form.
5. How a visit works: four steps with a pinned photo that changes per step.
6. Our doctors: four.
7. Prices: membership and price list.
8. Reviews.
9. FAQ.
10. Book a visit with the form.
11. Dark footer.

Colours (define them as CSS variables):
- Background: #FBFCF8
- White: #FFFFFF
- Ink: #0D2B22
- Second ink: #3F564D
- Lines: #D9E2D8
- Forest (dark panels): #0B3B2E
- Forest 2: #145040
- Lime (accent): #C8F23A
- Mint: #E4F0E2
- Tint: #EEF6DF

Fonts (Google Fonts): Instrument Serif for headings, Bricolage Grotesque (400 to 700) for text and buttons.

Motion and hover:
- The hero headline fades in word by word.
- On the green panel the huge type drifts as you scroll, the statement's words light up and the numbers count up.
- Pill buttons roll their label up on hover.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Booking form fields: service, name, email, phone, preferred day, time (chips), a short note. Ask for no medical details. Use these name attributes: service, name, email, phone, day, time, message. Add a hidden field subject with the value "New appointment request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an independent neighbourhood pharmacy in the style of the free "Sorrel" template (live demo: https://sorrel.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with the menu (a separate menu on phones).
2. Split hero: "Good advice, next door." in a big serif, hand-drawn leaves, and an opening-hours panel that says Open now or Closed from the visitor's clock.
3. Delivery: "Check if we deliver to you", a postcode check (the list of areas lives in the script and nothing is sent).
4. Services: five colour cards.
5. Checks and vaccinations: clear prices.
6. How a jab or a check works: steps.
7. The counter: skincare and vitamins in refillable glass.
8. The team behind the counter.
9. Reviews from neighbours.
10. FAQ.
11. Book or ask: two forms side by side.
12. Footer with contact details.

Colours (define them as CSS variables):
- Background: #FFFBF3
- Ink: #13261B
- Muted text: #4A5B50
- Leaf green: #1F9A55
- Deep green: #0E7240
- Beet (accent): #C4195A
- Deep beet: #A3124A
- Lime: #D4E84F
- Mint: #E3F4E6
- Blush: #FBE3EA

Fonts (Google Fonts): Young Serif for headings, Onest (400 to 700) for text.

Motion and hover:
- The leaves sway and drift; the Open now dot pulses.
- Service cards lift with a shadow on hover and their photo zooms.
- Blocks rise in once in view.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Booking form fields: service, day, time, name, phone, email, note. Ask for no prescriptions, drug names or medical details. Use these name attributes: service, day, time, name, phone, email, note. Add a hidden field subject with the value "New booking request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Ask a pharmacist for a callback (subject "Callback request: ask a pharmacist": name, phone, call_time with a few choices, question).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an esthetic dental studio in the style of the free "Odera" template (live demo: https://odera.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with the menu.
2. Split hero: one huge serif headline, "Smiles, planned by hand", across an ivory half and a framed photo.
3. Our approach.
4. Treatments on a dark grain background: "Five things we do carefully", a pinned showcase with prices and a monthly care plan.
5. A banner line: "One patient at a time, for as long as it takes."
6. From first talk to aftercare: visit cards on a dark grain background.
7. Who you'll meet: black-and-white team portraits.
8. Reviews on a blue band.
9. FAQ.
10. Book a visit on a dark grain background.
11. Dark footer.

Colours (define them as CSS variables):
- Ivory: #f4efe6
- Sand: #e8e0d2
- Ink (espresso): #1a1714
- Dark sections: #231f1b
- Muted text: #6b6258
- Muted on dark: #a69c90
- Blue (accent band): #2c3ae6
- Light blue: #a8b0ff

Fonts (Google Fonts): Bodoni Moda for headings and the logo, Hanken Grotesk for text.

Motion and hover:
- The hero photo grows to full screen as you scroll, then a line of treatment names slides past.
- In the treatment showcase each photo wipes up over the last; visit cards stack as you scroll.
- Slanted buttons fill on hover; list links slide right.
- Reduced motion stops it (the hero is not pinned then), and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Booking form with slanted chips: name, email, phone, preferred time, treatment (chips), message. Ask for no medical details. Use these name attributes: name, email, phone, preferred_time, service, message. Add a hidden field subject with the value "New visit request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a preventive health and functional medicine practice in the style of the free "Tamsa" template (live demo: https://tamsa.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header bar with the menu.
2. Dark hero: "Health you can actually read." with three cross-fading photos and numbers that count up; it stays pinned while the next section slides over it.
3. Start here: a free intro call and a small goal picker that suggests where to start and picks it in the form.
4. Care: five cards, including lab panels explained.
5. Why we started: pinned statements on a dark background that change as you scroll.
6. How a visit works: four steps.
7. The team.
8. Plans with a monthly or yearly switch.
9. Reviews.
10. FAQ.
11. Book on a dark background: "Your first hour starts with a short note."
12. Dark footer.

Colours (define them as CSS variables):
- Ink: #1A2420
- Dark sections: #111915
- Sage: #2F6B5E
- Soft sage: #DDEBE4
- Tangerine (accent): #E3653E
- Tangerine edge: #A9441F
- Soft tangerine: #F8E1D3
- Cream background: #F7F1E8
- Cards: #FFFFFF
- Muted text: #56605A
- Lines: #DCD3C3

Fonts (Google Fonts): Inter Tight for headings, Figtree for text.

Motion and hover:
- Pill buttons press down on click and lift with a shadow on hover.
- Photos cross-fade; numbers count up; the statements change as you scroll.
- Blocks rise in once in view.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Booking form fields: name, email, phone, service, preferred time, a short note. Ask for no medical details. Use these name attributes: name, email, phone, service, preferred_time, message. Add a hidden field subject with the value "New appointment request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a psychotherapy and counselling practice in the style of the free "Fernlow" template (live demo: https://fernlow.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with a pill-shaped menu.
2. Hero: a full-screen photo with a giant wordmark; the page then slides over it like a sheet of paper.
3. The practice.
4. What we help with: five services; the photo changes to match the row you point at.
5. How it works: four steps as a card stack.
6. Who you'll talk to: four therapists.
7. Fees, with a free intro call.
8. Kind words: reviews.
9. Questions: FAQ.
10. Book: "Let's find a time to talk." with the form on an envelope-style card.
11. Footer: contact, opening hours and an emergency line.

Colours (define them as CSS variables):
- Paper: #FFF4E6
- Card: #FFFBF4
- Ink: #2B1830
- Second ink: #5E4963
- Berry (accent): #D2295F
- Fern green: #0F6E62
- Sun: #FFA51F
- Butter: #FFD84D
- Blush: #FFC2D1
- Mint: #CDEDE5
- Peach: #FFDCC4

Fonts (Google Fonts): Bricolage Grotesque for headings and the wordmark, Lexend for text.

Motion and hover:
- The wordmark's letters rise one by one.
- Hand-drawn shapes (sun, fern, leaf, cloud) drift as you scroll, squiggle underlines draw themselves and a free-intro-call badge turns.
- Service titles shift on hover; therapist photos zoom slightly.
- Motion stops with reduced motion, and every block is visible without JavaScript.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Booking form fields: topic (choices shown as tilted paper notes), name, email, phone, preferred time, format (online or in person), a short note. Ask for no medical details. Use these name attributes: service, name, email, phone, time, format, message. Add a hidden field subject with the value "New intro call request from the website" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a calm activewear and clothing shop in the style of the free "Stilla" template (live demo: https://stilla.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Pages: home, an all-products catalogue with filter and sort, and one page per product.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. A Studio / Shop switch above the header.
2. White header with a centred menu and icons.
3. Hero: a full-width photo with the headline "Made for the slow, strong hour".
4. Intro: "Move with us".
5. Collection tabs.
6. A split photo and text section about the fabric.
7. The same split, reversed, on a tinted background.
8. A customer quote.
9. FAQ.
10. A large newsletter block.
11. Footer with a second newsletter sign-up.

Colours (define them as CSS variables):
- Ink: #2f2624
- Second ink: #5b4f4b
- Muted text: #6b615d
- Lines: #e7e3e1
- Background: #ffffff
- Mist: #f4f2f0
- Stone: #d9d5d1
- Buttons: #2f2624

Fonts (Google Fonts): Inter (400, 600) for headings, Cabin (400, 500) for text.

Motion and hover:
- Product cards show a second photo on hover, the photo zooms and a quick button appears.
- Text fades up, cards appear in a short wave and large photos settle as you scroll.
- Reduced motion or no JavaScript shows everything at once.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Newsletter form (the large block and the footer). Use these name attributes: email. Add a hidden field request with the value "Newsletter" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: A size question on each product page (request "Size question", a hidden product field with the product name: name, email, size, height, message). The catalogue has a drawer that filters by category, colour and size and sorts by price or name without reloading.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a pyjama and sleepwear shop in the style of the free "Somna" template (live demo: https://somna.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Pages: home, a shop-all catalogue with filter and sort, and one page per product.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. An announcement bar.
2. Header that sits over the hero and turns solid on scroll.
3. Hero: a full-screen photo with "Pyjamas worth staying in for".
4. Featured products: New in / Best sellers / Cotton & linen tabs over a swipeable product row.
5. Shop the collections: peach collection tiles.
6. Our story: a large serif brand statement.
7. A featured print with its product card.
8. Two photo cards about the makers.
9. FAQ.
10. Newsletter: "Join the Night Club".
11. A row of perks (such as a 30-night trial).
12. Peach footer.

Colours (define them as CSS variables):
- Ink: #1d1d1b
- Muted text: #5f5b55
- Background: #fcfbf8
- Peach: #f3c4b1
- Blush: #f8e3d8
- Lines: #e3ddd4

Fonts (Google Fonts): Instrument Serif for headings, DM Sans for text.

Motion and hover:
- Product cards show a second photo on hover and the photo zooms; collection tiles zoom and their arrow moves.
- Text fades up, cards appear in a short wave and large photos settle as you scroll.
- Reduced motion or no JavaScript shows everything at once.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Newsletter form (the large block and the footer). Use these name attributes: email. Add a hidden field request with the value "Newsletter" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: A size question on each product page (request "Size question", a hidden product field with the product name: name, email, size, message). The catalogue has category pills and a drawer that filters by type, colour and size and sorts by price or name without reloading.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for an LED lighting maker in the style of the free "Lucerna" template (live demo: https://lucerna.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. A loader: a dim light sweeps over the wordmark on black, it goes dark, then lights up fully like a tube warming up. Once per page load.
2. Header: a frosted pill of links, a Products & Applications mega menu with six categories, a search box that lists products as you type, a Trade area link and a Contact button. It hides on the way down. On phones a burger drops a panel from the top.
3. Hero: two slides that wipe from one photo to the next, text rising in and a marker under 01 / 02.
4. Highlights: cards for technical sheets, products, a counting number, dealers and the catalogue.
5. Projects: photos in a strip you drag sideways, with dots that name the products used.
6. About: a house at dusk with five light switches, each lighting its own part of the picture.
7. Values: five cards that stack; one is open at a time.
8. Footer.
9. A contact drawer that slides in from the side.

Colours (define them as CSS variables):
- Background: #f7f6f3
- White: #ffffff
- Ink: #1d2230
- Second ink: #3a4152
- Muted text: #6b7080
- Lines: #e4e2dc
- Light yellow (accent): #ffb800
- Cobalt (buttons): #1f4fe0
- Deep cobalt: #173cb0
- Frosted glass: rgba(29,34,48,.64)

Fonts (Google Fonts): Poppins for everything.

Motion and hover:
- Smooth scrolling with every effect tied to it (the template uses GSAP ScrollTrigger and ScrollSmoother).
- Highlight cards rise in a wave and drift at different speeds; the project strip drags with the pointer.
- Mega menu cards lift with a shadow on hover.
- Reduced motion gives normal scrolling, no loader and no drifting cards.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Contact drawer form fields: name, email, company, project type, message. Use these name attributes: name, email, company, project, message. Add a hidden field subject with the value "New project enquiry" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Trade account request under the person icon (subject "Trade account request": name, email, company).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a fresh raw pet food brand for dogs and cats in the style of the free "Marrow" template (live demo: https://marrow.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with the menu and a menu button.
2. Hero: a cut-out photo of a dog in front of a huge MARROW wordmark on a blue card, with a dog/cat switch that swaps the picture, the recipes and the meal finder.
3. Meal finder: "Find the right meal for your dog", one bar with age, weight, activity and neutered that works out grams a day and the pack size; the visitor can email the plan to themselves.
4. Recipes: "Made fresh, frozen fast.", six dog and three cat recipe cards; the arrow on a card opens the order form with that recipe chosen.
5. Why raw: a bowl that grows as it scrolls in, ingredients that drift past it, an orange band and four short benefit cards.
6. Treats: six treats in a carousel you can drag.
7. Reviews, with a "Leave a review" button.
8. FAQ.
9. Custom recipe call to action: "Want a recipe made for your dog?"
10. Footer with contact details.

Colours (define them as CSS variables):
- Ink (navy): #1c2a6b
- Second ink: #4a5590
- Hero blue: #74adfd
- Accent (orange): #ff6b2c
- Deep orange: #c2410c
- Cream: #fff3e3
- Mist: #eef2fb
- Lines: #d6dcef

Fonts (Google Fonts): Unbounded (500 to 800) for headings and the wordmark, Figtree for text.

Motion and hover:
- On desktop the hero card holds for a moment as you scroll, then shrinks while the next section rises.
- A page wipe on load, wave dividers that bend as you scroll, titles that rise word by word, recipe cards that rise one after another and a drag cursor over the carousel.
- Round arrow buttons fill on hover.
- Reduced motion or no JavaScript shows everything at once.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Write-to-the-kitchen form in a <dialog>: topic (question, custom recipe, wholesale), name, email, message. Use these name attributes: topic, name, email, message. Add a hidden field subject with the value "Message" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.
- Other forms on the site use the same endpoint, key, honeypot and success check: Meal plan (subject "Meal plan request": pet, daily_grams, age_months, weight_kg, activity, neutered, email); order request in a <dialog> (subject "Order request": item, pack, quantity, delivery, name, email, phone, postcode, note); leave a review in a <dialog> (subject "New review": rating 1 to 5, name, review, email).

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a freelance front-end developer or small studio that builds for design agencies in the style of the free "Contour" template (live demo: https://contour.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with the menu.
2. Hero on a blueprint grid: a huge headline, "I build it.", with a subline.
3. Manifesto: two big lines, "Hold the vision." and "Cut what slows", with a 12-column ruler between them.
4. Work: case studies that show how each project was built; on wide screens the section holds while three cases change one after another, with a 01 / 03 counter.
5. Services: rows.
6. Process: "Your design on the surface. My code underneath.", four steps.
7. Field notes: three post rows.
8. Call to action: "Tell me what you're making." with the brief form.
9. Footer with legal links.

Colours (define them as CSS variables):
- Background: #f4f4f0
- Raised background: #ecece6
- Ink: #0e0e0d
- Muted text: #65655f
- Lines: #0e0e0d24
- Strong lines: #0e0e0d52
- Accent (blue): #2f5bff
- Text on accent: #ffffff
- Error: #c02b24

Fonts (Google Fonts): Geist for text and headings, Geist Mono for labels and numbers.

Motion and hover:
- A loader plots the monogram; layout boxes and guides draw themselves; the headline inks in and the subline types itself. Then contour lines appear on a <canvas> and the ground lifts under the pointer.
- Service rows fill on hover; a line draws itself across the four process steps.
- A command palette on Ctrl K (or the Menu button on phones) jumps to any section.
- Smooth scrolling. Reduced motion or no JavaScript shows every section at once.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Brief form fields: name, email, company (studio), budget, message (the brief). Put a short privacy line under the button that links to a privacy page. Use these name attributes: name, email, company, budget, message. Add a hidden field subject with the value "New project brief" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.

Build a website for a pet store (a static site in the style of the Scamper Shopify theme, not a Shopify theme) in the style of the free "Scamper" template (live demo: https://wagtail.shopify.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with a "Shopping for" picker (dogs, cats) and the menu.
2. Image banner: a dog leaping for a ball on an orange background.
3. A scrolling text strip.
4. Collection tiles: "Who are we shopping for today?"
5. Bestsellers this week: a moving product strip with tabs for several collections and a pause button.
6. Image with text.
7. One featured product.
8. Build a starter set: three products added with one button; the total updates as items are unticked.
9. Testimonials: "Tails are wagging. Here's proof."
10. Newsletter: "10% off your first order."
11. Footer.

Colours (define them as CSS variables):
- Background (cream): #FFF5E6
- Ink: #17140F
- Muted text: #4A4339
- Peach surface: #FFE3CC
- Orange block: #FC8228
- Teal block: #0C5754
- Yellow (buttons on teal): #FFD457
- Off-white: #FFFBF4
- Rust accent: #B4470A

Fonts (Google Fonts): Bricolage Grotesque (extra bold) for headings, Figtree for text.

Motion and hover:
- Colour-block product cards show a second image on hover, with a quick add button.
- Short animations: sections rise and pop in, the banner image moves with a light parallax, the strip moves until paused.
- Scroll effects in plain CSS that stop for visitors who ask for reduced motion.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Contact form on its own page: name, email, phone, message. Product buttons link to my shop or open this form. Use these name attributes: name, email, phone, message.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.