For the final project, you are required to create three HTML pages (a Home page, a Products page, and a Contact Us page) and one CSS file that will be applied to all three HTML pages. In this folder, I have provided additional files you need for this assignment (the images needed for the different pages, the main body of text for the home page, and images of each of the finished pages). You should have a minimal amount of formatting instructions in your HTML files; most formatting should be done using CSS. While I understand that your final project may not be identical to mine (e.g., the padding, margins, or width you specify for an element may be slightly different from mine), I do expect it to be fairly close. Furthermore, your solution should not be identical to that of one of your classmates. There are multiple ways you can go about achieving the end result and it would be very rare if two people developed an identical solution. I don’t mind if you share ideas about how to structure the HTML or which CSS properties to use to achieve a certain result; however, this assignment is to be an individual effort. Here are some tips for completing this assignment.
Colors
• Background colors:
• Body: #a79e90;
• Header and Main: #bdb4a5
• Set the background color of the textbox, textarea, and checkbox controls on the Contact Us page to #f3f1eb.
• Text, links, and borders: #143963
Fonts
• The text in the header needs to be: Papyrus, 50px, bold.
• The links on the left-hand side are: Papyrus, bold, 24px
• The text with the business address in the footer is Papyrus, 16px, bold, #143963
• All other text is Papyrus 18px, bold, #143963
Links
• When a user hovers over a link, the text (not the background) should turn to the following color: #f3f1eb
• You must use the image of the starfish provided in the images folder as a marker for the links on the left-hand side of the page (see tips section below for more details).
• The Products link on your Home and Contact Us pages should link to the Products page.
• The Contact Us link on your Home and Products pages should link to the Contact Us page.
The Home link on the Products and Contact Us pages should link to the Home page
Images
• You will need to set the size of the image in the header to: width=”110” and height=”110”
• You will need to set the size of the beach bag, towel, umbrella, and beach cart images to: width=”80” and height=”80”
Validation
• When a user clicks the Submit button on the form in the Contact Us page, I want you to use JavaScript (inside the head element of the Contact page) to verify that the First Name, Last Name, Email, and Phone text boxes are not blank (hint: the condition should check to see if they are < 1). If any of them are blank, please use an alert box to notify the user that they need to include whatever information is missing.
Additional Tips
• Create a template that can be used for each of the HTML pages, as the header, main, footer, and navigation sections stay the same on every page. The only content that changes is the center part in main.
• Use a table to hold the images and prices of the various products on the Products page.
• Use a table to organize the labels and form controls on the Contact page
• Rather than use display:block to change the natural display of the links from inline elements to block-level elements, use display:list-item instead and then use the list-style-image property to change the marker (the bullet) next to the links to the starfish image (see Module 8 slides for details).
Please create a folder with all of your files (including the images), zip the folder, and upload the folder to Blackboard under the ‘Final Project” assignment.
Supported Images:
Product:
Contact Us:
Home:
Head Logo:
Beach-Umbrella:
Are you looking for HTML, CSS, JavaScript Web Programming experts to solve your assignment, homework, coursework, coding, and projects? Codersarts web developer experts offer the best quality web programming, coding or web programming experts. Get Web Assignment Help at an affordable price from the best professional experts Assignment Help. Order now at get 15% off.
Comments