restaurant-css-framework

Project restaurant

Team :

Abu (AOB)
Arnaud (AWA)
Nadja (NAG)
Olivier (OPI)
Patricia (PCO)

Role :

AOB = Home Page
PCO = Menu
NAG = Restaurant
OPI = Pictures + structure
AWA = Contact

Name :

Chic Kebab

But how did we do it ? :

After carefully reading the instructions given by our coach Arnaud, we answered these few questions:

What type of restaurant do we want?
What will be his identity? its name, logo, slogan, ...

From there, we proceeded to the:

logo creation
establishment of the graphic charter
distribution in the group of the different pages to be created.

Before starting our html writing, we established a page canvas, with for each, the same header and footer. That we have shared so that we can start to fill our pages individually. Once the html was written, we moved on to Bootstrap and Sass. In order to organize and style our page.

Description of pages:

Home Page :

Chic kebab index page(Abu) The home page was built on a common template consisting of a navigation and footer put to gather by my college (Olivier). In creating the creating the home page I added a head section to the header and divided the main page into two sections, class section1 and class section2. The head section The head section contains an h1 welcoming message and an animated background Class section 1 This section is displayed in flex with a flex wrap property to render it responsive and contains two articles (article1 and two) both box shadowed and displayed in an inline-block with a border radius of 20 pixels. The first article contains a centred h4 header and a padded paragraph while that of the second contains an image Class section2 This section uses a bootstrap grid layout. It contains three rows. The first row is made up of a column with a size of 12 on all screens. This column is attributed an image and an h4 title. The other two rows contains two equal size columns each. The size of each column is 6 on larger screens and 12 on smaller screen (for stacking effect). Finally each column contain an image and a caption encapsulated in a figure tag.

The menu section of the site brings the visitor into the belly of the place. We chose not to put photos of the dishes, it was too Asian restaurant;) A photo strip that tilts and zooms in on itself, to give the impression that the spice jars will tip over when the mouse passes. A text underline effect that highlights certain words made the page more lively. The prices have a background of the same gradient as the effect in question.

Restaurant :

So for the restaurant page: I had to put the different addresses of your restaurant, add a map of the main restaurant and put the schedules of the restaurants of the other cities.

Pictures :

The pictures page contains a grid layout consisting of a 13 pictures mosaic, followed by two blockquotes using bootstrap classes. Images are displayed one by one thanks to a CSS animation.

Contact :

The contact page has used per the customer to contact the restaurant. He can use the fomr to request a information, to order food of to reserve a table. he have the choice into four locations. The customer can see the rate of the restaurant and can call the location of his choice for reserve and commande.

Naudar79/restaurant-css-framework