<div id=”header”>

<div id=”profile”>

<img src=”img/header-image.jpg” alt=“Header Image”>

<div id=”profile-image”>

<img src=”img/profile-icon.png” alt=”Profile icon”>

</div>

by Kenny Wood

</div>

</div>

Note: feel free to replace the profile icon with an actual picture of yourself. Just try to ensure that the image is cropped into a nice square that focuses on your head. A passport-type photo is what we’re aiming for here.

Styling

Now that we have created our HTML for the page, we are going to need to style the page to make it appealing to the user. For this section you are free to experiment with your own colour choices – just try to stick to the same rules as me for the actual layout, other than that, go wild! Our goal here is to create a nice-looking webpage with a fixed header at the top of the page, which will remain at the top regardless of the user’s position on the page, followed by a header image, which is then overlaid with your profile picture (or stock icon) and your name, followed by a content pane with a capped width that will help to ensure readability of our webpage (remember, long line-lengths make things difficult to read). Sounds confusing? Well then, let’s break it down into a few step-by-step sections. Give it a good go yourself, and if you really can’t manage, there’s always the expected code at the end to look through.

Styling the template

Let’s first style the navigation bar and page background.

The steps:

• Let’s start by adding a new file called style.css in our root folder.
• Now add a link to this file in your index.html file.
• Open the style.css file in Sublime Text.
• Write rules to achieve the following desired output per element:
  1. –  body
  2. remove all margins
  3. give it a background colour of ‘#eee’
  4. The font Arial, falling back to Helvetica, then sans-serif
  5. –  #navigation
  6. make this a fixed element
  7. give it a nice and high z-index
  8. position it at the top of the page
  9. make the div the full width of the page
  10. give it a white background
  11. give the top and bottom a padding of 10px
  12. –  #navigation-inside
  13. give it a width of 600px
  14. make it float in the centre of the parent div
  15. –  #navigation-inside ul
  16. give it the full width of the parent div
  17. remove all list styles
  18. centre the text
  19. remove all margins and paddings
  20. –  #navigation-inside li
  21. give it a width of a quarter of its parent
  22. stack the list items side by side
  23. –  a
  24. give all links the colour ‘#333’
  25. remove the underline from all links
  26. make clicked or hovered links turn the colour ‘#1998E2’
  27. –  .active
  28. give it the colour ‘#1998E2’

Expected result: what we should now expect to see is a navigation bar fixed to the top of the page, with equally spaced out menu items with dark grey text, with the home tile coloured blue to indicate that it is the coloured page. The navigation background should be white, and the links should be contained to a maximum width of 600px. On hovering over one of the links, the link should turn blue to indicate that it is a link.

Expected code: