Wanted Poster (CSS Task)

Wooden TexturePaper TextureMugshotWanted!TypographySepia Filter

Your first task is to apply a wooden texture to the whole page. To do so you will need to:

Apply a background picture to the BODY of the page. The URL for this picture is: https://i.imgur.com/K6g10BB.jpg
Apply a 20px padding to the whole page.

View Solution / CSS Code

To do so you will need to add the following code to CSS section of the Codepen:

BODY {
   background-image: url('https://i.imgur.com/K6g10BB.jpg');
   background-repeat: repeat;
   padding: 20px;
}

To create the poster:

Use CSS to resize the poster (<div class=”poster”>…</div>) by resizing this container to 488px wide by 640px high.
Apply the following background image to this container: https://i.imgur.com/Y9Tiq8a.jpg
Apply a padding of 20px to the poster.
All the content should be aligned to the centre.
Using an online CSS shadow generator, add a shadow effect to your poster

View Solution / CSS Code

To do so you will need to add the following code to the CSS section of the Codepen:

.poster {
   width: 480px;
   height: 620px;
   box-sizing: border-box;
   background-image: url('https://i.imgur.com/Y9Tiq8a.jpg');
   background-repeat: no-repeat;
   padding: 20px;
   text-align:center;
   box-shadow: 2px 4px 8px 3px #000000;
}

Then we will customise the mugshot picture of Billy the Kid.

Resize the picture to: 300px wide by 325px high.
Add a solid border of 2px and dark brown colour: #291200.
Add a 10px margin to the picture.

View Solution / CSS Code

To do so you will need to add the following code to the CSS section of the Codepen:

#mugshot {
  width: 300px;
  height: 325px;
  border: 2px solid #291200;
  padding: 10px;
}

Then we will customise the title of the Poster (H1 heading saying “WANTED”).

The font type should be Ewert (Google font).
The font colour should be dark brown: #291200.
The font size should be 44pt.
This heading should not appear in bold.
This heading should not have any margins.

View Solution / CSS Code

To do so you will need to add the following code to the CSS section of the Codepen:

h1 {
  font-family: ewert;
  color: #291200; 
  font-size: 44pt;
  font-weight: normal;
  margin: 0px;
}

To complete your poster change the typography of the different headings, subheadings of the poster.

You should use a combination of the following two google fonts:
- Ewert
- Ultra
All the text should appear in dark brown: #291200.
All the text should fit on the poster. To do so you will need to update margins and font sizes.
Different font sizes and weights should be used to make key information standout nicely.
The description: “Armed and very dangerous” should appear in italic.
The reward price should have a double underline!