Part $3$: CSS Style Sheet

Edit the CSS style sheet to replace Bootstrap$$s default style to match the chosen client$$s brand style guide, linked in the Supporting Materials section.

Edit the navbar in the CSS style sheet. Include the following details in your work:

Font style: Ensure the new typeface and color align with the brand fonts and color$($s$)$ outlined in the brand style guide.

Open your style.css file. Edit the navigation link and hover styles by adjusting the font family, color, and font$-$size properties for the following class selectors: $.$navlink:link and $.$navlink:hover, for example:

$.$navlink:link $\{$

font$-$family: sans$-$serif;

color: #ff$0000$;

font$-$size: $30$px;

$\}$

$.$navlink:hover $\{$

color: #ffffff;

$\}$

Background color: Update the background color of the navbar to match the colors provided in the brand style guide. Bootstrap includes preset example background color classes within its HTML components. Examples are bg$-$body$-$tertiary, which is light gray, or bg$-$dark, which is dark gray.

Add a custom background color to match your brand$$s style by replacing the preset class with your own custom class. First, delete bg$-$body$-$tertiary $($or any preset class your navbar included$)$ and replace it with bg$-$custom. Then, style the $.$bg$-$custom class selector in your style.css file using the background$-$color property, for example:

$.$bg$-$custom $\{$

background$-$color: #$5591$F$4$;

$\}$

If you change a class within the header or footer of your HTML file, make sure to change it in all of your HTML files.

$($Optional$)$ Logo size: Adjust the size of the logo so that it fits in the navbar properly.

Assign a custom class to your logo$$s img tag. Go to the navbar component code in your index.html file and find the navbar$-$brand class. After the alt tag in your logo$$s img link, add your custom class by typing class$=$logo$($for example, $).$

Style the $.$logo class selector in your style.css file using the width property. Assign a percentage value to adjust the size of the logo$,$ for example:

logo $\{$

width: $50\%$;

$\}$

If you add a class to one of your HTML files in the header or footer, make sure to update it in all of your HTML files.

Edit the footer in the CSS style sheet. Include the following details in your work:

Font style: Ensure the new typeface and color align with the brand fonts and color$($s$)$ outlined in the brand style guide.

Adjust the properties of the font selector for the text you wish to change $($h$5,$ h$6,$ p$,$ etc.$),$ for example:

h$5\{$

color: #$5591$f$4$;

font$-$size: $35$px;

font$-$family: serif;

$\}$

Background color: Update the background color of the navbar to match the colors provided in the brand style guide.

Adjust the background$-$color property of the footer selector, for example:

footer $\{$

background$-$color: #dd$6925$;

$\}$

$($Optional$)$ Social media icon size and color: Update the size and color of the social media icons to match the brand style guide and wireframes.

Adjust the color, font$-$size, and margin properties of the Bootstrap icon$$s $.$bi class selector, for example:

$.$bi $\{$

color: #$5591$f$4$;

font$-$size: $25$px;

margin$-$right: $10$px;

margin$-$left: $10$px;

$\}$