For 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.
To customise the look & feel of your poster using CSS code, you will use different types of selectors such as:
- element child-element
- element child-element:first-child
In this challenge we will use various CSS properties such as:
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:
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”.
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:
- Mugshot Image: https://www.101computing.net/wp/wp-content/uploads/mugshot.png
- Wood Texture: https://www.101computing.net/wp/wp-content/uploads/wood.jpg
- Parchment Texture: https://www.101computing.net/wp/wp-content/uploads/parchment.jpg
- 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.
- 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
- 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.
- 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.
- You should use a combination of the following two google fonts:
- 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!
Final Poster Preview
This is what your poster should look like at the end of this task: