A client has approached you to help on a web design project. The client is a dining company that operates hamburger restaurants in South America. They have a website that provides information of their restaurants and the featured food they provide.
There is sever-side developer already helped on creating the server-side logic. But the developer is not good at CSS design and needs your help. You will get the static HTML files that are generated from the server. These are plain HTML files and your job is to write CSS styles to fulfil the client’s requirements.
You are going to design several pages. Here you can find the requirement for each page. There are several views that you need to redesign. The server-side developer has output them into static HTML files. The following describes what these files are.
There are several HTML files that you need to redesign:
The home page displays the entry point of the website.
This page shows a contact form. There are 3 types of contact forms. Restaurant review, job applying and others. These types are separated by tabs.
This page displays information of one restaurant. Customers can find photos and menu of this restaurant.
There is one main photo in this view and several thumbnails of related photos. There is also a caption and a social network sharing panel.
There are some special buttons in the provided HTML files.
The owner of the dining company wants these labels, tabs and menu to have a nice motion design applied.
The server-side developer doesn’t know how these motions should be implemented. Toggle classes have already been developed for you to integrate with. We want you to add nice motion styles to these elements.
Prefix-free JS library (http://leaverou.github.io/prefixfree/) is provided. So we won’t test for missing vendor prefixs.
Mobile screen resolution
We have limited budget now. The client wants the site to work perfect in narrow screen at the current phrase. We require the site to work in desktop, but we test most of the functionalities in small screen to target mobile user.
You need to alter the HTML elements to add proper ARIA roles. You should not alter other parts of the HTML. For instance, you cannot add your own ID or classes to any elements.
Save your files in your root directory on the server called "XXLayoutModule_B"
where XX is your country code.
You need to submit the CSS file that styles the website according to the requirements. You may submit extra images by putting them inside the “images” folder.