Create Post-It Notes using CSS

Familiarise yourself with CSS to see how CSS code can help you format and combine text and graphics effectively.

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:

Post-It Note

Look at this script to create a post-it note.

You could use this code for your own webpages.

See the Pen Post-it notes by 101 Computing (@101Computing) on CodePen.

Your Challenge

Use any of the pictures below to add the following text on the selected screen:

Call Us Now:
on
01234 567 890

	/wp/wp-content/uploads/mobile-phone.jpg – (157 x 294)
	/wp/wp-content/uploads/laptop.jpg – (424 x 221)
	/wp/wp-content/uploads/tablet.jpg – (299 – 220)

Extension Task:

Change the background of your screen using a gradient. To do so you can use this CSS gradient generator.