Pizza Restaurant
How to Create a Pizza Restaurant Web Page
This example shows how to build a responsive restaurant website with W3.CSS.
The page uses Flexbox together with W3.CSS display, color, image, and form classes.
Create a Skeleton
Start with the page structure, navigation, font, and large background image.
CRUST PIZZA
Skeleton
<html lang="en">
<meta charset="UTF-8">
<title>Pizza</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family:"Amatic SC",sans-serif}
</style>
<body>
<!-- Navbar -->
<div class="w3-flex w3-top w3-xlarge w3-black w3-opacity-min">
<a href="#home" class="w3-button">HOME</a>
<a href="#menu" class="w3-button">MENU</a>
<a href="#about" class="w3-button">ABOUT</a>
<a href="#contact" class="w3-button">CONTACT</a>
</div>
<!-- Header -->
<header id="home" style="height:800px;background-image:url('img_pizza.jpg');background-size:cover;background-position:center"
class="w3-display-container w3-grayscale-min">
<div class="w3-display-bottomleft">
<span class="w3-tag w3-xlarge">Open from 10am to 12pm</span>
</div>
<div class="w3-display-middle w3-center">
<span class="w3-text-white" style="font-size:100px">
thin<br>CRUST PIZZA
</span>
<p><a href="#menu" class="w3-button w3-xxlarge w3-black">
Let me see the menu</a></p>
</div>
</header>
</body>
</html>
Try it Yourself »
Add a Menu
Use Flexbox to create the menu navigation.
THE MENU
Margherita $12.50
Fresh tomatoes, fresh mozzarella, fresh basil
Formaggio $15.50
Four cheeses (mozzarella, parmesan, pecorino, jarlsberg)
Meat Town Hot! $20.00
Fresh tomatoes, mozzarella, hot pepperoni, hot sausage, beef, chicken
PASTA
Lasagna Popular $13.50
Special sauce, mozzarella, parmesan, ground beef
Ravioli $14.50
Ravioli filled with cheese
Spaghetti Classica $11.00
Fresh tomatoes, onions, ground beef
STARTERS
Today's Soup Seasonal $5.50
Ask the waiter
Bruschetta $8.50
Bread with pesto, tomatoes, onion, garlic
Garlic Bread $9.50
Grilled ciabatta, garlic butter, onions
Menu
<section id="menu" class="w3-container w3-black w3-xxlarge w3-padding-64">
<h1 class="w3-center w3-jumbo w3-padding-32">THE MENU</h1>
<nav class="w3-flex w3-center w3-border w3-border-dark-grey">
<a href="#pizza" class="w3-button w3-red" style="flex:1">Pizza</a>
<a href="#pasta" class="w3-button w3-hover-red" style="flex:1">Pasta</a>
<a href="#starters" class="w3-button w3-hover-red" style="flex:1">Starters</a>
</nav>
<div id="pizza" class="w3-container w3-white w3-padding-32">
</div>
</section>
Try it Yourself »
Full Menu »
The flex:1 style gives all three menu buttons the same width.
Add About
Add information about the restaurant and its opening hours.
About
The Pizza Restaurant was founded in blabla by Mr. Italiano in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Chef? Mr. Italiano himself
We are proud of our interiors.
Opening Hours
Mon & Tue CLOSED
Wednesday 10:00 - 24:00
Thursday 10:00 - 24:00
Friday 10:00 - 12:00
Saturday 10:00 - 23:00
Sunday Closed
About
<section id="about" class="w3-container w3-red w3-grayscale w3-xlarge w3-padding-64">
<h1 class="w3-center w3-jumbo">About</h1>
<p>The Pizza Restaurant was founded in blabla...</p>
<p><b>The Chef?</b> Mr. Italiano himself
<img src="/w3images/chef.jpg" style="width:150px"
class="w3-circle w3-right" alt="Chef"></p>
<p>We are proud of our interiors.</p>
<img src="img_restaurant.jpg"
style="width:100%" alt="Restaurant">
<h1><b>Opening Hours</b></h1>
<div class="w3-flex" style="gap:32px">
<div style="flex:1">
<p>Mon & Tue CLOSED</p>
<p>Wednesday 10:00 - 24:00</p>
<p>Thursday 10:00 - 24:00</p>
</div>
<div style="flex:1">
<p>Friday 10:00 - 12:00</p>
<p>Saturday 10:00 - 23:00</p>
<p>Sunday Closed</p>
</div>
</div>
</section>
Try it Yourself »
Add Contact
Add a map, contact information, and a reservation form.
Contact
Find us at some [address] or call us at 05050515-122330.
We offer full-service catering for any event, large or small. We understand your needs and will cater the food to satisfy both look and taste.
Reserve a table, ask for today's special, or just send us a message:
Contact
<img id="contact" src="map.jpg" class="w3-greyscale" alt="Map" style="width:100%">
<section class="w3-container w3-blue-grey w3-grayscale-min w3-padding-32">
<h1 class="w3-center w3-jumbo">Contact</h1>
<p>Find us at some [address] or call us at 05050515-122330.</p>
<form action="/action_page.php" target="_blank">
...
</form>
</section>
Try it Yourself »
Full Contact »
The Complete Web Page
The completed page uses different W3.CSS tools for different jobs:
| Part | Layout |
|---|---|
| Navigation | Flexbox |
| Header | Display classes |
| Menu Navigation | Flexbox |
| Menu Items | Normal document flow |
| Opening Hours | Flexbox |
| Contact | Normal document flow |
