body {

margin: 0px;

background: #eee;

font-family: Arial, Helvetica, sans-serif;

}

#navigation {

position: fixed;

z-index: 9;

top: 0;

left: 0;

width: 100%;

background: white;

padding: 10px 0px;

}

#navigation-inside {

width: 600px;

margin: 0 auto;

}

#navigation-inside ul {

width: 100%;

list-style: none;

text-align: center;

margin: 0px;

padding: 0px;

}

#navigation-inside li {

width: 25%;

float: left;

}

a {

color: #333;

text-decoration: none;

}

a:active, a:hover {

color: #1998E2;

}

.active {

color: #1998E2;

font-weight: bold;

}

Note: some of these concepts we haven’t seen before, such as list-style overriding. Hopefully you were able to search online and find the solution to this issue by yourself. The only way to truly grow as a developer, is to accept that you can’t ever know everything in this constantly evolving field, and that an essential part of becoming a good web developer is knowing how to find and learn ways of overcoming the issues you face with your code.

Styling the header

Let’s now turn our focus to the header section of the page. The goal here is to create a full-width banner image, which is overlaid with a circular profile picture/icon, and your name. Part of this banner will sit underneath the navigation bar, as the navigation bar is fixed over the top of all of our content. This is fine and expected behaviour.

The steps:

Write rules to achieve the following desired output per element:

• #header
  1. –  make the header the full width of the page
  2. –  hide anything that overflows from the div
• #header img
  1. –  give the image a width of 100% of its parent
  2. –  set the height of the image to automatically adjust to preserve the aspect ratio
• #profile
  1. –  give this div a width of 100px
  2. –  set it to be absolutely positioned
  3. –  give it a sensible z-index to show it on top of our content
  4. –  centre the div horizontally
  5. –  set the div to be 60px from the top of its parent element
• #profile-image
  1. –  give this a height and width of 100px
  2. –  using border radius, make this div a circle
  3. –  make the background white
  4. –  hide anything that flows outside of the element
• #profile-image img
  1. –  give this image a width of 100%
  2. –  set the height to automatically adjust
• #profile h2
  1. –  make this text white
  2. –  centre align the text
  3. –  give it a font size of 14px

Expected result: after writing the necessary rules above to satisfy the challenges set, we should end up with a big and wide profile image with our profile icon centred over the top.

Expected code: