diff options
Diffstat (limited to 'deprecated/ZJW/stylesheets/magnetic1407129817662.webflow.css')
-rw-r--r-- | deprecated/ZJW/stylesheets/magnetic1407129817662.webflow.css | 448 |
1 files changed, 448 insertions, 0 deletions
diff --git a/deprecated/ZJW/stylesheets/magnetic1407129817662.webflow.css b/deprecated/ZJW/stylesheets/magnetic1407129817662.webflow.css new file mode 100644 index 0000000..b9db5e1 --- /dev/null +++ b/deprecated/ZJW/stylesheets/magnetic1407129817662.webflow.css | |||
@@ -0,0 +1,448 @@ | |||
1 | body { | ||
2 | padding-top: 126px; | ||
3 | background-color: black; | ||
4 | background-image: url('../images/fans-black.jpg'); | ||
5 | background-size: cover; | ||
6 | font-family: 'Microsoft YaHei'; | ||
7 | color: white; | ||
8 | font-size: 14px; | ||
9 | line-height: 20px; | ||
10 | text-align: center; | ||
11 | } | ||
12 | h1 { | ||
13 | margin: 10px 0px; | ||
14 | color: #2d3338; | ||
15 | font-family: 'Microsoft YaHei'; | ||
16 | font-size: 69px; | ||
17 | line-height: 54px; | ||
18 | font-style: normal; | ||
19 | font-weight: 700; | ||
20 | text-shadow: none; | ||
21 | } | ||
22 | h2 { | ||
23 | margin-right: 0px; | ||
24 | margin-bottom: 10px; | ||
25 | margin-left: 0px; | ||
26 | font-family: 'Microsoft YaHei'; | ||
27 | font-size: 32px; | ||
28 | line-height: 36px; | ||
29 | font-weight: 400; | ||
30 | text-shadow: none; | ||
31 | } | ||
32 | h3 { | ||
33 | margin: 5px 0px; | ||
34 | font-family: 'Microsoft YaHei'; | ||
35 | font-size: 22px; | ||
36 | line-height: 30px; | ||
37 | font-weight: 400; | ||
38 | text-shadow: none; | ||
39 | } | ||
40 | h4 { | ||
41 | margin: 10px 0px; | ||
42 | font-family: 'Microsoft YaHei'; | ||
43 | font-size: 18px; | ||
44 | line-height: 24px; | ||
45 | font-weight: 700; | ||
46 | } | ||
47 | h5 { | ||
48 | margin: 10px 0px; | ||
49 | font-family: 'Microsoft YaHei'; | ||
50 | font-size: 14px; | ||
51 | line-height: 20px; | ||
52 | font-weight: 700; | ||
53 | } | ||
54 | h6 { | ||
55 | margin: 10px 0px; | ||
56 | font-family: 'Microsoft YaHei'; | ||
57 | font-size: 12px; | ||
58 | line-height: 18px; | ||
59 | font-weight: 700; | ||
60 | } | ||
61 | p { | ||
62 | margin-bottom: 5px; | ||
63 | font-family: 'Microsoft YaHei'; | ||
64 | font-size: 16px; | ||
65 | line-height: 23px; | ||
66 | font-weight: 300; | ||
67 | letter-spacing: 0px; | ||
68 | text-shadow: none; | ||
69 | } | ||
70 | .button { | ||
71 | display: block; | ||
72 | width: 100%; | ||
73 | height: 54px; | ||
74 | margin-left: -1px; | ||
75 | padding: 4px 29px; | ||
76 | border: 3px solid white; | ||
77 | background-color: transparent; | ||
78 | -webkit-transition: background-color 300ms ease, color 300ms ease; | ||
79 | -o-transition: background-color 300ms ease, color 300ms ease; | ||
80 | transition: background-color 300ms ease, color 300ms ease; | ||
81 | color: white; | ||
82 | font-family: 'Microsoft YaHei'; | ||
83 | font-size: 22px; | ||
84 | font-weight: 700; | ||
85 | text-align: center; | ||
86 | text-decoration: none; | ||
87 | text-transform: uppercase; | ||
88 | } | ||
89 | .button:hover { | ||
90 | background-color: white; | ||
91 | color: black; | ||
92 | } | ||
93 | .subtitle { | ||
94 | padding-bottom: 67px; | ||
95 | font-family: 'Microsoft YaHei'; | ||
96 | font-size: 31px; | ||
97 | line-height: 35px; | ||
98 | font-weight: 400; | ||
99 | text-shadow: none; | ||
100 | } | ||
101 | .field { | ||
102 | height: 54px; | ||
103 | margin-bottom: 19px; | ||
104 | padding-right: 20px; | ||
105 | padding-left: 20px; | ||
106 | border: 0px solid black; | ||
107 | -webkit-transition: box-shadow 150ms ease; | ||
108 | -o-transition: box-shadow 150ms ease; | ||
109 | transition: box-shadow 150ms ease; | ||
110 | color: #262c46; | ||
111 | font-family: 'Microsoft YaHei'; | ||
112 | font-size: 16px; | ||
113 | text-align: center; | ||
114 | text-transform: uppercase; | ||
115 | } | ||
116 | .field:focus { | ||
117 | box-shadow: #00caf2 0px 0px 0px 2px inset; | ||
118 | } | ||
119 | .sign-up-form { | ||
120 | display: block; | ||
121 | width: 415px; | ||
122 | margin: 35px auto 66px; | ||
123 | } | ||
124 | .social-widget { | ||
125 | width: 100px; | ||
126 | float: left; | ||
127 | -webkit-transition: opacity 300ms ease; | ||
128 | -o-transition: opacity 300ms ease; | ||
129 | transition: opacity 300ms ease; | ||
130 | } | ||
131 | .social-widget.full-opacity { | ||
132 | opacity: 1; | ||
133 | } | ||
134 | .social-widget-wrapper { | ||
135 | display: block; | ||
136 | width: 223px; | ||
137 | margin-right: auto; | ||
138 | margin-left: auto; | ||
139 | padding-left: 20px; | ||
140 | } | ||
141 | .social-widget-wrapper.thank-you { | ||
142 | display: block; | ||
143 | width: 216px; | ||
144 | margin-top: 13px; | ||
145 | margin-right: auto; | ||
146 | margin-left: auto; | ||
147 | padding-left: 16px; | ||
148 | } | ||
149 | .success-message { | ||
150 | padding: 20px; | ||
151 | border-radius: 2px; | ||
152 | background-color: #737373; | ||
153 | -webkit-transition: all 300ms ease; | ||
154 | -o-transition: all 300ms ease; | ||
155 | transition: all 300ms ease; | ||
156 | } | ||
157 | .spread-word { | ||
158 | margin-top: 12px; | ||
159 | font-family: Arial, Helvetica, sans-serif; | ||
160 | color: rgba(255, 255, 255, 0.6); | ||
161 | font-size: 10px; | ||
162 | line-height: 16px; | ||
163 | font-weight: 400; | ||
164 | letter-spacing: 0px; | ||
165 | text-transform: uppercase; | ||
166 | text-shadow: none; | ||
167 | } | ||
168 | .error-message { | ||
169 | padding-bottom: 5px; | ||
170 | border-radius: 2px; | ||
171 | background-color: #5c3245; | ||
172 | } | ||
173 | .content-wrapper { | ||
174 | display: inline-block; | ||
175 | width: 60%; | ||
176 | } | ||
177 | .header-section { | ||
178 | height: 100%; | ||
179 | padding-top: 104px; | ||
180 | background-color: #e0ddd7; | ||
181 | text-align: center; | ||
182 | } | ||
183 | .footer-section { | ||
184 | position: fixed; | ||
185 | left: 0px; | ||
186 | right: 0px; | ||
187 | bottom: 0px; | ||
188 | padding-top: 38px; | ||
189 | padding-bottom: 34px; | ||
190 | background-color: rgba(0, 0, 0, 0.18); | ||
191 | color: #7e7c87; | ||
192 | } | ||
193 | .copyright { | ||
194 | color: rgba(255, 255, 255, 0.52); | ||
195 | text-align: left; | ||
196 | } | ||
197 | .bars-wrapper { | ||
198 | height: 7px; | ||
199 | background-color: #1abc9c; | ||
200 | } | ||
201 | .bar { | ||
202 | width: 14.285%; | ||
203 | height: 7px; | ||
204 | float: left; | ||
205 | background-color: #1abc9c; | ||
206 | } | ||
207 | .bar._2 { | ||
208 | background-color: #f2ca27; | ||
209 | } | ||
210 | .bar._3 { | ||
211 | background-color: #e67e22; | ||
212 | } | ||
213 | .bar._4 { | ||
214 | background-color: #16a085; | ||
215 | } | ||
216 | .bar._5 { | ||
217 | background-color: #2980b9; | ||
218 | } | ||
219 | .bar._6 { | ||
220 | background-color: #e74c3c; | ||
221 | } | ||
222 | .bar._7 { | ||
223 | background-color: #a366bc; | ||
224 | } | ||
225 | .container { | ||
226 | padding-right: 127px; | ||
227 | padding-left: 127px; | ||
228 | } | ||
229 | .image-crop { | ||
230 | overflow-x: hidden; | ||
231 | overflow-y: hidden; | ||
232 | height: 260px; | ||
233 | } | ||
234 | .social-section { | ||
235 | padding-top: 58px; | ||
236 | padding-bottom: 58px; | ||
237 | text-align: center; | ||
238 | } | ||
239 | .share-btn { | ||
240 | display: inline-block; | ||
241 | width: 61px; | ||
242 | margin-right: 14px; | ||
243 | margin-left: 14px; | ||
244 | } | ||
245 | .share-wrapper { | ||
246 | margin-top: 32px; | ||
247 | } | ||
248 | .refer { | ||
249 | color: rgba(255, 255, 255, 0.59); | ||
250 | } | ||
251 | .align-right { | ||
252 | text-align: right; | ||
253 | } | ||
254 | .social-btn { | ||
255 | margin-left: 17px; | ||
256 | opacity: 0.44; | ||
257 | -webkit-transition: all 200ms ease; | ||
258 | -o-transition: all 200ms ease; | ||
259 | transition: all 200ms ease; | ||
260 | } | ||
261 | .social-btn:hover { | ||
262 | opacity: 1; | ||
263 | } | ||
264 | .logo { | ||
265 | display: inline-block; | ||
266 | margin-right: auto; | ||
267 | margin-bottom: 19px; | ||
268 | margin-left: auto; | ||
269 | padding: 21px; | ||
270 | border: 8px white; | ||
271 | color: white; | ||
272 | font-weight: 700; | ||
273 | letter-spacing: 8px; | ||
274 | text-shadow: none; | ||
275 | } | ||
276 | .about { | ||
277 | letter-spacing: 2px; | ||
278 | text-transform: uppercase; | ||
279 | } | ||
280 | .join { | ||
281 | display: block; | ||
282 | width: 40%; | ||
283 | margin-top: -12px; | ||
284 | margin-bottom: 15px; | ||
285 | float: left; | ||
286 | font-family: 'Microsoft YaHei'; | ||
287 | font-size: 22px; | ||
288 | letter-spacing: 4px; | ||
289 | text-transform: uppercase; | ||
290 | text-shadow: none; | ||
291 | } | ||
292 | .beta-line { | ||
293 | width: 30%; | ||
294 | height: 1px; | ||
295 | float: left; | ||
296 | background-color: rgba(255, 255, 255, 0.36); | ||
297 | } | ||
298 | @media (max-width: 991px) { | ||
299 | .subtitle { | ||
300 | font-size: 29px; | ||
301 | text-shadow: none; | ||
302 | } | ||
303 | .content-wrapper { | ||
304 | width: 81%; | ||
305 | } | ||
306 | .container { | ||
307 | padding-right: 57px; | ||
308 | padding-left: 57px; | ||
309 | } | ||
310 | .social-btn { | ||
311 | -webkit-transition: all 200ms ease; | ||
312 | -o-transition: all 200ms ease; | ||
313 | transition: all 200ms ease; | ||
314 | } | ||
315 | .social-btn:hover { | ||
316 | opacity: 0.8; | ||
317 | } | ||
318 | .join { | ||
319 | width: 50%; | ||
320 | font-size: 21px; | ||
321 | text-shadow: none; | ||
322 | } | ||
323 | .beta-line { | ||
324 | width: 25%; | ||
325 | } | ||
326 | } | ||
327 | @media (max-width: 767px) { | ||
328 | body { | ||
329 | padding-top: 65px; | ||
330 | } | ||
331 | .subtitle { | ||
332 | margin-right: 0px; | ||
333 | margin-left: 0px; | ||
334 | padding-bottom: 43px; | ||
335 | text-shadow: none; | ||
336 | } | ||
337 | .sign-up-form { | ||
338 | margin-bottom: 64px; | ||
339 | } | ||
340 | .content-wrapper { | ||
341 | width: 100%; | ||
342 | padding-right: 24px; | ||
343 | padding-left: 24px; | ||
344 | } | ||
345 | .header-section { | ||
346 | padding-top: 37px; | ||
347 | } | ||
348 | .footer-section { | ||
349 | position: static; | ||
350 | padding-top: 23px; | ||
351 | padding-bottom: 23px; | ||
352 | background-color: rgba(0, 0, 0, 0.49); | ||
353 | } | ||
354 | .container { | ||
355 | padding-right: 10px; | ||
356 | padding-left: 10px; | ||
357 | } | ||
358 | .social-section { | ||
359 | padding-top: 35px; | ||
360 | padding-bottom: 35px; | ||
361 | } | ||
362 | .logo { | ||
363 | text-shadow: none; | ||
364 | } | ||
365 | .join { | ||
366 | text-shadow: none; | ||
367 | } | ||
368 | } | ||
369 | @media (max-width: 479px) { | ||
370 | h2 { | ||
371 | font-size: 30px; | ||
372 | line-height: 31px; | ||
373 | text-shadow: none; | ||
374 | } | ||
375 | p { | ||
376 | font-size: 20px; | ||
377 | text-shadow: none; | ||
378 | } | ||
379 | .button { | ||
380 | width: 100%; | ||
381 | margin-left: 0px; | ||
382 | border-top-left-radius: 2px; | ||
383 | border-bottom-left-radius: 2px; | ||
384 | } | ||
385 | .subtitle { | ||
386 | padding-bottom: 36px; | ||
387 | font-size: 22px; | ||
388 | line-height: 26px; | ||
389 | text-shadow: none; | ||
390 | } | ||
391 | .field { | ||
392 | width: 100%; | ||
393 | border-top-right-radius: 2px; | ||
394 | border-bottom-right-radius: 2px; | ||
395 | text-align: center; | ||
396 | } | ||
397 | .sign-up-form { | ||
398 | width: 100%; | ||
399 | margin-top: 22px; | ||
400 | } | ||
401 | .social-widget { | ||
402 | width: 96px; | ||
403 | } | ||
404 | .social-widget-wrapper { | ||
405 | display: block; | ||
406 | width: 221px; | ||
407 | margin-right: auto; | ||
408 | margin-bottom: 15px; | ||
409 | margin-left: auto; | ||
410 | } | ||
411 | .copyright { | ||
412 | margin-bottom: 16px; | ||
413 | text-align: center; | ||
414 | } | ||
415 | .container { | ||
416 | padding-right: 10px; | ||
417 | padding-left: 10px; | ||
418 | } | ||
419 | .image-crop { | ||
420 | height: auto; | ||
421 | margin-bottom: 40px; | ||
422 | } | ||
423 | .social-section { | ||
424 | padding-right: 14px; | ||
425 | padding-left: 14px; | ||
426 | } | ||
427 | .align-right { | ||
428 | text-align: center; | ||
429 | } | ||
430 | .social-btn { | ||
431 | margin-right: 17px; | ||
432 | } | ||
433 | .logo { | ||
434 | font-size: 43px; | ||
435 | text-shadow: none; | ||
436 | } | ||
437 | .join { | ||
438 | width: 75%; | ||
439 | font-size: 19px; | ||
440 | line-height: 22px; | ||
441 | letter-spacing: 4px; | ||
442 | text-shadow: none; | ||
443 | } | ||
444 | .beta-line { | ||
445 | width: 12%; | ||
446 | } | ||
447 | } | ||
448 | |||