-
Notifications
You must be signed in to change notification settings - Fork 2
/
story.html
248 lines (190 loc) · 12.4 KB
/
story.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
<!doctype html>
<html lang="en">
<head>
<title>NIJE Learning</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=DM+Sans:300,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container mb-3">
<div class="d-flex justify-content-center align-items-center">
<div class="site-logo">
<a style="color: black;" href="/">NIJE</a>
</div>
<div class="menu-wrap d-flex align-items-center ml-3">
<span class="d-inline-block d-lg-none">
<a href="#" class="text-black site-menu-toggle js-menu-toggle py-5">
<span class="icon-menu h3 text-black"></span>
</a>
</span>
<nav class="site-navigation text-left d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav">
<li><a href="/" class="nav-link">Home</a></li>
<li><a href="/projects" class="nav-link">Stories</a></li>
<li><a href="/about" class="nav-link">About</a></li>
<li><a href="/contact" class="nav-link">Contact</a></li>
</ul>
</nav>
<div class="top-social ml-auto">
<!-- <a href="#"><span class="icon-twitter"></span></a> -->
<a href="https://www.instagram.com/nije.app/" target="_blank"><span class="icon-instagram"></span></a>
<a href="https://www.linkedin.com/company/nijeapp/" target="_blank"><span class="icon-linkedin"></span></a>
</div>
</div>
</div>
</div>
</header>
<div class="site-section" id="story">
<div class="container">
<div class="row">
<h1 id="story-title"></h1>
<div class="image-container">
<img id="story-image" alt="Story Image" class="story-image">
<p id="image-caption" class="caption"></p>
<p id="story-caption" class="caption"></p>
</div>
</div>
<div id="story-content"></div>
</div>
</div>
<!-- <div class="site-section" id="story">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>17. HOW THE RABBIT STOLE THE OTTER’S COAT</h1>
</div>
<div class="col-md-6">
<div class="image-container">
<img src="images/img_1.jpg" alt="Otter's Coat" class="story-image">
<p class="caption">Mooney, James. The Project Gutenberg EBook of Myths of the Cherokee</p>
</div>
</div>
</div>
<p>
The animals were of different sizes and wore coats of various colors and patterns. Some wore long fur and others wore short. Some had rings on their tails, and some had no tails at all. Some had coats of brown, others of black or yellow. They were always disputing about their good looks, so at last they agreed to hold a council to decide who had the finest coat.
<br>
They had heard a great deal about the Otter, who lived so far up the creek that he seldom came down to visit the other animals. It was said that he had the finest coat of all, but no one knew just what it was like, because it was a long time since anyone had seen him. They did not even know exactly where he lived—only the general direction; but they knew he would come to the council when the word got out.
<br>
Now the Rabbit wanted the verdict for himself, so when it began to look as if it might go to the Otter he studied up a plan to cheat him out of it. He asked a few sly questions until he learned what trail the Otter would take to get to the council place. Then, without saying anything, he went on ahead and after four days’ travel he met the Otter and knew him at once by his beautiful coat of soft dark-brown fur. The Otter was glad to see him and asked him where he was going. “O,” said the Rabbit, “the animals sent me to bring you to the council; because you live so far away they were afraid you mightn’t know the road.” The Otter thanked him, and they went on together.
They traveled all day toward the council ground, and at night the Rabbit selected the camping place, because the Otter was a stranger in that part of the country, and cut down bushes for beds and fixed everything in good shape. The next morning they started on again. In the afternoon the Rabbit began to pick up wood and bark as they went along and to load it on his back. When the Otter asked what this was for the Rabbit said it was that they might be warm and comfortable at night. After a while, when it was near sunset, they stopped and made their camp.
When supper was over the Rabbit got a stick and shaved it down to a paddle. The Otter wondered and asked again what that was for.
“I have good dreams when I sleep with a paddle under my head,” said the Rabbit.
When the paddle was finished the Rabbit began to cut away the bushes so as to make a clean trail down to the river.
The Otter wondered more and more and wanted to know what this meant. Said the Rabbit, “This place is called Di′tatlâski′yĭ [The Place Where it Rains Fire]. Sometimes it rains fire here, and the sky looks a little that way to-night. You go to sleep and I’ll sit up and watch, and if the fire does come, as soon as you hear me shout, you run and jump into the river. Better hang your coat on a limb over there, so it won’t get burnt.” The Otter did as he was told, and they both doubled up to go to sleep, but the Rabbit kept awake. After a while the fire burned down to red coals. The Rabbit called, but the Otter was fast asleep and made no answer. In a little while he called again, but the Otter never stirred. Then the Rabbit filled the paddle with hot coals and threw them up into the air and shouted, “It’s raining fire! It’s raining fire!”
The hot coals fell all around the Otter and he jumped up. “To the water!” cried the Rabbit, and the Otter ran and jumped into the river, and he has lived in the water ever since.
The Rabbit took the Otter’s coat and put it on, leaving his own instead, and went on to the council. All the animals were there, every one looking out for the Otter. At last they saw him in the distance, and they said one to the other, “The Otter is coming!” and sent one of the small animals to show him the best seat. They were all glad to see him and went up in turn to welcome him, but the Otter kept his head down, with one paw over his face. They wondered that he was so bashful, until the Bear came up and pulled the paw away, and there was the Rabbit with his split nose. He sprang up and started to run, when the Bear struck at him and pulled his tail off, but the Rabbit was too quick for them and got away
</p>
</div>
</div> -->
<div class="site-section section-3" data-stellar-background-ratio="0.5" style="background-image: url('images/pic1.jpg');">
<div class="container">
<div class="image-credit-top">
Photo by Andrew James on Unsplash
</div>
<div class="row justify-content-center text-center">
<div class="col-7 text-center mb-5">
<h2 class="text-white">Get ready to start your exciting journey</h2>
<p class="lead text-white">Indigenous learning for the 21st century</p>
</div>
</div>
</div>
</div>
<div class="site-section counter-wrap">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-5">
<div class="d-flex align-items-center counter">
<span class="icon-book wrap-icon mr-3"></span>
<div class="text">
<span class="d-block number">20+</span>
<span class="caption">unique stories</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="d-flex align-items-center counter">
<span class="icon-pencil wrap-icon mr-3"></span>
<div class="text">
<span class="d-block number">100+</span>
<span class="caption">tests & quizzes</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="d-flex align-items-center counter">
<span class="icon-building wrap-icon mr-3"></span>
<div class="text">
<span class="d-block number">10+</span>
<span class="caption">prestigious universities</span>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-lg-4">
<h2 class="footer-heading mb-3">About Us</h2>
<p class="mb-5">NIJE Learning is a future 501(c)(3) nonprofit organization dedicated to developing a mobile application for learning Indigenous languages while providing mentorship to Indigenous students throughout their academic journey, completely free of charge.</p>
<!-- <h2 class="footer-heading mb-4">Newsletter</h2>
<form action="#" class="d-flex" class="subscribe">
<input type="text" class="form-control mr-3" placeholder="Email">
<input type="submit" value="Send" class="btn btn-primary">
</form> -->
</div>
<div class="col-lg-4 ml-auto">
<div class="col">
<h2 class="footer-heading mb-4">Navigation</h2>
<ul class="list-unstyled">
<li><a href="/">Home</a></li>
<li><a href="/terms">Terms of Service</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/main.js"></script>
<script src="js/story.js"></script>
</body>
</html>