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.

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

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

gradients

Share Button
Posted in Computer Science, HTML / CSS

Our Latest Book