-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathindex.html
More file actions
188 lines (158 loc) · 13.3 KB
/
index.html
File metadata and controls
188 lines (158 loc) · 13.3 KB
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>#codevember - Day 23: King</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<template class="template">
<div class="turret">
<svg viewBox="0 0 113 280">
<g class="izq">
<g class="motor" transform="matrix(-1.98 0 0 1.99 238 22)">
<path fill="#292929" d="M92 50.5h4v2h-4z"/>
<rect width="8" height="21" x="96" y="41" rx="2" ry="2" fill="#292929"/>
<circle r="2" cy="45" cx="100"/>
<circle cx="100" cy="51" r="2"/>
<circle r="2" cy="57" cx="100"/>
</g>
<path class="w" d="M32 63a30 83 0 0 0-8 58 30 83 0 0 0 14 71c2-2 11-12 6-22-6-11-10-27-11-46 0-20 8-43 8-43z" fill="#fff"/>
</g>
<path d="M61 170h-9l1 58s0 18 2 21l2 3 2-3c2-3 2-10 2-22v-57z" fill="#18191c"/>
<path d="M24 192c28 28 24-26 24-26" fill="none" stroke="#252525" stroke-width="2"/>
<path d="M35 189s1-4-2-4-9 2-11 6l-6 9 6 6s1-10 13-17z" fill="#757875"/>
<path class="w" d="M16 200l8-10c3-3 7-5 9-5h-9s-4 0-10 5-9 13-9 13z" fill="#fff"/>
<path d="M5 203l3 5h13l1-2-6-6z" fill="#c5c4c9"/>
<path class="antenna" d="M44 54V30l7-8V0M51 50V30"/>
<path class="w" d="M55 39a30 83 0 0 0-21 24l10 18s-9 23-9 43a107 107 0 0 0 11 47 26 74 0 0 0 10 6v-43a12 12 0 0 1-1 0 12 12 0 0 1-12-12 12 12 0 0 1 12-12 12 12 0 0 1 1 0V39a30 83 0 0 0-1 0z" fill="#fff"/>
<path d="M0 277l9-73 2-1 5 1 2 1-11 58s-2 9-5 14-2 0-2 0z" fill="#18191c"/>
<g class="der">
<g class="motor" transform="matrix(1.97 0 0 1.98 -124 22)">
<path fill="#292929" d="M92 50.2h4v2h-4z"/>
<rect ry="2" rx="2" y="41" x="96" height="21" width="8" fill="#292929"/>
<circle cx="100" cy="45" r="2"/>
<circle r="2" cy="51" cx="100"/>
<circle cx="100" cy="57" r="2"/>
</g>
<path class="w" d="M81 63a30 83 0 0 1 9 58 30 83 0 0 1-15 71c-2-2-11-12-5-22 5-11 10-27 10-46 0-20-8-43-8-43z" fill="#fff"/>
</g>
<path d="M89 192c-28 28-24-26-24-26" fill="none" stroke="#252525" stroke-width="2"/>
<path d="M78 189s-1-4 2-4 9 2 11 6l6 9-5 6s-1-10-14-17z" fill="#757875"/>
<path class="w" d="M58 39a30 83 0 0 1 21 24l-9 18s8 23 8 43a107 107 0 0 1-11 47 26 74 0 0 1-10 6v-43a12 12 0 0 0 1 0 12 12 0 0 0 12-12 12 12 0 0 0-12-12 12 12 0 0 0-1 0V39a30 83 0 0 1 1 0z" fill="#fff"/>
<path class="w" d="M97 200l-8-10c-3-3-7-5-9-5h9s4 0 10 5 9 13 9 13z" fill="#fff"/>
<path d="M108 203l-3 5H93l-1-2 5-6z" fill="#c5c4c9"/>
<path d="M113 277l-9-73-2-1-4 1-2 1c-1 1 11 58 11 58l4 14c3 5 2 0 2 0z" fill="#18191c"/>
<g class="eye" transform="matrix(2.31 0 0 2.31 -368 11)">
<ellipse class="w" ry="6" rx="6" cx="183.9" cy="48" fill="#c8c8c8"/>
<ellipse ry="4" rx="4" cy="48" cx="184" fill="#010202"/>
<path d="m 181.698,51.68533 1.6281,-2.87062 -2.3076,2.35925 2.1894,-2.46937 -2.7477,1.82791 2.6549,-1.96021 -3.0677,1.21668 3.0045,-1.36538 -3.2537,0.55227 3.2228,-0.71086 -3.2974,-0.13627 3.3001,-0.0253 -3.197,-0.81886 3.2332,0.6614 -2.9568,-1.46566 3.025,1.31918 -2.5875,-2.04841 2.6847,1.9193 -2.1051,-2.54162 2.227,2.43554 -1.5307,-2.92376 1.6719,2.84534 -0.8893,-3.17812 1.0438,3.13078 -0.2091,-3.29358 0.3701,3.27939 0.4802,-3.26508 -0.3198,3.28467 1.1485,-3.09389 -0.9957,3.1464 1.7667,-2.78749 -1.6282,2.87062 2.3077,-2.35925 -2.1894,2.46938 2.7477,-1.82792 -2.655,1.96022 3.0678,-1.21668 -3.0045,1.36537 3.2536,-0.55227 -3.2227,0.71086 3.2974,0.13627 -3.3001,0.0253 3.197,0.81886 -3.2333,-0.6614 2.9569,1.46566 -3.0251,-1.31918 2.5876,2.04841 -2.6847,-1.9193 2.1051,2.54162 -2.227,-2.43554 1.5307,2.92376 -1.672,-2.84533 0.8894,3.17811 -1.0439,-3.13078 0.2092,3.29358 -0.3701,-3.27939 -0.4802,3.26508 0.3198,-3.28467 -1.1485,3.0939 0.9957,-3.14641 z" fill="#e80202" stroke="#3a0000" stroke-width="1" paint-order="stroke markers fill"/>
<circle class="pupile" r="1.4" cx="183.9" cy="48" fill="#380202" stroke="red" stroke-width=".5" stroke-linecap="square" stroke-miterlimit="5" />
</g>
</svg>
</div>
</template>
<template id="soprano">
<div class="turret soprano">
<svg viewBox="-20 0 160 220">
<g class="izq"><path d="M18.1 24.29A55.22 82.62 0 0 0 1.94 82.63a55.22 82.62 0 0 0 26.82 70.76c3.24-1.8 20.1-11.91 10.54-22.11-10.52-11.24-18.94-26.61-19.64-46.1-.7-19.49 15.43-43.1 15.43-43.1z" color="#000" fill="#fff" solid-color="#000000"></path><g transform="matrix(-1.985 0 0 1.983 241.6 -16.41)" stroke="#6f6f6f" stroke-linecap="square" stroke-width=".5" color="#000">
<path fill="#292929" solid-color="#000000" d="M91.43 50.44h4.01v1.6h-4.01z"></path>
<rect x="95.71" y="40.96" width="8.02" height="20.58" rx="2" ry="2" fill="#292929" solid-color="#000000"></rect>
<g transform="translate(.16 .2)">
<circle cx="99.56" cy="45.23" r="1.74" solid-color="#000000"></circle>
<circle cx="99.56" cy="51.05" r="1.74" solid-color="#000000"></circle>
<circle cx="99.56" cy="56.87" r="1.74" solid-color="#000000"></circle>
</g>
</g></g>
<path d="M28.07 153.69C56.11 181.71 52.1 126.8 52.1 126.8" fill="none" stroke="#252525" stroke-width="2"></path>
<path d="M64.94 131.39h-8.62l.4 57.95s.13 18.31 1.86 21.26c1.72 2.96 1.85 2.39 1.85 2.39s1.73-.05 2.75-2.75c1.24-3.27 1.79-10.13 1.5-21.64.05-24.25.26-57.21.26-57.21z" fill="#18191c" stroke="#000" stroke-width=".26"></path>
<path d="M19.38 24.29l17 17.79s-16.14 23.61-15.44 43.1c.7 19.49 9.12 34.85 19.64 46.1.34.36.64.73.92 1.1 5.93 3.72 12.29 5.68 18.73 5.76V95.61c-.14-11.99-.14-11.99 0-24.62V.14C43.1-.14 26.32 14.2 19.39 24.3z" color="#000" fill="#fff" solid-color="#000000"></path>
<g class="der"><path d="M103.9 24.29a55.22 82.62 0 0 1 16.15 58.34 55.22 82.62 0 0 1-26.82 70.76c-3.24-1.8-20.09-11.91-10.54-22.11 10.52-11.24 18.94-26.61 19.64-46.1.7-19.49-15.43-43.1-15.43-43.1z" color="#000" fill="#fff" solid-color="#000000"></path><g transform="matrix(1.985 0 0 1.983 -120.5 -16.41)" stroke="#6f6f6f" stroke-linecap="square" stroke-width=".5" color="#000">
<path fill="#292929" solid-color="#000000" d="M91.43 50.44h4.01v1.6h-4.01z"></path>
<rect x="95.71" y="40.96" width="8.02" height="20.58" rx="2" ry="2" fill="#292929" solid-color="#000000"></rect>
<g transform="translate(.16 .2)">
<circle cx="99.56" cy="45.23" r="1.74" solid-color="#000000"></circle>
<circle cx="99.56" cy="51.05" r="1.74" solid-color="#000000"></circle>
<circle cx="99.56" cy="56.87" r="1.74" solid-color="#000000"></circle>
</g>
</g></g>
<path d="M93 153.69c-27.67 27.64-24.03-26.89-24.03-26.89" fill="none" stroke="#252525" stroke-width="2"></path>
<path d="M63.52 0c14.66.02 28.71 8.75 39.05 24.28L85.58 42.07s16.13 23.61 15.43 43.1c-.7 19.49-9.12 34.85-19.64 46.1-.34.36-.64.73-.91 1.1-5.94 3.72-12.3 5.68-18.73 5.76V95.6c-.48-8.45-.78-8.8 0-24.62V.13A37 37 0 0 1 63.5 0z" color="#000" fill="#fff" solid-color="#000000"></path>
<g>
<path d="M45.3 124.59s.66-6.83-5.11-5.15c-5.76 1.69-14.71 9.36-15.84 21.83-2.4 8.89-4.97 25.3-4.97 25.3l14 10.41S22.65 136.2 45.3 124.6z" fill="#757875"></path>
<path d="M19.38 166.59s3.54-21.43 7.85-30.3c3.9-8.05 9.45-14.99 13.78-17-1.82-.12-16.34 5.48-16.34 5.48s-7.92 2.66-16.23 18.13C.14 158.37.05 179.25.05 179.25z" fill="#fff"></path>
<path d="M0 179.09l9.25 9.94c9.01-4 10.76-2.45 24.13-12.01l-14.04-10.6z" fill="#c5c4c9"></path>
</g>
<g class="eye" transform="matrix(2.31 0 0 2.308 -363.7 -15.34)">
<ellipse class="w" ry="6" rx="6" cx="183.9" cy="48" fill="#c8c8c8"></ellipse>
<ellipse ry="4" rx="4" cy="48" cx="184" fill="#010202"></ellipse>
<path d="m 181.698,51.68533 1.6281,-2.87062 -2.3076,2.35925 2.1894,-2.46937 -2.7477,1.82791 2.6549,-1.96021 -3.0677,1.21668 3.0045,-1.36538 -3.2537,0.55227 3.2228,-0.71086 -3.2974,-0.13627 3.3001,-0.0253 -3.197,-0.81886 3.2332,0.6614 -2.9568,-1.46566 3.025,1.31918 -2.5875,-2.04841 2.6847,1.9193 -2.1051,-2.54162 2.227,2.43554 -1.5307,-2.92376 1.6719,2.84534 -0.8893,-3.17812 1.0438,3.13078 -0.2091,-3.29358 0.3701,3.27939 0.4802,-3.26508 -0.3198,3.28467 1.1485,-3.09389 -0.9957,3.1464 1.7667,-2.78749 -1.6282,2.87062 2.3077,-2.35925 -2.1894,2.46938 2.7477,-1.82792 -2.655,1.96022 3.0678,-1.21668 -3.0045,1.36537 3.2536,-0.55227 -3.2227,0.71086 3.2974,0.13627 -3.3001,0.0253 3.197,0.81886 -3.2333,-0.6614 2.9569,1.46566 -3.0251,-1.31918 2.5876,2.04841 -2.6847,-1.9193 2.1051,2.54162 -2.227,-2.43554 1.5307,2.92376 -1.672,-2.84533 0.8894,3.17811 -1.0439,-3.13078 0.2092,3.29358 -0.3701,-3.27939 -0.4802,3.26508 0.3198,-3.28467 -1.1485,3.0939 0.9957,-3.14641 z" fill="#e80202" stroke="#3a0000" stroke-width="1" paint-order="stroke markers fill"></path>
<circle class="pupile" r="1.4" cx="183.9" cy="48" fill="#380202" stroke="red" stroke-width=".5" stroke-linecap="square" stroke-miterlimit="5"></circle>
</g>
<g transform="translate(-7.6 -49.71)">
<g>
<path d="M19.26 268.1l.2-41.89s.45-.58 1.79-1.04a15.8 15.8 0 0 1 4.24-.81c.68.07 1.97.22 2.22.49.25.27-3.9 34.15-3.9 34.15s-.99 5.19-2.83 8.62c-1.85 3.43-1.72.48-1.72.48z" fill="#18191c" stroke="#000" stroke-width=".2"></path>
<path d="M82.24 174.3s-.65-6.83 5.11-5.15c5.77 1.69 14.71 9.36 15.84 21.83 2.4 8.89 4.97 25.3 4.97 25.3l-14 10.41s10.72-40.79-11.92-52.39z" fill="#757875"></path>
<path d="M108.2 216.3s-3.54-21.43-7.85-30.3c-3.9-8.05-9.45-14.99-13.78-17 1.82-.12 16.34 5.48 16.34 5.48s7.93 2.66 16.23 18.13c8.31 15.47 8.4 36.35 8.4 36.35z" fill="#fff"></path>
<path d="M127.5 228.8l-9.25 9.94c-9.01-4-10.76-2.45-24.13-12.01l14.04-10.6z" fill="#c5c4c9"></path>
<path d="M115.9 268.1l-.2-41.89s-.45-.58-1.79-1.04a15.8 15.8 0 0 0-4.24-.81c-.68.07-1.97.22-2.22.49-.25.27 3.9 34.15 3.9 34.15s.99 5.19 2.83 8.62c1.85 3.43 1.72.48 1.72.48z" fill="#18191c" stroke="#000" stroke-width=".2"></path>
</g>
<ellipse transform="rotate(21.04)" cx="98.67" cy="22.57" rx="3.43" ry="1.14" fill="#dfe2e2"></ellipse>
<ellipse transform="rotate(38.37)" cx="110.8" cy="-8.98" rx="3.43" ry="1.14" fill="#dfe2e2"></ellipse>
</g>
</svg>
</div>
</template>
<div class="total">
<div class="third plant">
<div class="door">
<img class="cubeposter" src="https://cdn.jsdelivr.net/gh/ManzDev/codevember2017/assets/cube-company.jpg"/>
<img class="wheatfield" src="https://cdn.jsdelivr.net/gh/ManzDev/codevember2017/assets/wheatfield.jpg"/>
</div>
<div class="upside">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
</div>
<div class="second plant">
<div class="board">
<div class="first line"></div>
<div class="second line"></div>
<div class="third line"></div>
</div>
<div class="floor"></div>
<div class="mark">
<div class="window">
<div class="kingface">
<svg class="eye" viewBox="0 0 50 50">
<circle cx="24.37" cy="24.37" r="24.37" fill-opacity=".9"/>
<circle cx="24.37" cy="24.37" r="17.62" fill="#010202"/>
<path d="m40.87 19.84-11.3 3.517 11.78-1.065-11.69 1.834 11.81 0.6619-11.83 0.1126 11.59 2.375-11.72-1.611 11.12 4.037-11.36-3.301 10.42 5.614-10.76-4.92 9.488 7.071-9.93-6.435 8.357 8.377-8.887-7.812 7.048 9.504-7.655-9.023 5.589 10.43-6.26-10.04 4.011 11.13-4.731-10.85 2.348 11.6-3.102-11.42 0.6342 11.82-1.406-11.75-1.093 11.78 0.3196-11.83-2.797 11.5 2.038-11.66-4.441 10.97 3.714-11.23-5.99 10.2 5.31-10.57-7.412 9.223 6.793-9.688-8.676 8.046 8.131-8.596-9.755 6.696 9.296-7.321-10.63 5.205 10.26-5.889-11.27 3.602 11.01-4.332-11.68 1.923 11.52-2.683-11.83 0.2022 11.79-0.976-11.73-1.522 11.81 0.7513-11.39-3.215 11.57 2.463-10.8-4.839 11.09 4.122-9.978-6.359 10.37 5.693-8.946-7.744 9.434 7.142-7.723-8.964 8.293 8.44-6.336-9.993 6.976 9.557-4.813-10.81 5.51 10.47-3.188-11.39 3.927 11.16-1.495-11.74 2.26 11.61 0.23-11.83 0.5447 11.82 1.95-11.67-1.182 11.77 3.629-11.26-2.884 11.48 5.23-10.61-4.524 10.93 6.719-9.74-6.068 10.16 8.066-8.657-7.482 9.167 9.24-7.391-8.737 7.98 10.22-5.967-9.806 6.622 10.98-4.415-10.67 5.124z" color="#000000" color-rendering="auto" fill="#ff0202" image-rendering="auto" shape-rendering="auto" solid-color="#000000" />
<circle class="pupile" cx="24.37" cy="24.37" r="5.113" fill="#330202" stroke="#f00" stroke-linecap="square" stroke-miterlimit="5" stroke-width="1.5"/>
</svg>
</div>
<div class="data">
<span>Animal</span>
<h1>King</h1>
<span>Takeover</span>
<h2>#Codevember</h2>
<a class="ghost" href="https://twitter.com/Manz" target="_blank">Code by Manz</a>
<a class="ghost" href="http://www.valvesoftware.com/" target="_blank">Music by Valve</a>
</div>
</div>
</div>
</div>
<div class="first plant">
<img class="poster" src="https://cdn.jsdelivr.net/gh/ManzDev/codevember2017/assets/cake-is-a-lie.png"/>
<div class="elevator"></div>
<div class="floor"></div>
</div>
</div>
<audio autoplay>
<source src="https://cdn.jsdelivr.net/gh/ManzDev/codevember2017/assets/portal2-cara-mia.mp3">
<source src="https://cdn.jsdelivr.net/gh/ManzDev/codevember2017/assets/portal2-cara-mia.ogg">
</audio>
<script src="js/index.js"></script>
</body>
</html>