-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
667 lines (659 loc) · 32.7 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
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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ToonTube</title>
<meta name="description" content="ToonTube - Описание сайта">
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" rel="stylesheet"/>
<link href="css/style.min.css" rel="stylesheet">
</head>
<body class="hidden">
<div id="loader-js" class="loader">
<p class="logo">ToonTube</p>
<div class="wrap">
<div>
<span></span>
</div>
</div>
</div>
<div class="wrapper">
<div id="waitingJs" class="waiting">
<div class="waiting-content">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"><path opacity="0.2" fill="currentColor" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/><path fill="currentColor" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.8s" repeatCount="indefinite"/></path></svg>
</div>
</div>
<header class="header">
<div class="header_content headerMenuBoxJs">
<div class="header_content-wrap container">
<a href="index.html" class="header-logo">ToonTube</a>
<a href="#" data-arcticmodal="modal-1" class="header-btn btn red size-small arcticmodal-btn">Get in touch</a>
<button class="header_menu-btn headerMenuBtnJs"><span></span></button>
</div>
<div class="header_menu container">
<div class="header_menu-nav">
<div>
<a href="#screen3" class="fixed_nav-link scrollToAnchor">Everything you need</a>
<a href="#" class="fixed_nav-link arcticmodal-btn" data-arcticmodal="modal-2">Download “5-Step Guide”</a>
<a href="#" data-arcticmodal="modal-1" class="fixed_nav-link arcticmodal-btn">Get in touch</a>
</div>
</div>
</div>
</div>
</header>
<div class="wrapper-content">
<div class="screen1 screen1Animate">
<div class="screen1-bg">
<canvas class="grain"></canvas>
</div>
<div class="screen1-wrap container">
<div class="screen1-content">
<div class="screen1-el position-1">
<div class="parallaxScene">
<div class="layer" data-depth="0.4"><img src="img/screen1-el-1.svg" alt=""></div>
</div>
</div>
<div class="screen1-top">
<h1 class="screen1-title max-width-440">Transform your fans to growth</h1>
<p class="screen1-desc">Sell episodes, build vibrant communities, and monetise memberships — all on a single, scalable platform.</p>
</div>
<div class="screen1-bottom">
<div class="screen1-btn-wrap">
<a href="#" data-arcticmodal="modal-2" class="screen1-btn btn red size-medium arcticmodal-btn">Start selling</a>
</div>
<p class="screen1-note">
<span>Yes, it’s free</span>
</p>
</div>
</div>
<div class="screen1__visual screen1VisualAnimate">
<div class="screen1__visual-monitor">
<div class="screen1__visual-bg">
<img src="img/screen1-monitor.svg" alt="Main screen monitor">
</div>
<div class="screen1__visual-image">
<img src="img/screen1-image.jpg" alt="Main screen image">
</div>
</div>
<div class="screen1__visual-blocks">
<div class="screen1__visual-block">
<i></i>
<div>
<b>Alex brought episode 2</b>
</div>
</div>
<div class="screen1__visual-block">
<i></i>
<div>
<b>Lindsey is now a member</b>
<p>$ 12.00 per month pledged by Lindsey. Congrats!</p>
</div>
</div>
<div class="screen1__visual-block">
<i></i>
<div>
<b>Sam supports you!</b>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="screen2 screen2Animate">
<div class="container">
<div class="screen2-wrap">
<span class="screen2-icon"><img src="img/screen2-icon.svg" alt=""></span>
<p class="screen2-title">You keep <span>75%</span> of the revenue. No hidden fees.</p>
<p class="screen2-description">Toontube stands apart from other fitness platforms. Here, webcomics creators take home 75% of every subscription and retain full ownership of their content. And the best part? No hidden charges — joining Toontube is absolutely free</p>
</div>
</div>
</div>
<div class="screen3" id="screen3">
<div class="screen3-wrap container">
<div class="screen3-head">
<p class="screen3-title">What can I offer <br>my fans on Toontube?</p>
<p class="screen3-description">We equip you with top-tier tech, empowering you to deliver the ultimate experience for your fans.</p>
</div>
<div class="screen3-box screen3BoxAnimate">
<div class="screen3__block screen3__block--1">
<div class="screen3__block-img img">
<img src="img/screen3-img-1.png" alt="">
</div>
<div class="screen3__block-content content">
<div class="screen3__block-head">
<p class="screen3__block-title">Direct Them to Your <br>Personal Space</p>
</div>
<p class="screen3__block-description">Creating Your Own Reader: Guide fans directly to your personalized reader, ensuring they engage with your content in an environment crafted by you.</p>
</div>
</div>
<div class="screen3__block screen3__block--2">
<div class="screen3__block-img img">
<img src="img/screen3-img-2.png" alt="">
</div>
<div class="screen3__block-content content">
<div class="screen3__block-head">
<p class="screen3__block-title">Creating Your <br>Own Reader:</p>
</div>
<p class="screen3__block-description">Creating Your Own Reader: Guide fans directly to your personalized reader, ensuring they engage with your content in an environment crafted by you.</p>
</div>
</div>
<div class="screen3__block screen3__block--3">
<div class="screen3__block-img img">
<img src="img/screen3-img-3.png" alt="">
</div>
<div class="screen3__block-content content">
<div class="screen3__block-head">
<p class="screen3__block-title">Direct Them to Your <br>Personal Space</p>
</div>
<p class="screen3__block-description">Membership: Craft an exclusive club! Offer dedicated fans special perks, early access, and a closer connection to you and your work.</p>
</div>
</div>
<div class="screen3__block screen3__block--4">
<div class="screen3__block-img img">
<img src="img/screen3-img-4.png" alt="">
</div>
<div class="screen3__block-content content">
<div class="screen3__block-head">
<p class="screen3__block-title">Flexible Content <br>Access</p>
</div>
<p class="screen3__block-description">Selling or Renting Episodes: Give fans the choice! Whether they want to own an episode or simply rent it for a day, cater to every fan's needs and preferences.</p>
</div>
</div>
</div>
<div class="screen3-mobile">
<img src="img/screen3-img-1.png" alt="">
<img src="img/screen3-img-2.png" alt="">
</div>
</div>
</div>
<div class="screen4">
<div class="screen4-wrap container">
<div class="screen4-bg screen4BgAnimate"><img src="img/screen4-img.png" alt=""></div>
<div class="screen4-content">
<p class="screen4-title">Toontube isn't just a platform, it's your dedicated partner in the webcomics world.</p>
<p class="screen4-description">Profit from your passion for creating compelling comics. Every feature and tool we provide is tailored to bolster your success.</p>
<div class="screen4-info">
<div><p>Customer support ensures your fans are always cared for.</p></div>
<div><p>Let's co-create: we collaborate intimately to elevate your brand.</p></div>
</div>
<a href="#" data-arcticmodal="modal-2" class="screen4-btn btn red size-medium arcticmodal-btn">Start selling</a>
</div>
</div>
</div>
<div class="screen5">
<div class="screen5-wrap container">
<p class="screen5-title">We already have on our platform</p>
<div class="screen5-slider projectsSlider screen5SliderAnimate">
<div class="screen5__block">
<a href="https://toontube.co/project/6400809b651f9fc369319f43" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/6400809b651f9fc369319f43.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">The Peacemakers</span>
<span class="screen5__block-category">Comics, 2019</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/641e0cc005708b29765e697a" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/641e0cc005708b29765e697a.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">Kid of Darkness</span>
<span class="screen5__block-category">Comics, 2019</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/6429646b02cbbf0de9fd236e" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/6429646b02cbbf0de9fd236e.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">Hunger</span>
<span class="screen5__block-category">Comics, 2018</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/643e7e64318330950c33f4e3" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/643e7e64318330950c33f4e3.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Manga</span>
<span class="screen5__block-name">Enclave</span>
<span class="screen5__block-category">Manga, 2022</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/648ac3b80e6df15094ec1ee1" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/648ac3b80e6df15094ec1ee1.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">RASKOLNIKOV</span>
<span class="screen5__block-category">Comics, 2019</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/648acef394debc2a8f859db1" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/648acef394debc2a8f859db1.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">Tapeworm</span>
<span class="screen5__block-category">Comics, 2019</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/64d4d4149c2e41246463f138" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/64d4d4149c2e41246463f138.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">Milky</span>
<span class="screen5__block-category">Sci-fi, 2020</span>
</span>
</div>
<div class="screen5__block">
<a href="https://toontube.co/project/64d4fe412f2dac3423176fee" class="screen5__block-link" target="_blank"></a>
<span class="screen5__block-img">
<img src="img/projects/64d4fe412f2dac3423176fee.jpg" alt="">
</span>
<span class="screen5__block-content">
<span class="screen5__block-type">Comics</span>
<span class="screen5__block-name">Dragon's Mist</span>
<span class="screen5__block-category">Action, 2020</span>
</span>
</div>
</div>
</div>
</div>
<div class="screen10">
<div class="screen10-wrap container">
<p class="screen10-title">How much will I earn?</p>
<div class="screen10-box">
<div class="screen10-content">
<div class="screen10-list">
<div class="screen10__block">
<p class="screen10__block-title">Enter your estimated number of Toontube subscribers:</p>
<div class="range_slider">
<input id="js-range-subscribers" type="text" name="range-subscribers"
value="20000"
data-min="0"
data-max="100000"
/>
</div>
</div>
<div class="screen10__block">
<p class="screen10__block-title">Enter the subscription price:</p>
<div class="range_slider">
<input id="js-range-price" type="text" name="range-price"
value="15"
data-min="0"
data-max="100"
/>
</div>
</div>
</div>
<div class="screen10__result">
<div class="screen10__result-block">
<p class="screen10__result-title">Your Monthly Income Awaits</p>
<p class="screen10__result-data" id="monthlyPotential">0</p>
</div>
<span class="screen10__result-line"></span>
<div class="screen10__result-block">
<p class="screen10__result-title">Your Yearly Earning Horizon</p>
<p class="screen10__result-data" id="yearlyPotential">0</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="screen6">
<div class="screen6-wrap container">
<p class="screen6-title">What creators ask us...</p>
<div class="screen6-box screen6Faq screen6BoxAnimate">
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">Are there any hidden costs?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>Joining Toontube as a creator won't cost you a dime in upfront, management, or membership fees. While we do have premium services available should you wish to lean on our team's expertise, you can fully utilize the platform at no charge.</p>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">What is the payment structure?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>From the users you onboard via your sales page, you'll pocket 75% of the subscription revenue. There's a 5% fee for credit card processing. The remaining 20% goes to Toontube, which we reinvest to enhance our technology and introduce features that further your business growth.</p>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">Do I have access to customer data?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>Absolutely. You can view the names, email addresses, and subscription statuses of your users.</p>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">What type of creators can use Toontube?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>Toontube is dedicated to the world of webcomics. We cater to a diverse spectrum of creators, from those involved in manga comics and webtoons to manga enthusiasts.</p>
<p>Our community boasts a mix of individual creators, bustling studios, and renowned publishers.</p>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">Can I still have other business offerings while on Toontube?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>Certainly! We fully back our creators in pursuing what's best for their venture.</p>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">Why should I use Toontube?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>99% of webcomic platforms restrict you and your creations indefinitely. Many simply provide you with the tools and leave you to navigate on your own. That's not how we operate at Toontoon. We prioritize our creators above all — every move we make aims to pave your path to success.</p>
<p>At Toontoon, you:</p>
<ul>
<li>Retain full rights to your comics, data, and audience.</li>
<li>Craft as many stories and panels as you wish from any corner of the globe.</li>
<li>Harness state-of-the-art technology that evolves with your feedback and personalized needs.</li>
<li>Tap into resources and tutorials to boost your webcomic enterprise.</li>
<li>Depend on our design and tech teams to refine, establish, and publicize your unique narrative.</li>
</ul>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">How much money can I make on Toontube?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>Your achievements and earnings hinge on your efforts — the more you invest, the more you reap. We're by your side to assist in amplifying your channel and boosting your revenue.</p>
</div>
</div>
<div class="screen6__block block">
<div class="screen6__block-nav nav">
<p class="screen6__block-title">I'm thinking about paying someone to create my own app, why should I choose Toontube instead?</p>
<span class="icon"></span>
</div>
<div class="screen6__block-content content">
<p>Creating a top-notch site can run into hundreds of thousands of dollars, both for its inception and its upkeep. Often, you may find yourself compromising on design and user experience just to get your platform operational. Beyond that, you'd be juggling bug fixes, customer service, and pouring in personal resources for constant updates.</p>
<p>But with Toontube, we simplify the process. We present you with an advanced, user-friendly reader right from the outset. Our team is continuously refining based on your insights, assisting you in shaping your channel, and equipping you with everything necessary for triumph. And the cherry on top? You retain 75% of all earnings.</p>
</div>
</div>
</div>
</div>
</div>
<div class="screen7">
<div class="screen7-wrap container">
<div class="screen7-content">
<div class="screen7-el">
<div class="parallaxScene">
<div class="layer" data-depth="0.4"><img src="img/screen1-el-1.svg" alt=""></div>
</div>
</div>
<p class="screen7-title screen7TitleAnimate">One click to success!</p>
<a href="#" data-arcticmodal="modal-1" class="screen7-btn arcticmodal-btn screen7BtnAnimate"><span>Start</span></a>
<span class="screen7-note screen7NoteAnimate">Share your story. Brighten someone's day.</span>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-wrap container">
<div class="footer__subscription footerSubscriptionAnimate">
<div class="footer__subscription-head">
<p class="footer__subscription-title"><b>ToonTube’s blog</b></p>
<p class="footer__subscription-desc">Be the first to know the latest of our news.</p>
</div>
<a href="#" class="footer__subscription-btn btn black size-small arcticmodal-btn" data-arcticmodal="modal-3">Subscribe</a>
</div>
<div class="footer-block block-2">
<p class="footer-title">ToonTube</p>
<a href="#" class="footer-link">Ask a question</a>
</div>
<div class="footer-block">
<p class="footer-subtitle">About</p>
<div class="footer-nav">
<a href="#">Terms</a>
<a href="#">Privacy policy</a>
<a href="#">Copyright</a>
<a href="#">About us</a>
</div>
</div>
<div class="footer-block">
<p class="footer-subtitle">Info</p>
<div class="footer-nav">
<a href="#">User agreement</a>
<a href="#">Revenue Growth</a>
<a href="#">Roadmap</a>
<a href="#">FAQ</a>
</div>
</div>
<div class="footer-block block-5">
<p class="footer-subtitle">Contacts</p>
<p class="footer-copyright">ToonTube 2023</p>
<div class="footer-soc">
<div>
<a href="#"><svg width="11" height="20" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M9.671 11.469 10.203 8H6.875V5.75c0-.949.465-1.875 1.956-1.875h1.513V.922S8.97.687 7.658.687c-2.741 0-4.533 1.662-4.533 4.67V8H.078v3.469h3.047v8.385a12.13 12.13 0 0 0 3.75 0V11.47h2.796Z"/></svg></a>
<a href="#"><svg width="24" height="24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.16c3.206 0 3.586.015 4.847.071 1.172.052 1.805.249 2.226.413a3.71 3.71 0 0 1 1.379.895c.421.422.68.82.895 1.378.164.422.36 1.06.412 2.227.057 1.265.07 1.645.07 4.847 0 3.206-.013 3.586-.07 4.846-.051 1.172-.248 1.805-.412 2.227-.216.558-.478.961-.895 1.378a3.69 3.69 0 0 1-1.379.895c-.421.165-1.059.361-2.226.413-1.266.056-1.645.07-4.847.07-3.206 0-3.586-.014-4.847-.07-1.172-.052-1.805-.248-2.226-.413a3.71 3.71 0 0 1-1.379-.895 3.691 3.691 0 0 1-.895-1.378c-.164-.422-.36-1.06-.412-2.227-.057-1.265-.07-1.645-.07-4.846 0-3.207.013-3.586.07-4.847.051-1.172.248-1.805.412-2.227.216-.558.478-.96.895-1.378.422-.422.82-.68 1.379-.895.421-.164 1.059-.361 2.226-.413 1.261-.056 1.64-.07 4.847-.07ZM12 0C8.742 0 8.334.014 7.055.07 5.78.127 4.903.333 4.144.628a5.857 5.857 0 0 0-2.128 1.388A5.88 5.88 0 0 0 .628 4.139C.333 4.903.127 5.775.07 7.05.014 8.334 0 8.742 0 12s.014 3.666.07 4.945c.057 1.275.263 2.152.558 2.911.31.792.717 1.463 1.388 2.128a5.866 5.866 0 0 0 2.123 1.383c.764.296 1.636.502 2.911.558 1.28.056 1.688.07 4.945.07 3.258 0 3.666-.014 4.946-.07 1.275-.056 2.151-.262 2.91-.558a5.866 5.866 0 0 0 2.124-1.383 5.866 5.866 0 0 0 1.383-2.123c.295-.764.501-1.636.558-2.911.056-1.28.07-1.688.07-4.945 0-3.258-.014-3.666-.07-4.946-.057-1.275-.263-2.151-.558-2.91a5.62 5.62 0 0 0-1.374-2.133A5.866 5.866 0 0 0 19.861.633C19.097.338 18.225.13 16.95.075 15.666.015 15.258 0 12 0Z"/><path d="M12 5.836A6.166 6.166 0 0 0 5.836 12 6.166 6.166 0 0 0 12 18.164 6.166 6.166 0 0 0 18.164 12 6.166 6.166 0 0 0 12 5.836Zm0 10.162A3.999 3.999 0 1 1 12.001 8 3.999 3.999 0 0 1 12 15.998ZM19.847 5.592a1.44 1.44 0 1 1-2.879 0 1.44 1.44 0 0 1 2.879 0Z"/></svg></a>
<a href="#"><svg width="21" height="24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M15.072 0h-4.044v16.348c0 1.948-1.556 3.548-3.492 3.548s-3.491-1.6-3.491-3.548c0-1.913 1.52-3.478 3.388-3.548V8.696C3.319 8.766 0 12.139 0 16.348 0 20.59 3.388 24 7.57 24c4.184 0 7.572-3.444 7.572-7.652V7.965A9.366 9.366 0 0 0 20.5 9.774V5.67c-3.042-.105-5.428-2.61-5.428-5.67Z"/></svg></a>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<div style="display: none;">
<div class="modal_styles" id="modal-1">
<div class="modal_styles-box">
<button class="modal_styles-close arcticmodal-close"><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 15 1 1M15 1 1 15" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></button>
<div class="modal_styles-content">
<div class="modal_styles-title">
<div class="modal_styles-el position-1">
<div class="parallaxScene">
<div class="layer" data-depth="0.4"><img src="img/modal-el-1.svg" alt=""></div>
</div>
</div>
<p>Get in touch with us</p>
</div>
<div class="modal_styles-el position-2">
<div class="parallaxScene">
<div class="layer" data-depth="0.2"><img src="img/modal-el-2.svg" alt=""></div>
</div>
</div>
</div>
<form action="sendmail.php" method="post" class="modal_styles__form modalFormSend">
<input type="hidden" name="form" value="Get in touch with us">
<div class="modal_styles__form-head">
<p class="modal_styles__form-title">Everything you need</p>
<p class="modal_styles__form-desc">Toontube provides more than just the plumbing. As a merchant of record, we do it for you:</p>
</div>
<div class="modal_styles__form-box">
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">First name</p>
<div class="modal_styles__form-field">
<input type="text" name="name" placeholder="Ryo Takeru" required>
</div>
</div>
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">Your e-mail</p>
<div class="modal_styles__form-field">
<input type="email" name="email" placeholder="[email protected]" required>
</div>
</div>
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">Followers in the range</p>
<div class="modal_styles__form-field">
<select class="modalFormSelect" name="select">
<option value="5,000-10,000">5,000-10,000</option>
<option value="10,000-15,000">10,000-15,000</option>
<option value="15,000-20,000">15,000-20,000</option>
</select>
</div>
</div>
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">Link to your graphic novel</p>
<div class="modal_styles__form-field">
<input type="text" name="link" placeholder="webtoon, tapas or your own site" required>
</div>
</div>
</div>
<div class="modal_styles__form-btns">
<button type="submit" class="modal_styles__form-submit btn red">Send</button>
<a href="#" class="modal_styles__form-close arcticmodal-close">Not now</a>
</div>
</form>
</div>
</div>
</div>
<div style="display: none;">
<div class="modal_styles" id="modal-2">
<div class="modal_styles-box">
<button class="modal_styles-close arcticmodal-close"><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 15 1 1M15 1 1 15" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></button>
<div class="modal_styles-content">
<div class="modal_styles-title">
<div class="modal_styles-el position-1">
<div class="parallaxScene">
<div class="layer" data-depth="0.4"><img src="img/modal-el-1.svg" alt=""></div>
</div>
</div>
<p>5-Step <br>guide</p>
</div>
<div class="modal_styles-el position-2">
<div class="parallaxScene">
<div class="layer" data-depth="0.2"><img src="img/modal-el-2.svg" alt=""></div>
</div>
</div>
</div>
<form action="sendmail.php" method="post" class="modal_styles__form modalFormSend" data-file-download="files/MangaFY.pdf">
<input type="hidden" name="form" value="5-Step guide">
<div class="modal_styles__form-head">
<p class="modal_styles__form-title">Everything you need</p>
<p class="modal_styles__form-desc">Toontube provides more than just the plumbing. As a merchant of record, we do it for you:</p>
</div>
<div class="modal_styles__form-box">
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">First name</p>
<div class="modal_styles__form-field">
<input type="text" name="name" placeholder="Ryo Takeru" required>
</div>
</div>
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">Your e-mail</p>
<div class="modal_styles__form-field">
<input type="email" name="email" placeholder="[email protected]" required>
</div>
</div>
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">Followers in the range</p>
<div class="modal_styles__form-field">
<select class="modalFormSelect" name="select">
<option value="5,000-10,000">5,000-10,000</option>
<option value="10,000-15,000">10,000-15,000</option>
<option value="15,000-20,000">15,000-20,000</option>
</select>
</div>
</div>
</div>
<div class="modal_styles__form-btns">
<button type="submit" class="modal_styles__form-submit btn red">Send</button>
<a href="#" class="modal_styles__form-close arcticmodal-close">Not now</a>
</div>
</form>
</div>
</div>
</div>
<div style="display: none;">
<div class="modal_styles" id="modal-3">
<div class="modal_styles-box">
<button class="modal_styles-close arcticmodal-close"><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 15 1 1M15 1 1 15" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></button>
<div class="modal_styles-content with_logo">
<div class="modal_styles-title">
<div class="modal_styles-el position-1">
<div class="parallaxScene">
<div class="layer" data-depth="0.4"><img src="img/modal-el-1.svg" alt=""></div>
</div>
</div>
<div class="modal_styles-el position-2">
<div class="parallaxScene">
<div class="layer" data-depth="0.2"><img src="img/modal-el-2.svg" alt=""></div>
</div>
</div>
<i><img src="img/logo-toontube.svg" alt=""></i>
</div>
</div>
<form action="sendmail.php" method="post" class="modal_styles__form modalFormSend">
<input type="hidden" name="form" value="Subscribe">
<div class="modal_styles__form-head">
<p class="modal_styles__form-title">Subscribe</p>
<p class="modal_styles__form-desc">Enjoy our treats for webcomic creators! Get the latest webcomic trends, strategies, and tools delivered straight to your inbox via Toontube. All content is presented in an easy-to-digest format.</p>
</div>
<div class="modal_styles__form-box">
<div class="modal_styles__form-block">
<p class="modal_styles__form-label">Your e-mail to subscribe</p>
<div class="modal_styles__form-field">
<input type="email" name="email" placeholder="[email protected]" required>
</div>
</div>
</div>
<div class="modal_styles__form-btns">
<button type="submit" class="modal_styles__form-submit btn red">Subscribe to ToonTube</button>
<a href="#" class="modal_styles__form-close arcticmodal-close">Not now</a>
</div>
</form>
</div>
</div>
</div>
<div style="display: none;">
<div class="modal_styles modal_styles--thanks" id="modal-thanks">
<div class="modal_thanks-box">
<button class="modal_styles-close arcticmodal-close"><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 15 1 1M15 1 1 15" stroke="#FE2C55" stroke-width="2" stroke-linecap="round"/></svg></button>
<div class="modal_thanks-content">
<p class="modal_thanks-title">Congratulations 🎉</p>
<div class="modal_thanks-desc">
<p>You've completed the form and hit the submit button like a boss!</p>
<p>Our team will review your submission and get back to you shortly.</p>
<p>In the meantime, pat yourself on the back and enjoy the rest of your day. 😎</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/gsap.min.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<script src="js/ScrollToPlugin.min.js"></script>
<script src="js/jquery.parallax.min.js"></script>
<script src="js/jquery.arcticmodal-0.3.min.js"></script>
<script src="js/ion.rangeSlider.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>