-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (129 loc) · 10.1 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Where I live</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<style>
@font-face{font-family:'Karla';src:url("fonts/kr.woff2") format("woff2")}*{margin:0;padding:0}body{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAOklEQVQYV2O8+fbNfwYkoCYkzHDr3VtkITCbEVkhTBE2xXCF6JLofLBCXNYhizP+BwJsboI5EqQYBABmuirG1SCi+AAAAABJRU5ErkJggg==");font-family:'Karla', sans-serif;font-weight:400;overflow-x:hidden}h1{float:left;font-size:30px;color:#1a1a1a;font-weight:normal;padding-right:10px;line-height:32px}#open-menu{position:fixed;z-index:2;top:30px;right:40px;font-size:30px;color:#1a1a1a;line-height:35px;padding:20px 60px 20px 20px;text-align:right;transition:color 0.3s ease-out;border:3px solid transparent}#open-menu:focus #arrow,#open-menu:hover #arrow{fill:blue}#open-menu:focus #territories li,#open-menu:hover #territories li{border-bottom:3px solid blue}#open-menu:focus,#open-menu:hover{color:blue}#open-menu #territories{float:right;list-style-type:none;position:relative}#open-menu #territories li{display:none;width:100%;padding-bottom:1px;transition:border 0.3s ease-out;border-bottom:3px solid #1a1a1a}#open-menu #arrow{transition:fill 0.3s ease-out;fill:#1a1a1a;position:absolute;right:20px;top:29px;-webkit-animation:2s 3 bounce;animation:2s 3 bounce}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-15px)}}#br:target #br-a{display:block}#bi:target #bi-a{display:block}#uk:target #uk-a{display:block}#gb:target #gb-a{display:block}#menu{list-style:none;display:none;width:100%;height:100%;z-index:2;background-color:rgba(244,240,240,0.8);position:absolute}#menu li a{transition:color 0.2s ease-out;text-decoration:none;color:#1a1a1a;display:block;padding:15px 30px;text-align:center;font-size:35px;border:2px solid rgba(244,240,240,0.8)}#menu li a:hover{color:blue}#menu li a:focus{color:blue;border:2px solid blue}#menu ul{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center;list-style-type:none}#menu ul ul{display:none}#menu:target{display:block}#england:target #en{fill:#54E7A1;-webkit-animation:draw 1.5s ease-in-out forwards;animation:draw 1.5s ease-in-out forwards}#england:target #en-a{display:block}text{font-size:18px;fill:#1a1a1a;font-family:monospace;font-weight:normal}#map{z-index:1;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:1;height:95vh}#map svg{height:100%;width:auto}#ci,#en,#im,#ni,#ri,#sc,#wa{fill:#fff;stroke-width:2;stroke:#4bb884;stroke-dasharray:1900;stroke-dashoffset:1900}#bi:target #ci,#bi:target #en,#bi:target #im,#bi:target #ni,#bi:target #ri,#bi:target #sc,#bi:target #wa{transition:fill 1s ease-in-out;fill:#54E7A1;-webkit-animation:draw 1.5s ease-in-out forwards;animation:draw 1.5s ease-in-out forwards}#uk:target #en,#uk:target #ni,#uk:target #sc,#uk:target #wa{transition:fill 1s ease-in-out;fill:#54E7A1;-webkit-animation:draw 1.5s ease-in-out forwards;animation:draw 1.5s ease-in-out forwards}#gb:target #en,#gb:target #sc,#gb:target #wa{transition:fill 1s ease-in-out;fill:#54E7A1;-webkit-animation:draw 1.5s ease-in-out forwards;animation:draw 1.5s ease-in-out forwards}#br:target #en,#br:target #wa{transition:fill 1s ease-in-out;fill:#54E7A1;-webkit-animation:draw 1.5s ease-in-out forwards;animation:draw 1.5s ease-in-out forwards}@-webkit-keyframes draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}@keyframes draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}#br-h,#gb-h{display:none}#br:target #br-h{display:block}#en:target #en-h,#gb:target #gb-h{display:block}@-webkit-keyframes wave{to{stroke-dashoffset:0}}@keyframes wave{to{stroke-dashoffset:0}}@media screen and (max-width: 960px){h1{display:none}#open-menu{top:0;right:0px;font-size:25px}h1{font-size:25px;line-height:28px}text{font-size:31px}#map{height:80vh;margin-top:24px}}@media screen and (max-width: 660px){#territories li{padding-bottom:0px}}
</style>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="countries">
<div id="bi">
<div id="uk">
<div id="gb">
<div id="br">
<div id="england">
<a id="open-menu" href="#menu">
<h1>I live in</h1>
<ul id="territories">
<li id="en-a">England</li>
<li id="br-a">Britain </li>
<li id="gb-a">Great Britain</li>
<li id="uk-a">The United Kingdom</li>
<li id="bi-a">The British Isles</li>
</ul>
<svg id="arrow" width="23.5" height="15" viewBox="0 0 23.5 15" fill="#fff">
<path d="m11.9 14.5c3.7-3.9 7.4-7.7 11.1-11.6 1.5-1.5-.9-3.9-2.3-2.3-3.7 3.8-7.4 7.7-11.1 11.6-1.5 1.5.9 3.8 2.3 2.3" />
<path d="m11.7 12.1c-3-3.8-6-7.7-9-11.5-1.3-1.7-3.6.7-2.3 2.3 3 3.8 6 7.7 9 11.5 1.3 1.7 3.6-.6 2.3-2.3" />
</svg>
</a>
<nav id="menu">
<ul>
<li><a id="en-go" href="#england">England</a>
</li>
<li><a id="br-go" href="#br">Britain </a>
<ul>
<li>England</li>
<li>Wales</li>
</ul>
</li>
<li><a id="gb-go" href="#gb">Great Britain </a>
<ul>
<li>England</li>
<li>Scotland </li>
<li>Wales</li>
</ul>
</li>
<li>
<a id="uk-go" href="#uk">
The United Kingdom</a>
<ul>
<li>England</li>
<li>Scotland </li>
<li>Wales</li>
<li>Northern Ireland</li>
</ul>
</li>
<li>
<a id="bi-go" href="#bi">The British Isles</a>
<ul>
<li>England</li>
<li>Scotland </li>
<li>Wales</li>
<li>Northern Ireland</li>
<li>Republic of Ireland</li>
<li>Channel Islands</li>
<li>Isle of Mann</li>
</ul>
</li>
</ul>
</nav>
<div id="map">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 789.2 1060">
<g id="ci">
<path d="M546.9,1047.8c0,0,8.8-1.8,10.5,0c1.8,1.8,14.9,6.1,11.4,8.8c-3.5,2.6-19.3,6.1-20.2,0
C547.8,1050.4,546.9,1047.8,546.9,1047.8z" />
<path d="M510.9,1024.1c0,0,7-8.8,11.4-7c4.4,1.8,6.1,11.4,3.5,12.3
C523.2,1030.2,510.9,1024.1,510.9,1024.1z" />
<path d="M396.2,595.3c0-2.2,1.1-7.7,7.7-16.5c6.6-8.8,12.1-22.1,15.4-18.2s8.8,2.8,5.5,13.8
c-3.3,11-3.4,18.7-13.8,20.9s-10.4,2.2-10.4,2.2L396.2,595.3z" />
</g>
<path id="ri" d="M84.3,840.9c0,0-6-14.7,24-17.9s33,14.9,51-9.1c18-24,5.4-27,41.7-39c36.3-12,53.1,15,62.7-18
c9.6-33-21.6-126,0-153c21.6-27-41.3-57.2-38.3-85.6c2.9-28.4-63.1,4.6-48.1-16.4c15-21,21-51.4-3-57.4s-81,51.4-63,57.4
s33,16.4,33,16.4s18,28.6,0,34.6s-28,18-60.5,15c-32.5-3-77.5-3-59.5,15s3,50.6,18,59.8s30,9.2,21,39.2c-9,30-15,50-24,64
c-9,14-18,2-30,29c-12,27-18,66,18,66S84.3,840.9,84.3,840.9z" />
<path id="ni" d="M186.2,452.8c4,0,20-10,34,0s10.7,26,24.3,24s5.7-14,23.7-8c18,6,8,42,8,42s26,6,26,18
s4,36-14,40s-16,20-34,0s-23.7-24-28.8-42c-5.2-18-6.4-12.6-24.4-13.3s-20.8,23.3-32.8,12.3C155,513.7,186.2,452.8,186.2,452.8z" />
<g id="sc">
<path d="M366.3,138.9c-6-6.2-46.7,53.3-42,60l-27,15.8l24,29.2c12,18-3,36,0,51c3,15,45,12,45,12
s-9,69-9,84c0,15-42,54-18,54s48-29.1,48-29.1s27,2.9,21,20.5s-9,41.6-9,41.6s-29.8,4-20.8,27.2c9,23.2,26.7,9.3,41.7,5.8
c13.1-3.1,24.1-15.3,39.1-18.1c15-2.9,40.9,4.6,40.9,4.6l77-81.6c0,0,6.9-18.9,0-24.9c-2.3-2-40.1,9.7-47,2.9
c-3.7-3.7,29.8-20.3,25.5-24.5c-11.4-11.3-29.1-28.1-36.4-35.4c-15-15,7-27,30.5-51c23.5-24,28.5-33,30.5-57c2-24,25-54,0-51
s-130,14.6-124-0.2c6-14.8,9-35.8,27-50.8c18-15,42-48,48-63s30-21,6-36s-36-33-45-21c-9,12,6,63-6,63c-12,0-15.5-3-30.2,3
s-11.8,15.8-29.8,16.9c-18,1.1-45-13.1-48,0S381.3,123.9,366.3,138.9" />
<path d="M301.2,182.7c-6.9,0-13.8-2.4-15.4-9.7c-1.6-7.3-3.1-20.5-3.1-20.5s-9.1-2.2-5.5-5.7
c14.2-13.8,28.1-20.9,28.9-14.4c0.8,6.5-4.9,21.9-4.1,28.4s18.7,17,10.6,18.7C304.5,181.1,301.2,182.7,301.2,182.7z" />
<path d="M252.1,142.1c0-2.4-1.6-30,6.5-27.6c8.1,2.4,13-27.6,27.6-30c14.6-2.4,47.9-17.9,45.5-11.4
c-2.4,6.5-29.2,39-36.1,39c-6.9,0-17.6,6.5-19.2,4.1c-1.5-2.4-10.5,21.9-15.3,23.5C256.2,141.3,252.1,142.1,252.1,142.1z" />
</g>
<path id="wa" d="M501.4,660.8c-22-6-30.3-6.7-42-2c-7.7,3.1-13.3,6-25.3,15c-13.5,10.1-54.7,19-36.7,27
c4.2,1.9,13.7,4.5,13.7-0.5c0-7.2,16.6,8.3,10.4,13.4c-14.7,12,21.2,6.1,21.3-6.9c0,0,7.2,11.7-0.2,29.7s-11.2,22.3-24.2,26.3
s-33.9-4.1-43,16c-8,17.7-4,40,10,44c6.6,1.9,26.7-9.5,43.3-9c18.8,0.6,34.2,11.5,40.9,7.8c12.5-7,5.6-20.9,8.5-35.8
c0.9-4.5,4.8-26.6,11.3-38.3c17.4-31.4,25.8-66.5,24.4-76.5C511.8,656.9,501.4,660.8,501.4,660.8z" />
<path id="en" d="M475.2,867.8c0,0-18,0-36,6s-36,32-34,46s-20,28-20,28s-20,8-36,16s32,6,40,10s14-15,14-15
s46-7,56-1s16-16,26-26s4-14,8-14.3c4-0.3,86,2.3,102,0c16-2.3,2-15.7,16-23.7s20,10,30,19.9c10,9.9,16-1.9,22-9.9s22-12,50-6
s48-10,54-12s12-28,2-28s-40,0-40,0v-18c0,0,48-34,54-48s12-52-6-82s-52,0-52,0l-12-42c0,0-18,2-14-8s-2-46-8-50s-18-4-20-16
s0-52-10-62s-18,0-28,0s-14-40-28-39.1s-6-42.9-6-52.9s-22-24-22-24s-77.4,73.4-86,96c-8.6,22.6-12,16-22,30s28,26,50,50
s3.9,70-6.1,76c0,0-1.3,27.3-26.6,84c-28.2,63,11.8,68.1,5.8,83.1C486.3,849.9,475.2,867.8,475.2,867.8z" />
<g fill="#FF0000">
<text x="50%" y="25%">Scotland</text>
<text x="51%" y="75%">Wales</text>
<text x="73%" y="70%">England</text>
<text x="15%" y="62%">Ireland</text>
<text x="33%" y="49%">N.Ireland</text>
<text x="43%" y="59%">Isle of Man</text>
<text x="60%" y="94%">Channel Islands</text>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>