Description
This assignment has one primary objective:
Begin this assignment with the two webpages that you created
Project Five: Task 1 • For the mobile phone version of the web pages (max-width: 37.5em) assume the following CSS properties: – For
selector set top padding to 1em. – For theselector, set top and bottom padding to 0.1em, left and right padding to 1em, and font size to 90%. – For
selector, set the font size to 1.5em. – For navigation list items, use a descendant selector to configure
elements within theto set block display, 0 margin, and a 1 pixel solid (#FFE4C4) bottom border. Also use a pseudo-element selector to set a similar top border on the first
within the. – For navigation hyperlinks, use a descendant selector to configure the elements within the
to set block display. (This will give the user a larger area to tap when selecting a hyperlink.) – For the main image, do not display the image. Set background-image property to none and height to 0. Project Five: Task 1
Forselector, do not display any tables. Replace the tables with the alternate text as shown in the screen shot on page 17 (as well as below): Project Five: Task 1 Our Coffees Our coffees are well-known throughout the region as bold and flavorful. We offer many different types of coffees, one of which is sure to satisfy your taste. Prices start at $2.00 per cup. Our Teas Our teas are hand-selected from around the world to bring you a wide variety of possibilities. We specialize in flavorful afternoon teas as well as a wide assortment of exotic teas. Stop in and try a cup! Prices start $2.00 per cup. Our Snacks We offer a wide variety of foods ranging from simple snacks to complete inners. Our specialties are organic salads and fresh seafood. Try our fried clam strips and fish strips. The locals swear these are the best you’ll find anywhere. Prices are seasonal, but always a real deal.
Desktop Version main page Tablet Version main page
Phone Version main page Desktop Version menu page
• The second task for this project is to rework the phone number for the Lighthouse Bistro so that on mobile devices the user can tap the phone number and place a call to the restaurant’s office. The phone number should display without the link when viewed in the desktop and tablet versions of the site. • The next two pages illustrates this change.
Notice normal text for phone number
Project Five A telephone hyperlink is configured using a telephone scheme: Begin the href value with tel: followed by the phone number. For example: Voice 888-111-2222 An SMS (short message service) scheme hyperlink is intended to send a text message can be configured similarly: Begin the href value with sms: followed by the phone number. For example: Text 888-111-2222
Place all of the deliverables for this assignment into a folder named Project5. The deliverables for this assignment are to be submitted via WebCourses no later than 11:59pm Sunday November 4, 2018 are: 1. The two valid HTML5 documents containing the semantically correct markup for the index.html and menu.html pages (40 pts – 20pts for each page). 2. A folder named images containing the fifteen images for this project. (5 pts) 3. A document containing screen captures for HTML5 validations (both passing!) (10 pts – 5pts for each valid page). 4. A valid CSS stylesheet named bistro.css, with styles defined as outlined in this document. (35 pts). 5. A document containing a screen capture of the validation of the stylesheet (10 pts).
