forked from thosakwe/blm-blackout
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
282 lines (256 loc) · 8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://abs.twimg.com/hashflags/BlackHistoryMonth/BlackHistoryMonth.png">
<title>#BlackLivesMatter</title>
<style>
* {
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a,
a:visited {
color: rgb(10, 113, 176);
text-decoration: none;
}
code {
background: rgb(24, 26, 27);
border-radius: .25em;
color: #fff;
padding: 0.125em 0.25em;
}
header {
text-align: center;
}
h1 {
font-size: 3em;
}
html,
body {
background: #121212;
color: #fff;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
section {
padding: 1em;
text-align: center;
}
section .title {
font-size: 1.3em;
font-weight: bold;
text-transform: uppercase;
}
.cta {
background: rgb(24, 26, 27);
}
.names .row {
color: #fff;
padding: 0 1em;
}
.names .row:not(:last-of-type) {
margin-bottom: 1em;
}
.names .row .face {
display: inline-block;
}
.names .row .face:not(:last-of-type) {
margin-right: 2em;
}
.names .row .face img {
width: 10em;
height: 10em;
object-fit: cover;
}
.names .row .face .name {
font-weight: bold;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 2em
}
.names .row .face img {
width: 5em;
height: 5em;
}
}
@media screen and (min-width: 1024px) {
section p {
/* padding: 1em 12em; */
margin: auto;
max-width: 48em;
}
section:not(.cta) p {
text-align: left;
}
section p:not(:last-of-type) {
margin-bottom: 1em;
}
section .title {
margin-bottom: 0.5em;
}
}
</style>
</head>
<body>
<header>
<h1>SAY THEIR NAMES.</h1>
<div class="names">
<div class="row">
<div class="face">
<img src="https://upload.wikimedia.org/wikipedia/en/4/4a/AHMAUD-ARBERY-1.jpg" alt="Ahmaud Arbery">
<div class="name">Ahmaud Arbery</div>
</div>
<div class="face">
<img src="https://assets.change.org/photos/0/la/lt/mylaLTYqhScqWHI-800x450-noPad.jpg?1590516227"
alt="George Floyd">
<div class="name">George Floyd</div>
</div>
</div>
<div class="row">
<div class="face">
<img src="https://pbs.twimg.com/media/EZHq_IKXkAAgnX2?format=jpg&name=900x900" alt="Tony McDade">
<div class="name">Tony McDade</div>
</div>
<div class="face">
<img src="https://cdn.cnn.com/cnnnext/dam/assets/200512170612-01-louisville-emt-police-killed-large-169.jpg"
alt="Breonna Taylor">
<div class="name">Breonna Taylor</div>
</div>
</div>
<div class="row">
<p>
There are far too many names to list here. We want justice. You can make a difference.
</p>
</div>
</div>
</header>
<section class="cta">
<div class="title">#BlackLivesMatter. #BLMBlackout.</div>
<p>
Sign this petition urging Minneapolis mayor Jacob Frey to not only have the officers
involved fired, but to also have charges pressed against them:
<br>
<a
href="https://www.change.org/p/mayor-jacob-frey-justice-for-george-floyd">https://www.change.org/p/mayor-jacob-frey-justice-for-george-floyd</a>
</p>
<p>
Make a donation today to the Minnesota Freedom Fund:
<br>
<a href="https://minnesotafreedomfund.org/donate">https://minnesotafreedomfund.org/donate</a>
</p>
<p>
Call the office of Mike Freeman, the Minneapolis District Attorney,
at <a href="tel:6123485550">(612)-348-5550</a>, or go to:
<br>
<a href="https://hennepinattorney.org/about/contact">https://hennepinattorney.org/about/contact</a>
</p>
<p>
The family of George Floyd is also fundraising for a memorial fund:
<br>
<a href="https://www.gofundme.com/f/georgefloyd">https://www.gofundme.com/f/georgefloyd</a>
</p>
<p>
<b>See this Twitter thread for other ways to get involved:</b>
<br>
<a
href="https://twitter.com/tpwkhollands/status/1265757092473954306">https://twitter.com/tpwkhollands/status/1265757092473954306</a>
</p>
<p>
<b>
If you have a personal website, consider following the instructions at the below link to put your
page on blackout as well:
</b>
<br>
<a href="https://github.com/thosakwe/blm-blackout">https://github.com/thosakwe/blm-blackout</a>
</p>
</section>
<main>
<section>
<div class="title">Why am I seeing this page?</div>
<p>
This website is undergoing a deliberate blackout, in solidarity with
black victims of police brutality and racially-motivated violence
in the United States.
</p>
<p>
Our goal is to raise
awareness of ongoing racism in the nation, and to encourage people
to use their voices, and donate to organizations doing relevant
activist work.
</p>
</section>
<section>
<div class="title">
What's going on in America?
</div>
<p>
For far too long, Black people in the United States have suffered unjust
treatment at the hands of the criminal justice system. This includes, but
is not limited to, police brutality.
</p>
<p>
Too often, police who kill unarmed Black people get away with paid leave, and
no criminal charges. We want justice to finally be served, and we want the
American police system to be greatly reformed.
</p>
</section>
<section>
<div class="title">
Why should I care?
</div>
<p>
Until our governments make considerable changes to the police system, millions of
people will have to continue to live in fear of being murdered for simply existing.
</p>
<p>
Racism is still alive and well in the United States, and it can no longer be ignored
or treated passively. Black lives matter, and we deserve to be able to live our lives.
</p>
</section>
<section>
<div class="title">
How can I make a difference?
</div>
<p>
The gray section above contains links and calls to action that you can engage with from
the comfort of your own home.
</p>
<p>
Protesting may be difficult during a pandemic, and can be scary, so if you decide to do it, make sure you're safe.
Make sure you are properly prepared to avoid harm:
<br>
<a href="https://twitter.com/angelaerin777/status/1266098511172431872?s=21">https://twitter.com/angelaerin777/status/1266098511172431872?s=21</a>
</p>
</section>
<section>
<div class="title">
I'd like to put my site on blackout as well. How can I start?
</div>
<p>
Head over to
<a href="https://github.com/thosakwe/blm-blackout">this GitHub repo</a>,
and fork or star it, to push it to your
followers' feeds. Then, download the <code>index.html</code> file.
</p>
<p>
Next, make a Tweet with the hashtag
<a href="https://twitter.com/search?q=%23blmblackout&src=typeahead_click&f=live">#BLMBlackout</a>,
so it can trend, and even more people are exposed to the message.
</p>
<p>
It doesn't stop at simply changing your homepage and making a few posts! Don't
leave this page without making a donation, or spreading the word to someone you know.
</p>
</section>
</main>
</body>
</html>