-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtestAddUrlTOPage.html
561 lines (455 loc) · 46.8 KB
/
testAddUrlTOPage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Online Abuse on Twitter - Amnesty International
</title>
<meta name="author" content="Amnesty International">
<meta name="description" content="Twitter - letting people abuse women wherever they are in the world.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/tachyons.css">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MH9W89');</script>
<!-- End Google Tag Manager -->
<!-- Start Visual Website Optimizer Asynchronous Code -->
<script type='text/javascript'>
var _vwo_code=(function(){
var account_id=150776,
settings_tolerance=2000,
library_tolerance=2500,
use_existing_jquery=false,
/* DO NOT EDIT BELOW THIS LINE */
f=false,d=document;return{use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);var a=d.createElement('style'),b='body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&r='+Math.random());return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();
</script>
<!-- End Visual Website Optimizer Asynchronous Code -->
<!-- Hotjar Tracking Code for www.amnesty.org -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:63448,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body class="helvetica">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MH9W89"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="bg-twitter-blue white pa3 cf">
<ul class="list ma0 pa0">
<li class="fill-white v-mid fl mr2" style="height:24px;width:24px">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg>
</li>
<li class="fl mr2 mr4-l">
<a class="white fw7 link pl2 pr2" href="#" title="About">About</a>
</li>
<li class="fl mr2 mr4-l">
<a class="white link o-60 glow" href="#" title="Let's go Twitter">Stop</a>
</li>
<li class="fl mr2 mr4-l">
<a class="white link o-60 glow" href="#" title="Values">Toxic</a>
</li>
<li class="fl mr2 mr4-l">
<a class="white link o-60 glow" href="#" title="Values">Abuse on</a>
</li>
<li class="fl">
<a class="white link o-60 glow" href="#" title="Blog">Twitter</a>
</li>
</ul>
</nav>
<section class="bg-twitter-blue white pa4 pt5 pb6 relative min-vh-100">
<div class="mw8-l center-l">
<h2 class="o-50 f6 f4-l pb0 lh-title">Twitter started with a simple, but powerful idea:</h2>
<div id="typed-strings">
<h1 class="f3 f1-l tracked-tight pt1 lh-solid mt0">Let people abuse women wherever they are in the world right now.<span class="db pt4">Tell Twitter to make this stop.</span></h1>
</div>
<span id="typed" class="f3 f1-l tracked-tight pt1 lh-solid mt0 fw7"></span>
<div id="hiddenButton" class="clip">
<div class="mw5 mw7-ns center pa3 pt5-ns tc">
<a class="f5 f3-l fw7 link dim br-pill ph3 pv2-5 mb2 dib twitter-blue bg-white" target="_blank" href="https://twitter.com/intent/tweet?text=Hey%20%40Jack%2C%20%23HereWeAre%20telling%20you%20that%20women%20are%20STILL%20being%20abused%20and%20silenced%20on%20your%20%23ToxicTwitter.%20">Tweet now</a>
<ul id="menu-nav">
<h2>Current Page: <span>/</span></h2>
<h2 class="f6 f4-l pb0 lh-title">
<button role="button" type="button" id="dropDown" class="white-60 hover-white-90 pointer-hover" aria-expanded="false" id="actionlink"><a href="?page-2/" title="Pagina 2">
Not on Twitter? No worries, email them instead!
<svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
<rect class="vert" height="8" width="2" y="1" x="4"/>
<rect height="2" width="8" y="4" x="1"/>
</svg>
</a>
</button>
</h2>
</div>
<script>
// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function(url) {
$('h2 span').html(url || "/");
$("#actionlink a[href='" + url + "']").fadeTo(500, 0.3);
};
$('#actionlink a').click(function(e){
e.preventDefault();
var targetUrl = $(this).attr('href'),
targetTitle = $(this).attr('title');
$("#actionlink a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);
window.history.pushState({url: "" + targetUrl + ""}, targetTitle, targetUrl);
setCurrentPage(targetUrl);
});
window.onpopstate = function(e) {
$("#actionlink a").fadeTo('fast', 1.0);
setCurrentPage(e.state ? e.state.url : null);
};
</script>
<div hidden id="dropDownTarget">
<p style="text-align:center;">Send an email to the CEO of Twitter and make a stand with Amnesty International</p>
<p><iframe frameborder="0" scrolling="no" src="https://join.amnesty.org/ea-action/action?ea.client.id=1924&ea.campaign.id=101468" id="iFrameResizer0" style="width:100%; height:1050px;"></iframe></p>
</div>
<div hidden id="dropDownTarget">
<p style="text-align:center;">Send an email to the CEO of Twitter and make a stand with Amnesty International</p>
<p><iframe frameborder="0" scrolling="no" src="https://join.amnesty.org/ea-action/action?ea.client.id=1924&ea.campaign.id=101468" id="iFrameResizer0" style="width:100%; height:1050px;"></iframe></p>
</div>
</div>
</div>
<div id="arrow" class="absolute center left-0 right-0 bottom-3 w2 h2 fill-twitter-lightblue pointer-hover">
<a href="#section2" class="fill-white">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="0 0 34 20"><path d="M20.1,16.3c-0.3,0-0.6-0.1-0.8-0.3L6.4,6.8C5.8,6.4,5.6,5.5,6.1,4.9C6.5,4.3,7.4,4.1,8,4.6l12.1,8.7l12.1-8.7 c0.6-0.4,1.5-0.3,1.9,0.3c0.4,0.6,0.3,1.5-0.3,1.9l-12.9,9.3C20.6,16.2,20.4,16.3,20.1,16.3z"></path></svg>
</a>
</div>
</section>
<section id="section2" class="vh-100 w-100 bg-dark-gray white cover minh8-l" style="background:url(images/VAWLargeImageTop-web.jpg) no-repeat center;">
<div class="pa4 pt2 pt5-l pb2 pb4-l w-40-l ml5-l">
<h2 class="f5 f3-l pb0 lh-title mb2-l">When online abuse happens</h2>
<h1 class="f2 f-subheadline-l tracked-tight pt1 lh-solid mt0">it happens on Twitter.</h1>
<div class="line bg-twitter-blue w3 hsmall"></div>
</div>
<div class="mw7-l center-l">
<div class="tweet-container pa3">
<div class="tweet ba br2 center bg-black-50">
<div class="tweet-inner pa3">
<div class="fl">
<img src="images/JessicaValenti.jpg" class="br-100 h2 w2 dib" alt="avatar">
<div class="dib">
<h2 class="f6 mv0 pb1">Jessica Valenti</h2>
<h3 class="f7 mt0 fw3 moon-gray">@JessicaValenti</h3>
</div>
</div>
<div class="fr">
<h3 class="f7 mt0 fw3 moon-gray">Mar 5 2018</h3>
</div>
<p class="f4 f1-l lh-title tracked-tight cb"><span class="twitter-pink">#HereWeAre</span> <span class="gold">♀️</span>, still watching as Twitter does little to nothing about the rampant misogyny & racism that infects this space</p>
<div class="tweet-container pa3">
<div class="tweet ba br2 center b--moon-gray">
<div class="tweet-inner pa3 pb0">
<h2 class="f6 f4-l mv0 pb1">Twitter</h2>
<h3 class="f7 f5-l mt0 fw4 moon-gray">@Twitter</h3>
<p class="f6 f3-l lh-title tracked-tight white">We stand with women around the world to make their voices heard and their presence known. To bring them front and center, today and every day. Join us as we say #HereWeAre <span class="gold">♀️</span></p>
<p class="f7 f5-l lh-title tracked-tight moon-gray">Show this thread</p>
</div>
</div>
</div>
<div class="dib mr3">
<div class="fill-white dib" style="height:17px;width:17px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.75 19.75"><title>ReplyIcon</title><path d="M16-.76H11.9A7.72,7.72,0,0,0,4.1,7a7.41,7.41,0,0,0,7.47,7.37v3.83a0.86,0.86,0,0,0,.12.4,0.75,0.75,0,0,0,1,.23c0.26-.17,6.47-4.14,8.09-5.51a8.45,8.45,0,0,0,3-6.31h0A7.72,7.72,0,0,0,16-.76Zm3.79,13c-1.13,1-4.86,3.41-6.77,4.64V13.67a0.75,0.75,0,0,0-.75-0.75h-0.4C8.25,12.92,5.6,10.44,5.6,7A6.23,6.23,0,0,1,11.9.73H16A6.23,6.23,0,0,1,22.35,7,6.93,6.93,0,0,1,19.83,12.21Z" transform="translate(-4.1 0.77)"></path></svg>
</div>
<span class="dib f6">37</span>
</div>
<div class="dib mr3">
<div class="fill-white dib" style="height:17px;width:20px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.98 17.4"><title>ReTweetIcon</title><path class="cls-1" d="M26.8,12.79a0.75,0.75,0,0,0-1.06,0l-2.54,2.54V4.45A3.75,3.75,0,0,0,19.44.7H12.79a0.75,0.75,0,1,0,0,1.5h6.65a2.25,2.25,0,0,1,2.25,2.25V15.34l-2.54-2.54a0.75,0.75,0,0,0-1.06,1.06l3.82,3.82a0.75,0.75,0,0,0,1.06,0l3.83-3.82A0.75,0.75,0,0,0,26.8,12.79Z" transform="translate(-1.04 -0.7)"></path><path class="cls-1" d="M15.26,16.6H8.61a2.25,2.25,0,0,1-2.25-2.25V3.46L8.91,6A0.75,0.75,0,0,0,10,4.94L6.14,1.12a0.75,0.75,0,0,0-1.06,0L1.26,4.94A0.75,0.75,0,0,0,2.32,6L4.86,3.46V14.35A3.75,3.75,0,0,0,8.61,18.1h6.65A0.75,0.75,0,0,0,15.26,16.6Z" transform="translate(-1.04 -0.7)"></path></svg>
</div>
<span class="dib f6">394</span>
</div>
<div class="dib">
<div class="fill-white dib" style="height:17px;width:17px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.1 18.91"><title>HeartIcon</title><path d="M14,18.64h0c-2.58,0-10-6.78-10-13.16A5.73,5.73,0,0,1,9.35-.28,5.85,5.85,0,0,1,14,2.45,5.85,5.85,0,0,1,18.65-.28,5.73,5.73,0,0,1,24,5.48c0,6.38-7.45,13.11-10,13.16h0ZM9.35,1.22a4.2,4.2,0,0,0-3.9,4.25c0,5.74,7,11.6,8.55,11.66s8.55-5.92,8.55-11.66a4.2,4.2,0,0,0-3.9-4.25c-2.53,0-3.94,2.94-4,3a0.78,0.78,0,0,1-1.39,0S11.88,1.22,9.35,1.22Z" transform="translate(-3.95 0.28)"></path></svg>
</div>
<span class="dib f6">1.3k</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-twitter-green pv5 relative">
<div class="tc white">
<h2 class="f5 f3-l pb0 lh-title mb2-l">See what women</h2>
<h1 class="f2 f-subheadline-l tracked-tight pt1 lh-solid mt0">are calling out.</h1>
<div class="line bg-twitter-lightgreen w3 hsmall center"></div>
<p class="f1 f-headline-l twitter-darkgreen fw7 o-30 tracked-tight mt3-l">#ToxicTwitter</p>
</div>
<div class="mw7-l center-l cf">
<div class="w-50-l fl">
<div class="tweet-container pa3">
<div class="tweet bg-white br2 center">
<div class="pa3 pb0">
<div class="responsive-embed cb">
<iframe src="https://www.youtube.com/embed/cPpABbnleOc?rel=0" style="border:0;" allow="autoplay; encrypted-media"></iframe>
</div>
<p class="f4 fw4 lh-title tracked-tight ph3 twitter-grey cb"><span class="fw7 db pb2">Someone <span class="i fw4">really</span> tweeted this at her</span></p>
<div class="fl">
<img src="images/twitter-profile-anonymous.jpg" class="br-100 h2 w2 dib" alt="avatar">
<div class="dib">
<h2 class="f6 mv0 pb1">Twitter User</h2>
<h3 class="f7 mt0 fw3 twitter-grey">@TwitterUser</h3>
</div>
</div>
<div class="fr">
<a class="f7 f4-l fw7 link dim br-pill ph4 pv2 mb3 dib ba bw1 twitter-blue" href="https://www.amnesty.org/en/latest/research/2018/03/online-violence-against-women-chapter-1">Follow</a>
<span class="langnav-chevron fill-twitter-grey fr fillo-60 pl1 pt2">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="0 0 34 20"><path d="M17 12.758L5.121.879a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l14 14a2.998 2.998 0 0 0 4.242 0l14-14C33.707 4.535 34 3.768 34 3s-.293-1.535-.879-2.121a2.998 2.998 0 0 0-4.242 0L17 12.758z"></path></svg>
</span>
</div>
<p class="f4 fw4 lh-title tracked-tight ph3 mb0 cb">
<span class="twitter-blue">@RBraceySherman</span> Another stupid shit woman who should know her place – now go clean the toilet. Don’t make <span class="twitter-blue">#USA 🇺🇸 #turdworld #shithole</span> like <span class="twitter-blue">#africa #BlackLiesMatter #WesternCivRules #ThankAWhiteGuy #YouAreWelcome</span></p>
</div>
<div class="tweet-container pa3">
<div class="tweet ba br2 center b--moon-gray">
<div class="tweet-inner pa3 pb0">
<h2 class="f6 f4-l mv0 pb1">Renee Bracey Sherman</h2>
<h3 class="f7 f5-l mt0 fw4">@RBraceySherman</h3>
<p class="f6 f3-l lh-title tracked-tight twitter-grey">The irony isn’t lost on me that conservatives argue that a fetus can feel pain at 20 weeks so we must ban abortion (actual science says no) but children & teens, who were maimed in a school shooting, show the us the pain they feel, get called actors, and there’s no legislation. </p>
<p class="f7 f5-l lh-title tracked-tight moon-gray">Show this thread</p>
</div>
</div>
</div>
<h3 class="f7 mt0 fw3 pt3 moon-gray">1:26 PM - 6 Mar 2018</h3>
<div class="dib mr3">
<div class="fill-moon-gray dib" style="height:17px;width:17px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.75 19.75"><title>ReplyIcon</title><path d="M16-.76H11.9A7.72,7.72,0,0,0,4.1,7a7.41,7.41,0,0,0,7.47,7.37v3.83a0.86,0.86,0,0,0,.12.4,0.75,0.75,0,0,0,1,.23c0.26-.17,6.47-4.14,8.09-5.51a8.45,8.45,0,0,0,3-6.31h0A7.72,7.72,0,0,0,16-.76Zm3.79,13c-1.13,1-4.86,3.41-6.77,4.64V13.67a0.75,0.75,0,0,0-.75-0.75h-0.4C8.25,12.92,5.6,10.44,5.6,7A6.23,6.23,0,0,1,11.9.73H16A6.23,6.23,0,0,1,22.35,7,6.93,6.93,0,0,1,19.83,12.21Z" transform="translate(-4.1 0.77)"></path></svg>
</div>
</div>
<div class="dib mr3">
<div class="fill-moon-gray dib" style="height:17px;width:20px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.98 17.4"><title>ReTweetIcon</title><path class="cls-1" d="M26.8,12.79a0.75,0.75,0,0,0-1.06,0l-2.54,2.54V4.45A3.75,3.75,0,0,0,19.44.7H12.79a0.75,0.75,0,1,0,0,1.5h6.65a2.25,2.25,0,0,1,2.25,2.25V15.34l-2.54-2.54a0.75,0.75,0,0,0-1.06,1.06l3.82,3.82a0.75,0.75,0,0,0,1.06,0l3.83-3.82A0.75,0.75,0,0,0,26.8,12.79Z" transform="translate(-1.04 -0.7)"></path><path class="cls-1" d="M15.26,16.6H8.61a2.25,2.25,0,0,1-2.25-2.25V3.46L8.91,6A0.75,0.75,0,0,0,10,4.94L6.14,1.12a0.75,0.75,0,0,0-1.06,0L1.26,4.94A0.75,0.75,0,0,0,2.32,6L4.86,3.46V14.35A3.75,3.75,0,0,0,8.61,18.1h6.65A0.75,0.75,0,0,0,15.26,16.6Z" transform="translate(-1.04 -0.7)"></path></svg>
</div>
</div>
<div class="dib">
<div class="fill-moon-gray dib" style="height:17px;width:17px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.1 18.91"><title>HeartIcon</title><path d="M14,18.64h0c-2.58,0-10-6.78-10-13.16A5.73,5.73,0,0,1,9.35-.28,5.85,5.85,0,0,1,14,2.45,5.85,5.85,0,0,1,18.65-.28,5.73,5.73,0,0,1,24,5.48c0,6.38-7.45,13.11-10,13.16h0ZM9.35,1.22a4.2,4.2,0,0,0-3.9,4.25c0,5.74,7,11.6,8.55,11.66s8.55-5.92,8.55-11.66a4.2,4.2,0,0,0-3.9-4.25c-2.53,0-3.94,2.94-4,3a0.78,0.78,0,0,1-1.39,0S11.88,1.22,9.35,1.22Z" transform="translate(-3.95 0.28)"></path></svg>
</div>
</div>
</div> <!-- tweet -->
</div> <!-- tweet-container -->
</div><!-- w-50-l -->
<div class="w-50-l fl">
<div class="tweet-container pa3">
<div class="tweet bg-white br2 center">
<div class="pa3 pb0">
<p class="f4 fw4 lh-title tracked-tight ph3 twitter-grey cb"><span class="fw7 db pb2">Someone <span class="i fw4">really</span> tweeted this at her</span></p>
<div class="fl">
<img src="images/twitter-profile-anonymous.jpg" class="br-100 h2 w2 dib" alt="avatar">
<div class="dib">
<h2 class="f6 mv0 pb1">Twitter User</h2>
<h3 class="f7 mt0 fw3 twitter-grey">@TwitterUser</h3>
</div>
</div>
<div class="fr">
<a class="f7 f4-l fw7 link dim br-pill ph4 pv2 mb3 dib ba bw1 twitter-blue" href="https://www.amnesty.org/en/latest/research/2018/03/online-violence-against-women-chapter-1">Follow</a>
<span class="langnav-chevron fill-twitter-grey fr fillo-60 pl1 pt2">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="0 0 34 20"><path d="M17 12.758L5.121.879a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l14 14a2.998 2.998 0 0 0 4.242 0l14-14C33.707 4.535 34 3.768 34 3s-.293-1.535-.879-2.121a2.998 2.998 0 0 0-4.242 0L17 12.758z"></path></svg>
</span>
</div>
<p class="f7 f5-l lh-title tracked-tight moon-gray cb mb1">Replying to <span class="twitter-blue">@jaclynf</span></p>
<p class="f4 fw4 lh-title tracked-tight mv0">
You don’t have to worry about a man wanting your hideous she-witch body.
</p>
<h3 class="f7 mt0 fw3 pt3 moon-gray">1:26 PM - 6 Mar 2018</h3>
<div class="dib mr3">
<div class="fill-moon-gray dib" style="height:17px;width:17px">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.75 19.75"><title>ReplyIcon</title><path d="M16-.76H11.9A7.72,7.72,0,0,0,4.1,7a7.41,7.41,0,0,0,7.47,7.37v3.83a0.86,0.86,0,0,0,.12.4,0.75,0.75,0,0,0,1,.23c0.26-.17,6.47-4.14,8.09-5.51a8.45,8.45,0,0,0,3-6.31h0A7.72,7.72,0,0,0,16-.76Zm3.79,13c-1.13,1-4.86,3.41-6.77,4.64V13.67a0.75,0.75,0,0,0-.75-0.75h-0.4C8.25,12.92,5.6,10.44,5.6,7A6.23,6.23,0,0,1,11.9.73H16A6.23,6.23,0,0,1,22.35,7,6.93,6.93,0,0,1,19.83,12.21Z" transform="translate(-4.1 0.77)"></path></svg>
</div>
</div>
<div class="dib mr3">
<div class="fill-moon-gray dib" style="height:17px;width:20px">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.98 17.4"><title>ReTweetIcon</title><path class="cls-1" d="M26.8,12.79a0.75,0.75,0,0,0-1.06,0l-2.54,2.54V4.45A3.75,3.75,0,0,0,19.44.7H12.79a0.75,0.75,0,1,0,0,1.5h6.65a2.25,2.25,0,0,1,2.25,2.25V15.34l-2.54-2.54a0.75,0.75,0,0,0-1.06,1.06l3.82,3.82a0.75,0.75,0,0,0,1.06,0l3.83-3.82A0.75,0.75,0,0,0,26.8,12.79Z" transform="translate(-1.04 -0.7)"></path><path class="cls-1" d="M15.26,16.6H8.61a2.25,2.25,0,0,1-2.25-2.25V3.46L8.91,6A0.75,0.75,0,0,0,10,4.94L6.14,1.12a0.75,0.75,0,0,0-1.06,0L1.26,4.94A0.75,0.75,0,0,0,2.32,6L4.86,3.46V14.35A3.75,3.75,0,0,0,8.61,18.1h6.65A0.75,0.75,0,0,0,15.26,16.6Z" transform="translate(-1.04 -0.7)"></path></svg>
</div>
</div>
<div class="dib">
<div class="fill-moon-gray dib" style="height:17px;width:17px">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.1 18.91"><title>HeartIcon</title><path d="M14,18.64h0c-2.58,0-10-6.78-10-13.16A5.73,5.73,0,0,1,9.35-.28,5.85,5.85,0,0,1,14,2.45,5.85,5.85,0,0,1,18.65-.28,5.73,5.73,0,0,1,24,5.48c0,6.38-7.45,13.11-10,13.16h0ZM9.35,1.22a4.2,4.2,0,0,0-3.9,4.25c0,5.74,7,11.6,8.55,11.66s8.55-5.92,8.55-11.66a4.2,4.2,0,0,0-3.9-4.25c-2.53,0-3.94,2.94-4,3a0.78,0.78,0,0,1-1.39,0S11.88,1.22,9.35,1.22Z" transform="translate(-3.95 0.28)"></path></svg>
</div>
</div>
<div class="pv4">
<div class="responsive-embed cb">
<iframe src="https://www.youtube.com/embed/Dmx-EntPDM8?rel=0" frameborder="0" allow="autoplay; encrypted-media"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-50-l fl">
<div class="tweet-container pa3">
<div class="tweet bg-white br2 center">
<div class="pa3 pb0">
<div class="responsive-embed cb">
<iframe src="https://www.youtube.com/embed/jcFe7IjbGxM?rel=0" style="border:0;" allow="autoplay; encrypted-media"></iframe>
</div>
<div class="pt4 relative">
<div class="fl">
<img src="images/SeyiAkiwowo.jpg" class="br-100 h2 w2 dib" alt="avatar">
<div class="dib">
<h2 class="f6 mv0 pb1">Seyi Akiwowo</h2>
<h3 class="f7 mt0 fw3 twitter-grey">@seyiakiwowo</h3>
</div>
</div>
<div class="fr">
<a class="f7 f4-l fw7 link dim br-pill ph4 pv2 mb3 dib ba bw1 twitter-blue" href="https://www.amnesty.org/en/latest/research/2018/03/online-violence-against-women-chapter-1">Follow</a>
<span class="langnav-chevron fill-twitter-grey fr fillo-60 pl1 pt2">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="0 0 34 20"><path d="M17 12.758L5.121.879a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l14 14a2.998 2.998 0 0 0 4.242 0l14-14C33.707 4.535 34 3.768 34 3s-.293-1.535-.879-2.121a2.998 2.998 0 0 0-4.242 0L17 12.758z"></path></svg>
</span>
</div>
</div>
<p class="f4 fw4 lh-title tracked-tight mb0 cb">
Four days later <span class="twitter-blue">@Twitter</span> have finally suspended this awful troll’s account. <span class="twitter-blue">#smallvictories</span>
</p>
</div>
<p class="f4 fw4 lh-title tracked-tight ph3 twitter-grey cb mb2"><span class="fw7 db pb2">Someone <span class="i fw4">really</span> tweeted this at her</span></p>
<div class="tweet-container pa3 pt0">
<div class="tweet ba br2 center b--moon-gray">
<div class="tweet-inner pa3 pb0">
<h2 class="f6 f4-l mv0 pb1">Twitter User</h2>
<h3 class="f7 f5-l mt0 fw4">@TwitterUser</h3>
<p class="f6 f3-l lh-title tracked-tight twitter-grey"><span class="twitter-blue">@seyiakiwowo</span> Go to Afreaka, you filthy coal burner. They’ll cook you and eat you. The sooner the better, TRAITOR.</p>
<p class="f7 f5-l lh-title tracked-tight moon-gray">Show this thread</p>
</div>
</div>
</div>
<p class="f4 fw4 lh-title tracked-tight ph3 twitter-grey cb mb2"><span class="fw7 db pb2">And this</span></p>
<div class="tweet-container pa3 pt0">
<div class="tweet ba br2 center b--moon-gray">
<div class="tweet-inner pa3 pb0">
<h2 class="f6 f4-l mv0 pb1">Twitter User</h2>
<h3 class="f7 f5-l mt0 fw4">@TwitterUser</h3>
<p class="f6 f3-l lh-title tracked-tight twitter-grey"><span class="twitter-blue">@seyiakiwowo</span> You filthy Race Traitor BITCH.</p>
<p class="f7 f5-l lh-title tracked-tight moon-gray">Show this thread</p>
</div>
</div>
<h3 class="f7 mt0 fw3 pt3 moon-gray">1:26 PM - 6 Mar 2018</h3>
<div class="dib mr3">
<div class="fill-moon-gray dib" style="height:17px;width:17px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.75 19.75"><title>ReplyIcon</title><path d="M16-.76H11.9A7.72,7.72,0,0,0,4.1,7a7.41,7.41,0,0,0,7.47,7.37v3.83a0.86,0.86,0,0,0,.12.4,0.75,0.75,0,0,0,1,.23c0.26-.17,6.47-4.14,8.09-5.51a8.45,8.45,0,0,0,3-6.31h0A7.72,7.72,0,0,0,16-.76Zm3.79,13c-1.13,1-4.86,3.41-6.77,4.64V13.67a0.75,0.75,0,0,0-.75-0.75h-0.4C8.25,12.92,5.6,10.44,5.6,7A6.23,6.23,0,0,1,11.9.73H16A6.23,6.23,0,0,1,22.35,7,6.93,6.93,0,0,1,19.83,12.21Z" transform="translate(-4.1 0.77)"></path></svg>
</div>
</div>
<div class="dib mr3">
<div class="fill-moon-gray dib" style="height:17px;width:20px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.98 17.4"><title>ReTweetIcon</title><path class="cls-1" d="M26.8,12.79a0.75,0.75,0,0,0-1.06,0l-2.54,2.54V4.45A3.75,3.75,0,0,0,19.44.7H12.79a0.75,0.75,0,1,0,0,1.5h6.65a2.25,2.25,0,0,1,2.25,2.25V15.34l-2.54-2.54a0.75,0.75,0,0,0-1.06,1.06l3.82,3.82a0.75,0.75,0,0,0,1.06,0l3.83-3.82A0.75,0.75,0,0,0,26.8,12.79Z" transform="translate(-1.04 -0.7)"></path><path class="cls-1" d="M15.26,16.6H8.61a2.25,2.25,0,0,1-2.25-2.25V3.46L8.91,6A0.75,0.75,0,0,0,10,4.94L6.14,1.12a0.75,0.75,0,0,0-1.06,0L1.26,4.94A0.75,0.75,0,0,0,2.32,6L4.86,3.46V14.35A3.75,3.75,0,0,0,8.61,18.1h6.65A0.75,0.75,0,0,0,15.26,16.6Z" transform="translate(-1.04 -0.7)"></path></svg>
</div>
</div>
<div class="dib">
<div class="fill-moon-gray dib" style="height:17px;width:17px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.1 18.91"><title>HeartIcon</title><path d="M14,18.64h0c-2.58,0-10-6.78-10-13.16A5.73,5.73,0,0,1,9.35-.28,5.85,5.85,0,0,1,14,2.45,5.85,5.85,0,0,1,18.65-.28,5.73,5.73,0,0,1,24,5.48c0,6.38-7.45,13.11-10,13.16h0ZM9.35,1.22a4.2,4.2,0,0,0-3.9,4.25c0,5.74,7,11.6,8.55,11.66s8.55-5.92,8.55-11.66a4.2,4.2,0,0,0-3.9-4.25c-2.53,0-3.94,2.94-4,3a0.78,0.78,0,0,1-1.39,0S11.88,1.22,9.35,1.22Z" transform="translate(-3.95 0.28)"></path></svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mw5 mw7-ns center pa3 ph5-ns pt4 tc cb">
<a class="f6 f4-l fw7 link dim br-pill ph3 pv2-5 mb2 dib white ba bw1" href="https://www.amnesty.org/en/latest/research/2018/03/online-violence-against-women-chapter-1" target="_blank">Get the full story, see our research</a>
</div>
</div>
</section>
<section class="pv5 ph3">
<div class="mw8-l pl6-l">
<div class="w3 h3 fill-twitter-blue mb3-l">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg>
</div>
<h1 class="f1 f-subheadline-l tracked-tight pt0 mt0 lh-solid">Expose what's <span class="i fw4">really</span> happening</h1>
<a class="f6 f4-l fw7 link dim br-pill ph3 pv2-5 mb2 dib white bg-twitter-blue" target="_blank" href="https://twitter.com/intent/tweet?text=Hey%20%40Jack%2C%20%23HereWeAre%20telling%20you%20that%20women%20are%20STILL%20being%20abused%20and%20silenced%20on%20your%20%23ToxicTwitter.%20">Tell Twitter now!</a>
</div>
</section>
<section class="bg-twitter-pink pa3 pv5 relative">
<div class="mw8-l pl6-l">
<h2 class="f5 f3-l pb0 lh-title white">See</h2>
<h1 class="f2 f-subheadline-l tracked-tight pt1 lh-solid mt0 white ">What's <span class="i fw4">really</span> happening to women.</h1>
<div class="line bg-twitter-darkpink w3 hsmall mb5"></div>
</div>
<div class="mw8-5-l center-l cf">
<div class="tweet-container pa1 pb4 w-half-l fl">
<div class="tweet bg-white center br3">
<div class="responsive-embed cb br3 br--bottom">
<iframe src="https://www.youtube.com/embed/ceUT5z9uSyA" style="border:0;" allow="autoplay; encrypted-media"></iframe>
</div>
<div class="pa3">
<h3 class="f6 mt0 fw3 twitter-grey mb0">Feminists, activists and artists: Seyi Akiwowo, Travis Alabanza, Renee Bracey Sherman, Jaclyn Friedman, and Jessica Valenti on the #ToxicTwitter abuse they face.</h3>
</div>
</div>
</div>
</div>
</section>
<section class="bg-twitter-purple pv5 relative vh-100 dt w-100">
<div class="dtc v-mid tc white">
<h1 class="f2 f-headline-l tracked-tight pt1 lh-solid mt0">Silencing women globally.</h1>
<div class="line bg-twitter-lightpurple w3 hsmall center"></div>
<p class="f1 f-headline-l twitter-darkpurple fw7 o-30 tracked-tight">#ToxicTwitter</p>
</div>
</section>
<section class="pv5 ph3">
<div class="mw8-l pl6-l">
<div class="w3 h3 fill-twitter-blue mb3-l">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg>
</div>
<h1 class="f1 f-subheadline-l tracked-tight pt0 mt0 lh-solid">Find out what's <span class="i fw4">really</span> happening on Twitter.</h1>
<a class="f6 f4-l fw7 link dim br-pill ph3 pv2-5 mb2 dib white bg-twitter-blue" target="_blank" href="https://www.amnesty.org/en/latest/research/2018/03/online-violence-against-women-chapter-1">Get the full story today</a>
</div>
</section>
<footer class="bg-twitter-blue white ph4 pv3 cf">
<div class="fl-l w-20-m pb1-l">
<p class="white link o-60 glow">© 2018 Amnesty International</p>
</div>
</footer>
<script>
(function () {
/* document.getElementById("closeNav").addEventListener( 'click', removeClass);
document.getElementById("openNav").addEventListener( 'click', addClass);
function removeClass() {
document.getElementById("langOverlay").className = document.getElementById("langOverlay").className.replace ( /(?:^|\s)open(?!\S)/g , '' )
}
function addClass() {
document.getElementById("langOverlay").className += " open";
}
*/
var btn = document.getElementById("dropDown");
var target = document.getElementById("dropDownTarget");
btn.onclick = function () {
var expanded = btn.getAttribute('aria-expanded') === 'true' || false;
btn.setAttribute('aria-expanded', !expanded);
target.hidden = expanded;
};
})();
// Smooth scroll - https://github.com/alicelieutier/smoothScroll
(function(root,smoothScroll){"use strict";if(typeof define==="function"&&define.amd){define(smoothScroll)}else if(typeof exports==="object"&&typeof module==="object"){module.exports=smoothScroll()}else{root.smoothScroll=smoothScroll()}})(this,function(){"use strict";if(typeof window!=="object")return;if(document.querySelectorAll===void 0||window.pageYOffset===void 0||history.pushState===void 0){return}var getTop=function(element,start){if(element.nodeName==="HTML")return-start;return element.getBoundingClientRect().top+start};var easeInOutCubic=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1};var position=function(start,end,elapsed,duration){if(elapsed>duration)return end;return start+(end-start)*easeInOutCubic(elapsed/duration)};var smoothScroll=function(el,duration,callback,context){duration=duration||500;context=context||window;var start=context.scrollTop||window.pageYOffset;if(typeof el==="number"){var end=parseInt(el)}else{var end=getTop(el,start)}var clock=Date.now();var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){window.setTimeout(fn,15)};var step=function(){var elapsed=Date.now()-clock;if(context!==window){context.scrollTop=position(start,end,elapsed,duration)}else{window.scroll(0,position(start,end,elapsed,duration))}if(elapsed>duration){if(typeof callback==="function"){callback(el)}}else{requestAnimationFrame(step)}};step()};var linkHandler=function(ev){if(!ev.defaultPrevented){ev.preventDefault();if(location.hash!==this.hash)window.history.pushState(null,null,this.hash);var node=document.getElementById(this.hash.substring(1));if(!node)return;smoothScroll(node,500,function(el){location.replace("#"+el.id)})}};document.addEventListener("DOMContentLoaded",function(){var internal=document.querySelectorAll('a[href^="#"]:not([href="#"])'),a;for(var i=internal.length;a=internal[--i];){a.addEventListener("click",linkHandler,false)}});return smoothScroll});
/*!
*
* typed.js - A JavaScript Typing Animation Library
* Author: Matt Boldt <me@mattboldt.com>
* Version: v2.0.6
* Url: https://github.com/mattboldt/typed.js
* License(s): MIT
*
*/
(function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Typed=e():t.Typed=e()})(this,function(){return function(t){function e(n){if(s[n])return s[n].exports;var i=s[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var s=0;s<e.length;s++){var n=e[s];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,s,n){return s&&t(e.prototype,s),n&&t(e,n),e}}(),r=s(1),o=s(3),a=function(){function t(e,s){n(this,t),r.initializer.load(this,s,e),this.begin()}return i(t,[{key:"toggle",value:function(){this.pause.status?this.start():this.stop()}},{key:"stop",value:function(){this.typingComplete||this.pause.status||(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))}},{key:"start",value:function(){this.typingComplete||this.pause.status&&(this.pause.status=!1,this.pause.typewrite?this.typewrite(this.pause.curString,this.pause.curStrPos):this.backspace(this.pause.curString,this.pause.curStrPos),this.options.onStart(this.arrayPos,this))}},{key:"destroy",value:function(){this.reset(!1),this.options.onDestroy(this)}},{key:"reset",value:function(){var t=arguments.length<=0||void 0===arguments[0]||arguments[0];clearInterval(this.timeout),this.replaceText(""),this.cursor&&this.cursor.parentNode&&(this.cursor.parentNode.removeChild(this.cursor),this.cursor=null),this.strPos=0,this.arrayPos=0,this.curLoop=0,t&&(this.insertCursor(),this.options.onReset(this),this.begin())}},{key:"begin",value:function(){var t=this;this.typingComplete=!1,this.shuffleStringsIfNeeded(this),this.insertCursor(),this.bindInputFocusEvents&&this.bindFocusEvents(),this.timeout=setTimeout(function(){t.currentElContent&&0!==t.currentElContent.length?t.backspace(t.currentElContent,t.currentElContent.length):t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)}},{key:"typewrite",value:function(t,e){var s=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var n=this.humanizer(this.typeSpeed),i=1;return this.pause.status===!0?void this.setPauseStatus(t,e,!0):void(this.timeout=setTimeout(function(){e=o.htmlParser.typeHtmlChars(t,e,s);var n=0,r=t.substr(e);if("^"===r.charAt(0)&&/^\^\d+/.test(r)){var a=1;r=/\d+/.exec(r)[0],a+=r.length,n=parseInt(r),s.temporaryPause=!0,s.options.onTypingPaused(s.arrayPos,s),t=t.substring(0,e)+t.substring(e+a),s.toggleBlinking(!0)}if("`"===r.charAt(0)){for(;"`"!==t.substr(e+i).charAt(0)&&(i++,!(e+i>t.length)););var u=t.substring(0,e),l=t.substring(u.length+1,e+i),c=t.substring(e+i+1);t=u+l+c,i--}s.timeout=setTimeout(function(){s.toggleBlinking(!1),e===t.length?s.doneTyping(t,e):s.keepTyping(t,e,i),s.temporaryPause&&(s.temporaryPause=!1,s.options.onTypingResumed(s.arrayPos,s))},n)},n))}},{key:"keepTyping",value:function(t,e,s){0===e&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this)),e+=s;var n=t.substr(0,e);this.replaceText(n),this.typewrite(t,e)}},{key:"doneTyping",value:function(t,e){var s=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),this.loop===!1||this.curLoop===this.loopCount)||(this.timeout=setTimeout(function(){s.backspace(t,e)},this.backDelay))}},{key:"backspace",value:function(t,e){var s=this;if(this.pause.status===!0)return void this.setPauseStatus(t,e,!0);if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var n=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){e=o.htmlParser.backSpaceHtmlChars(t,e,s);var n=t.substr(0,e);if(s.replaceText(n),s.smartBackspace){var i=s.strings[s.arrayPos+1];i&&n===i.substr(0,e)?s.stopNum=e:s.stopNum=0}e>s.stopNum?(e--,s.backspace(t,e)):e<=s.stopNum&&(s.arrayPos++,s.arrayPos===s.strings.length?(s.arrayPos=0,s.options.onLastStringBackspaced(),s.shuffleStringsIfNeeded(),s.begin()):s.typewrite(s.strings[s.sequence[s.arrayPos]],e))},n)}},{key:"complete",value:function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0}},{key:"setPauseStatus",value:function(t,e,s){this.pause.typewrite=s,this.pause.curString=t,this.pause.curStrPos=e}},{key:"toggleBlinking",value:function(t){if(this.cursor&&!this.pause.status&&this.cursorBlinking!==t){this.cursorBlinking=t;var e=t?"infinite":0;this.cursor.style.animationIterationCount=e}}},{key:"humanizer",value:function(t){return Math.round(Math.random()*t/2)+t}},{key:"shuffleStringsIfNeeded",value:function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))}},{key:"initFadeOut",value:function(){var t=this;return this.el.className+=" "+this.fadeOutClass,this.cursor&&(this.cursor.className+=" "+this.fadeOutClass),setTimeout(function(){t.arrayPos++,t.replaceText(""),t.strings.length>t.arrayPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],0):(t.typewrite(t.strings[0],0),t.arrayPos=0)},this.fadeOutDelay)}},{key:"replaceText",value:function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:"html"===this.contentType?this.el.innerHTML=t:this.el.textContent=t}},{key:"bindFocusEvents",value:function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(e){t.stop()}),this.el.addEventListener("blur",function(e){t.el.value&&0!==t.el.value.length||t.start()}))}},{key:"insertCursor",value:function(){this.showCursor&&(this.cursor||(this.cursor=document.createElement("span"),this.cursor.className="typed-cursor",this.cursor.innerHTML=this.cursorChar,this.el.parentNode&&this.el.parentNode.insertBefore(this.cursor,this.el.nextSibling)))}}]),t}();e["default"]=a,t.exports=e["default"]},function(t,e,s){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(t[n]=s[n])}return t},o=function(){function t(t,e){for(var s=0;s<e.length;s++){var n=e[s];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,s,n){return s&&t(e.prototype,s),n&&t(e,n),e}}(),a=s(2),u=n(a),l=function(){function t(){i(this,t)}return o(t,[{key:"load",value:function(t,e,s){if("string"==typeof s?t.el=document.querySelector(s):t.el=s,t.options=r({},u["default"],e),t.isInput="input"===t.el.tagName.toLowerCase(),t.attr=t.options.attr,t.bindInputFocusEvents=t.options.bindInputFocusEvents,t.showCursor=!t.isInput&&t.options.showCursor,t.cursorChar=t.options.cursorChar,t.cursorBlinking=!0,t.elContent=t.attr?t.el.getAttribute(t.attr):t.el.textContent,t.contentType=t.options.contentType,t.typeSpeed=t.options.typeSpeed,t.startDelay=t.options.startDelay,t.backSpeed=t.options.backSpeed,t.smartBackspace=t.options.smartBackspace,t.backDelay=t.options.backDelay,t.fadeOut=t.options.fadeOut,t.fadeOutClass=t.options.fadeOutClass,t.fadeOutDelay=t.options.fadeOutDelay,t.isPaused=!1,t.strings=t.options.strings.map(function(t){return t.trim()}),"string"==typeof t.options.stringsElement?t.stringsElement=document.querySelector(t.options.stringsElement):t.stringsElement=t.options.stringsElement,t.stringsElement){t.strings=[],t.stringsElement.style.display="none";var n=Array.prototype.slice.apply(t.stringsElement.children),i=n.length;if(i)for(var o=0;o<i;o+=1){var a=n[o];t.strings.push(a.innerHTML.trim())}}t.strPos=0,t.arrayPos=0,t.stopNum=0,t.loop=t.options.loop,t.loopCount=t.options.loopCount,t.curLoop=0,t.shuffle=t.options.shuffle,t.sequence=[],t.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},t.typingComplete=!1;for(var o in t.strings)t.sequence[o]=o;t.currentElContent=this.getCurrentElContent(t),t.autoInsertCss=t.options.autoInsertCss,this.appendAnimationCss(t)}},{key:"getCurrentElContent",value:function(t){var e="";return e=t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:"html"===t.contentType?t.el.innerHTML:t.el.textContent}},{key:"appendAnimationCss",value:function(t){if(t.autoInsertCss&&t.showCursor&&t.fadeOut){var e=document.createElement("style");e.type="text/css";var s="";t.showCursor&&(s+="\n .typed-cursor{\n opacity: 1;\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n "),t.fadeOut&&(s+="\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n -webkit-animation: 0;\n animation: 0;\n }\n "),0!==e.length&&(e.innerHTML=s,document.body.appendChild(e))}}}]),t}();e["default"]=l;var c=new l;e.initializer=c},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,smartBackspace:!0,shuffle:!1,backDelay:700,fadeOut:!1,fadeOutClass:"typed-fade-out",fadeOutDelay:500,loop:!1,loopCount:1/0,showCursor:!0,cursorChar:"|",autoInsertCss:!0,attr:null,bindInputFocusEvents:!1,contentType:"html",onComplete:function(t){},preStringTyped:function(t,e){},onStringTyped:function(t,e){},onLastStringBackspaced:function(t){},onTypingPaused:function(t,e){},onTypingResumed:function(t,e){},onReset:function(t){},onStop:function(t,e){},onStart:function(t,e){},onDestroy:function(t){}};e["default"]=s,t.exports=e["default"]},function(t,e){"use strict";function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e){for(var s=0;s<e.length;s++){var n=e[s];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,s,n){return s&&t(e.prototype,s),n&&t(e,n),e}}(),i=function(){function t(){s(this,t)}return n(t,[{key:"typeHtmlChars",value:function(t,e,s){if("html"!==s.contentType)return e;var n=t.substr(e).charAt(0);if("<"===n||"&"===n){var i="";for(i="<"===n?">":";";t.substr(e+1).charAt(0)!==i&&(e++,!(e+1>t.length)););e++}return e}},{key:"backSpaceHtmlChars",value:function(t,e,s){if("html"!==s.contentType)return e;var n=t.substr(e).charAt(0);if(">"===n||";"===n){var i="";for(i=">"===n?"<":"&";t.substr(e-1).charAt(0)!==i&&(e--,!(e<0)););e--}return e}}]),t}();e["default"]=i;var r=new i;e.htmlParser=r}])});
//# sourceMappingURL=typed.min.js.map
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
onComplete: typingComplete,
showCursor: false
});
function typingComplete() {
document.getElementById("hiddenButton").classList.remove("clip");
document.getElementById("arrow").classList.add("bounce")
}
</script>
</body>
</html>