This assignment has three main objectives: (1) To give you some practice altering an existing webpage. (2) To apply CSS to alter the presentation of a webpage. (4) To begin to work with color schemes and color palettes for webpages. in this assignment with the two webpages that you created biect One. Project One created the main (index) page and an accommodations page for the Atlantic Trails Resort web site. The wireframe for each of the two pages you developed in Proiect One is shown below (note the slight modification for the contact id on the index page for Project Two): header header navigation navigation content (main) content (main) contact id (div) footer footer accommodations page index page As your project becomes more sophisticated, it will be a good idea to begin organizing the files of the project now. So put your markup and CSS is separate folders as shown below. To link your CSS into your markup using this file structure the href attribute for the link element should be ../CSS folder/atlantic.css. Project Two folder Images folder JavaScript folder HTML folder CSS folder accommodations .html atlantic.css index.html Copy the index.html and accommodations.html files from your Project One folder into the html folder of the new folder named Project Two. Your first task for Project Two is to create a valid external style sheet, named atlantic.css. Be sure to comment your CSS file where appropriate. At this point there probably won't be a lot of necessary commenting, but I would suggest including a color palette comment at the top of this file. I'll demonstrate this in class. We'll discuss CSS file organization more later, but for now ! would suggest alphabetizing property values within rules and either a general-to-specific or a specific-to-general overall structure. Project Two: Task 1 Code the CSS to the following specifications: Select the element to have background color #CBDODE and text color #000001. Select

elements to have background color #000033 and text color #FFFFFF. Select

elements to have background color #90C7E3 and a line height of 1.25em. Select

elements to have text color #334DCC. Select

elements to have a margin-bottom property of 1.5em. Select

elements to have text color #000099 and a font-size of 14 point. Define a class named resort that specifies text color #005CE6. Define an id named contact that specifies the font-size to be 10 point. To eliminate the gap that will appear between the

and the

element you can set the margin-bottom property of the

element in the

to 0. Project Two: Task 2 The second task for this project is to modify the index.html markup utilize the CSS found in the atlantic.css stylesheet. Within the markup in index.html do the following: Configure a element that contains the company name "Atlantic Trails Resort" in the first paragraph below the

element. Assign the class resort to this . Configure a element that contains the company name "Atlantic Trails Resort" where it appears just above the street address. Assign the class resort to this . If you do not already have a

element that contains the address and phone number, add one now and assign to it an id named contact. After making these changes your main page should look like the one shown on the next slide. Project Two: Task 3 The third task in Project Two is to apply the atlantic.css file to the accommodations.html page. Do this in the same manner as which you modified the index.html page. If you marked up the main content of this page using and

elements for Project One, replace these now by using a description list

with the appropriate

and

elements. After applying the stylesheet to this page, your page should look like the one shown on the next slide. This assignment has three main objectives: (1) To give you some practice altering an existing webpage. (2) To apply CSS to alter the presentation of a webpage. (4) To begin to work with color schemes and color palettes for webpages. in this assignment with the two webpages that you created biect One. Project One created the main (index) page and an accommodations page for the Atlantic Trails Resort web site. The wireframe for each of the two pages you developed in Proiect One is shown below (note the slight modification for the contact id on the index page for Project Two): header header navigation navigation content (main) content (main) contact id (div) footer footer accommodations page index page As your project becomes more sophisticated, it will be a good idea to begin organizing the files of the project now. So put your markup and CSS is separate folders as shown below. To link your CSS into your markup using this file structure the href attribute for the link element should be ../CSS folder/atlantic.css. Project Two folder Images folder JavaScript folder HTML folder CSS folder accommodations .html atlantic.css index.html Copy the index.html and accommodations.html files from your Project One folder into the html folder of the new folder named Project Two. Your first task for Project Two is to create a valid external style sheet, named atlantic.css. Be sure to comment your CSS file where appropriate. At this point there probably won't be a lot of necessary commenting, but I would suggest including a color palette comment at the top of this file. I'll demonstrate this in class. We'll discuss CSS file organization more later, but for now ! would suggest alphabetizing property values within rules and either a general-to-specific or a specific-to-general overall structure. Project Two: Task 1 Code the CSS to the following specifications: Select the element to have background color #CBDODE and text color #000001. Select

elements to have background color #000033 and text color #FFFFFF. Select

elements to have background color #90C7E3 and a line height of 1.25em. Select

elements to have text color #334DCC. Select

elements to have a margin-bottom property of 1.5em. Select

elements to have text color #000099 and a font-size of 14 point. Define a class named resort that specifies text color #005CE6. Define an id named contact that specifies the font-size to be 10 point. To eliminate the gap that will appear between the

and the

element you can set the margin-bottom property of the

element in the

to 0. Project Two: Task 2 The second task for this project is to modify the index.html markup utilize the CSS found in the atlantic.css stylesheet. Within the markup in index.html do the following: Configure a element that contains the company name "Atlantic Trails Resort" in the first paragraph below the

element. Assign the class resort to this . Configure a element that contains the company name "Atlantic Trails Resort" where it appears just above the street address. Assign the class resort to this . If you do not already have a

element that contains the address and phone number, add one now and assign to it an id named contact. After making these changes your main page should look like the one shown on the next slide. Project Two: Task 3 The third task in Project Two is to apply the atlantic.css file to the accommodations.html page. Do this in the same manner as which you modified the index.html page. If you marked up the main content of this page using and

elements for Project One, replace these now by using a description list

with the appropriate

and

elements. After applying the stylesheet to this page, your page should look like the one shown on the next slide