you will be creating a Web site for a small family-owned restaurant named The Bistro Cafe

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

you will be creating a Web site for a small family-owned restaurant named The Bistro Cafe. This site will have 4 pages: Home, History, Specials, and Contact Us. Detailed information about each of these pages will be provided below. All of the HTML pages in your site should be linked to the same CSS file. This CSS file will control the consistent layout and format of all your HTML pages. Make sure your HTML code validates as HTML5 files and your CSS code validates. I recommend that you save all files related to your project in a folder named project.

The layout you will be using is illustrated below. You will be using responsive layouts designed specifically for small and large displays and should respond based on the window size. Your layout should hold together in both Firefox and Chrome. Apply the Web design best practices and principles discussed this quarter.

HTML Wireframes

• header must contain the Banner/logo image on all pages and the h1 element to define the site title

• nav will provide navigation to your other pages. The links in the nav should be coded as an unordered list.

• main will contain the subheading explaining the topic of the page and the main content for each page

• footer should contain a basic version of the navigation menu, copyright symbol, and an email link to your email address on all pages

 

Style Sheets

Create one external CSS file to control the layout and format of all four HTML pages when viewed on a small dispaly and large display.You will use the mobile first strategy with only one media query for the large display (minimum width of 800px) layout and style changes. You should include all formatting that is consistent on all pages in this external CSS file. Use the layout as shown above in the wireframe. The only real difference between the small and large display layouts, is that the navigation menu should be a vertical menu on the small display and horizontal on the large display.

Responsive Web Design Principles

• Use the mobile first design strategy

• Media query for large display targeting a minimum width of 800px

• include appropriate meta viewport html element on each page

• use CSS to style flexible images

Here is a brief description of the minimum CSS requirements:

• body -- background color and font-family

• #wrapper

o small display -- width should be 100%

o large display -- width should be 80% and centered

• nav -- remove the bullets

o small display -- navigation menu should be in a vertical layout

o large display -- navigation menu should be in a horizontal layout

o a:link, a:visited, and a:hover -- you decide what properties to use

• h1 -- you decide what properties to use

• h2 -- you decide what properties to use

I am sure there will be several additional rules you will want to add to control the styles used in the small and large displays. But you can decide what they are.

Images

• You will need to create a banner or logo image for The Bistro Cafe. You can use an online tool like Online Logo Maker or use a photo you have taken. If you have the ability to create your own banner/logo image using an image editing program like Pixlr, Gimp or Photoshop, this would also be accepted. The logo should be defined as the background image in the header on each page.

• You must include an additional inline image in the main content on the History page.

• All images must be sized appropriately for the web - do not use the HTML height and width attributes to change the size of your images. Make sure all images are sized/optimized using an image editing program or online tool.

• Your images must be responsive to the window sizes

• Add a comment in your HTML code using the HTML comment tag that explains where the images were obtained and giving credit to the image owners. If you are using an image found on the web, provide the URL.

• Feel free to include additional image content on the pages

Reqired Pages:

Home Page

Include this content in the main content area. Feel free to include additional image content on the page.:

The Bistro Cafe is located in the heart of Techieville! We specialize in good-ole home cooking. Our menu ranges from chicken dumplings to our famous fiesta burrito. Our breakfast menu is available all day. Please come by and share a meal with us. We are conveniently located on the corner of 5th and Hypertext Avenue.

History Page

Include this content in the main content area:

The Bistro Cafe first opened its doors in November of 1972! Bit and Byte Smith were new to Techieville and discovered an empty building on the corner of 5th and Hypertext Avenue. They always dreamed of opening up their own restaurant. That dream came true in the Fall of 1972 when they purchased the building and began construction on The Bistro Cafe. In November of 1972, they were ready to open their doors. They decided to have a grand opening on Thanksgiving Day and offered a free turkey dinner to all who attended. This became a tradition that is still being followed to this day. Every Thanksgiving Day, The Bistro Cafe opens its doors and serves a free turkey dinner.

In 1994, Bit and Byte decided it was time to retire. They turned over the reins of the Cafe to their son, Chip. Chip continues to manage the Cafe today with the help of his wife, Drive. Chip and Drive have added a few of their own special recipes to the menu. But for the most part, the menu hasn't change too much from the original one. The Bistro Cafe went through a major remodel in 2002. A private party room was added which can handle groups up to 40 people. If you would like to plan a private party at The Bistro Cafe, please contact Chip or Drive at the restaurant.

In addition to the text above, you must include an inline image in the main content area on this page. Follow the image requirements located above in the Images section.

Specials Page

Include this content in the main content area:

We offer the following specials each day of the week:

Monday--Chicken an Dumplings

Tuesday--Meatloaf

Wednesday--Chicken Fried Steak

Thursday--Chip's Casserole

Friday--Fiesta Burrito

Saturday--Fried Chicken

Sunday--Drive's Special Beef Stew

We hope you will join us at The Bistro Cafe for a meal.

Embed these videos using the HTML5 video element (food_specials.mp4, food_specials.ogv). Save these files to your local drive by right-clicking on the links and selecting Save Link As... or Save Target As...The dimensions of the video are 320px wide by 240px high. Remember that the MIME types are defined as type="video/mp4" for the MP4 file and type="video/ogg" for the OGV file.  This is how your student server is configured. Your code must match the MIME types configured on the server for the videos to work correctly when played from the server. Provide a link to the food_specials.mov file as a fallback option that will only be available if the browser doesn't support the HTML5 video element. Review the fallback option discussed in your book.

 

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of