← Back to Template

FIRESTONE PIZZA / TEMPLATE GUIDE

A good night starts
with a little fire.

Your guide to customizing the menu, atmosphere and pickup experience.

Quick start

Unzip firestone-pizza.zip, keep the folder structure intact, and open index.html in a modern browser. No build step is needed. For browser clipboard support, use HTTPS or a local development server. The form also provides an email-app handoff and selectable-text fallback.

What is included

A dark Bootstrap 5 landing page with a pinned responsive header, filterable HTML menu, featured pizza and special, dining imagery, visit details, pickup inquiry draft, FAQs, and Privacy and Terms of Use dialogs. Bootstrap, photographs and icons are bundled locally.

File structure

firestone-pizza/
  index.html
  README.html
  LICENSES.txt
  assets/css/style.css
  assets/js/main.js
  assets/vendor/bootstrap.min.css
  assets/vendor/bootstrap.bundle.min.js
  assets/images/pizza.webp
  assets/images/dining.webp
  assets/icons/flame.svg

Restaurant content

Edit the restaurant name, introduction, story, sample menu, prices, special, FAQs and footer in index.html. Menu panels use IDs menu-pizza, menu-sides and menu-sweet. Keep their matching data-category and aria-controls values consistent. All supplied business information is demonstration content: 123 Example Street, Sacramento, CA 95814; (916) 555-0148; hello@firestone.example. Replace every occurrence with real details before launch. Photographs illustrate a concept and do not verify actual dishes or premises. Replace them with appropriate restaurant imagery and update captions and alt text. No customer testimonials or verified business claims are included.

Hours, location & links

Update the Pizza hours definition list beside Find Firestone, phone tel: links, email mailto: links, and address together. The demonstration schedule is Monday–Thursday 4–9 pm, Friday–Saturday noon–10 pm, Sunday noon–8 pm, Pacific time. Update the URL-encoded address in the external directions link. There is no map embed or iframe. An example address may not resolve to a real destination; configure a real location before launch. If adding a supplied external ordering service, label the link clearly and update the policies; the delivered page has no ordering or payment service.

Menu & dietary notes

Edit dish names, descriptions and two-decimal prices directly in the menu panels. The sample pizzas are 12-inch pies. Keep special pricing and menu wording consistent. Update vegetarian labels to reflect the actual ingredients and retain a practical note to discuss allergies directly. Category controls are buttons with aria-pressed states; use Tab and Enter or Space to operate them. Do not advertise a downloadable menu unless you add a matching file.

Pickup inquiries

Set settings.recipient in assets/js/main.js and all displayed email and mailto: links in index.html. The browser validates required name, email, preferred date, preferred time and message fields. Phone is optional. The form prepares a reviewable email draft only. Nothing is sent or stored by the page; opening an email application is not confirmation. The visitor must send the email, and the restaurant must confirm availability and pickup. There is no backend, cart, payment, delivery tracking or live availability. Drafts are invalidated after edits. Reset clears the form and draft. Copy draft uses the browser clipboard when permitted and otherwise selects the text for manual copying. Test with a real destination before launch.

Timezone & preferences

The settings.timezone value in main.js is America/Los_Angeles. Date and time validation rejects past preferred dates and times using that zone. Change the IANA timezone and all visible Pacific labels together. The form does not enforce restaurant opening hours; the requested time is a preference requiring confirmation. There is no party-size field or rule because this is a pickup inquiry. The special link uses data-inquiry to select Pizza-night pair without clearing other inputs; keep its value aligned with the form option.

Colors, type & images

Edit the CSS variables at the top of style.css: charcoal background #141412, cream #f6efdf and ember #ff925f. Typography uses system Arial and Georgia; there are no external font requests. Replace local WebP files with optimized photographs and keep meaningful alt text. Hero imagery uses object-fit:cover and responsive object-position values; check the crop on phones. The local flame SVG can be edited or replaced with your own mark.

Navigation, dialogs & accessibility

The header is fixed at the top, with reserved body space and anchor offsets controlled by --header. The desktop navigation collapses below 992px; the expanded menu can scroll on short screens. Preserve the resize handler and collapse-close behavior when customizing. Privacy and Terms of Use use Bootstrap modal markup and data attributes. Keep headings, close buttons, focus trapping, Escape behavior and focus return intact. Dialogs and backdrops sit above the header. Preserve the skip link, labels, semantic headings and visible focus outlines. Reduced-motion preferences disable animated scrolling and transitions.

Responsive editing & cache refresh

The main breakpoints are 991px and 575px. Check long names, contact details, menu prices and button labels after editing. index.html references style.css?v=firestone-1.0.1 and main.js?v=firestone-1.0.0. Change the affected version token whenever you change CSS or JavaScript. Replace index.html and the matching asset files together. Version queries refresh asset URLs but cannot guarantee refresh of cached HTML or every hosting cache.

Privacy & Terms of Use

Edit the #privacy and #terms dialogs in index.html to reflect the real restaurant’s contacts, data handling and any added services. The included guest-facing wording is a starting point requiring review before launch. If adding analytics, storage, a submission backend or third-party booking, update the policies to match. Keep buyer instructions in this README, not in the guest-facing dialogs.

Dependencies & notices

Bootstrap 5.3.3 CSS and bundled JavaScript are included locally under the MIT License; its full notice is in LICENSES.txt. Bootstrap’s bundle includes Popper, with notices retained in the distribution. System fonts need no downloadable font files. The flame icon and visual assets are supplied with this package; no third-party stock attribution is required by this package. There are no remote images, external font dependencies or tracking scripts.

Launch checklist

  • Replace demonstration name, address, phone, email, hours, menu and photos.
  • Set and test the inquiry recipient, timezone and external directions destination.
  • Review Privacy and Terms of Use against actual practices.
  • Check menu categories, FAQs, footer dialogs, keyboard navigation and phone layout.
  • Test invalid entries, review a draft, copy it, edit it and reset the form.
  • Confirm all assets load and update CSS/JS version tokens after changes.

Troubleshooting

Missing styling or images usually means an asset folder was moved or filenames changed. Preserve relative paths and filename case. If the mobile menu or dialogs fail, confirm the bundled Bootstrap JavaScript loads before main.js. If an email application does not open, configure a default email app or copy the draft manually. Clipboard access may require HTTPS and user permission. Old styling may require a version-token update plus refreshing cached HTML. For content hidden under the header, check the --header offset and the navbar height together.