-
Notifications
You must be signed in to change notification settings - Fork 0
/
wceu-2017.html
164 lines (148 loc) · 15.3 KB
/
wceu-2017.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
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WordCamp Europe 2017</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="addon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<!-- Preview -->
<div class="preview" style="background: #2D282D;">
<div class="svg">
<svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: transparent">
<title>
Logo
</title>
<defs>
<circle id="a" cx="180" cy="180" r="180"/>
</defs>
<g fill="none" fill-rule="evenodd">
<circle class="base" fill="#E7AB46" cx="300" cy="300" r="180"/>
<g transform="translate(120 120)">
<mask id="b" fill="#FFF">
<use xlink:href="#a"/>
</mask>
<g mask="url(#b)">
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(72 48)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(192 72)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(216 72)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 72)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 72)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(168 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(192 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 48)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(240 24)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 48)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(264 48)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(168 120)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(192 120)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 120)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(240 120)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(168 144)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(192 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(144 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(168 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(192 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 168)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(216 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(96 120)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(96 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(96 144)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(72 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(168 192)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(192 192)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 192)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 192)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 192)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(192 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(264 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 120)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 192)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(288 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 72)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 72)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(288 48)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 48)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 120)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(312 192)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(312 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(336 96)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(336 120)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(336 144)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(336 168)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(336 192)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(336 216)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(168 240)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(192 240)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 240)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(240 240)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(264 240)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(144 264)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(168 264)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(168 288)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(168 312)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(144 312)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 288)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(216 264)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(240 264)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(264 264)"/>
<circle class="dot dot-m" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="7" transform="translate(240 288)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(240 312)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(48 216)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(48 240)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(72 240)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(48 264)"/>
<circle class="dot dot-l" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="9" transform="translate(72 264)"/>
<circle class="dot dot-s" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="5" transform="translate(96 264)"/>
<circle class="dot dot-l focus-3rd" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="12" transform="translate(168 216)"/>
<circle class="dot dot-l focus-2nd" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="12" transform="translate(144 192)"/>
<circle class="dot dot-s focus-2nd" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="12" transform="translate(96 192)"/>
<circle class="dot dot-l focus-2nd" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="12" transform="translate(144 240)"/>
<circle class="dot dot-l focus-2nd" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="12" transform="translate(96 240)"/>
<circle class="dot dot-l focus-1st" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="18" transform="translate(120 192)"/>
<circle class="dot dot-l focus-1st" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="18" transform="translate(144 216)"/>
<circle class="dot dot-m focus-1st" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="18" transform="translate(120 240)"/>
<circle class="dot dot-m focus-1st" fill="#2D282D" fill-opacity=".9" cx="12" cy="12" r="18" transform="translate(96 216)"/>
<circle class="dot dot-l focus-main" fill="#2D282D" fill-opacity="1" cx="12" cy="12" r="28" transform="translate(120 216)"/>
<circle class="dot dot-l focus-main-overlay" fill="#E7AB46" fill-opacity="1" cx="12" cy="12" r="9" transform="translate(120 216)"/>
</g>
</g>
<g transform="translate(360 120)">
<circle class="wordpress-logo-background" fill="#FFF" cx="60" cy="60" r="60"/>
<path class="wordpress-logo" d="M101.025 37.57c3.65 6.658 5.726 14.3 5.726 22.428 0 17.248-9.346 32.306-23.246 40.41l14.28-41.286c2.667-6.67 3.555-12.003 3.555-16.745 0-1.72-.114-3.32-.315-4.808zm-34.582.508c2.814-.148 5.35-.444 5.35-.444 2.52-.298 2.223-4-.298-3.853 0 0-7.572.596-12.46.596-4.595 0-12.314-.595-12.314-.595-2.52-.146-2.816 3.705-.295 3.854 0 0 2.384.296 4.904.444l7.282 19.958L48.38 88.72 31.354 38.078c2.817-.148 5.35-.444 5.35-.444 2.518-.298 2.22-4-.3-3.853 0 0-7.57.596-12.46.596-.876 0-1.91-.022-3.008-.057C29.297 21.627 43.667 13.246 60 13.246c12.17 0 23.253 4.653 31.57 12.274-.2-.01-.398-.036-.605-.036-4.593 0-7.85 4-7.85 8.297 0 3.854 2.222 7.114 4.59 10.966 1.78 3.114 3.856 7.114 3.856 12.894 0 4-1.538 8.645-3.557 15.114l-4.664 15.58-16.897-50.256zM60 106.753c-4.59 0-9.02-.673-13.208-1.905l14.03-40.76 14.368 39.37c.095.23.21.444.335.645-4.86 1.71-10.08 2.65-15.525 2.65zM13.248 59.998c0-6.778 1.454-13.212 4.048-19.026l22.302 61.102C24 94.497 13.248 78.504 13.248 59.998zM60 8C31.327 8 8 31.326 8 59.998 8 88.67 31.327 112 60 112c28.672 0 52-23.33 52-52.002C112 31.326 88.672 8 60 8z" fill="#2D282D"/>
</g>
</g>
</svg>
<div class="event">
<h1 class="event__title">WordCamp Europe 2017</h1>
<p class="event__meta">June 15-17, Paris, France | #WCEU</p>
</div>
</div>
</div>
<!-- /Preview -->
</div>
<script src="script.js"></script>
<!-- Typekit -->
<script src="https://use.typekit.net/prq0thw.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</body>
</html>