Hero V08

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A full-screen restaurant hero with a dining-room photo under a layered dark overlay, a centred serif wordmark and navigation split around it. The headline, a short introduction and a gold Book a table button sit bottom left, and a translucent card lists opening hours, the address and a walk-in note. On phones the photo stays at the top, the overlay deepens and the hours card stacks under the copy.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 298 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Full-bleed photo with a two-direction gradient overlay for readable text
• Opening hours marked up as a description list
• Centred wordmark header with a phone number on wide screens
• Slow zoom-in on load that is skipped for reduced motion
• Accessible mobile menu with Esc to close