Ajax Loader
×
HTML
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Sticky Note</title>
6
</head>
7
<body>
8
  <div id="sticky">
9
    <p contenteditable="true">You can put your notes here on this sticky note.</p>
10
    <a href="#">Download Free PSD</a>
11
  </div>  
12
</body>
13
</html>
 
CSS
@font-face {
1
@font-face {
2
    font-family: 'oregon';
3
    src: url('https://www.cubby.com/p/_e939efc427224b5a87963bf13ab03b3e/Oregon+LDO+DemiBold.ttf');
4
    font-weight: normal;
5
    font-style: normal;
6
 
7
}
8
 
9
 
10
body {
11
  background: #ede3ce url('https://www.cubby.com/p/_c488f81e47b948aebe086308048d8554/bg.png') 0 0 repeat;
12
 
13
}
14
 
15
#sticky {
16
  background: #f0e598 url('https://www.cubby.com/p/_b86b98db653e4291897b90c015ed6da8/bg_paper.png') 0 0 repeat;
17
  position: absolute;
18
  -webkit-box-sizing: border-box;
19
  -moz-box-sizing: border-box;
20
  box-sizing: border-box;
21
  width: 230px;
22
  height: 253px;
23
  top: 50%;
24
  left: 50%;
25
  margin: -126px 0 0 -115px;
26
  -webkit-box-shadow: 0 5px 7px rgba(0,0,0,0.2);
27
  -moz-box-shadow:  0 5px 7px rgba(0,0,0,0.2);
28
  box-shadow:  0 5px 7px rgba(0,0,0,0.2);
29
  padding: 10px;
30
}
31
 
32
#sticky:before {
33
  content: '';
34
  position: absolute;
35
  display: block;
36
  width: 130px;
37
  height: 30px;
38
  background-image: url('https://www.cubby.com/p/_a26c0707472f4aeba6de3680f8106655/tape.png');
39
  top: -15px;
40
  left: 50px;
41
  
42
}
43
 
44
p, a {
45
  font-family: 'oregon', sans-serif;
46
}
47
 
48
p {
49
  text-align: center;
50
  font-size: 24px;
51
}
52
 
53
a {
54
  font-size: 18px;
55
  text-decoration: none;
56
  color: #6b824f;
57
  display: block;
58
  text-align: center;
59
  margin-top: 70px;
60
}
61
 
62
a:hover {
63
  color: #000;
64
}
 

Sticky Note

CSSDeck G+