odin-default-css-exercises/flex/06-flex-layout/README.md

# An entire page!

Flexbox is useful for laying out entire pages as well as the smaller components we've already been working with. For this exercise, we're leaving you with a little more work to do, with some things you may not have encountered yet. It's perfectly acceptable to google things you're unsure of!

### Hints
- You may want to search something like `CSS remove list bullets`.  We've done this for you in previous examples, but not here. Yay learning.
- Finding out how to style links in CSS might help you get rid of that pesky underline decoration...
- We've added `height: 100vh` to the `body`... this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column.

## Desired Outcome
![desired outcome](./desired-outcome.png)

### Self Check

- The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.
- The header and footer have padding.
- The links in the header and footer are pushed to either side.
- There is space between the links in the header and footer.
- The footer has a light gray background (`#eeeeee`).
- The logo, input and buttons are centered in the screen.
- The buttons have an appropriate amount of padding.
- There is space between the logo, input and buttons.
add layout 2021-08-23 21:24:45 +00:00			`# An entire page!`

			`Flexbox is useful for laying out entire pages as well as the smaller components we've already been working with. For this exercise, we're leaving you with a little more work to do, with some things you may not have encountered yet. It's perfectly acceptable to google things you're unsure of!`

			`### Hints`
Fix punctuation and grammar in Flex READMEs 2021-10-04 17:19:36 +00:00			- You may want to search something like `CSS remove list bullets`. We've done this for you in previous examples, but not here. Yay learning.
Change wording from underscore to underline Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> 2022-01-22 15:38:54 +00:00			`- Finding out how to style links in CSS might help you get rid of that pesky underline decoration...`
Fix punctuation and grammar in Flex READMEs 2021-10-04 17:19:36 +00:00			- We've added `height: 100vh` to the `body`... this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column.
add layout 2021-08-23 21:24:45 +00:00
			`## Desired Outcome`
			`![desired outcome](./desired-outcome.png)`

			`### Self Check`

Fix punctuation and grammar in Flex READMEs 2021-10-04 17:19:36 +00:00			`- The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.`
			`- The header and footer have padding.`
			`- The links in the header and footer are pushed to either side.`
add layout 2021-08-23 21:24:45 +00:00			`- There is space between the links in the header and footer.`
Fix punctuation and grammar in Flex READMEs 2021-10-04 17:19:36 +00:00			- The footer has a light gray background (`#eeeeee`).
			`- The logo, input and buttons are centered in the screen.`
			`- The buttons have an appropriate amount of padding.`
add layout 2021-08-23 21:24:45 +00:00			`- There is space between the logo, input and buttons.`