Gather Catering

1. Quick start

1. Extract gather-catering.zip and open gather-catering/index.html.
2. Replace the sample business information, pricing ranges, services, menu ideas, office hours and event area.
3. Set a real monitored email address in assets/js/main.js and update matching HTML contact links and policies.
4. Review the imagery and guest policies, then test the complete inquiry flow on desktop and mobile.

“Send Inquiry” prepares a reviewable email draft. Visitors must send it from their email application. The page does not automatically send messages, generate a binding quote, check availability or confirm bookings.

2. Overview & package files

Gather Catering is a Bootstrap 5 catering landing page with forest-green, ivory and gold styling. It includes a full-width reception hero, sample pricing, service preselection, an introduction, categorized sample menu, event gallery, custom-quote inquiry form, seven FAQs and detailed footer.

No build process, CDN, API key or remote font dependency is required.

3. Business information & placeholders

Edit repeated details in index.html: title, metadata, hero, about copy, service area, contact section, footer, FAQs and policies.

• Brand: Gather Catering.
• Example email: hello@gathercatering.example, a reserved example address that cannot receive inquiries.
• Phone: 999-999-9999, deliberately nonfunctional. Add a telephone link only after replacing it with your real approved number.
• Sample event area: Chicagoland and surrounding areas.
• Address placeholder: “Exact location announced soon.” No real street address is supplied.
• Sample planning-office hours: Monday–Friday, 9 AM–5 PM, Central time. Event service times are arranged separately.

Replace all demonstration content with approved business information before launch. Photographs, prices, menus and service descriptions are illustrative. There are no customer testimonials, ratings, operating-history claims or verified credentials included. Update the footer demonstration notice when the site is ready to represent a real business.

4. Text logo, colors & fonts

The logo is editable HTML text in both header and footer. Change “Gather” and the “CATERING” span inside .brand, plus the accessible home label. No logo image editor is needed. Update the G in assets/icons/gather.svg separately.

<a class="brand" href="#home" aria-label="Gather Catering home">
  Gather<span>CATERING</span>
</a>

Change the root tokens in assets/css/style.css:

--forest: #123c30;
--deep: #0d2f26;
--ivory: #f7f4ec;
--gold: #d3ad68;
--ink: #183d32;
--muted: #62675f;

Headings and logo use Georgia; body text uses Arial. These are system font stacks, so exact appearance varies by device. SVG line-icon strokes use #b28a45; edit the individual SVGs if changing the icon color. Maintain readable contrast and visible focus styles.

5. Hero, photography & gallery

Edit the hero’s HTML heading, supporting copy and actions in #home. The photo spans the page; a dark CSS gradient keeps the text readable. Adjust .hero-image object positioning when replacing it.

All photographs are 1536 × 1024. Replace with authorized images, updating file paths, dimensions and alt text together. Captions stay outside every photograph except the hero. Check cover crops at every breakpoint; pricing cards deliberately reuse suitable photography.

6. Pricing guide & proposals

Edit all six .price-card articles in #pricing. Keep prices, units and descriptions consistent:

These values are illustrative, not a calculator or binding quote. The page does not calculate totals, taxes or charges. Replace the amounts and explanation with your real proposal structure. Clarify inclusions, delivery, rentals and any applicable charges before publishing. Do not imply unlisted charges are included.

7. Services & event preselection

Seven links in #services cover weddings, corporate events, private parties, drop-off catering, staffing, rentals and event planning. Update the names, descriptions and SVG references in their .service-card elements.

Each service links to #contact and uses data-inquiry to select a matching option in #inquiry. Keep those strings identical. Selecting a service preserves other inputs and clears a previous draft. General quote links simply scroll to the form.

Update the delivery/logistics strip and FAQs to match your actual service scope. Availability and arrangements require direct confirmation.

8. Sample menu categories

The menu is always visible in #menu. Category buttons use data-filter values reception, dinner and sweet. Matching .menu-group elements use data-category. The first category is visible initially.

Edit the .menu-item names and descriptions. Buttons update the selected aria-pressed state and a live status announcement, and work with keyboard activation. Update initial active/hidden states together if changing the default.

