-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (111 loc) · 4.16 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOVIE TRAILER HIJACK</title>
<link rel="stylesheet" href="stylesheets/pure.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link href="stylesheets/videojs-sublime-skin.min.css" rel="stylesheet">
<script src="javascripts/video.js"></script>
</head>
<body>
<div class="container">
<div class="pure-g">
<div class="pure-u-1-3">
<h2>
<div class="candel"></div>
MOVIE
TRAILER
HIJACK
</h2>
</div>
<div class="pure-u-2-3">
<div class="pure-g">
<div class="pure-u-1-1">
<video id="intro-video" class="video-js vjs-sublime-skin" controls
preload="metadata" width="585" height="328" poster="images/intro.jpg"
data-setup='{}'>
<source src="videos/intro.mp4" type='video/mp4'>
</video>
</div>
</div>
<div class="pure-g subtitle">
<div class="pure-u-1-1">
<div class="description first">
<p class="header">
TORTURE
</p>
<p>
is going on in 141 countries in the world. People turn a blind eye. Amnesty wanted them to see <br/> the reality.
</p>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="description">
<p class="header">
4 MOVIE TRAILERS<br/>were HIJACKED
</p>
<p>
to bring people a glympse of the reality<br/>
of torture. When the user clicked on the<br/>
trailer video, expecting to see an <br/>
entertaining content, they saw a <br/>
10-second clip showing what violence is <br/>
like in reality. They could then click <br/>
through to Amnetsy Internationals’s <br/>
„Stop Torture” page and take action.
</p>
</div>
<div class="description">
<p class="header">
RESULTS
</p>
<p>
400,000 views of the 4 videos combined<br/>
8,5 times more visitors on the Stop<br/>
Torture website than before the<br/>
campaign.
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="video-holder">
<div class="inner">
<video id="really-cool-video" class="video-js vjs-sublime-skin" controls
preload="metadata" width="265" height="175" poster="images/whiplash.jpg"
data-setup='{}'>
<source src="videos/whiplash.mp4" type='video/mp4'>
</video>
<video id="really-cool-video" class="video-js vjs-sublime-skin" controls
preload="metadata" width="265" height="175" poster="images/avangers.jpg"
data-setup='{}'>
<source src="videos/avengers2.mp4" type='video/mp4'>
</video>
<video id="really-cool-video" class="video-js vjs-sublime-skin" controls
preload="metadata" width="265" height="175" poster="images/insurgent.jpg"
data-setup='{}'>
<source src="videos/insurgent.mp4" type='video/mp4'>
</video>
<video id="really-cool-video" class="video-js vjs-sublime-skin" controls
preload="metadata" width="265" height="175" poster="images/taken.jpg"
data-setup='{}'>
<source src="videos/taken3.mp4" type='video/mp4'>
</video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container footer">
<div class="footer-content">
<a href="http://www.amnesty.hu/" target="_blank" class="logo"></a>
<a href="http://www.amnesty.hu/" target="_blank" class="stop-torture"></a>
</div>
</div>
</body>
</html>