-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpoetry.html
More file actions
218 lines (191 loc) · 7.91 KB
/
poetry.html
File metadata and controls
218 lines (191 loc) · 7.91 KB
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
<!DOCTYPE html>
<html>
<title>Joel W Nelson | Poet | Web Developer</title>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Merriweather:400,700,400italic" rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-78620990-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!--Header---------------------------->
<div class="container-fluid" id="custom-header">
<div class="row">
<div class="translucent-layer">
<div class="col-xs-12 col-sm-6 header">
<h1 id="nav-name"><a href=index.html>Joel W Nelson</a></h1>
</div>
<ul id="nav-list">
<li>
<div class="col-xs-4 col-sm-2 header">
<h2 id="nav-about" class="nav-link"><a href=about.html>About</a></h2>
</div>
</li>
<li>
<div class="col-xs-4 col-sm-2 header">
<h2 id="nav-poetry" class="nav-link"><a href=poetry.html>Poetry</a></h2>
</div>
</li>
<li>
<div class="col-xs-4 col-sm-2 header">
<h2 id="nav-web" class="nav-link"><a href=web-developer.html>Web</a></h2>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--Poem list ------------------------->
<div class="container">
<div class="row">
<h1 class="page-header text-center">Sample Poetry</h1>
</div>
<div class="row">
<div class="col-sm-6 col-lg-5 col-lg-offset-1">
<div class="color-wrap" id="poetry-wrap">
<form id="poetry-title-list">
<legend class="text-center">Select:</legend>
<div class="radio">
<input type="radio" name="poetry" id="1" value="ashes-ashes" />
<label for="1">Ashes, Ashes<span class="credit"><br>(First published in the <i class="italic">Bellevue Literary Review</i>)</span></label>
<input type="radio" name="poetry" id="2" value="drinking-hole" />
<label for="2">The Drinking Hole<span class="credit"><br>(First published in <i class="italic">A Narrow Fellow</i>)</span></label>
<input type="radio" name="poetry" id="3" value="body-washer" />
<label for="3">The Body Washer<span class="credit"><br>(First published in <i class="italic">The Louisville Review</i>)</span></label>
</div>
</form>
<div class="canvas-buttons">
<button type="button" class="btn btn-success" id="create-new-poem" data-toggle="modal" data-target="#create-found-poem">Create your own blackout/erasure poetry</button>
<button type="button" class="btn btn-default" id="save-canvas-button" data-toggle="modal" data-target="#save-canvas">Save or Print</button>
</div>
</div>
<!--Color controls-->
<div class="controls text-center">
<h2>Draw / Erase</h3>
<ul>
<li class="white-wrap black selected-color"></li>
<li class="white-wrap white"></li>
</ul>
</div>
</div>
<!--Poetry Canvas------------------------->
<div class="col-sm-6 col-lg-5">
<div class="white-wrap">
<canvas id="poetry-canvas"></canvas>
<!-- Poetry----------------------->
<h2 id="ashes-ashes-title" class="poem poem-title">Ashes, Ashes</h2>
<p id="ashes-ashes" class="poem">
It is not the pull of the moon or the spinning
<br>of the earth that drives the tide of sand
<br>
<br>to the sea—desert begets desert, a city falls
<br>into itself. A man cuts a tree to plant a field
<br>
<br>to build a fire, and his house turns to sand
<br>He butchers a cow, but already the vulture
<br>
<br>has picked it clean. Of what use is a seed
<br>where a weed will not grow, or a bucket
<br>
<br>in a river of salt? Desert begets desert,
<br>bone begets bone, a city falls into itself.
</p>
<h2 id="drinking-hole-title" class="poem poem-title">The Drinking Hole</h2>
<p id="drinking-hole" class="poem">
The baboons are grunting
<br>and barking like dogs,
<br>distorting their faces
<br>and shaking the trees.
<br>
<br>They circle around us
<br>clutching their fists
<br>around sticks
<br>and throwing stones.
<br>
<br><span class="italic">Why are you swimming
<br>down there in the river?
<br>Why are you swimming
<br>in our drinking hole?</span>
<br>
<br>We stand on a rock
<br>surrounded by the current.
<br>Not one of us dares
<br>to jump into the stream.
</p>
<h2 id="body-washer-title" class="poem poem-title">The Body Washer</h2>
<p id="body-washer" class="poem">
She wears the clothes of a dead woman—
<br>a black robe and a faded head scarf.
<br>
<br>"They're almost too fancy," she says
<br>without glancing from the bullet wound.
<br>
<br>"I try to stay simple. I don't care too much
<br>about things." Her days are spent alone
<br>
<br>with malformed babies, headless
<br>professors, and faceless wives of diplomats.
<br>
<br>"Everything has its time," she says
<br>as she cuts a girl's clothing away, carefully
<br>
<br>keeping the <span class=italic>awrah</span> hidden under a sheet.
<br>She dips her hand into a bucket and begins
<br>
<br>to wash—first the head, then the body.
<br>"When you understand the unknown,
<br>
<br>you can no longer call it your enemy—
<br>the same bath, the same bowl."
</p>
</div>
</div>
<!-- Found Poem Modal-->
<div class="modal modal-lg fade" id="create-found-poem" aria-labelledby="Close" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Type text to create found poem</h3>
</div>
<div class="modal-body">
<form id="poetry-input">
<textarea id="input-text"></textarea>
</form>
</div>
<div class="modal-footer">
<button class="btn-primary" id="submit-button" type="button" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<a class="fa fa-twitter-square fa-2x" target="_blank" href="https://twitter.com/JoelWNelson"></a>
<a class="fa fa-github-square fa-2x" target="_blank" href="https://github.com/jnels"></a>
<a class="fa fa-linkedin-square fa-2x" target="_blank" href="https://www.linkedin.com/in/joelwnelson"></a>
<a class="fa fa-envelope-square fa-2x mail-to" target="_blank"></a>
<p class="copyright">© 2015 Joel W. Nelson</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="js/contact.js"></script>
<script src="js/fabric.js"></script>
<script src="js/draw.js"></script>
</body>
</html>