Portfolio Website 2

Part 1: HTML

1. Create an HTML page named index.html

Your HTML index page must contain the following elements:

• A basic, correct HTML page structure, including your document type declaration, head, title, and body sections.
• A header div, containing an H1 header tag
  • This element should have a class selector on it.
  • The content should be your name.
• Add an image of either school logo to your header div.
• A container div that can hold all of your content, with a class name of wrapper.
• A < div> element for your content body.
  • This element must also have a class selector on it
• Two generic block-level elements (div) nested within your content div, both with class selectors.
• One of those < div> elements should contain an image (it doesn't have to be of you, but it should be family-friendly), followed by a short "caption" description contained in p tag of your real or imagined professional goals.
• The other block-level element should contain a second-level header and at least 3 work history entries (real or imagined) in an ordered list. Create these in such a way that you can style each of the 3 entries at the same time. Include:
  • A header of the appropriate level
  • A description of the job
  • And an unordered list of three responsibilities

Part 2: CSS

• Create an external CSS page named "styles.css".
• Attach this CSS file to your HTML index page using a link in the head element.
• Complete the following styling using only class name selectors from your HTML. Do not use ID or element tags.
• Use flexbox, padding, and margins for your layouts. Do not use clears and floats.

Using your CSS stylesheet (inline edits will not be scored):

• Set the background color of your header div in HTML-1 to a dark color and change the text color to a light color.
• Set your header div to take up the entire width of a page, with no edge spacing
  • Ensure all elements are vertically centered within the header block.
  • Your name should be to the left, and your image to the right.
  • Your elements should wrap when your page size changes.
  • Your header should have fifteen pixels of space between it and your content div.
  • When your page is compressed, your elements should center themselves horizontally.
• Set your content div to take up no more than 960px of page width.
• Using your wrapper div, set your content div to always be horizontally centered in the page.
• Using flexbox, display your main content divs next to one another.
• Ensure your image is on top of your caption text, to the left of your roles and responsibilities.
• Make sure that as your page changes size, your elements wrap below one another properly.
• Set your image and caption to take up no more than 1/3 of the flex space, and your roles to take no less than 2/3 of the space.
• Allow your image to take up no more space than the maximum width of your left column.
  • Do not change the size of your school logo picture while doing this.
• Using shorthand, add a solid, one-pixel border to your image.
• Set your image to have rounded corners of 4px.
• Ensure your "Roles" text and name have a different font than your body fonts.
  • Import no more than three weights of a display font from Google Fonts for this.
• Style your work history entries so that they all end up consistent in their appearance.
  • Change your role title so it stands out by adjusting no more than two rules.
• Set your body background to a pale color and highlight the background of your text and image.
• Add a maximum screen size break at 1000 pixels.
• If your display size is less than 1000 pixels...
  • set your container to center content in the page
  • Set your image-and-caption box to form a row
  • Evenly space your image and caption within that row
  • Set a bottom margin on your image and caption to ensure good spacing.