Wanted Poster (CSS Task)

wanted-poster-css-taskFor this challenge we will create a Wanted Poster using a range of HTML and CSS skills.

CSS Selectors & CSS Properties

In order to complete this challenge, you need a good understanding of how CSS selectors work. You can learn about CSS selectors on w3schools.com.

css-syntax

To customise the look & feel of your poster using CSS code, you will use different types of selectors such as:

  • TAG
  • .class
  • #id
  • element child-element
  • element child-element:first-child

In this challenge we will use various CSS properties such as:

  • font-family:
  • font-size:
  • color:
  • font-weight:
  • font-style:
  • text-align:
  • padding:
  • margin:
  • background-image:
  • etc.

You can learn more about all these CSS properties on w3schools.com.

CSS Box Model

To understand how margin, borders and padding works you need to understand the CSS Box Model. Click on this picture to find out more:CSS-Box-Model

HTML & CSS Code

To complete this challenge, you will need to edit the code below by clicking on the top-right button “Edit on Codepen”.

See the Pen
WANTED Poster
by 101 Computing (@101Computing)
on CodePen.

Note that this script will use three pictures. In case these are not displaying properly, you may have to replace their URLs, using the following addresses:

Instructions

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:

  1.  Apply a background picture to the BODY of the page. The URL for this picture is: https://i.imgur.com/K6g10BB.jpg
  2.  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:

  1.  Use CSS to resize the poster (<div class=”poster”>…</div>) by resizing this container to 488px wide by 640px high.
  2.  Apply the following background image to this container: https://i.imgur.com/Y9Tiq8a.jpg
  3.  Apply a padding of 20px to the poster.
  4.  All the content should be aligned to the centre.
  5.  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.

  1.  Resize the picture to: 300px wide by 325px high.
  2.  Add a solid border of 2px and dark brown colour: #291200.
  3.  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”).

  1.  The font type should be Ewert (Google font).
  2.  The font colour should be dark brown: #291200.
  3.  The font size should be 44pt.
  4.  This heading should not appear in bold.
  5.  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.

  1.  You should use a combination of the following two google fonts:
    • Ewert
    • Ultra
  2.  All the text should appear in dark brown: #291200.
  3.  All the text should fit on the poster. To do so you will need to update margins and font sizes.
  4.  Different font sizes and weights should be used to make key information standout nicely.
  5.  The description: “Armed and very dangerous” should appear in italic.
  6.  The reward price should have a double underline!
 The final touch to complete this poster is to apply a sepia filter to the mugshot picture.

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

#mugshot {
   filter: sepia(60%);
}

Final Poster Preview

This is what your poster should look like at the end of this task:
wanted-poster-css

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Did you like this challenge?

Click on a star to rate it!

Average rating 4.8 / 5. Vote count: 18

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: