You are going to create the home page for Prime Properties, a fictitious real estate company, using a fluid layout with a logo and footer. The layout will be based on the wireframe below:
HTML Page:
*HTML content without CSS
Use the following information to help you create the HTML page. Use the content in the illustration above along with the instructions below to help you create your page:
Using a text editor, create a new web page that validates as an HTML5 file. Save the page as prime_home.html in your module4 folder. Don't forget to include the Opening Comment as explained in the Style Guide in Module 1.
In the body of the page, use the <header> tag to define the header area. Add the h1 element with Prime Properties content in the header.
Use the <nav> tag to define the nav area. Include the four links as shown in the illustration in this area. Use an unordered list to define this list of links. Use logical filenames for these links even though these pages are not created.
Use the <main> tag to define the main area. Include the paragraphs of text, the image, and the unordered list shown in the screen capture above. You will apply the class style named company to the text Prime Properties at the beginning of the first paragraph.
Insert the inline image house.jpg (you will need to save this image to your module4 folder on your local drive) at the beginning of the first paragraph in the main content area. Add an inline style to the img tag to float it to the right.
Use the <footer> tag to define the footer area which includes the links (do not need to use an unordered list for these links), copyright information (using the copyright class style) and an email link using your email address.
Use the W3C Validator (http://validator.w3.org) to validate your HTML code. Make corrections to your code if necessary until it passes validation.
CSS Page:
*HTML file with CSS applied
Use the following information to help you create the CSS page. There may be additional CSS rules that will need to be created to get your page to match the illustration above. But this will help you get started with the layout:
Using a text editor, create a new external CSS page. Save the page as prime.css in your module4 folder.
Configure the body background color to be #003366. The font should be arial, helvetica, sans-serif. All margins should be 0px and the minimum width should be 800px.
Create a rule for the header element with the height of 120px. The primelogo.gif image should be defined as the background of the header, it should not repeat, and use #BACBE0 as the background color. Set a 1px top padding to remove the space that is automatically placed above the header.
The h1 text should be #003366 with a 3em font size. Please add a text shadow and nudge it to the right so that it isn't laying on top of the logo image in the background.
Create a couple rules using descendent selectors to target the :link and :visited pseudo classes of the anchor element in the nav area only. The link text color should be white and the visited text color should be #BACBE0.
Create a rule using a descendent selector to target the ul element in the nav area only and remove the bullet from the list
Create a rule using a descendent selector to target the li element in the nav area only and display them inline with some space between them to separate them
Create a rule for the main element and define the background color to be white. Add a 20px padding to the top and bottom and a 50px padding on the left and right.
Create a rule for the footer element that uses a smaller font size (.7em), aligned in the center, includes a top border (1 pixel, solid, #003366) and use #BACBE0 as the background color. Add some padding to the top and bottom. Make sure the footer clears any content that might be floating above it.
Create a class style named company that is bold and italic. This should be applied to Prime Properties text at the beginning of the first paragraph in the main content area.
Create a class style named copyright with the italic style. This will be applied to the 2nd line of text in the footer.
Use the W3C CSS Validator (http://jigsaw.w3.org/css-validator/) to validate your CSS file. Make corrections to your code if necessary until it passes validation except for the errors caused by the proprietary properties.
When Finished...
All students need to upload your assignment to the server and modify your INFO1311 home page (default.htm) as instructed below:
Upload the module4 folder to the server. Make sure that the folders and files stay organized on the server exactly the same as they are organized on your local drive.
Open your default.htm file and add a ink to Assignment 4 by pointing to the prime_home.html file in the module4 folder.
Save the default.htm file and upload it to the public_html folder. You will replace the file that is already there by the same name. I recommend that you open your revised INFO1311 Home Page that you uploaded to the server
in the browser and test your links to your Assignments.
Copy the URL of your prime_home.html file on the server into the assignment dropbox in Canvas.
