Lab: Functional Components

Part 1: A little review

1. Make your CSS links have space between them so they aren't all clumped together

You can do this any way you'd like. (margin, padding, containers, flexbox, grid, etc.)

2. Choose for 4 colors that you like. Find a hex code or built-in color name for each.

Use the 4 colors from for the following

• link color
• link hover
• link visited
• link visited hover

3. Remove the underline from the links

Part 2: Functional Components

HomeContent is a functional component, with a prop that's already been done for you as an example. It is incuded in the Home component, which now serves as a "container" for other components.

1. Change "YOURNAMEHERE" on the Home page to your own name!

2. Add another functional component on the home page. It should include an image of your choice and a caption. Call this component HomeImage.

You can use placekitten or fillmurray if you don't have an image you'd like to display.

3. Create another functional component for the Home page called HomePitch. It should be located below the HomeImage.

It should include:

• An <h3> tag that says "So why should you hire me?"
• some text about yourself

Note: Home component now contains three functional components as children.

4. Create a functional component called ContactDetails

This component should have links the following:

• your email
• your resume
• your linked in
• your github

BONUS 1: Find Icons for LinkedIn, Email, Resume, and Github.

BONUS 2: On hover of any icon, have the icon change color with your CSS.

BONUS 3: Organize your functional components for the Home page into a folder within src/.

Note: This will include changing how you link to them in the import statements!