IST 250 Introduction to Web Design

Individual Assignment 3: The Responsive Restaurant For this assignment, you will be creating a responsive website for a restaurant. Your page should appear differently depending on the size of the screen used to view it. Note: Include various CSS styles that we've learned 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. [EDIT: The task in bold below is now optional. You may choose to complete this task for +3 extra credit] - 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. A few comments: - For full credit, you should follow all best practices as discussed in class such as including a title, properly setting charset encoding, and viewport. All of your fonts and images should be legible and properly sized at each screen size. - For full credit, items that you have 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 for this assignment. Firefox or Chrome are recommended.