Skip to content

Instantly share code, notes, and snippets.

@jnewman12

jnewman12/bolt.md

Last active January 20, 2026 07:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jnewman12/ebcb16ee1f91c13c3f33acbe15a7ceaa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jnewman12/ebcb16ee1f91c13c3f33acbe15a7ceaa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bolt.md

You will receive multiple screenshots of the same single-page landing page, ordered from top to bottom. They are NOT separate pages. Use the overlap to align sections into one continuous page.

  • Build a static landing page using only HTML + CSS + minimal vanilla JS (no TypeScript, no React, no frameworks)
  • Output files: index.html, styles.css, script.js (only if needed)

Visual fidelity

  • Match screenshots closely: layout, spacing, typography, colors, section structure.
  • Use semantic sections: header/nav, hero, features, testimonials, pricing (if present), FAQ, footer.
  • Fully responsive for mobile, tablet (iPad), desktop.

Icons (important)

  • Use Lucide icons via CDN only (vanilla JS). Include the Lucide script and render icons using lucide.createIcons() (or equivalent).
  • Sticky navbar + responsive behavior (very important)
  • The navbar must be sticky/fixed and usable on mobile with a hamburger menu.

Desktop / large screens

  • Navbar shows: Brand/title (“OC EMERGENCY PLUMBING”), nav links, and a prominent red CTA button (e.g., “CALL 24/7”).
  • Sticky behavior: stays visible while scrolling.
  • On scroll: add subtle background + shadow/blur so it’s readable over content.
  • Ensure sticky navbar doesn’t overlap page content (add appropriate top padding/margin to body/hero).

Mobile layout requirement (single row)

  • On mobile viewports, the navbar MUST be one row with three items
  • Red CTA button on the left
  • "OC EMERGENCY PLUMBING" text in the middle (shrink font-size as needed to fit)
  • Hamburger icon on the right
  • No second row. No stacking.
  • The middle title can truncate slightly or scale down, but must remain readable.

Mobile hamburger menu behavior

  • Hamburger toggles a dropdown/slide-down menu that contains nav links.
  • The opened menu must be styled cleanly: readable text, spacing, background, and close behavior.
  • Clicking a nav link closes the menu and smoothly scrolls to its section.
  • Prevent scroll-jank: body should not shift weirdly when the menu opens.

Section-specific responsive requirements (must implement)

  1. "TRUSTED BY HOMEOWNERS ACROSS ORANGE COUNTY" section:
  • The badges/logos (e.g., BBB, HomeAdvisor, etc.) must be in a horizontal row that is scrollable on mobile AND tablet (iPad).
  • They should NOT stack on smaller viewports.
  1. "DON’T LET A LEAK BECOME A FLOOD" section:
  • On mobile, the two buttons should be side-by-side (not stacked) if space allows.
  • If extremely narrow, allow wrapping gracefully, but prioritize side-by-side.
  1. "SERVING ALL OF ORANGE COUNTY" cities list:
  • On mobile, display cities as two columns (not one long single column).

Interactions

  • Smooth scrolling for nav links (CSS scroll-behavior or small JS).
  • Buttons can be placeholders (no backend), but must have proper hover/active styles.

Implementation notes

  • Use sensible breakpoints for mobile responsiveness
  • Keep code clean and simple. Prefer CSS solutions; use minimal JS only for hamburger toggle + optional scroll shadow class.
  • Use placeholder images/icons where needed; keep styling consistent with the screenshots.

Comments are disabled for this gist.