Corner Table

1. Quick start

1. Extract corner-table.zip and open corner-table/index.html in your browser.
2. Replace the sample restaurant name, menu, hours, story and contact details.
3. Set a real email recipient in assets/js/main.js and update the matching addresses in HTML.
4. Review imagery, guest policies and dietary wording. Test your email flow and mobile layout before launch.

Send Inquiry prepares a reviewable draft. Guests must send it from their email app and wait for confirmation. No message is automatically sent and no table is booked by this page.

2. Overview & files

Corner Table is a warm, approachable Bootstrap 5 casual-dining template. It includes a full-width hero, three featured dishes, an always-visible categorized menu, restaurant story, visit details, reservation inquiry form, FAQs and guest policy dialogs.

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

3. Business details & sample content

Edit repeated details in index.html, including the title, metadata, header, hero, story, visit section, footer, FAQs and policies.

• Restaurant: Corner Table.
• General area: Sacramento, California. Address: “Exact location announced soon.”
• Phone: 999-999-9999, a nonfunctional placeholder. Add a telephone link only after replacing it with an approved real number.
• Email: hello@cornertable.example, a reserved example address that cannot receive mail.
• Sample hours: Monday–Sunday, 11 AM–10 PM, Pacific time.

The story, menu, prices, hours and photographs are illustrative. Replace them with approved business content before launch. Remove or revise the footer demonstration notice once the content represents the actual business. Do not invent reviews, awards or sourcing credentials.

4. Editable logo, colors & typography

The header and footer logos are plain text inside .brand links. Rename “Corner Table” and update their accessible home labels. The decorative period is .brand-dot; remove its span if you prefer. Change the C in assets/icons/corner.svg separately.

<a class="brand" href="#home" aria-label="Corner Table home">
  Corner Table<span class="brand-dot">.</span>
</a>

Core colors are defined at the top of assets/css/style.css:

--ivory: #faf7f0;
--ink: #14382e;
--forest: #214c3e;
--rust: #af4b2e;
--muted: #58665d;

Headings and body copy use the Georgia system serif stack; small labels and form controls use Arial. No font files are bundled. Tune h1, h2, .section and .container for sizing and spacing. Preserve text contrast and keyboard focus indicators.

5. Hero, photographs & story

The hero’s headline and buttons are editable HTML. Its pale CSS gradient keeps dark text legible. Edit .hero-image object positioning and .hero-shade for a replacement image. On phones, a vertical gradient keeps the heading above the food.

Each photograph is 1536 × 1024. Replace with authorized images, retain filenames or update all paths, and update alt text and image dimensions. Only the hero has text over the image. Other captions stay outside photographs.

Edit the neighborhood story in #story. “Bring your people” selects Group gathering in the inquiry form using data-inquiry, while preserving other entries. Keep this value aligned with the form option.

6. Featured dishes & menu controls

Three .feature-card elements contain the headline dishes, descriptions and prices. The .full-menu section stays visible and spans the same width as the featured-image grid. Its heading is ordinary text, with no expand or collapse control. Its category buttons use data-filter and match .menu-group elements with data-category.

Categories are main (House favorites), small (Small plates & kids), and sweet (Something sweet). The first is visible initially. Update initial hidden, active and aria-pressed states together when changing defaults. Buttons work with Tab, Enter and Space. JavaScript announces the actual displayed item count.

Update featured dishes and their repeated menu entries together. Prices are sample USD amounts. Review ingredients, prices and dietary guidance before publishing; no allergen-free certification or downloadable menu is supplied.

7. Visit details & general-area link

Hours, phone, email and location sit in #visit. Replace them consistently with your approved business information. Keep fictional addresses for demonstration versions.

The Google Maps link searches only Sacramento CA and is labeled “View general area.” It does not target a street address, business listing or property. It opens in a new tab with noopener noreferrer. No embedded map or iframe is used. Change the general city query and visible label together.

8. Reservation inquiry & validation

Form #reservationForm requires name, email, preferred date, preferred time and guest count. Phone and message are optional. Occasion choices are Dining reservation and Group gathering. Guest count must be an integer between 1 and 20; larger parties can explain their total in the message.

TIME_ZONE in assets/js/main.js defaults to America/Los_Angeles. Past dates are rejected using that timezone. Name must contain more than whitespace. Browser validation checks required fields, email and guest limits.

Time options range from 11 AM to 8:30 PM, with hourly lunch and half-hour evening preferences. The page does not check live availability or elapsed same-day times. Restaurant confirmation is always required. Update form labels, options, hours and documentation together if adding stricter rules.

Editing any field clears the previous draft. Reset clears both form and draft. Guest entries are not persisted by the page.

9. Email recipient & Send Inquiry

Set RECIPIENT in assets/js/main.js to a monitored email address. Update all visible email links and policies in index.html. The example address cannot receive inquiries.

Send Inquiry validates the form and reveals a draft. “Open email app” opens a mailto link; the guest must send it from their app. “Copy draft” requests clipboard access only when clicked. If unavailable, a status message offers manual copying. Long drafts may exceed email-app URL limits, so copying is an alternative.

No backend, automatic delivery, table availability, order system, payment processing or booking confirmation is included. Connecting a real booking provider requires replacing the relevant links and revising guest-facing wording. For automatic delivery, implement a secure backend with appropriate validation and abuse controls.

10. Navigation, FAQs & policies

#siteHeader stays pinned at all widths. JavaScript updates --header-height for anchor offsets. Mobile navigation collapses below 992 px; expanded menus scroll on short screens. Keep Bootstrap collapse targets and unique IDs aligned.

Seven FAQs cover reservation confirmation, dietary needs, group gatherings, children’s menu options, hours, special requests and changes to sent inquiries. Edit them inside #questions; keep answers consistent with the menu, opening hours and actual reservation process. FAQs use Bootstrap’s accordion. The four-column footer contains the editable text logo, restaurant introduction, menu and visit links, sample hours, general-area link and contact details. Edit these alongside their repeated values in the visit section. Its Group gatherings link uses the same occasion preselection as the story CTA. Footer buttons labeled Privacy and Terms of Use open styled Bootstrap dialogs, with focus trapping, Escape support, scrolling and focus return. Keep dialog IDs and accessible title references paired.

Edit both policies in index.html to reflect the business’s actual services and data practices. The included wording is a starting point requiring review before launch. It is not a complete legal compliance solution. Keep buyer instructions in this guide rather than the guest-facing dialogs.

11. Responsive layout, versions & dependencies

Check desktop, tablet and small phones after changes, including 320 px width. Featured dishes stack on phones; the story and reservation columns stack below 992 px. Keep essential content visible without animation. Reduced-motion settings disable transitions and smooth scrolling.

Custom CSS uses ?v=1.4 and JavaScript uses ?v=1.0. Update each affected token whenever editing an asset and replace the HTML and matching assets together. Query strings do not guarantee that cached HTML or every hosting cache refreshes.

Bootstrap 5.3.8 and bundled Popper are local MIT-licensed dependencies; see LICENSES.txt. Georgia and Arial are system font stacks. No analytics or tracking cookies are included by the page.

12. Launch checklist

• Replace the brand, fictional phone and address, example email, menu, story and hours.
• Set a real recipient and send a test from an email app; confirm receipt.
• Approve images, alt text, prices and dietary wording.
• Review both policies against actual business practices.
• Test navigation, menu categories, FAQs, dialogs and focus behavior.
• Test invalid inputs, date boundaries, draft preparation, copying, edit invalidation and Reset.
• Check responsive layouts, links and image crops.
• Update asset tokens and include all required local files.

13. Troubleshooting