Hello 27partners

This is a mini HTML/CSS challenge, taking you to the next level beyond a classic "Hello world!". You'll be styling a basic page that looks like this:

Where to start

Go to Code Pen, and start a new pen. You'll be writing your HTML and CSS in the labelled boxes at the top, and the finished product should appear down the bottom.

The HTML

You will need the following:

• An h1 tag with the text "Hello 27partners!"
• An img tag linking to the following picture
• An h3 tag with the text "Facts about me"
• A ul tag containing li tags (with the class "fun-fact") for each fun fact about you (minimum of three, because everyone has at least three facts).

The CSS

Your page needs to be styled according to the following rules:

• The entire page (known as the body) needs to have a background color of #FFCB00, and all content needs to be centered using the text-align property. All text needs to be in Helvetica (the closest to the 27partners font I could find)
• The "Hello 27partners!" text needs to have a font size of 60px
• The image needs to have a height of 400px, and a 3px-wide, solid black border
• The fun facts need to be a fun colour of your choosing

Tips

Don't know how to do something? Google it! All good coders google things. For example if you want to find out how to center all the content in the page, search for "how to center the content of a page in CSS". I promise you will find the answer.

Stretch Goals

Finish early? Here are some extra challenges:

• Link your image to 27partners.com, so that the website opens when you click on it
• Make the text all caps using the CSS text-transform property
• Put 2px of spacing in between every character of the text using the CSS letter-spacing property
• Change the colour of the text when you hover over it

(credit to @msmichellegar for inspiring this workshop with her Hello Vogue workshop)