Restaurant Website and Gallery Template

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and […]

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and an integrated Google map that shows the location.

The great food photography is by avlxyz and you can find his Flickr photostream here.
The license for these pictures is the Attribution-NonCommercial-ShareAlike 2.0 Generic License.

The main homepage photo of Venice at night is by krossbow, be sure to check out his Flickr photostream.

When coming to the homepage, the background image will fade in and we will see the first welcome content block:

When the user clicks on “Our Menu”, a little thumbnails gallery will appear in the content area:

Choosing a dish from the thumbnails gallery, will open the fullscreen gallery, that shows the dish image with a title and a description and the same image as background. Using the navigation arrows on screen, the left/right keyboard arrows, or the scrolling wheel of the mouse, the user can slide the images. The title and description will animate back behind the foreground image during the sliding.

When clicking on the foreground image, it will disappear and the background will become more bright. Now, the user can view the fullscreen image and navigate through them the same way. Clicking on the background will bring us back the foreground gallery element.

When we click on the cross on the top right corner, we will leave the image gallery.

The menu point “Visit us” will hide the content box and show a google map as the background of the whole page:

And that’s it! We really hope you liked this template idea and find it useful!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 170

Comments are closed.
  1. Simply beautifull. A question: what I have to do if I want to add a vertical scroll in the browser window, when I use small screens?

  2. i’ve used this template for my site
    But as others i have few issues:
    1) i cannot implement vertical scroll to the “bf_content_text” div class.
    2) i cannot create another gallery.

    Can anyone help please?
    thanks in advance

  3. @Maxim.k : I have the same problem with the vertical scroll with menu items and descriptions…. Maybe there are too many “fixed” attributes of position….

  4. Anyone solved problems with IE8?
    Having problems with background fade in -effect, it doesn’t work as it should. Background stays ‘dark’ all the time

  5. Hi! I used the template to develop this website

    as you can see, I significantly changed the graphics of the nav menu, putting it in horizontal.
    One question: how can I make the bg images change at the click on the menu voices?


  6. Hi,

    could you explain me what the tag overflow: scroll; doesn’t work? I try to improve you fantastic template, but I didn’t do

    Best regards