-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbla.html
154 lines (139 loc) · 4.38 KB
/
bla.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<link href="http://fonts.googleapis.com/css?family=The+Girl+Next+Door" rel="stylesheet" type="text/css">
<style>
div#frame {
background: url(https://geeksretreat.files.wordpress.com/2013/09/cork-board.png) no-repeat;
width: 800px;
height: 600px;
padding-top: 35px;
padding-left: 35px;
}
.note {
width: 160px;
height: 160px;
box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
float: left;
margin: 8px;
border: 1px solid rgba(0,0,0,.25);
}
.sticky0 {
transform: rotate(-3.5deg);
-webkit-transform: rotate(-3.5deg);
-moz-transform: rotate(-3.5deg);
background-color: white;
}
.sticky1 {
transform: rotate(-3.5deg);
-webkit-transform: rotate(-3.5deg);
-moz-transform: rotate(-3.5deg);
background-color: #CBFAFA;
}
.sticky2 {
transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
background-color: #FFF780;
}
.sticky3 {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
background-color: #F8CDCD;
}
.sticky4 {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
background-color: #F8CDCD;
}
.sticky5 {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
background-color: #ffffff;
}
.pin {
border-radius: 50%;
width: 20px;
height: 20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.55);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.55);
box-shadow: 0 3px 6px rgba(0,0,0,.55);
margin: 0 auto;
margin-top: 2px;
}
div#frame a:nth-child(1n) .pin {
background-image: -moz-radial-gradient(35px 35px 35deg, circle cover, red 50%, black 100%);
background-image: -webkit-radial-gradient(35px 35px, circle cover, red, black);
background-image: radial-gradient(red 50%, black 100%);
}
div#frame a:nth-child(6n) .pin {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, orange 50%, black 100%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(orange 50%, black 100%);
}
div#frame a:nth-child(3n) .pin {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 50%, black 100%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, black);
background-image: radial-gradient(yellow 50%, black 100%);
}
div#frame a:nth-child(5n+3) .pin,
div#frame a:last-child .pin {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, blue 50%, white 100%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, blue, white);
background-image: radial-gradient(blue 50%, white 100%);
}
.text {
margin: 10px;
font-family: 'The Girl Next Door', cursive;
}
div#frame a:hover.note {
border: 1px solid rgba(0,0,0,.75);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<center>
<h1>Goalz</h1>
</center>
<center>
<body>
<div id='frame'>
<a class="note sticky1">
<div class='pin'></div>
<div class='text'>I want to lose 10 pounds.</div>
</a>
<a class="note sticky2">
<div class='pin'></div>
<div class='text'>I want to get an A on my next Math test.</div>
</a>
<a class="note sticky1">
<div class='pin'></div>
<div class='text'>I want to get a girlfriend.</div>
</a>
<a class="note sticky3">
<div class='pin'></div>
<div class='text'>I want to eat healthier.</div>
</a>
<a class="note sticky4">
<div class='pin'></div>
<div class='text'>I want to improve my essay writing skills.</div>
</a>
<a class="note sticky3">
<div class='pin'></div>
<div class='text'>I want to date Emily. -Nate </div>
</a>
<a class="note sticky1">
<div class='pin'></div>
<div class='text'>I want to buy a car with my own money.</div>
</a>
<a class="note sticky3">
<div class='pin'></div>
<div class='text'>I want to win at Los Altos Hacks.</div>
</a>
</div>
</body>
</center>