-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 9.94 KB
/
index.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>10k Apart by Owen Greenaway</title><style>html{padding:0;margin:0;height:100%;width:100%}body{position:relative;padding:0;margin:0 auto;height:100%;max-height:100vmin;width:100%;width:100vmin}div{width:20%;height:20%;position:absolute;opacity:0;z-index:1}span{width:14%;height:14%;position:absolute;opacity:0.1;transition:all 0.3s linear;border-radius:100%}#b00,#o00{top:0%;left:0%;background:#bf4040}#b10,#o10{top:20%;left:0%;background:#a6bf40}#b20,#o20{top:40%;left:0%;background:#40bf73}#b30,#o30{top:60%;left:0%;background:#4073bf}#b40,#o40{top:80%;left:0%;background:#a640bf}#b01,#o01{top:0%;left:20%;background:#c33}#b11,#o11{top:20%;left:20%;background:#adcc33}#b21,#o21{top:40%;left:20%;background:#33cc70}#b31,#o31{top:60%;left:20%;background:#3370cc}#b41,#o41{top:80%;left:20%;background:#ad33cc}#b02,#o02{top:0%;left:40%;background:#d92626}#b12,#o12{top:20%;left:40%;background:#b5d926}#b22,#o22{top:40%;left:40%;background:#26d96e}#b32,#o32{top:60%;left:40%;background:#266ed9}#b42,#o42{top:80%;left:40%;background:#b526d9}#b03,#o03{top:0%;left:60%;background:#e61a1a}#b13,#o13{top:20%;left:60%;background:#bde61a}#b23,#o23{top:40%;left:60%;background:#1ae66b}#b33,#o33{top:60%;left:60%;background:#1a6be6}#b43,#o43{top:80%;left:60%;background:#bd1ae6}#b04,#o04{top:0%;left:80%;background:#f20d0d}#b14,#o14{top:20%;left:80%;background:#c4f20d}#b24,#o24{top:40%;left:80%;background:#0df269}#b34,#o34{top:60%;left:80%;background:#0d69f2}#b44,#o44{top:80%;left:80%;background:#c40df2}#o00:hover ~ #b00{opacity:1}#o00:hover ~ #b10{opacity:0.6;top:17%;left:0%}#o00:hover ~ #b01{opacity:0.6;top:0%;left:17%}#o00:hover ~ #b11{opacity:0.4;top:18%;left:18%}#o10:hover ~ #b00{opacity:0.6;top:3%;left:0%}#o10:hover ~ #b10{opacity:1}#o10:hover ~ #b20{opacity:0.6;top:37%;left:0%}#o10:hover ~ #b01{opacity:0.4;top:2%;left:18%}#o10:hover ~ #b11{opacity:0.6;top:20%;left:17%}#o10:hover ~ #b21{opacity:0.4;top:38%;left:18%}#o20:hover ~ #b10{opacity:0.6;top:23%;left:0%}#o20:hover ~ #b20{opacity:1}#o20:hover ~ #b30{opacity:0.6;top:57%;left:0%}#o20:hover ~ #b11{opacity:0.4;top:22%;left:18%}#o20:hover ~ #b21{opacity:0.6;top:40%;left:17%}#o20:hover ~ #b31{opacity:0.4;top:58%;left:18%}#o30:hover ~ #b20{opacity:0.6;top:43%;left:0%}#o30:hover ~ #b30{opacity:1}#o30:hover ~ #b40{opacity:0.6;top:77%;left:0%}#o30:hover ~ #b21{opacity:0.4;top:42%;left:18%}#o30:hover ~ #b31{opacity:0.6;top:60%;left:17%}#o30:hover ~ #b41{opacity:0.4;top:78%;left:18%}#o40:hover ~ #b30{opacity:0.6;top:63%;left:0%}#o40:hover ~ #b40{opacity:1}#o40:hover ~ #b31{opacity:0.4;top:62%;left:18%}#o40:hover ~ #b41{opacity:0.6;top:80%;left:17%}#o01:hover ~ #b00{opacity:0.6;top:0%;left:3%}#o01:hover ~ #b10{opacity:0.4;top:18%;left:2%}#o01:hover ~ #b01{opacity:1}#o01:hover ~ #b11{opacity:0.6;top:17%;left:20%}#o01:hover ~ #b02{opacity:0.6;top:0%;left:37%}#o01:hover ~ #b12{opacity:0.4;top:18%;left:38%}#o11:hover ~ #b00{opacity:0.4;top:2%;left:2%}#o11:hover ~ #b10{opacity:0.6;top:20%;left:3%}#o11:hover ~ #b20{opacity:0.4;top:38%;left:2%}#o11:hover ~ #b01{opacity:0.6;top:3%;left:20%}#o11:hover ~ #b11{opacity:1}#o11:hover ~ #b21{opacity:0.6;top:37%;left:20%}#o11:hover ~ #b02{opacity:0.4;top:2%;left:38%}#o11:hover ~ #b12{opacity:0.6;top:20%;left:37%}#o11:hover ~ #b22{opacity:0.4;top:38%;left:38%}#o21:hover ~ #b10{opacity:0.4;top:22%;left:2%}#o21:hover ~ #b20{opacity:0.6;top:40%;left:3%}#o21:hover ~ #b30{opacity:0.4;top:58%;left:2%}#o21:hover ~ #b11{opacity:0.6;top:23%;left:20%}#o21:hover ~ #b21{opacity:1}#o21:hover ~ #b31{opacity:0.6;top:57%;left:20%}#o21:hover ~ #b12{opacity:0.4;top:22%;left:38%}#o21:hover ~ #b22{opacity:0.6;top:40%;left:37%}#o21:hover ~ #b32{opacity:0.4;top:58%;left:38%}#o31:hover ~ #b20{opacity:0.4;top:42%;left:2%}#o31:hover ~ #b30{opacity:0.6;top:60%;left:3%}#o31:hover ~ #b40{opacity:0.4;top:78%;left:2%}#o31:hover ~ #b21{opacity:0.6;top:43%;left:20%}#o31:hover ~ #b31{opacity:1}#o31:hover ~ #b41{opacity:0.6;top:77%;left:20%}#o31:hover ~ #b22{opacity:0.4;top:42%;left:38%}#o31:hover ~ #b32{opacity:0.6;top:60%;left:37%}#o31:hover ~ #b42{opacity:0.4;top:78%;left:38%}#o41:hover ~ #b30{opacity:0.4;top:62%;left:2%}#o41:hover ~ #b40{opacity:0.6;top:80%;left:3%}#o41:hover ~ #b31{opacity:0.6;top:63%;left:20%}#o41:hover ~ #b41{opacity:1}#o41:hover ~ #b32{opacity:0.4;top:62%;left:38%}#o41:hover ~ #b42{opacity:0.6;top:80%;left:37%}#o02:hover ~ #b01{opacity:0.6;top:0%;left:23%}#o02:hover ~ #b11{opacity:0.4;top:18%;left:22%}#o02:hover ~ #b02{opacity:1}#o02:hover ~ #b12{opacity:0.6;top:17%;left:40%}#o02:hover ~ #b03{opacity:0.6;top:0%;left:57%}#o02:hover ~ #b13{opacity:0.4;top:18%;left:58%}#o12:hover ~ #b01{opacity:0.4;top:2%;left:22%}#o12:hover ~ #b11{opacity:0.6;top:20%;left:23%}#o12:hover ~ #b21{opacity:0.4;top:38%;left:22%}#o12:hover ~ #b02{opacity:0.6;top:3%;left:40%}#o12:hover ~ #b12{opacity:1}#o12:hover ~ #b22{opacity:0.6;top:37%;left:40%}#o12:hover ~ #b03{opacity:0.4;top:2%;left:58%}#o12:hover ~ #b13{opacity:0.6;top:20%;left:57%}#o12:hover ~ #b23{opacity:0.4;top:38%;left:58%}#o22:hover ~ #b11{opacity:0.4;top:22%;left:22%}#o22:hover ~ #b21{opacity:0.6;top:40%;left:23%}#o22:hover ~ #b31{opacity:0.4;top:58%;left:22%}#o22:hover ~ #b12{opacity:0.6;top:23%;left:40%}#o22:hover ~ #b22{opacity:1}#o22:hover ~ #b32{opacity:0.6;top:57%;left:40%}#o22:hover ~ #b13{opacity:0.4;top:22%;left:58%}#o22:hover ~ #b23{opacity:0.6;top:40%;left:57%}#o22:hover ~ #b33{opacity:0.4;top:58%;left:58%}#o32:hover ~ #b21{opacity:0.4;top:42%;left:22%}#o32:hover ~ #b31{opacity:0.6;top:60%;left:23%}#o32:hover ~ #b41{opacity:0.4;top:78%;left:22%}#o32:hover ~ #b22{opacity:0.6;top:43%;left:40%}#o32:hover ~ #b32{opacity:1}#o32:hover ~ #b42{opacity:0.6;top:77%;left:40%}#o32:hover ~ #b23{opacity:0.4;top:42%;left:58%}#o32:hover ~ #b33{opacity:0.6;top:60%;left:57%}#o32:hover ~ #b43{opacity:0.4;top:78%;left:58%}#o42:hover ~ #b31{opacity:0.4;top:62%;left:22%}#o42:hover ~ #b41{opacity:0.6;top:80%;left:23%}#o42:hover ~ #b32{opacity:0.6;top:63%;left:40%}#o42:hover ~ #b42{opacity:1}#o42:hover ~ #b33{opacity:0.4;top:62%;left:58%}#o42:hover ~ #b43{opacity:0.6;top:80%;left:57%}#o03:hover ~ #b02{opacity:0.6;top:0%;left:43%}#o03:hover ~ #b12{opacity:0.4;top:18%;left:42%}#o03:hover ~ #b03{opacity:1}#o03:hover ~ #b13{opacity:0.6;top:17%;left:60%}#o03:hover ~ #b04{opacity:0.6;top:0%;left:77%}#o03:hover ~ #b14{opacity:0.4;top:18%;left:78%}#o13:hover ~ #b02{opacity:0.4;top:2%;left:42%}#o13:hover ~ #b12{opacity:0.6;top:20%;left:43%}#o13:hover ~ #b22{opacity:0.4;top:38%;left:42%}#o13:hover ~ #b03{opacity:0.6;top:3%;left:60%}#o13:hover ~ #b13{opacity:1}#o13:hover ~ #b23{opacity:0.6;top:37%;left:60%}#o13:hover ~ #b04{opacity:0.4;top:2%;left:78%}#o13:hover ~ #b14{opacity:0.6;top:20%;left:77%}#o13:hover ~ #b24{opacity:0.4;top:38%;left:78%}#o23:hover ~ #b12{opacity:0.4;top:22%;left:42%}#o23:hover ~ #b22{opacity:0.6;top:40%;left:43%}#o23:hover ~ #b32{opacity:0.4;top:58%;left:42%}#o23:hover ~ #b13{opacity:0.6;top:23%;left:60%}#o23:hover ~ #b23{opacity:1}#o23:hover ~ #b33{opacity:0.6;top:57%;left:60%}#o23:hover ~ #b14{opacity:0.4;top:22%;left:78%}#o23:hover ~ #b24{opacity:0.6;top:40%;left:77%}#o23:hover ~ #b34{opacity:0.4;top:58%;left:78%}#o33:hover ~ #b22{opacity:0.4;top:42%;left:42%}#o33:hover ~ #b32{opacity:0.6;top:60%;left:43%}#o33:hover ~ #b42{opacity:0.4;top:78%;left:42%}#o33:hover ~ #b23{opacity:0.6;top:43%;left:60%}#o33:hover ~ #b33{opacity:1}#o33:hover ~ #b43{opacity:0.6;top:77%;left:60%}#o33:hover ~ #b24{opacity:0.4;top:42%;left:78%}#o33:hover ~ #b34{opacity:0.6;top:60%;left:77%}#o33:hover ~ #b44{opacity:0.4;top:78%;left:78%}#o43:hover ~ #b32{opacity:0.4;top:62%;left:42%}#o43:hover ~ #b42{opacity:0.6;top:80%;left:43%}#o43:hover ~ #b33{opacity:0.6;top:63%;left:60%}#o43:hover ~ #b43{opacity:1}#o43:hover ~ #b34{opacity:0.4;top:62%;left:78%}#o43:hover ~ #b44{opacity:0.6;top:80%;left:77%}#o04:hover ~ #b03{opacity:0.6;top:0%;left:63%}#o04:hover ~ #b13{opacity:0.4;top:18%;left:62%}#o04:hover ~ #b04{opacity:1}#o04:hover ~ #b14{opacity:0.6;top:17%;left:80%}#o14:hover ~ #b03{opacity:0.4;top:2%;left:62%}#o14:hover ~ #b13{opacity:0.6;top:20%;left:63%}#o14:hover ~ #b23{opacity:0.4;top:38%;left:62%}#o14:hover ~ #b04{opacity:0.6;top:3%;left:80%}#o14:hover ~ #b14{opacity:1}#o14:hover ~ #b24{opacity:0.6;top:37%;left:80%}#o24:hover ~ #b13{opacity:0.4;top:22%;left:62%}#o24:hover ~ #b23{opacity:0.6;top:40%;left:63%}#o24:hover ~ #b33{opacity:0.4;top:58%;left:62%}#o24:hover ~ #b14{opacity:0.6;top:23%;left:80%}#o24:hover ~ #b24{opacity:1}#o24:hover ~ #b34{opacity:0.6;top:57%;left:80%}#o34:hover ~ #b23{opacity:0.4;top:42%;left:62%}#o34:hover ~ #b33{opacity:0.6;top:60%;left:63%}#o34:hover ~ #b43{opacity:0.4;top:78%;left:62%}#o34:hover ~ #b24{opacity:0.6;top:43%;left:80%}#o34:hover ~ #b34{opacity:1}#o34:hover ~ #b44{opacity:0.6;top:77%;left:80%}#o44:hover ~ #b33{opacity:0.4;top:62%;left:62%}#o44:hover ~ #b43{opacity:0.6;top:80%;left:63%}#o44:hover ~ #b34{opacity:0.6;top:63%;left:80%}#o44:hover ~ #b44{opacity:1}</style></head><body><div id="o00"></div><div id="o10"></div><div id="o20"></div><div id="o30"></div><div id="o40"></div><div id="o01"></div><div id="o11"></div><div id="o21"></div><div id="o31"></div><div id="o41"></div><div id="o02"></div><div id="o12"></div><div id="o22"></div><div id="o32"></div><div id="o42"></div><div id="o03"></div><div id="o13"></div><div id="o23"></div><div id="o33"></div><div id="o43"></div><div id="o04"></div><div id="o14"></div><div id="o24"></div><div id="o34"></div><div id="o44"></div><span id="b00"></span><span id="b10"></span><span id="b20"></span><span id="b30"></span><span id="b40"></span><span id="b01"></span><span id="b11"></span><span id="b21"></span><span id="b31"></span><span id="b41"></span><span id="b02"></span><span id="b12"></span><span id="b22"></span><span id="b32"></span><span id="b42"></span><span id="b03"></span><span id="b13"></span><span id="b23"></span><span id="b33"></span><span id="b43"></span><span id="b04"></span><span id="b14"></span><span id="b24"></span><span id="b34"></span><span id="b44"></span></body></html>