M$8$ Exercise $1$ Create a fluid design

In this exercise, you$$ll convert a page so it uses a fluid layout and scalable images. When you$$re done, the page will look as shown below when the width of the browser window is reduced. Estima$1.$ Open the HTML and CSS files that follow and display the page in a browser:

short$\_$exercises$\backslash$town$\_$hall$\backslash$speakers$\backslash$c$07$x$\_$sampson.html

short$\_$exercises$\backslash$town$\_$hall$\backslash$styles$\backslash$c$07$x$\_$speaker.css

$2.$ Reduce the width of the browser window so it$$s less than the width of the page. That way, you$$ll be able to see how the page changes as you convert it to a fluid design.

$3.$ Modify the CSS for the body so it takes up $98\%$ of the browser window and so its maximum width is the current width.

$4.$ Convert the widths of the section, the aside, and the li elements within the navigation menu to percentages.

$5.$ Convert any left or right margins or padding to percentages. $($Hint: If any measurements are specified in ems, you can convert them to pixels by multiplying by $16$ since that$$s the base font size.$)$

$6.$ Make the image in the article scalable so it$$s always $50$ percent of the width of the article.

CSS:

$/*$ the styles for the elements $*/$

$*\{$

margin: $0$;

padding: $0$;

$\}$

html $\{$

background$-$color: white;

$\}$

body $\{$

font$-$family: Arial, Helvetictea, sans$-$d time: $20$ to $30$ minutes.M$8$ Exercise $1$ Make the image in the Create a fluid design

In this exercise, you$$ll convert a page so it uses a fluid layout and scalable images. When you$$re done, the page will look as shown below when the width of the browser window is reduced. Estimated time: $20$ to $30$ minutes.serif;

font$-$size: $100\%$;

width: $850$px;

margin: $0$ auto;

border: $3$px solid #$931420$;

background$-$color: #fffded;

$\}$

a:focus, a:hover $\{$

font$-$style: italic;

$\}$

$/*$ the styles for the header $*/$

header $\{$

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

border$-$bottom: $3$px solid #$931420$;

background$-$image: linear$-$gradient$($

$30$deg, #f$6$bb$730\%,$ #fffded $30\%,$ white $50\%,$ #fffded $80\%,$ #f$6$bb$73100\%)$;

$\}$

header h$2\{$

font$-$size: $175\%$;

color: #$800000$;

$\}$

header h$3\{$

font$-$size: $130\%$;

font$-$style: italic;

$\}$

header img $\{$

float: left;

padding: $030$px;

$\}$

$.$shadow $\{$

text$-$shadow: $2$px $2$px $2$px #$800000$;

$\}$

$/*$ the styles for the main content $*/$

main $\{$

clear: left;

$\}$

$/*$ the styles for the section $*/$

section $\{$

width: $575$px;

float: right;

padding: $020$px $20$px $20$px;

$\}$

section h$1\{$

color: #$800000$;

font$-$size: $150\%$;

padding$-$top: $\mathrm{.}5$em;

margin: $0$;

$\}$

section p $\{$

padding$-$bottom: $\mathrm{.}5$em;

$\}$

article $\{$

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

$\}$

article h$2\{$

font$-$size: $115\%$;

padding: $00\mathrm{.}25$em $0$;

$\}$

article img $\{$

float: right;

margin: $\mathrm{.}5$em $01$em $1$em;

border: $1$px solid black;

$\}$

aside $\{$

width: $215$px;

float: left;

padding: $0020$px $20$px;

$\}$

aside h$2\{$

color: #$800000$;

font$-$size: $130\%$;

padding: $\mathrm{.}6$em $0\mathrm{.}25$em $0$;

$\}$

#nav$\_$list ul $\{$

list$-$style$-$type: none;

$\}$

#nav$\_$list li a $\{$

display: block;

padding: $10$px;

margin$-$bottom: $5$px;

background$-$color: #fffded;

color: black;

text$-$decoration: none;

border: $1$px solid black;

border$-$radius: $5$px;

box$-$shadow: $2$px $2$px $5$px #$800000$;

background$-$image: url$(\text{'}../$images$/$right$.$jpg$\text{'})$;

background$-$repeat: no$-$repeat;

background$-$position: $95\%$ center;

$\}$

#nav$\_$list li a:hover, #nav$\_$list li a:focus $\{$

background$-$color: #cccccc;

color: #$800000$;

$\}$

footer $\{$

background$-$color: #$931420$;

clear: both;

$\}$

footer p $\{$

text$-$align: center;

color: white;

padding: $1$em $0$;

$\}$