Restaurant page

This project comes after the introduction of the ES6 class keyword, ES6 modules, and webpack. The main goal of this project is for the student to show the understanding of the benefits of modularized code as well as the ability to set up a javascript application made of different modules using webpack.

You can find the original project specification in The Odin Project

Built With

• Javascript, HTML, CSS
• Webpack, Sass

Live Demo

Live Demo Link

Getting started

To get a local copy up and running follow these simple example steps.

Prerequisites

• npm
• git

Setup

To clone the project into your local environment do the following.

• Open a new terminal window and navigate to the directory where the project will be stored.
• Run the command git clone git@github.com:oscardelalanza/restaurant-page.git.
• Run the command cd restaurant-page to enter to the project directory.

Install

To install the requires packages do the following.

• Inside restaurant-page directory run the command npm install.

Usage

This project consists of three sections Home, Menu and Contact Us each one of them can be accessed through the navigation bar on the top right of the site (see the image below).

Home

This section can be accessed through the navigation bar after clicking the Home link. It is used to show the About Us content of the restaurant (in this case it's a simulation).

Menu

This section can be accessed through the navigation bar after clicking the Menu link. It is used to show a simulation of a restaurant Menu which contains a list of Drinks and a list of Food separated into two different columns. Also, this section contains a small gallery at the end of the page to show a combination of pictures of drinks, foods and the place itself.

Contact Us

This section can be accessed through the navigation bar after clicking the Contact Us link. It is used to show a simulation of contact information of a restaurant, including address, phone number, emails, schedule and a map with a mark of the physical location of the place.

Deployment

To start the local development server do the following.

• Run the command npm run dev.

To build the project do the following.

• Run the command npm run build.

Future features

• Add loading animations.
• Modify scroll behavior.
• Add animations to Home page.

Authors

👤 Oscar De La Lanza

• Github: @oscardelalanza
• Twitter: @oscardelalanza
• Linkedin: Oscar De La Lanza
• Email: oscardelalanza@gmail.com

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!