-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (44 loc) · 6.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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Please do it</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper" ontouchstart="">
<div class="alertRed"></div>
<div class="alertBlue"></div>
<img id="ieImg" src="img/ie.png">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="829" height="286.6" viewBox="0 0 829 286.6">
<!-- I use original text (converted to outline) to Clip-Path my custom Path -->
<clipPath id="originalText">
<path d="M74,213.6c-19.2,0,11.8-65,15.3-72.2,10.7-22.1,25-42.9,34.8-65.2,1.4-3.1,1-5.8,1.9-8.8,1.3-4.5,5.4-8.9,7.8-12.8s15.3-19.2,3-16.4A419,419,0,0,0,77.3,57C57.5,65,37.9,73.6,18.1,81.6c-8.8,3.6-16.2-4.4-6.3-9.3,13.5-6.6,28.1-12,42-17.7,48.1-19.4,97.6-31.5,148.7-39.5,22.9-3.5,47.1-6.9,70.3-5.2,7.8.5,22.8,1.3,22.7,12.5s-20.6,17.8-29.1,17.8c.3-5.2,32.4-17.6,17-21.5-11-2.9-25,.1-36.2.6-15.5.6-30,4-45.2,6.3-11.5,1.7-33.9.4-42.4,9.8-4,4.5-6.5,11.7-9.3,16.8L137.8,74.7c-8.2,14.7-16.6,29.2-24.5,44s-17.4,31.6-24.7,47.9a236.5,236.5,0,0,0-10.3,26.9C77.4,196.3,75.2,213.6,74,213.6Z" />
<path d="M153.2,172.7c-26.1,0,6.4-52.7,10.8-62,7.1-15,14.4-29.9,21.1-45.1,2-4.5,8.8-27.2,14.4-26.6,11.5,1.2-2.3,22.6-4,26.1-11.3,23.3-22.5,46.6-33.4,70-3.1,6.7-6.4,13.4-9,20.3-6.9,18.2,9.5-.7,13.3-4.9,7.4-8.1,41.8-51.5,55.3-37.3,8,8.4-24.8,51.2-.4,47.5,1.8-.3,9.7-5.2,11.2-3.7s-2.8,6.3-5.1,7.4c-9,4.1-21.3-2.4-23.7-11.9-1.5-5.7,1.4-12.3,3.5-17.5.8-1.9,7.1-11.6,6.3-14-1.9-5.7-23.1,15.6-25.8,18.2a199.6,199.6,0,0,0-16.8,17.6C166.7,161.7,160.4,171.7,153.2,172.7Z" />
<path d="M252.5,181.5c-5,0-12.4-4.1-13.3-9.4s3.4-9.2,5.9-12.5c10.6-14,23.9-28,38-38.5,2.9-2.2,5.8-4.6,9.6-4.6s8.2,1.7,7,4.8-5.9,3.3-7.5,4.3a72.2,72.2,0,0,0-11.1,9.6c-3.8,3.7-33.7,30.2-30.2,35.6s25.7-19.1,29-22.1c8.8-7.9,17.6-16.6,27.4-23.3,7.3-5.1,13.1-1,10,7.9-1.9,5.3-7.2,13.6-5.6,19.3,2.4,8.2,9.7-.7,13.3-4,7.9-6.8,15.6-15.6,24.5-21.2,3-2,4.7-3.7,8.3-1.2,8.1,5.4-2.9,11.8-.2,17.5s11.6-6.2,14.7-9c7.7-7.1,24.1-22.1,33.9-10,7.2,8.7-.1,26.3,15.6,26.5,4.9,0,12.6-5.6,17.2-4.2,7,2.2-9.8,9.3-12.4,9.6a20.1,20.1,0,0,1-16.4-4.8c-6.8-5.8-6.4-12.5-9.8-19.8-5-10.6-24.4,10.3-29,14.7s-11.5,16.4-20.2,11.5-3.3-16.9-12-11c-6.4,4.2-11.8,13.9-19.3,16.5s-15.2-4.5-17.2-11.2c-1-3.7,1.6-12-4.1-10.5-2.4.6-7.2,8.1-9.2,10.1-3.7,3.6-7.7,6.8-11.6,10.2C272.1,167.4,260.7,181.5,252.5,181.5Z" />
<path d="M439.2,202.6c-10.1,0,2.1-27.4,3.7-31.5s3.3-8.3,3.6-13.5-.7-6.4,2-10.6,7.9-7.5,10.9-12.1,5.8-11.6,8.7-17.3C475,104,482,90.4,488.8,76.7c5.8-11.7,11.5-23.3,16.7-35.3,1.5-3.4,3.5-13.3,6.8-15.2s5.5,0,7,2c2.6,3.5.8,5.4-.8,9.1-8.8,20.8-19.2,41.1-29.4,61.2-2.4,4.7-6.5,10.1-7.8,15.2-2,7.7,1,5.3,6.9,2.3,8.2-4.2,21.2-13.7,29.5-4.6,3.4,3.8,3.3,6.7-.9,6.5-1.8,0-4.2-2.5-6.8-2.5s-8.6,3.3-11.7,5.1c-9,5.1-20,11.9-27.7,18.9-3.8,3.6-5.7,7.6-8.1,12.1s-7.2,10.3,2.2,9c14.2-2,29.2-9.8,42.6-14.4,1.7-.5,18-7.8,19.9-4.7s-8.4,6.9-10.3,7.7c-11.5,4.7-22.6,9.9-34.3,14.2-5.6,2.1-12.1,4.6-18.1,5.1-2.4.2-5.9-1.2-8.2-.4C446.9,171.4,447.4,202,439.2,202.6Z" />
<path d="M560.7,281.5c-11.3,0-19.9-6.2-25.1-16-1.5-2.7-9.6-27.5-3-27.5,0,0,9.6,28.5,11.2,31,7,10.9,16.8,8.9,26.3,1.5,18.9-14.5,31.4-40.7,42.8-61.2,13.8-24.7,26.5-50.1,39.2-75.4,5.9-11.9,12-23.7,17.8-35.6,2.7-5.6,5.3-11.2,7.9-16.9,1.3-2.7,7.5-11.6,6.4-14.9-1.9-5.7-9.6,6.8-10.7,8.3L660.7,91.6c-6.2,7.9-12.3,15.9-18.5,23.9-9.2,11.8-18.3,23.8-27.6,35.6-5.3,6.7-11.4,15.4-20.3,17.4s-21.2-5.8-23.8-15.6,1.8-25.3,4.6-35.9c3.9-14.8,8.5-29.6,13.6-44.1s10-26.4,15.8-39.3c4.6-10.4,9.7-20.6,21.7-11.3,1.5,1.2,7.5,6.9,3.3,7.9-2.7.6-4.3-3.8-7.3-3.2-5.3,1.1-10.8,17.7-12.3,21.4-3.4,7.9-44.5,114.7-22.6,114.6,5.6-.1,12.3-8.1,15.7-11.6,6.9-7.2,12.8-15.1,19-23,15.8-20.3,31.4-41.1,47.9-61,10.9-13.1,24.6-25.7,31.7-41.5,1.8-4,3.5-14.1,7.1-16.7s6.2-.7,8.5,1.9,1.8,5.5.1,9.9c-4.9,12.4-12,23.8-17,36.2S690.6,84.1,683.8,97c-12.6,23.9-24.6,48-37.4,71.9-10.9,20.3-20.6,41.2-32.7,60.8S586.1,281.5,560.7,281.5Z" />
<path d="M702.6,169.5c-23.1,0-9-28.6-4.6-39.1a22.9,22.9,0,0,0,2.8-7.1,5.5,5.5,0,0,0-3-2.6c.4-3.4,1.1-3.8,4.4-6.5,6.9-5.7,16-11.6,24.7-13.7s17.9.4,18.6,9.5-5.4,18.3-9.7,25C730,144.2,715.3,169.5,702.6,169.5Zm-2.9-6.8c6.5,0,13.6-11,17-14.9,5.2-5.9,10.4-11.9,14.5-18.7s14.3-23.6,2.5-24.1-15.8,10.9-21.1,18.9C710.3,127.3,691,162.7,699.7,162.7Z" />
<path d="M749.1,173.6c-22,0,.8-37.1,4.3-43.8,2.3-4.5,7.5-22.7,14.5-14.3,4.3,5-2.4,11.9-5.2,16.7a164.7,164.7,0,0,0-12.2,23.6c-4,9.9-.1,10.1,7.1,3.8,15.6-13.6,30.2-27.5,47.4-39.1,4.4-2.9,13-10.1,16.5-1.7,2.4,5.6-8.4,21.2-10.4,27-1.4,3.8-5,24.1-9,22.2s-3-10.5-2.6-14,7.7-18.3,6.2-21.6c-2.4-4.9-12.2,5.6-14.7,7.5-6.8,5.3-12.8,11-19,16.9S757.8,173.6,749.1,173.6Z" />
</clipPath>
<!-- Three custom Path. Use for stroke aniamtion. -->
<path id="thank" clip-path="url(#originalText)" d="M149,36a25.4,25.4,0,0,0,.5,3.5l-58,108s-27,50-18,65-66-132-66-132l54-23s78-29,81-26c5.6-.2,12-1.5,16,1-3.4-4.9,3.7-4.2,6-6,0,0,96-18,105-13,0,0,53,1-2,27l-66,1-55,118s0,21,17-1,43-40,43-40,16-11,9,8-8,23-8,23,2,23,25,9l53-64,16,12-4,9-27,23-23,26s-8,21,10,9l56-56-2,20c-2.1,1.9-4,3.8-4,5-1.9.9-2.6,3.8-3,7,0,0,9.6,19.5,19,7,10.8-14.4,32.9-34.6,26-41l6,20c-5.3,9.1-11.1,18.6-11,27l45-36s20-7,17,15c0,0-4.5,24.5,30.5,5.5l-14.5,49.5,15,4a169.1,169.1,0,0,1,7.2-28.3,185,185,0,0,1,7.3-17.5l2.5-5.2,20-37c-.1.1,42.4-87.5,42-88l-54,106,38-17s10-9,20,5l-18-7-44,35-11,15,14,3,65-22,3-2" />
<path id="y" clip-path="url(#originalText)" d="M531.5,234.5l7,31s10,32,45-2,103-187,103-187c6.4-13.5,19.8-41.5,33-69l-120,156s-28.9,16.9-23-31,40.3-107.8,40-108l10,2,13,4" />
<path id="ou" clip-path="url(#originalText)" d="M686.5,121.5c14.4-8.7,31.8-19.8,37-21,0,0,29,1,17,19s-30,42-30,42-19,12-16-10c0,0,14-48,29-41s50-11,50-11l-15,29-13,31s-7,23,21-2c21.3-25.3,44.5-44.2,55-50-4.6,10-10.9,24-12,26s-1.3,3-3,5l-4,33" />
</svg>
<footer>
<h2>Please, press the red button!</h2>
<div class="btn">
<div id="top"></div>
<div id="bottom"></div>
<div id="body"></div>
<div id="floor"></div>
</div>
</footer>
</div>
<script src="./script.js"></script>
</body>
</html>