For this example, you will be creating a responsive website for a restaurant. The page should appear differently depending on the size of the screen used to view it. Note: Include various CSS styles t

Create a Website Example HTML and CSS Coding

For this example, you will be creating a responsive website for a restaurant. The page should appear differently depending on the size of the screen used to view it.

Note: Include various CSS styles to improve the appearance of your page.

Guidelines:

Full-sized screen (i.e. desktop/laptop computer):

- Display a gallery of large images of your menu items.

- When a menu image is clicked, blur the background and enlarge/center the image that was clicked. Add text describing the menu item that was clicked. Do not blur the center image or descriptive text. 

- Display a footer containing the address of the restaurant, a brief description of the location, and contact info.

- Include your restaurant name or logo somewhere on this page.

Medium-sized screen (i.e. iPad / tablet):

- Display a small image of each menu item along with the descriptive text for that item. Use an appropriate technique discussed in class to organize the layout such that the image appears next to the descriptive text.

- Display a footer that only displays contact info.

Small screen (i.e. phone):

- Display only directions to the restaurant and a small image of a map.

- Don't display a footer.

The website should follow all best practices such as including a title, properly setting charset encoding, and viewport. All of the fonts and images should be legible and properly sized at each screen size. 

The website items that are hidden or resized to handle different screen sizes should not have a negative visual effect on your page. Pay attention to proper spacing, sizing, and arrangement of page elements.

Please do not use Safari or Internet Explorer/Edge. Firefox or Chrome are recommended.