Aroma Ristorante is a fictitious Italian restaurant that serves modern Italian cuisine. Our emphasis is on simple dishes made with care and the best ingredients. For this team project, we was required to use only HTML, CSS and pure JavaScript.

As a design lead, I created a wireframe, the logo and style tiles first as design guide. Then I created the global CSS file which helps all pages look consistent.

I was responsible for building the template and home, menu and event pages.

Home Page is overview of the each pages, Call to Action redirect to individual pages.

Using the same card design on the homepage. Subtle scroll animation make the website elegant.

Aroma provide 5 categories of regular menu items. Using tab to show them.

Using the same layout used on Menus page.

Event page describe about the information for the venue. Inquiry section has a button to call to action to the form.

Gift card purchase form.

Restaurant location information with Google Map API

Clicking the card describing the job title, location and job type, expand the accordion to show the job description.

Conatct Us form.

No winner game - create cards, pick cards with food images.

Accordion - expand folder content

Our website is white background with gold, crimson red and black as accent colours. The reason for the website background colour white is because we used a lot of images including food and venues. White background is simple and enhance these images especially food images looks fresh and delicious. Using Gold Colour for borders of the cards, underline of titles gives impression of royalty and a high standards or class since Aroma is Michelin stared Modern Italian restaurant and mainly customers go to the special occasions. Using crimson red and black colours for buttons since combinattions of these colours denote sophistication and stand out with white background.

When I thought how to enhance the images on the website, I came up with the idea to use two columns on the features sections (Menus, Specials, and Events). Contents and images are slightly overlapping. However, the using the box with shaddow design looks more elegant than without it as well as giving the softer impression. The contest section on home page is using paralax with partial white transparent content area, which is eye chatching since this section has an important role for the website since this is the only way to visit the contest page. Based on this home page, card style (shadow with gold borders), title with gold border are used.

Here are some of our final prototypes. Please visit our live website - http://aroma.mihoko.ca/