Post-it notes

In this example below you will see how to do a Post-it notes with some HTML / CSS and Javascript

Use HTML and CSS to create a post-it note to add on your webpage.

Thumbnail
This awesome code was written by 101Computing, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 101Computing ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Post-it notes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="postit">
  <div id="message">
  Look at this CSS code to see how you could add your own Post-It notes to your webpages.
  <div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/101Computing/post-it-notes-xtAco */
#postit { 
  display: block;
  width: 300px;
  height: 300px;
  background-image: url('http://www.101computing.net/wp/wp-content/uploads/post-it.jpg');
 }

#message {
  text-align: center;
  padding: 70px 50px 50px 50px;
  color: #C40808;
  font-family: Trebuchet MS;
  font-size: 20px;
}

Comments