forked from femmebot/google-type
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·453 lines (370 loc) · 37.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico">
<title>Google Web Fonts Typographic Project</title>
<!-- Google web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Fauna+One|Oleo+Script|Fugaz+One|Monda|Unica+One|Alegreya:400italic,400|Abril+Fatface|Vollkorn' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Astronomer" -->
<link href='https://fonts.googleapis.com/css?family=Megrim|Roboto+Slab:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The River" -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800|Gentium+Basic:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Crow and the Pitcher" -->
<link href='https://fonts.googleapis.com/css?family=Questrial|Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Fox and the Grapes" -->
<link href='https://fonts.googleapis.com/css?family=Ovo|Muli:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Moon and Her Mother: Anon03" -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Vast+Shadow|Oswald:300|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Prophet" -->
<link href='https://fonts.googleapis.com/css?family=Neuton:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The wolves, the sheep, and the ram" -->
<link href='https://fonts.googleapis.com/css?family=Quattrocento|Fanwood+Text' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Boy Bathing" -->
<link href='https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:700' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Serpent and The Eagle " -->
<link href='https://fonts.googleapis.com/css?family=Vollkorn:700italic,700|Exo:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Fir-Tree" -->
<link href='https://fonts.googleapis.com/css?family=Stint+Ultra+Expanded|Slabo+13px|Ultra' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The fox and the lion" -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Lora:400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Horse and the Groom" -->
<link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Owl and the Birds" -->
<link href='https://fonts.googleapis.com/css?family=Domine' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Crow and The Raven" -->
<link href='https://fonts.googleapis.com/css?family=Nixie+One|Libre+Baskerville' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "Jupiter And The Tortoise" -->
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The North Wind and The Sun" -->
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One|Crimson+Text:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Old Hound" -->
<link href='https://fonts.googleapis.com/css?family=Almendra+Display|Cardo' rel='stylesheet' type='text/css'>
<!-- Typography Project stylesheet -->
<link href="css/google-type.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="container section-intro">
<h1>
<span class="small">Hand-Picked Tales <i>from</i></span>
<em>Æsop’s Fables</em>
<span class="small"><i>with</i> Hand-Picked Type <i>from</i></span>
<em>Google Fonts</em>
</h1>
<div class="wrapper">
<div class="colophon">
<p>There are over 650 <a href="https://www.google.com/fonts" target="_blank">Google Fonts</a> available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the <a href="http://25x52.com" target="_blank">25x52</a> initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.</p>
</div>
<div class="colophon">
<p>All passages are from the <a href="http://www.gutenberg.org/ebooks/11339" target="_blank">Project Gutenberg</a> transcript of Æsop’s Fables. All photographic images are from <a href="http://unsplash.com" target="_blank">Unsplash.com</a>. </p>
</div>
<div class="colophon">
<p>If you’d like to contribute to this project, please <a href="https://github.com/femmebot/google-type" target="_blank">submit a pull request on Github</a>.</p>
<p>Need help with Github? Want to learn more about web typography? <a href="http://25x52.com/di55ect" target="_blank">Sign up for our tutorial events.</a></p>
</div>
</div>
<!-- <div class="divider"></div>
<p>
There are over <span class="strike">640</span> 650 <a href="https://www.google.com/fonts" target="_blank">Google web fonts</a> available for free. Problem is, pairing typefaces isn’t easy. And, many of the fonts in Google’s library don’t work well when applied to typical webpage (desktop) layouts. Part of the <a href="http://25x52.com" target="_blank">25x52</a> initiative, this collaborative, ongoing project helps provide typographic inspiration for using Google’s web fonts for web applications.
</p>
<div class="divider"></div>
<p>
All passages are from the <a href="http://www.gutenberg.org/ebooks/11339" target="_blank">Project Gutenberg</a> transcript of Æsop’s Fables. All photographic images are from <a href="http://unsplash.com" target="_blank">Unsplash.com</a>. If you’d like to contribute to this project, please <a href="https://twitter.com/femmebot" target="_blank">send me a tweet</a> or simply <a href="https://github.com/femmebot/google-type" target="_blank">fork it on Github</a>.
</p>
<div class="divider"></div>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>, <a href="http://www.google.com/fonts/specimen/Abril+Fatface" target="_blank">Abril Fatface</a>, <a href="http://www.google.com/fonts/specimen/Alegreya" target="_blank">Alegreya</a></div>
-->
</div>
</div>
<div class="container-fluid section-gnat-bull" id="femmebot">
<div class="container">
<a href="https://twitter.com/femmebot" class="avatar" target="_blank" title="femmebot"><img src="https://pbs.twimg.com/profile_images/1779775150/bitty-icon.gif" alt="femmebot"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>, <a href="https://www.google.com/fonts/specimen/Fauna+One" target="_blank">Fauna One</a></div>
<h2>The Gnat<br>& the Bull</h2>
<p>A Gnat alighted on one of the horns of a Bull, and remained sitting there for a considerable time. When it had rested sufficiently and was about to fly away, it said to the Bull, “Do you mind if I go now?” The Bull merely raised his eyes and remarked, without interest, “It’s all one to me; I didn’t notice when you came, and I shan’t know when you go away.”</p>
<p>We may often be of more consequence in our own eyes than in the eyes of our neighbours.</p>
</div>
</div>
<div class="container-fluid section-two-bags" id="femmebot-02">
<div class="container">
<h2>Th<i>e</i> Two Ba<i>g</i>s</h2>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Fugaz+One" target="_blank">Fugaz One</a>, <a href="https://www.google.com/fonts/specimen/Oleo+Script" target="_blank">Oleo Script</a>, <a href="https://www.google.com/fonts/specimen/Monda" target="_blank">Monda Regular</a></div>
<p>Every man carries Two Bags about with him, one in front and one behind, and both are packed full of faults. The Bag in front contains his neighbours’ faults, the one behind his own. Hence it is that men do not see their own faults, but never fail to see those of others.</p>
</div>
</div>
<div class="container-fluid section-oak" id="femmebot-03">
<div class="container">
<div class="caption"><a href="https://www.google.com/fonts/specimen/Unica+One" target="_blank">Unica One</a>, <a href="https://www.google.com/fonts/specimen/Vollkorn" target="_blank">Vollkorn</a></div>
<!-- Oak Leaf -->
<div class="oak-leaf">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="130px" viewBox="0 0 90 130" enable-background="new 0 0 90 130" xml:space="preserve">
<g>
<path fill="#9E9EA0" d="M80.07,60.508c0,0.48-0.281,0.921-0.84,1.32c-2.562,0.401-6.36,0.6-11.4,0.6c-2.481,0-5.381,1.68-8.7,5.04
c-3.321,3.36-4.98,6.281-4.98,8.76c0,2.321,0.57,3.48,1.71,3.48c4.562-3.36,8.064-5.04,10.509-5.04c0.733,0,1.101,0.201,1.101,0.6
c0,0.48-0.188,1.28-0.562,2.4c-0.375,1.121-0.561,2.081-0.561,2.88c0,0.081-0.707,0.701-2.121,1.86
c-1.414,1.161-2.286,2.76-2.617,4.8c-0.334,2.04-0.499,4.661-0.499,7.86c0,5.679,1.12,10.119,3.36,13.32
c2.4,3.439,6.28,5.88,11.64,7.32c-0.24,0.48-0.6,1.159-1.08,2.04c-2.24-0.96-4.721-2.682-7.44-5.16
c-2.241-2.081-4.481-4.161-6.72-6.24c-0.642-0.561-3.401-2.121-8.28-4.68c-4.56-2.321-6.881-3.64-6.96-3.96
c1.68-1.279,2.52-2.28,2.52-3c0-1.359-0.72-2.04-2.16-2.04c-1.041,0-2.621,0.72-4.74,2.16c-2.121,1.44-3.621,2.16-4.5,2.16
c-0.881,0-1.281-0.679-1.2-2.04c-1.361-0.799-3.041-1.519-5.04-2.16l-0.48-0.96c0-1.44,2.88-2.859,8.64-4.26
c5.76-1.399,8.64-3.18,8.64-5.34c0-0.559-0.12-1.12-0.36-1.68c-1.76-5.04-5.121-8.439-10.08-10.2
c-2.241-0.798-6.48-1.398-12.72-1.8c-4.56-0.319-7.121-1.279-7.68-2.88c0-0.96,1.219-1.939,3.66-2.94c2.439-1,3.66-1.78,3.66-2.34
c0-0.799-1.32-2.1-3.96-3.9c-2.64-1.8-3.96-2.779-3.96-2.94c0-0.24,0.259-0.58,0.78-1.02c0.52-0.439,0.78-0.9,0.78-1.38
c-1.361-2.08-2.04-3.559-2.04-4.44c0-1.519,0.6-2.28,1.8-2.28c0.799,0,1.999,0.6,3.6,1.8c1.92,1.361,3.079,2.121,3.48,2.28
l0.12-0.12l0.96,0.84c0.399-0.079,0.858-0.379,1.38-0.9c0.52-0.519,0.979-0.78,1.38-0.78c1.12,0,3,1.961,5.64,5.88
c2.64,3.921,4.92,5.88,6.84,5.88c0.96,0,1.44-0.96,1.44-2.88c0-4.639-1.08-8.839-3.24-12.6c-1.281-2.239-3.281-4.8-6-7.68
c-2.082-2.16-3.12-3.6-3.12-4.32c0-0.72,0.559-1.159,1.68-1.32c1.119-0.159,1.68-0.438,1.68-0.84c0-1.12-0.341-2.68-1.02-4.68
c-0.681-1.999-1.02-3.52-1.02-4.56c0-1.599,0.879-2.4,2.64-2.4c1.839,0,3.759,1.94,5.76,5.82c1.999,3.881,3.639,5.82,4.92,5.82
c0.799-1.359,1.26-4.08,1.38-8.16c0.12-4.08,0.699-6.679,1.74-7.8c0.318,0.081,0.858,0.621,1.62,1.62
c0.759,1.001,1.339,1.5,1.74,1.5c0.48,0,1.719-1.039,3.72-3.12c0.72,0,1.44,0.469,2.16,1.406c0.72,0.937,1.12,1.815,1.2,2.63
c-1.361,3.424-2.04,6.075-2.04,7.95l0.6,0.733c0.559,0,1.999-0.979,4.32-2.94c2.319-1.959,4.119-2.94,5.4-2.94
c0.399,0,0.84,0.161,1.32,0.48v0.48c0,1.121-0.641,2.681-1.92,4.68c-1.28,2-1.92,3.48-1.92,4.44c0,0.72,0.439,1.34,1.32,1.86
c0.879,0.521,1.32,0.941,1.32,1.26c0,0.561-1.241,1.841-3.72,3.84c-3.041,2.48-5.28,4.641-6.72,6.48c-2.4,3.12-3.6,6.321-3.6,9.6
c0,0.641,0.52,0.96,1.56,0.96c3.679,0,9.12-5.359,16.32-16.08l0.48-0.36c0.559,1.121,1.56,1.68,3,1.68c0.72,0,1.719-0.259,3-0.78
c1.279-0.52,2.2-0.819,2.76-0.9l0.6,0.6c0,0.48-0.32,1.4-0.96,2.76c-0.641,1.361-0.96,2.48-0.96,3.36
c0,0.321,0.139,0.801,0.42,1.44c0.28,0.642,0.42,1.122,0.42,1.44c0,1.041-0.881,2.021-2.64,2.94c-1.761,0.92-2.64,1.74-2.64,2.46
c0,1.041,1.08,2.34,3.24,3.9C78.99,58.648,80.07,59.789,80.07,60.508z"/>
</g>
</svg>
</div>
<h2>The Oak and The Reeds</h2>
<p>An Oak that grew on the bank of a river was uprooted by a severe gale of wind, and thrown across the stream. It fell among some Reeds growing by the water, and said to them, “How is it that you, who are so frail and slender, have managed to weather the storm, whereas I, with all my strength, have been torn up by the roots and hurled into the river?” “You were stubborn,” came the reply, “and fought against the storm, which proved stronger than you: but we bow and yield to every breeze, and thus the gale passed harmlessly over our heads.”</p>
</div>
</div>
<div class="container-fluid section-astronomer" id="mattraoul">
<div class="container">
<a href="https://twitter.com/mattraoul" class="avatar" target="_blank" title="mattRaoul"><img src="https://pbs.twimg.com/profile_images/478609969873694720/uUpF7y15.jpeg" alt="mattraoul"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Megrim" target="_blank">Megrim</a>, <a href="https://www.google.com/fonts/specimen/Roboto+Slab" target="_blank">Roboto Slab</a></div>
<h2>The Astronomer</h2>
<p>There was once an Astronomer whose habit it was to go out at night and observe the stars. One night, as he was walking about outside the town gates, gazing up absorbed into the sky and not looking where he was going, he fell into a dry well. As he lay there groaning, some one passing by heard him, and, coming to the edge of the well, looked down and, on learning what had happened, said, “If you really mean to say that you were looking so hard at the sky that you didn’t even see where your feet were carrying you along the ground, it appears to me that you deserve all you’ve got.”</p>
<div class="stars"></div>
</div>
</div>
<div class="container-fluid section-rivers" id="bengold">
<div class="container">
<a href="https://twitter.com/bengold" class="avatar" target="_blank" title="bengold"><img src="https://pbs.twimg.com/profile_images/378800000543768602/eb31bc1bc59f940c73c0a907e9ad774a_400x400.png" alt="bengold"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans</a>, <a href="http://www.google.com/fonts/specimen/Gentium+Basic" target="_blank">Gentium Basic</a></div>
<h2>The Rivers and the Sea</h2>
<p>Once upon a time all the Rivers combined to protest against the action of the Sea in making their waters salt. “When we come to you,” said they to the Sea, “we are sweet and drinkable: but when once we have mingled with you, our waters become as briny and unpalatable as your own.” The Sea replied shortly, “Keep away from me and you’ll remain sweet.”</p>
</div>
</div>
<div class="container-fluid section-crow-pitcher" id="michaelryap">
<div class="container">
<h2><span>The Crow and the Pitcher</span></h2>
<p class="drop-p">A thirsty Crow found a Pitcher with some water in it, but so little was there that, try as she might, she could not reach it with her beak, and it seemed as though she would die of thirst within sight of the remedy.</p>
<p>At last she hit upon a clever plan. She began dropping pebbles into the Pitcher, and with each pebble the water rose a little higher until at last it reached the brim, and the knowing bird was enabled to quench her thirst.</p>
<em>Necessity is the mother of invention.</em>
<ul>
<li class="label">Types in Use</li>
<li><a href="https://www.google.com/fonts/specimen/Old+Standard+TT">Old Standard TT</a></li>
<li><a href="https://www.google.com/fonts/specimen/Questrial">Questrial</a></li>
</ul>
<hr />
<ul>
<li class="label">Set By</li>
<li><a href="https://twitter.com/michaelryap">@michaelryap</a></li>
</ul>
</div>
</div>
<div class="container-fluid section-the-fox-and-the-grapes" id="twahlin">
<div class="container">
<a href="https://twitter.com/twahlin" class="avatar" target="_blank" title="twahlin"><img src="https://pbs.twimg.com/profile_images/496783257283735552/OU3adCmn_400x400.jpeg" alt="twahlin"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Ovo" target="_blank">Ovo</a>, <a href="https://www.google.com/fonts/specimen/Muli" target="_blank">Muli</a></div>
<h2>The Fox & the Grapes</h2>
<p>A hungry Fox saw some fine bunches of Grapes hanging from a vine that was trained along a high trellis, and did his best to reach them by jumping as high as he could into the air. But it was all in vain, for they were just out of reach: so he gave up trying, and walked away with an air of dignity and unconcern, remarking, “I thought those Grapes were ripe, but I see now they are quite sour.”</p>
<div id="grapes" class="shake grapes"></div>
</div>
</div>
<div class="container-fluid section-prophet" id="amotion">
<div class="container">
<div class="background"></div>
<a href="https://twitter.com/amotion" class="avatar" target="_blank" title="amotion"><img src="https://pbs.twimg.com/profile_images/488874753373904896/7oBb25l4_400x400.png" alt="amotion"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Neuton" target="_blank">Neuton</a></div>
<div class="col">
<h2>The Prophet</h2>
<p>A Prophet sat in the market-place and told the fortunes of all who cared to engage his services. Suddenly there came running up one who told him that his house had been broken into by thieves, and that they had made off with everything they could lay hands on. He was up in a moment, and rushed off, tearing his hair and calling down curses on the miscreants. The bystanders were much amused, and one of them said, “ Our friend professes to know what is going to happen to others, but it seems he’s not clever enough to perceive what’s in store for himself.”</p>
</div>
</div>
</div>
<div class="container-fluid section-moon-mother" id="femmebot-04">
<div class="container">
<div class="caption">
<a href="https://www.google.com/fonts/specimen/Vast+Shadow" target="_blank">Vast Shadow</a>,
<a href="https://www.google.com/fonts/specimen/Oswald" target="_blank">Oswald</a>,
<a href="https://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>,
<a href="https://www.google.com/fonts/specimen/Playfair+Display+SC" target="_blank">Playfair Display SC</a>
</div>
<h2>The Moon<span>And</span>Her Mother</h2>
<p class="opentype">
<span class="black-ital">The Moon</span>
<span class="ital">once begged her Mother</span>
<span class="small-cap">to make her a gown. “How can I?” replied she; </span>
<span class="reg">“there’s no fitting your figure. </span>
<span class="bold-ital">At one time you’re a New Moon,</span>
<span class="bold">and at another you’re a <strong>Full Moon</strong>; and between whiles </span>
<span class="black">you’re neither one nor the other.”</span>
</p>
</div>
</div>
<div class="section-wolves-sheep-ram" id="joshmateo">
<div class="container-fluid">
<div class="container">
<div class="containerWidth">
<div class = "top">
<a href="https://twitter.com/joshmateo" class="avatar" target="_blank" title="joshmateo">
<img src="https://pbs.twimg.com/profile_images/516933831019229184/bDH8NILU_400x400.jpeg" alt="joshmateo">
</a>
<div class="caption">
<a href="https://www.google.com/fonts/specimen/Quattrocento" target="_blank">Quattrocento</a>, <a href="https://www.google.com/fonts/specimen/Fanwood+Text" target="_blank">Fanwood Text</a>
</div>
</div>
<div class="titleContainer">
<div class="wolves">
<p>The</p>
<h1>WOLVES</h1>
</div>
<div class="sheep">
<p>The Sheep</p>
</div>
<div class="ram">
<p>And the ram</p>
</div>
</div>
<div class="titleFullContainer">
<div class="WSR">
<p>THE <br> WOLVES <br> THE SHEEP <br> AND THE RAM</p>
</div>
</div>
<div class = "bodyContainer">
<div class = "body">
<p>The Wolves sent a deputation to the Sheep with proposals for a lasting peace between them, on condition of their giving up the sheep-dogs to instant death. The foolish Sheep agreed to the terms; but an old Ram, whose years had brought him wisdom, interfered and said, "How can we expect to live at peace with you? Why, even with the dogs at hand to protect us, we are never secure from your murderous attacks!"</p>
</div>
</div>
</div><!-- /containerWidth -->
</div><!-- /container -->
</div><!-- /container-fluid -->
</div><!-- /section-wolves-sheep-ram -->
<div class="container-fluid section-the-boy-bathing" id="erinmercurio">
<a href="https://twitter.com/erinmercurio" class="avatar" target="_blank" title="erinmercurio"><img src="https://pbs.twimg.com/profile_images/467870863183056896/ust-pq8O.jpeg" alt="erinmercurio"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Quando" target="_blank">Quando</a>, <a href="https://www.google.com/fonts/specimen/Judson" target="_blank">Judson</a>, <a href="https://www.google.com/fonts/specimen/Montserrat" target="_blank">Montserrat</a></div>
<div class="container">
<h2><span>The</span> <span>Boy</span> <span>Bathing</span></h2>
<p>A Boy was bathing in a river and got out of his depth, and was in great danger of being drowned. A man who was passing along a road heard his cries for help, and went to the riverside and began to scold him for being so careless as to get into deep water, but made no attempt to help him. “Oh, sir,” cried the Boy, “please help me first and scold me afterwards.”</p>
<p class="moral"><span>Give assistance, not advice, in a crisis.</span></p>
</div>
</div>
<div class="section-the-serpent-and-the-eagle" id="jacoborjake">
<a href="https://twitter.com/jacoborjake" class="avatar" target="_blank" title="jacoborjake"><img src="https://pbs.twimg.com/profile_images/452108732629925889/0u4fZuci.jpeg" alt="jacoborjake"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Vollkorn" target="_blank">Vollkorn</a>, <a href="https://www.google.com/fonts/specimen/Exo" target="_blank">Exo</a></div>
<div class="container">
<h2>The<br />Serpent<br /><span>&</span><br />The<br />Eagle</h2>
<p>An Eagle swooped down upon a Serpent and seized it in his talons with the intention of carrying it off and devouring it. But the Serpent was too quick for him and had its coils round him in a moment; and then there ensued a life-and-death struggle between the two. A countryman, who was a witness of the encounter, came to the assistance of the Eagle, and succeeded in freeing him from the Serpent and enabling him to escape. In revenge the Serpent spat some of his poison into the man's drinking-horn. Heated with his exertions, the man was about to slake his thirst with a draught from the horn, when the Eagle knocked it out of his hand, and spilled its contents upon the ground.</p>
<p class="moral">One good turn deserves another.</p>
</div>
</div>
<div class="container-fluid section-fir-tree" id="femmebot-05">
<div class="caption"><a href="https://www.google.com/fonts/specimen/Ultra" target="_blank">Ultra</a>, <a href="https://www.google.com/fonts/specimen/Stint+Ultra+Expanded" target="_blank">Stint Ultra Expanded</a>, <a href="https://www.google.com/fonts/specimen/Slabo+13px" target="_blank">Slabo 13px</a></div>
<div class="container">
<h2>
<span>The</span>
Fir-Tree
<span>And The</span>
Bramble
</h2>
<p class="moral">Better poverty without a care than wealth with its many obligations.</p>
<p class="fable">A Fir-tree was boasting to a Bramble, and said, somewhat contemptuously, “You poor creature, you are of no use whatever. Now, look at me: I am useful for all sorts of things, particularly when men build houses; they can’t do without me then.” But the Bramble replied, “Ah, that’s all very well: but you wait till they come with axes and saws to cut you down, and then you’ll wish you were a Bramble and not a Fir.“
</p>
</div>
</div><!-- /section-fir-tree -->
<div class="container-fluid section-fox-lion" id="Linnk">
<div class="container">
<a href="https://twitter.com/Linnk" class="avatar" target="_blank" title="Linnk"><img src="https://pbs.twimg.com/profile_images/536840602965397504/tx7t096V_normal.png" alt="Linnk"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Open+Sans+Condensed" target="_blank">Open Sans Condensed</a>, <a href="http://www.google.com/fonts/specimen/Lora" target="_blank">Lora</a></div>
<h2>The fox <span class="ampersand">and</span> the lion</h2>
<p>A Fox who had never seen a Lion one day met one, and was so terrified at the sight of him that he was ready to die with fear. After a time he met him again, and was still rather frightened, but not nearly so much as he had been when he met him first. But when he saw him for the third time he was so far from being afraid that he went up to him and began to talk to him as if he had known him all his life.</p>
</div>
</div><!-- /section-fox-lion -->
<div class="container-fluid section-horse-groom" id="jamigibbs">
<a href="https://twitter.com/jamigibbs" class="avatar" target="_blank" title="jamigibbs"><img src="https://pbs.twimg.com/profile_images/2832671847/66d012f9b7c777fd6d64e04848a1844e_bigger.jpeg" alt="jamigibbs"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Alfa+Slab+One" target="_blank">Alfa Slab One</a>, <a href="https://www.google.com/fonts/specimen/Gentium+Book+Basic" target="_blank">Gentium Book Basic</a></div>
<h2>The Horse <span class="ampersand">&</span> the Groom</h2>
<p>There was once a Groom who used to spend long hours clipping and combing the Horse of which he had charge, but who daily stole a portion of his allowance of oats, and sold it for his own profit. The Horse gradually got into worse and worse condition, and at last cried to the Groom...</p>
<blockquote>“If you really want me to look sleek and well, you must comb me less and feed me more.”</blockquote>
</div><!-- /.section-horse-groom -->
<div class="container-fluid section-the-owl-and-the-birds" id="HayleyCAnderson">
<a href="https://twitter.com/HayleyCAnderson" class="avatar" target="_blank" title="HayleyCAnderson"><img src="https://pbs.twimg.com/profile_images/522745744910872577/r18KxHH8_400x400.jpeg" alt="HayleyCAnderson"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Montserrat" target="_blank">Montserrat</a>, <a href="https://www.google.com/fonts/specimen/Domine" target="_blank">Domine</a></div>
<div class="container">
<h2>The Owl and the Birds</h2>
<p><span class="cap">The Owl</span> is a very wise bird; and once, long ago, when the first oak sprouted in the forest, she called all the other Birds together and said to them, “You see this tiny tree? If you take my advice, you will destroy it now when it is small: for when it grows big, the mistletoe will appear upon it, from which birdlime will be prepared for your destruction.”</p>
<p>Again, when the first flax was sown, she said to them, “Go and eat up that seed, for it is the seed of the flax, out of which men will one day make nets to catch you.”</p>
<p>Once more, when she saw the first archer, she warned the Birds that he was their deadly enemy, who would wing his arrows with their own feathers and shoot them.</p>
<p>But they took no notice of what she said: in fact, they thought she was rather mad, and laughed at her. When, however, everything turned out as she had foretold, they changed their minds and conceived a great respect for her wisdom.</p>
<p>Hence, whenever she appears, the Birds attend upon her in the hope of hearing something that may be for their good. She, however, gives them advice no longer, but sits moping and pondering on the folly of her kind.</p>
</div>
</div><!-- /.section-the-owl-and-the-birds -->
<div class="section-crow-raven" id="erikford-01">
<div class="wrapper">
<div class="meta">
<a href="https://twitter.com/notdivisible" class="avatar" target="_blank" title="Erik Ford"><img src="https://pbs.twimg.com/profile_images/2771710724/22d3d8e607585a00e7ad948a198e3f23_400x400.png" alt="Erik Ford"></a>
<div class="caption"><a href="https://www.google.com/fonts/specimen/Nixie+One" target="_blank">Nixie One</a>, <a href="https://www.google.com/fonts/specimen/Libre+Baskerville" target="_blank">Libre Baskerville</a></div>
</div>
<h2>The Crow and The Raven</h2>
<p>A Crow became very jealous of a Raven, because the latter was regarded by men as a bird of omen which foretold the future, and was accordingly held in great respect by them. She was very anxious to get the same sort of reputation herself; and, one day, seeing some travellers approaching, she flew on to a branch of a tree at the roadside and cawed as loud as she could. The travellers were in some dismay at the sound, for they feared it might be a bad omen; till one of them, spying the Crow, said to his companions, <q>It’s all right, my friends, we can go on without fear, for it’s only a crow and that means nothing.</q></p>
<p>Those who pretend to be something they are not only make themselves ridiculous.</p>
</div>
</div><!-- /.section-crow-raven -->
<!-- /.jupiter-and-the-tortoise -->
<div class="container-fluid section-jupiter-and-the-tortoise" id="HomerGaines">
<div class="container">
<a href="https://twitter.com/xirclebox" class="avatar" target="_blank" title="HomerGaines"><img src=" https://pbs.twimg.com/profile_images/537288941297496064/ozsYT-R7_400x400.jpeg" alt="HomerGaines"></a>
<div class="caption">
<a href="https://www.google.com/fonts/specimen/Philosopher" target="_blank">Philosopher</a>, <a href="https://www.google.com/fonts/specimen/Muli" target="_blank">Muli</a>
</div>
<h2>Jupiter And The Tortoise</h2>
<p>Jupiter was about to marry a wife, and determined to celebrate the event by inviting all the animals to a banquet. They all came except the Tortoise, who did not put in an appearance, much to Jupiter’s surprise. So when he next saw the Tortoise he asked him why he had not been at the banquet. “I don’t care for going out,” said the Tortoise; “there’s no place like home.” Jupiter was so much annoyed by this reply that he decreed that from that time forth the Tortoise should carry his house upon his back, and never be able to get away from home even if he wished to.</p>
</div>
</div>
<!-- /.jupiter-and-the-tortoise -->
<div class="container-fluid section-north-wind-and-sun" id="joanrho-01">
<div class="container">
<a href="https://twitter.com/joanrho" class="avatar" target="_blank" title="joanrho"><img src="https://pbs.twimg.com/profile_images/2777249860/b9df03375908e40ecc434045b31c05c5.jpeg" alt="joanrho"></a>
<div class="caption">
<a href="https://www.google.com/fonts/specimen/Julius+Sans+One" target="_blank">Julius Sans One</a>, <a href="https://www.google.com/fonts/specimen/Crimson+Text" target="_blank">Crimson Text</a>
</div>
<h2>The North Wind and The Sun</h2>
<p>A dispute arose between the North Wind and the Sun, each claiming that he was stronger than the other. At last they agreed to try their powers upon a traveller, to see which could soonest strip him of his cloak. The North Wind had the first try; and, gathering up all his force for the attack, he came whirling furiously down upon the man, and caught up his cloak as though he would wrest it from him by one single effort: but the harder he blew, the more closely the man wrapped it round himself. Then came the turn of the Sun. At first he beamed gently upon the traveller, who soon unclasped his cloak and walked on with it hanging loosely about his shoulders: then he shone forth in his full strength, and the man, before he had gone many steps, was glad to throw his cloak right off and complete his journey more lightly clad.</p>
<p class="last">persuasion is better than force</p>
<div class="wind"></div>
</div>
</div>
<!-- /.north-wind-and-sun -->
<div class="container-fluid section-the-old-hound" id="joanrho-02">
<div class="container">
<a href="https://twitter.com/joanrho" class="avatar" target="_blank" title="joanrho"><img src="https://pbs.twimg.com/profile_images/2777249860/b9df03375908e40ecc434045b31c05c5.jpeg" alt="joanrho"></a>
<div class="caption">
<a href="https://www.google.com/fonts/specimen/Almendra+Display" target="_blank">Almendra Display</a>, <a href="https://www.google.com/fonts/specimen/Cardo" target="_blank">Cardo</a>
</div>
<h2>The Old Hound</h2>
<p>A Hound who had served his master well for years, and had run down many a quarry in his time, began to lose his strength and speed owing to age. One day, when out hunting, his master started a powerful wild boar and set the Hound at him. The latter seized the beast by the ear, but his teeth were gone and he could not retain his hold; so the boar escaped. His master began to scold him severely, but the Hound interrupted him with these words: "My will is as strong as ever, master, but my body is old and feeble. You ought to honour me for what I have been instead of abusing me for what I am."</p>
</div>
</div>
<!-- /.the-old-hound -->
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/scripts.js"></script>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51931-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>