# ACIT 1620: Lab 4

1. Create a new Github repository named `acit1620-lab4` with a `README.md` file
2. Clone the repository on your local machine
3. Create a `index.html` file and add markup for a web page with the following structure:
- Set the title to "CSS Transitions and variables"
- Your page content should be placed inside a wrapper `div` element for styling purposes
- Inside this wrapper, your should have the following sections:
- a `header` with an appropriate heading
- a navigation section containing a least 4 links
- two sections, each with a heading and at least 4 paragraphs (Be creative with regard to content)
- a footer section containing the typical copyright phrasing.
- This structure is illustrated below:


5. Create a `styles.css` file and link it to your HTML
6. Save the changes and commit.

## Styling

#### colors (2 points)

We are using a monochromatic color scheme for this lab (i.e. a single base color with variants created by adding darker shades or lighter tints)

- create a global CSS variable for your base color components
- Use this variable wherever you need to create a color variant for your styling.

#### Header (1 point)

- Use the base color as the background of the header section and ensure the text content color had enough contrast.
- The text should be centered
- provide enough padding to give the text enough space to breath

#### Navigation (2 points)

- Items should be arranged horizontally (you should probably use a `flex` container for this).
- Use a different color variant for the text
- Provide enough spacing (not too much) between the items as well as enough padding
- By default, each item has a tiny shadow below it.
- When hovered, the hovered item shoudl appear larger, and the size of the shadow should be increased.
- The transition between these two states should be smooth (i.e. use `transition`)
- An illustration is provided below:


#### Content Sections (2 points)

- Use two different variants of the base color, one for the section heading and another for the section paragraphs
- When hovered, the section should transition to a different state as described below:
- the section's background color should change
- the section's textual content's color should have enough contrast to the background color (i.e if the background is dark, the text color should be light)
- the section padding should be increased to provide sufficient breathing room for the content.
- Entering and exiting this transition should be smooth

- An illustration is given below:


#### Footer (1 point)

- Allow for enough space between the main content and the footer
- Center the text
- Has a visible top border

## Validate your HTML (and optionally your CSS) (2 points)

- Visit W3C Markup Validation tool
- Select the __Validate by Direct Input__ enter paste your HTML into the widget
- Fix any reported errors
- I will validate your submissions, so ensure that everything checks out before submitting

## Submission

- Ensure that you have done everything according to spec
- Save your work, commit and push
- Setup `Github Pages` for your site
- Submit the public link to the Learning Hub