I made a responsive site using HTML,CSS and JavaScript. It consists of three pages including Home Page, Menu Page and Menu Category Page.
Header: In full Screen mode it shows the logo of Restaurant which changes it's size as the size of screen changes with a certification on the left hand size and 3 icons of Menu, About and Awards the it has a calling number on clicking there you get directed to your calling app with number dialled so that you can directly call with a message of "* We Deliver" which changes to a collapsable navbar having four tabs to go to Home , Menu, About or Awards portion and the call option covers the entire width of the page.
Footer: The footer consists of the details of the dummy restaurant site like opening closing hours, address ,delivery conditions and copyright.
-
Home Page : It consists of a picture of the restaurant followed by three sections : Menu which directs you to the Menu page, Specials which directs you to the special category page and the Google Maps which directs you to the hotel location.
-
Menu Page : It consists of various categories of dishes which you can order along with their picutes to add more temptations and increase the orders.
-
Specials : It consists of Special food of the restaurant along with it's pictures to give a view of how they serve the food along with it's price according to quantity and a small description of the dish.
The layout is made using BOOTSTRAP4 functionalities. For icons I have used glyphicons again from bootstrap . All the pictures are from open source sites. This is my first project in web development.