In this Web App, we will build 3 pages, one for the Menu, one for the available restaurants, and one for contact purposes. So, let's see the HTML code for the Menu first.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hungrie's Place</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header class="container">
<nav>
<div class="btn-group mt-3" ">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Menu
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="./index.html">Catalog</a></li>
<li><a class="dropdown-item" href="./find.html">Find Us</a></li>
<li><a class="dropdown-item" href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h4 class="text-center">Hungrie's Place</h4>
<div class="text-center">
<img style="width: 7.5rem;" class="rounded img-fluid" src="./images/logo.png">
</div>
</header>
<main>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/pizza.jpg" alt="Buy Hot Pizza">
<div class="card-body">
<div class="card-title text-center"><b>Order Pizza</b></div>
<div class="card-text text-center">Pizza, dish of Italian origin consisting of a flattened disk of bread dough topped with some combination of olive oil, oregano, tomato, olives, mozzarella or other cheese.</div>
<a href="#" class="btn btn-warning">Order</a>
<input class="mt-2" type="number" placeholder="Enter order quantity" style="width:10rem; height:2.5rem">
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/hamburger.jpg" alt="Buy Juicy Hamburger">
<div class="card-body">
<div class="card-title text-center"><b>Order Hamburger</b></div>
<div class="card-text text-center ">Hamburger, also called burger, ground beef. The term is applied variously to (1) a patty of ground beef, sometimes called hamburg steak, Salisbury steak, or Vienna steak.</div>
<a href="#" class="btn btn-warning">Order</a>
<input class="mt-2" type="number" placeholder="Enter order quantity" style="width:10rem; height:2.5rem">
</div>
</div>
</div>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/fries.jpg" alt="Buy French Fries">
<div class="card-body">
<div class="card-title text-center"><b>Order Fries</b></div>
<div class="card-text text-center">These potato wedges are impossibly crispy and crackly on the outside, with tender, pillowy potato insides. They’re the perfect homemade solution any time the French fry craving strikes.</div>
<a href="#" class="btn btn-warning">Order</a>
<input class="mt-2" type="number" placeholder="Enter order quantity" style="width:10rem; height:2.5rem">
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/kfc.jpg" alt="Buy KFC Chicken Nuggets">
<div class="card-body">
<div class="card-title text-center"><b>Order KFC Nuggets</b></div>
<div class="card-text text-center ">KFC’s Beyond nuggets — available in a 6-count or 12-count box — look like any other chicken nugget. They’re a bit larger than the typical fast-food nug, and boast a crispy breaded exterior studded.</div>
<a href="#" class="btn btn-warning">Order</a>
<input class="mt-2" type="number" placeholder="Enter order quantity" style="width:10rem; height:2.5rem">
</div>
</div>
</div>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/chicken.jpg" alt="Buy Chicken">
<div class="card-body">
<div class="card-title text-center"><b>Order Chicken</b></div>
<div class="card-text text-center">Ditch the takeaway menu and cook our healthy chicken madras curry instead. This simple family dinner is full of fragrant spices and tender pieces of chicken.</div>
<a href="#" class="btn btn-warning">Order</a>
<input class="mt-2" type="number" placeholder="Enter order quantity" style="width:10rem; height:2.5rem">
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/toast.jpg" alt="Buy French Toast">
<div class="card-body">
<div class="card-title text-center"><b>Order French Toast</b></div>
<div class="card-text text-center ">French toast is a dish made of sliced bread soaked in beaten eggs and typically milk, then pan fried. Alternative names and variants include "eggy bread".</div>
<a href="#" class="btn btn-warning">Order</a>
<input class="mt-2" type="number" placeholder="Enter order quantity" style="width:10rem; height:2.5rem">
</div>
</div>
</div>
</div>
<div class="card text-black bg-warning mt-2">
<div class="card-header text-center">Opening Hours</div>
<div class="card-body text-center">
<div class="card-title">
<div class="card-text">Monday - Friday 10:00 - 00:00
<br>Saturday - Sunday 12:00 - 02:00
</div>
</div>
</div>
</div>
</main>
<footer class="text-center p-2">
<small>© Copyright 2022 - Hungrie's Place</small>
</footer>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
At first, we call the Bootstrap and the Google Fonts Libraries. Using Bootstrap classes, we create a 2x3 Grid to display our Menu. An image, a short description, and the ability to order is being displayed to the user. Nothing fancy here, basic stuff.
Let's continue with the HTML code, responsible for the Find Us page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hungrie's Place</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header class="container">
<nav>
<div class="btn-group mt-3">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Menu
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="./index.html">Catalog</a></li>
<li><a class="dropdown-item" href="./find.html">Find Us</a></li>
<li><a class="dropdown-item" href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h4 class="text-center">Hungrie's Place</h4>
<div class="text-center">
<img style="width: 7.5rem;" class="rounded img-fluid" src="./images/logo.png">
</div>
</header>
<main>
<div class="container">
<div class="text-center">
<h3>Restaurant Places</h3>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/Italy.jpg" alt="Italy department">
<div class="card-body">
<div class="card-title text-center"><b>Italy Department</b></div>
<div class="card-text text-center">Get instant service from our beautiful restaurant in Italy.</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/Spain.jpg" alt="Spain Department">
<div class="card-body">
<div class="card-title text-center"><b>Spain Department</b></div>
<div class="card-text text-center">Get instant service from our beautiful restaurant in Spain.</div>
</div>
</div>
</div>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/Greece.jpg" alt="Greece Department">
<div class="card-body">
<div class="card-title text-center"><b>Greece Department</b></div>
<div class="card-text text-center">Get instant service from our beautiful restaurant in Greece.</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/london.jpg" alt="London Department">
<div class="card-body">
<div class="card-title text-center"><b>London Department</b></div>
<div class="card-text text-center ">Get instant service from our beautiful restaurant in London.</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-center mt-3 p-2">
<iframe class="img-fluid" width="1000" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.12611746788024905%2C51.50002905814885%2C-0.12304633855819704%2C51.50135145190138&layer=mapnik&marker=51.5006902598215%2C-0.12458190321922302" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=51.50069&mlon=-0.12458#map=19/51.50069/-0.12458">View Larger Map</a></small>
<small>© Copyright 2022 - Hungrie's Place</small>
</footer>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Again, with the use of Bootstrap, we create a 2x2 Grid, displaying all our possible restaurants each residing in a different location. A small map is living at the bottom of the page highlighting our location mark.
Finally, our last piece of code is the Contact Page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hungrie's Place</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header class="container">
<nav>
<div class="btn-group mt-3">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Menu
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="./index.html">Catalog</a></li>
<li><a class="dropdown-item" href="./find.html">Find Us</a></li>
<li><a class="dropdown-item" href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h4 class="text-center">Hungrie's Place</h4>
<div class="text-center">
<img style="width: 7.5rem;" class="rounded img-fluid" src="./images/logo.png">
</div>
</header>
<main>
<div class="container"> <div class=" text-center mt-5 ">
<h1>Restaurant Contact Form</h1>
</div>
<div class="row ">
<div class="col-lg-7 mx-auto">
<div class="card mt-2 mx-auto p-4 bg-light">
<div class="card-body bg-light">
<div class="container">
<form id="contact-form" role="form">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group"> <label for="form_name">Firstname *</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required."> </div>
</div>
<div class="col-md-6">
<div class="form-group"> <label for="form_lastname">Lastname *</label> <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required."> </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group"> <label for="form_email">Email *</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> </div>
</div>
<div class="col-md-6">
<div class="form-group"> <label for="form_need">Please specify your need *</label> <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value="" selected disabled>--Select Your Issue--</option>
<option>Make an order</option>
<option>Request receipt</option>
<option>My order has not arrived yet</option>
<option>Other</option>
</select> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group"> <label for="form_message">Message *</label> <textarea id="form_message" name="message" class="form-control" placeholder="Write your message here." rows="4" required="required" data-error="Please, leave us a message."></textarea> </div>
</div>
<div class="col-md-12 text-center"> <input type="submit" class="btn btn-warning btn-send mt-2 pt-2 btn-block" value="Send Message"> </div>
</div>
</div>
</form>
</div>
</div>
</div> <!-- /.8 -->
</div> <!-- /.row-->
</div>
</div>
</main>
<footer class="text-center p-2">
<small>© Copyright 2022 - Hungrie's Place</small>
</footer>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Again, Bootstrap runs wild and by giving the elements a class of form-group and input, we can create 3 inputs, one for first name, one for last name, and one for an email. Lastly, a dropdown menu appears if there is an issue and a mandatory message box to briefly describe your issue if any.
That's all for today. Well, not really, we forgot a 10-line CSS rule. Here it is.
body {
font-family: 'EB Garamond', serif;
background-image: url("/images/bg-triangle.jpg");
}
h4 {
text-decoration: underline;
}
img:hover {
transform: scale(1.05);
cursor: pointer;
}
💡
Github
GitHub - mariosdaskalas/hungries: Restaurant website made with Bootstrap.
Restaurant website made with Bootstrap. Contribute to mariosdaskalas/hungries development by creating an account on GitHub.
mariosdaskalas💡
Live Demo
Subscribe to our email newsletter and unlock access to members-only content and exclusive updates.
Comments