This new Pizza Restaurant template has everything you need for a great restaurant or cafe website. It's built in Flex, which means you've got outstanding flexibility and design possibilities.

This mouthwatering template features a simple menu, basic restaurant info, and plenty of delicious, high-quality photographs. The About page includes the chef’s image, making the business authentic and personable. It's also got a great-looking and unusual sidebar.

As always, you can save any part of this template as a Section and then use it over again on other websites. If you want to recreate the animated Choose Your Favorite Topping section on your own, follow the steps below. (See videos below step-by-step instructions.)

How to Build this Awesome Animated Pizza Slice Section

1. Add a flex section.
2. Set the height to 100vh, the layout to full bleed, and the number of columns to 1. 
3. Set the top margin to 120px.

In the Grid

1. Add a text widget, add your text, and set the font (in this case, it's Big Shoulders). Set the style to H1, and align it top and center.
2. Add an icon widget, position it in the grid, and add a zigzag shape. 
3. Set the width and height to 140px, the top margin to 50px, and the color to #f7e2d6. Align the icon to the left.
4. Duplicate the icon widget and move it to the right side of the grid. Set the width and height to 55px and the top margin to 370px. Replace the zigzag with a triangle and set the color to #f86719. Set the right margin to 50px.
5. Duplicate the icon widget again and replace the triangle with a circle. Set the width and height to 65px. Set the left margin to 120px and the top margin to 750px. Set the color to #154f78. 
6. Add a container, align it center. Set the width to 640px and the height to 615px. Set the top margin to 170px.

In the Container

1. Add an image widget, upload an image, and turn on Keep proportion. Resize the image so it is 242px wide and position it at the top of the container. Make sure the images sizes are set in px, not %, so the slices scale responsively.
2. Duplicate the image widget, move it to the right of the container and replace the image. 
3. Add each pizza slice as a separate image widget. Enable the keep proportion button on each one.
4. Place the elements in any manner that you like to create a perfect-looking pizza.

Note: We are still working on the ability to rotate images in Flex. Until that's ready, simply rotate the images in the right positions before uploading them to the editor.

Below the Container



1. Add a Horizontal Flexbox
2. Set the width to 35% and the height to 8%. Align center. 
3. Add a button and add the text. Duplicate the button and add text.
4. Add spacing to the left and right sides of the buttons so they are nicely spaced.

Reproduce the animation

Set the animation for each image (in this case, for each pizza slice) separately, as follows:

1. Top left: Click Animation, select the Scroll trigger and the Zoom in animation. Set viewport top to 60%, viewport bottom to 38%, intensity to 5.
2. Top middle: Viewport top to 48%, viewport bottom to 50%, intensity to 5.
3. Top right: Viewport top to 39%, viewport bottom to 50%, intensity to 5.
4. Bottom right: Viewport top to 51%, viewport bottom to 41%, intensity to 5.
5. Bottom middle: Viewport top to 37%, viewport bottom to 51%, intensity to 5.
6. Bottom left: Viewport top to 35%, viewport bottom to 63%, intensity to 5.

Make sure everything looks just right on desktop and tablet, and then move to mobile.

Adjusting for Mobile

1. Click the title and adjust the alignment so it takes up one line. 
2. Click the grid and set the top margin to 70px.
3. In the container, click on each image widget and adjust to 150px. Adjust their positioning so they look just right. 
4. Select the container and adjust the width to 260px and the height to 250px. Set the top margin to 70px.
5. Readjust the pizza slices so they fit. Click Preview to make sure everything looks just right. 
6. Set the zigzag icon width and height to 70px. 
7. Set the triangle icon width and height to 40px and the top margin to 90px. Move it to the top right corner. 
8. Move the circle icon, set the top margin to 280px and set the width and height to 40px.
9. Move to the flexbox below the pizza. Change the alignment to stretch and the layout to horizontal so that the buttons are side by side. 
10. Adjust the spacing between the buttons and move them up so that they are immediately below the pizza.