<
# Assignment 3: Style About Me
## Assignment Description
Add some basic styling to your site. You'll practice adding css classes and applying style properties to backgrounds and text. We'll explore complex layouts and styles in following classes.
## Instructions
1. Start by copying your html files and images folder from assignment-2 into assignment-3.
1. Create a new stylesheet file
- Create a blank file. Save as `style.css`
1. For each html page, add a link to the stylesheet
- Add a link tag within the head section:
`<link rel="stylesheet" type="text/css" href="style.css">`
1. Find what each page should look like in the [mockups](mockups/) folder
1. Find the style specifications (specs) in the [specs](specs/) folder
1. Follow the specs to add classes to the html
- `<div>` becomes `<div class="hero">`
1. Follow the specs to style the classes in css
- in style.css:
```
.hero {
background-color: #16445f;
text-align: center;
overflow: auto;
}
```
1. Turn in
- Open a new terminal panel using the menu, `Window > new terminal`
- type in: `./turnin` and hit `enter` to submit your command
- check your live work: `https://{username}.github/web1/assignment-3`
## Requirement Checklist:
- Is there a separate .css file?
- Do all 5 pages look styled with a blue hero background and dark gray sans-serif text?
- Spot check the Home page
- Does the top navigation have a yellow border on hover?
- do the cards have a white background?
- Are the card title links yellow?
- Spot check the search page
- does the placeholder content have a gray background?
- does the placeholder have 20px margin above and below it?
- Spot check the Coffee page for styling:
- doess the `coffee-quote` class exist with the font 30px and dark blue #16445F?
- does the menu have a 4px gray border around it?
- is the text inside the menu left aligned?
]]>