Sample dishes are priced through the event proposal, so no unsupported individual prices are shown. Review ingredients and dietary guidance; this template does not promise allergen-free preparation or include a downloadable menu.

9. Inquiry fields & validation

Form #inquiryForm requires name, email, preferred date, whole-number guest count and general event area. Phone, preferred start time and message are optional. Event/service and estimated total budget use select lists.

Guest estimates range from 1 to 1,000 as a form limit, not a capacity claim. Change min, max and helper wording together if needed. Name and event area reject whitespace-only entries. Standard browser validation handles email and required fields.

TIME_ZONE in assets/js/main.js defaults to America/Chicago. Past dates are rejected using the business’s current date. The form does not check elapsed same-day times, service hours or live availability. Date and time entries are preferences. Update Central-time labels if changing the timezone.

Every input change hides and clears the previous draft. Reset clears entries and draft. No guest entries are persisted by the page.

10. Email drafts, recipient & delivery

Set RECIPIENT in assets/js/main.js to your real monitored email address, then update visible contacts and policies in HTML.

Send Inquiry validates entries and displays a draft with event type, date, time, guests, budget, area and message. “Open email app” uses mailto; guests must send it themselves. “Copy draft” requests clipboard access only when clicked and offers manual-copy guidance when unavailable.

A configured email app is needed for mailto. Long drafts can exceed some apps’ URL limits; copying is the alternative. Test the real recipient before launch. No backend, automatic delivery, quote calculation, availability check, payment or booking system is supplied.

If adding a submission service, use secure server-side validation and abuse protection and update the form, FAQs and policies to match its real behavior.

11. Navigation, contact links & FAQs

The header stays pinned. JavaScript updates --header-height for anchor offsets. Mobile navigation collapses below 992 px and scrolls on short screens. Keep unique IDs and Bootstrap collapse attributes aligned.

The Google Maps link points only to the general Chicago IL area, opens in a new tab with noopener noreferrer, and is labeled “View general area.” No iframe, exact-property pin or map API is included.

Seven FAQ accordions in #questions cover proposals, pricing, dietary needs, service options, logistics, booking status and incomplete details. Keep the answers aligned with your actual business terms. Footer links provide navigation and repeat the contact details.

12. Privacy & Terms of Use

The footer’s Privacy and Terms of Use controls open local Bootstrap dialogs. They support Escape, focus trapping, focus return, and scrolling on small screens. Keep modal IDs and title references consistent.

Edit both guest-facing policies in index.html to describe your actual services, recipient and data practices. The included text is a starting point requiring review before launch, not a complete legal compliance solution. Keep buyer instructions in this guide rather than the dialogs.

The page includes no analytics or tracking cookies and performs no server submission. Policies must change if you add those services.

13. Responsive layout, versions & dependencies

The six-column pricing grid becomes three columns on smaller desktop/tablet widths and two on phones. Services reflow to four and then two columns. Story, menu and inquiry layouts stack on tablets; the gallery stacks on phones. Essential content never depends on animation.

Check 320 px phones, larger phones, tablets and desktop after content changes. Preserve heading clearance, focus styles, image proportions and menu controls. Reduced-motion settings disable smooth scrolling and transitions.

Custom CSS uses ?v=1.0 and JS uses ?v=1.1. Change each affected token after editing its asset, and replace the HTML and matching assets together. Query strings do not guarantee cached HTML or every hosting cache refreshes.

Bootstrap 5.3.8 and bundled Popper use the MIT license; notices are in LICENSES.txt. No font files are redistributed.

14. Launch checklist

• Replace the text logo, email, 999-999-9999, fictional address, sample area and office hours.
• Approve pricing ranges, units, scope, menu descriptions and dietary guidance.
• Replace illustrative photographs as needed and review alt text.
• Set recipient and timezone; update matching contact and policy text.
• Test service preselection, menu categories, FAQs and both policy dialogs.
• Test invalid fields, past dates, draft review, copy, email handoff, edit invalidation and Reset.
• Send a real test inquiry from an email app and verify receipt.
• Check desktop, tablet and small-phone layouts and update asset version tokens.

15. Troubleshooting