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:CSS-Box-Model

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:
01234 567 890

mobile-phone /wp/wp-content/uploads/mobile-phone.jpg – (157 x 294)
laptop /wp/wp-content/uploads/laptop.jpg – (424 x 221)
tablet /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.



Did you like this challenge?

Click on a star to rate it!

Average rating 4.2 / 5. Vote count: 5

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

As you found this challenge interesting...

Follow us on social media!