Overview: 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 small display -- width should be 100% large display -- width should be 80% and centered nav -- remove the bullets small display -- navigation menu should be in a vertical layout large display -- navigation menu should be in a horizontal layout 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. Contact Us Page You will need to create a form on this page that will allow a visitor to contact you with questions or comments. When designing your form, you must provide a way for the visitor to submit their first name, last name, email address, phone number, and their question or comment when filling out the form. Also provide a way for them to specify their communication preference of email or phone. include appropriate examples of these form elements: textarea add input elements with these types: type=text type=submit type=reset type=checkbox or type=radio type=email type="tel" Fieldset and legend elements Here are the minimum requirements when creating your form: include an embedded style sheet with at least two rules targeting the form control elements. You will use the formmail.asp script on our server to process the form when submitted. This is the same script discussed in Module 7. Use your email address as the recipient when testing the form. Once you are finished testing the form, change the recipient email address to your instructor's email address, which can be found in the syllabus. Set the subject line of the email address to be "INFO1311 Final Project Your Name" (replace Your Name with your first and last name) Design the return page, as much as possible, so that it looks like it "belongs" with the other pages in The Bistro Cafe site by keeping the colors, fonts,etc, consistent EXTRA CREDIT (6pts): Use the redirect hidden tag as explained in the Usage Instructions for the formmail.asp script to redirect the form to use a custom return page (see the example in the Formmail.asp Activity in Module 7). You will need to create a new HTML page to be used as the custom return page. When you create the custom return page, design it so that it looks like it "belongs" with the other pages in The Bistro Cafe site by keeping the layout, format, and navigation consistent.