#header {

width: 100%;

overflow: hidden;

}

#header img {

width: 100%;

height: auto;

}

#profile {

width: 100px;

position: absolute;

z-index: 1;

left: 50%;

margin-left: -50px;

top: 60px;

}

#profile-image {

width: 100px;

height: 100px;

border-radius: 50px;

background: white;

overflow: hidden;

}

#profile-image img {

width: 100%;

height: auto;

}

#profile h2 {

color: white;

text-align: center;

font-size: 14px;

}

Note: this section introduced another new concept for you to understand – making circle divs, and centring divs inside a parent. Hopefully again you were able to decipher the solution yourself, but don’t worry if you didn’t. These are beyond the realm of a beginner, and are entering the territory of a more intermediate developer. If you did manage to find the solution yourself, fantastic, you are already starting to grow as a developer. One last short section left to style now – the actual content.

Styling the content

This section is not easy and it will test your skills and patience. Keep it up, you’re doing great! Now let’s finish off our homepage by styling the final part – the content. We’re going to keep this simple for now, and simply style the section with a clean white background with dark grey text and a blue headline. White backgrounds are always ideal when dealing with large amounts of text. The clean and high contrast of pairing it with a dark grey allows for increased readability and really helps to reduce eye strain. We always want to ensure nice contrasts between our backgrounds and our text to ensure we maintain a high level of usability. The reason we have opted for dark grey over black text is simple. Black text is actually too much contrast, and proves hard on the eyes. Generally you will want to opt for a dark grey where possible for text as it provides a nice balance between legibility and contrast. Now, let’s style this up.

The steps:

Write rules to achieve the following desired output per element:

• #introduction
  1. –  give this element a width of 600px
  2. –  apply a padding all around the element of 20px
  3. –  apply a white background
  4. –  set a solid border around the box of 1px width and make it the colour ‘#ccc’
  5. –  give the element a margin at the top and bottom of 20px and left and right as automatic
  6. –  give the element rounded corners of 10px radius
• h1
  1. –  apply the colour ‘#1998E2’
  2. –  give it a font size of 22px
  3. –  align the text in the centre
• p
  1. –  give it a colour of ‘#777’
  2. –  set the font size to 18px
  3. –  set the line height to 26px

Expected result: once we have written in these rules, we should find that our webpage looks completed, with a nicely centred content element with a larger blue title followed by dark grey text. The entire block should have nicely rounded corners and a border around the lot. The box should also be nicely padded at the edges to improve readability of the text and allow the content to breathe.

Expected code: