HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • gifthover.json
  • giftopen.json
  • lottie.js
  • script.js
  • style.css
  • victory.json

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.9428142587022306","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFkb2N0eXBlIGh0bWw+Cgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgoKICAgIDx0aXRsZT48L3RpdGxlPgogICAgPG1ldGEgbmFtZT0iYXV0aG9yIiBjb250ZW50PSJTaXRlUG9pbnQiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIj4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iY3NzL3N0eWxlcy5jc3M/dj0xLjAiPgogICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3M/ZmFtaWx5PU51bml0byZkaXNwbGF5PXN3YXAiIHJlbD0ic3R5bGVzaGVldCI+CiAgICA8c3R5bGU+CgogICAgICAgIGJvZHkgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNSk7CiAgICAgICAgfQoKICAgICAgICAubWFpbiB7CiAgICAgICAgICAgIHdpZHRoOjEwMCU7CiAgICAgICAgICAgIG1heC13aWR0aDogNzgwcHg7CiAgICAgICAgICAgIGhlaWdodDogNjUwcHg7CiAgICAgICAgICAgIG1hcmdpbjogYXV0bzsKICAgICAgICAgICAgYmFja2dyb3VuZDogI0Y3RjlGRjsKICAgICAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiAxNXB4OwogICAgICAgICAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICAgICAgICAgIGxlZnQ6IDUwJTsKICAgICAgICAgICAgdG9wOiA1MCU7CiAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7CiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOwogICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgNTBweCByZ2JhKDAsMCwwLDEpOwogICAgICAgIH0KCiAgICAgICAgLmNsb3NlIHsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgICB0b3A6IDIxcHg7CiAgICAgICAgICAgIHJpZ2h0OiAyMXB4OwogICAgICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICAgICAgd2lkdGg6IGF1dG87CiAgICAgICAgICAgIHBhZGRpbmc6IDA7CiAgICAgICAgICAgIGZsb2F0OiBub25lOwogICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDsKICAgICAgICAgICAgbGluZS1oZWlnaHQ6IDE7CiAgICAgICAgICAgIHRleHQtYWxpZ246IHJpZ2h0OwogICAgICAgICAgICBjb2xvcjogaW5oZXJpdDsKICAgICAgICAgICAgb3BhY2l0eTogMTsKICAgICAgICAgICAgei1pbmRleDogMjA7CiAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICBiYWNrZmFjZS12aXNpYmlsaXR5OiBoaWRkZW47CiAgICAgICAgfQoKICAgICAgICAuaW5uZXIgewogICAgICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICAgICAgd2lkdGg6IDMxcHg7CiAgICAgICAgICAgIGhlaWdodDogMzFweDsKICAgICAgICAgICAgcGFkZGluZzogMDsKICAgICAgICAgICAgYmFja2dyb3VuZDogdXJsKGh0dHBzOi8vd29vaG9vLnNmbzIuZGlnaXRhbG9jZWFuc3BhY2VzLmNvbS9pbWcvZ2FtZS9DbG9zZS5zdmcpIG5vLXJlcGVhdCBjZW50ZXIgY2VudGVyOwogICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICAgICAgICAgIGNvbG9yOiBpbmhlcml0OwogICAgICAgICAgICBmb250LXN0eWxlOiBub3JtYWw7CiAgICAgICAgfQoKICAgICAgICAuaGVhZGVyIHsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgICB3aWR0aDoxMDAlOwogICAgICAgICAgICBtYXgtd2lkdGg6IDc4MHB4OwogICAgICAgICAgICBoZWlnaHQ6IDE4MHB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kOiByZ2JhKDI0MywgOSwgMzksIDAuNCk7CiAgICAgICAgICAgIGJhY2tncm91bmQ6IHVybChodHRwczovL3dvb2hvby5zZm8yLmRpZ2l0YWxvY2VhbnNwYWNlcy5jb20vaW1nL2dhbWUvZXhhbXBsZS5qcGVnKSBuby1yZXBlYXQgdG9wIGNlbnRlcjsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMTVweCAxNXB4IDBweCAwOwogICAgICAgIH0KICAgICAgICAuZmllbGQgewogICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgICAgICAgIG1hcmdpbjphdXRvOwogICAgICAgICAgICB3aWR0aDogNTMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMTczcHg7CiAgICAgICAgICAgIHRvcDogNTBweDsKICAgICAgICAgICAgYmFja2dyb3VuZDogI0ZGRkZGRjsKICAgICAgICAgICAgYm94LXNoYWRvdzogMHB4IDBweCA1MC42MTI5cHggcmdiYSgwLCAwLCAwLCAwLjE1KTsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMTVweDsKICAgICAgICB9CgogICAgICAgLlN1YnRyYWN0IHsKICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgICAgICAgd2lkdGg6IDQyNXB4OwogICAgICAgICAgIGhlaWdodDogNDJweDsKICAgICAgICAgICB0b3A6IDIwcHg7CiAgICAgICAgICAgYmFja2dyb3VuZDogI0ZGQ0IzRTsKICAgICAgICAgICBtYXJnaW46IGF1dG87CiAgICAgICB9CgoKICAgICAgIC5iaWcgewogICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgICAgICB0b3A6IDZweDsKICAgICAgICAgICBmb250LWZhbWlseTogTnVuaXRvOwogICAgICAgICAgIGZvbnQtc3R5bGU6IG5vcm1hbDsKICAgICAgICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgICAgICBmb250LXNpemU6IDIxLjA4ODdweDsKICAgICAgICAgICBsaW5lLWhlaWdodDogMjlweDsKICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgICAgICAgbWFyZ2luOiBhdXRvOwogICAgICAgICAgIGNvbG9yOiAjRkZGRkZGOwogICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgICAgIH0KCiAgICAgICAgLndpbiB7CiAgICAgICAgICAgIHdpZHRoOiAyODlweDsKICAgICAgICAgICAgaGVpZ2h0OiAyMnB4OwogICAgICAgICAgICB0b3A6IDIwOXB4OwogICAgICAgICAgICBmb250LWZhbWlseTogTnVuaXRvOwogICAgICAgICAgICBmb250LXN0eWxlOiBub3JtYWw7CiAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTZweDsKICAgICAgICAgICAgbGluZS1oZWlnaHQ6IDIycHg7CiAgICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgICAgICAgICAgdG9wOiAzNXB4OwogICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgICAgICAgIG1hcmdpbjogYXV0bzsKCiAgICAgICAgfQogICAgICAgIC5lbWFpbCB7CiAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgICAgICAgbWFyZ2luOiBhdXRvOwogICAgICAgICAgICB3aWR0aDogMzAwcHg7CiAgICAgICAgICAgIGhlaWdodDogNDBweDsKICAgICAgICAgICAgdG9wOiA0NXB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kOiAjRkZGRkZGOwogICAgICAgICAgICBib3gtc2hhZG93OiAwcHggNS45ODkxOXB4IDE3Ljk2NzZweCByZ2JhKDAsIDAsIDAsIDAuMDYpLCAwcHggMHB4IDUwLjYxMjlweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA0LjIxNzc0cHg7CiAgICAgICAgICAgIC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTsKICAgICAgICAgICAgYm9yZGVyOiAwOwogICAgICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICAgICAgcGFkZGluZzogMCAyMHB4OwogICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogICAgICAgIH0KCiAgICAgICAgOjpwbGFjZWhvbGRlciB7IC8qIENocm9tZSwgRmlyZWZveCwgT3BlcmEsIFNhZmFyaSAxMC4xKyAqLwogICAgICAgICAgICBjb2xvcjogI0I2QzFENjsKICAgICAgICAgICAgb3BhY2l0eTogMTsgLyogRmlyZWZveCAqLwogICAgICAgIH0KCiAgICAgICAgLmRpc2NsYWltZXIgewogICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgICBoZWlnaHQ6IDE5cHg7CiAgICAgICAgICAgIGJvdHRvbTogMjBweDsKICAgICAgICAgICAgZm9udC1mYW1pbHk6IE51bml0bzsKICAgICAgICAgICAgZm9udC1zdHlsZTogbm9ybWFsOwogICAgICAgICAgICBmb250LXdlaWdodDogbm9ybWFsOwogICAgICAgICAgICBmb250LXNpemU6IDE0cHg7CiAgICAgICAgICAgIGxpbmUtaGVpZ2h0OiAxOXB4OwogICAgICAgICAgICBjb2xvcjogIzVENjc4MTsKICAgICAgICAgICAgbWFyZ2luOiBhdXRvOwogICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgICAgICAgfQoKICAgICAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDYwMHB4KSB7CiAgICAgICAgICAgIC5tYWluIHsKICAgICAgICAgICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgICAgICAgICAgaGVpZ2h0OiA1NTBweDsKICAgICAgICAgICAgICAgIG1hcmdpbjogYXV0bzsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6ICNGN0Y5RkY7CiAgICAgICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgICAgICAgICAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogbm9uZTsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogbm9uZTsKICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCA1MHB4IHJnYmEoMCwwLDAsMSk7CiAgICAgICAgICAgICAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwOwogICAgICAgICAgICAgICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDA7CiAgICAgICAgICAgICAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICAgICAgICAgICAgICBib3R0b206IDA7CiAgICAgICAgICAgICAgICB0b3A6IGF1dG87CiAgICAgICAgICAgICAgICBsZWZ0OiAwOwogICAgICAgICAgICB9CgogICAgICAgICAgICAuZGlzY2xhaW1lciB7CiAgICAgICAgICAgICAgICBtYXgtd2lkdGg6IDkwJTsKICAgICAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvIDEwcHg7CiAgICAgICAgICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICAgICAgICAgIGxlZnQ6IDA7CiAgICAgICAgICAgICAgICByaWdodDogMDsKICAgICAgICAgICAgIH0KCiAgICAgICAgICAgIC5maWVsZCB7CiAgICAgICAgICAgICAgICB3aWR0aDogOTAlOwogICAgICAgICAgICAgICAgbWFyZ2luLXRvcDogMzBweDsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLlN1YnRyYWN0IHsKICAgICAgICAgICAgICAgIHdpZHRoOjkwJTsKICAgICAgICAgICAgfQogICAgICAgIH0KCgogICAgPC9zdHlsZT4KCjwvaGVhZD4KCjxib2R5PgoKICAgIDxkaXYgY2xhc3M9Im1haW4iPgogICAgICAgIDxkaXYgY2xhc3M9ImhlYWRlciI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImNsb3NlIj48ZGl2IGNsYXNzPSJpbm5lciI+PC9kaXY+PC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZpZWxkIj4KICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9IlN1YnRyYWN0Ij4KICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJiaWciPldpbiBhIEJJRyBwcml6ZSE8L2Rpdj4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0id2luIj4KICAgICAgICAgICAgICAgICAgICBFbnRlciB5b3VyIGVtYWlsIHRvIGhhdmUgYSBjaGFuY2UgdG8gd2luCiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICA8aW5wdXQgY2xhc3M9ImVtYWlsIiB0eXBlPSJ0ZXh0IiBwbGFjZWhvbGRlcj0iRW50ZXIgZW1haWwgYWRkcmVzcyI+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImRpc2NsYWltZXIiPkZyb20gdGltZSB0byB0aW1lLCB3ZSBtYXkgc2VuZCB5b3UgbW9yZSBzcGVjaWFsIG9mZmVycy4gWW91IGNhbiB1bnN1YnNjcmliZSBhdCBhbnkgdGltZS48L2Rpdj4KICAgIDwvZGl2PgoKPC9ib2R5Pgo8L2h0bWw+"},"asBuffer":null},"loaded":true}}
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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title></title>
    <meta name="author" content="SitePoint">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css?v=1.0">
    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
    <style>

        body {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .main {
            width:100%;
            max-width: 780px;
            height: 650px;
            margin: auto;
            background: #F7F9FF;
            position: relative;
            border-radius: 15px;
            position: fixed;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            box-shadow: 0 0 50px rgba(0,0,0,1);
        }

        .close {
            position: absolute;
            top: 21px;
            right: 21px;
            display: block;
            width: auto;
            padding: 0;
            float: none;
            background: transparent;
            line-height: 1;
            text-align: right;
            color: inherit;
            opacity: 1;
            z-index: 20;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .inner {
            display: block;
            width: 31px;
            height: 31px;
            padding: 0;
            background: url(https://woohoo.sfo2.digitaloceanspaces.com/img/game/Close.svg) no-repeat center center;
            cursor: pointer;
            color: inherit;
            font-style: normal;
        }

        .header {
            position: absolute;
            width:100%;
            max-width: 780px;
            height: 180px;
            background: rgba(243, 9, 39, 0.4);
            background: url(https://woohoo.sfo2.digitaloceanspaces.com/img/game/example.jpeg) no-repeat top center;
            border-radius: 15px 15px 0px 0;
        }
        .field {
            position: relative;
            margin:auto;
            width: 530px;
            height: 173px;
            top: 50px;
            background: #FFFFFF;
            box-shadow: 0px 0px 50.6129px rgba(0, 0, 0, 0.15);
            border-radius: 15px;
        }

       .Subtract {
           position: relative;
           width: 425px;
           height: 42px;
           top: 20px;
           background: #FFCB3E;
           margin: auto;
       }


       .big {
           position: relative;
           top: 6px;
           font-family: Nunito;
           font-style: normal;
           font-weight: bold;
           font-size: 21.0887px;
           line-height: 29px;
           position: relative;
           margin: auto;
           color: #FFFFFF;
           text-align: center;
       }

        .win {
            width: 289px;
            height: 22px;
            top: 209px;
            font-family: Nunito;
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 22px;
            text-align: center;
            top: 35px;
            position: relative;
            margin: auto;

        }
        .email {
            position: relative;
            margin: auto;
            width: 300px;
            height: 40px;
            top: 45px;
            background: #FFFFFF;
            box-shadow: 0px 5.98919px 17.9676px rgba(0, 0, 0, 0.06), 0px 0px 50.6129px rgba(0, 0, 0, 0.08);
            border-radius: 4.21774px;
            -webkit-appearance: none;
            border: 0;
            display: block;
            padding: 0 20px;
            box-sizing: border-box;
        }

        ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #B6C1D6;
            opacity: 1; /* Firefox */
        }

        .disclaimer {
            width: 100%;
            position: absolute;
            height: 19px;
            bottom: 20px;
            font-family: Nunito;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 19px;
            color: #5D6781;
            margin: auto;
            text-align: center;
        }

        @media only screen and (max-width: 600px) {
            .main {
                width: 100%;
                height: 550px;
                margin: auto;
                background: #F7F9FF;
                position: relative;
                position: fixed;
                -webkit-transform: none;
                transform: none;
                box-shadow: 0 0 50px rgba(0,0,0,1);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                position: fixed;
                bottom: 0;
                top: auto;
                left: 0;
            }

            .disclaimer {
                max-width: 90%;
                margin: 0 auto 10px;
                display: block;
                left: 0;
                right: 0;
             }

            .field {
                width: 90%;
                margin-top: 30px;
            }

            .Subtract {
                width:90%;
            }
        }


    </style>

</head>

<body>

    <div class="main">
        <div class="header">
            <div class="close"><div class="inner"></div></div>
            <div class="field">
                <div class="Subtract">
                    <div class="big">Win a BIG prize!</div>
                </div>
                <div class="win">
                    Enter your email to have a chance to win
                </div>
                    <input class="email" type="text" placeholder="Enter email address">
            </div>
        </div>
        <div class="disclaimer">From time to time, we may send you more special offers. You can unsubscribe at any time.</div>
    </div>

</body>
</html>
result
console