$1$

Use your editor to open the pc$\_$specials$\_$txt$.$html and pc$\_$specials$\_$txt$.$css files from the html$03$ review folder. Enter your name and the date in the comment section of each file, and save them as pc$\_$specials.html and pc$\_$specials.css respectively.

$2$

Go to the pc$\_$specials.html file in your editor. Within the document head, create links to the pc$\_$reset$2.$css$,$ pc$\_$styles$4.$css$,$ and pc$\_$specials.css style sheets.

$3$

Take some time to study the content and structure of the document, paying careful attention to the use of ids and class names in the file. Save your changes to the file.

$4$

Go to the pc$\_$specials.css file in your editor. Within the Page Body Styles section, add a style rule for the body element that sets the width of the page body to $95\%$ of the browser window width within the range of $640$ to $960$ pixels. Horizontally center the page body within the window by setting the left and right margins to auto.

$5$

Go to the Image Styles section and create a style rule that displays all img elements as blocks with a width of $100\%.$

$6$

Anne wants the navigation list to be displayed horizontally on the page. Go to the Horizontal Navigation Styles section and create a style rule for every list item within a horizontal navigation list that displays the list item as a block floated on the left margin with a width of $16\mathrm{.}66\%.$

$7$

Display every hypertext link nested within a navigation list item as a block.

$8$

Next, you will create the grid styles for the March Specials page. Go to the Grid Styles section and create a style rule for the body element that displays the element as a grid with two columns in the proportion of $2$:$1($using fr units$)$ with a column grid gap of $20$ pixels.

$9$

Create a style rule for the header and footer elements that has both elements span the grid from the gridline number $1$ to gridline number $1.$

$10$

Create a style rule for the section element with the id $$sub$$ that displays that element as a grid consisting of three columns of equal width by repeating the column width $1$fr three times.

$11$

Go to the Specials Styles section. In this section, you will create styles for the monthly specials advertised by the company. Create a style rule for all div elements of the specials class that sets the minimum height to $400$ pixels and adds a $1$ pixel dashed outline around the element with a color value of rgb$(71,52,29).$

$12$

Go to the Award Styles section. In this section, you will create styles for the list of awards won by Pandaisia Chocolates. Information boxes for the awards are placed within an aside element. Create a style rule for the aside element that places it using relative positioning, sets its height to $650$ pixels, and automatically displays scrollbars for any overflow content.

$13$

Every information box in the aside element is stored in a div element. Create a style rule that places these elements with absolute positioning and sets their width to $30\%.$

$14$

Position the individual awards within the awardList box by creating style rules for the div elements with id values ranging from award$1$ to award$5$ at the following $($top$,$ left$)$ coordinates: award$1(80$px$,5\%),$ award$2(280$px$,60\%),$ award$3(400$px$,20\%),$ award$4(630$px$,45\%),$ and award$5(750$px$,5\%).($Hint: In the pc$\_$specials.html file, the five awards have been placed in a div element belonging to the awards class with id values ranging from award$1$ to award$5.)$

$15$

Save your changes to the style sheet and then open the pc$\_$specials.html file in your browser. Verify that the layout and design styles resemble the page shown in Figure $383.$body $\{$

width: $95\%$;

min$-$width: $640$px;

max$-$width: $960$px;

margin: auto;

$\}$

$/*$ Image Styles $*/$

img $\{$

display: block;

max$-$width: $100\%$;

height: auto;

$\}$

$/*$ Horizontal Navigation Styles $*/$

nav.horizontal li a$\{$

display: block;

float: left;

width: $16\mathrm{.}66\%$;

$\}$

nav li $>$ a $\{$

display: block;

$\}$

$/*$ Grid Styles $*/$

body $\{$

display: grid;

grid$-$template$-$columns: $2$fr $1$fr;

grid$-$column$-$gap: $20$px;

$\}$

body $>$ header $\{$

grid$-$row: $1$;

grid$-$column: $1/-1$;

$\}$

#sub $\{$

display: grid;

grid$-$template$-$columns: $3$fr $1$fr;

grid$-$template$-$rows: repeat$(1$fr$,3)$;

$\}$

section#sub $\{$

clear: left;

float: left;

padding: $1\mathrm{.}5$em;

width: $33\%$;

$\}$

$/*$ Specials Styles $*/$

div.specials $\{$

min$-$height: $400$px;

outline: $1$px dashed rgb$(71,52,29)$;

$\}$

$/*$ Award Styles $*/$

aside $\{$

position: relative;

height: $650$px;

overflow: auto;

$\}$

div#awardList $\{$

position: relative;

height: $30\%$;

overflow: auto;

$\}$

div#award$1\{$

top: $80$px;

left: $5\%$;

$\}$

div#award$2\{$

top: $280$