-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
304 lines (289 loc) · 12.7 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
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="https://github.com/totaro" />
<meta
name="keywords"
content="HTML, CSS, JavaScript, JSON, Bootstrap, Font Awesome, Web Components"
/>
<title>Abako — Recruitment Assignment</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<!-- Styles -->
<link href="styles/styles.css" rel="stylesheet" />
<!-- FontAwesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- Web Components -->
<script type="module" src="webcomponent/abakohome.js"></script>
<script type="module" src="webcomponent/abakoconnectinfo.js"></script>
</head>
<body class="d-flex flex-column h-100">
<nav class="header-footer-bg navbar sticky-top navbar-light">
<div class="container">
<div class="col-8">
<a class="navbar-brand white-color" href="#"
><abako-home></abako-home
></a>
</div>
<div class="col-4 white-color align-right">
<i class="fa fa-user"></i> Makke Peippaaja
<i class="fa fa-bell"></i> 10 <i class="fa fa-folder-open"></i>
<i class="fa fa-search"></i>
</div>
</div>
</nav>
<div class="container text-color">
<div class="row">
<div class="col-10">
<div class="row breadcrumbs-bg">
<div>
Etusivu <i class="fa fa-caret-right"></i> Kirjasto
<i class="fa fa-caret-right"></i> <b>Turvallisuusohjeet 2022</b>
</div>
</div>
<div class="row light-bg">
<div>
<h3><i class="fa fa-book"></i> Turvallisuusohjeet 2020</h3>
</div>
</div>
<div class="row row-padding-top">
<div class="col-2 align-left">
<!-- left navigation from ./js/navigation.js and
with external data source: ./json/leftNavigation.json -->
<script type="module" src="js/navigation.js"></script>
<div id="leftnavigation"></div>
</div>
<div class="col-10">
<div class="row"><h3>Tulipalot</h3></div>
<div class="row light-bg">
<div class="row">
<div class="col-sm-8">Makke "Jekke" Peippaaja | 7.2.2020</div>
<div class="col-sm-4 align-right">
<i class="fa fa-thumbs-up"></i> 102
<i class="fa fa-comments"></i> 7
</div>
</div>
</div>
<div class="row row-padding-top">
<p>
<img
src="Img/lauren-coleman-shy0cEi7h1o-unsplash.jpg"
alt="sunset"
class="float-left article-image"
/>Jukolan talo, eteläisessä Hämeessä, seisoo erään mäen
pohjoisella rinteellä, liki Toukolan kylää. Sen läheisin
ympäristö on kivinen tanner, mutta alempana alkaa pellot,
joissa, ennenkuin talo oli häviöön mennyt, aaltoili teräinen
vilja. Peltojen alla on niittu, apilaäyräinen, halkileikkaama
monipolvisen ojan; ja runsaasti antoi se heiniä, ennenkuin
joutui laitumeksi kylän karjalle. Muutoin on talolla avaria
metsiä, soita ja erämaita, jotka, tämän tilustan ensimmäisen
perustajan oivallisen toiminnan kautta, olivat langenneet
sille osaksi jo ison jaon käydessä entisinä aikoina. Silloinpa
Jukolan isäntä, pitäen enemmän huolta jälkeentulevainsa edusta
kuin omasta parhaastansa, otti vastaan osaksensa kulon
polttaman metsän ja sai sillä keinolla seitsemän vertaa
enemmän kuin toiset naapurinsa. Mutta kaikki kulovalkean
jäljet olivat jo kadonneet hänen piiristänsä ja tuuhea metsä
kasvanut sijaan. - Ja tämä on niiden seitsemän veljen koto,
joiden elämänvaiheita tässä nyt käyn kertoilemaan.
</p>
<p>
Veljesten nimet vanhimmasta nuorimpaan ovat: Juhani, Tuomas,
Aapo, Simeoni, Timo, Lauri ja Eero. Ovat heistä Tuomas ja Aapo
kaksoispari ja samoin Timo ja Lauri. Juhanin, vanhimman
veljen, ikä on kaksikymmentä ja viisi vuotta, mutta Eero,
nuorin heistä, on tuskin nähnyt kahdeksantoista auringon
kierrosta. Ruumiin vartalo heillä on tukeva ja harteva, pituus
kohtalainen, paitsi Eeron, joka vielä on kovin lyhyt. Pisin
heistä kaikista on Aapo, ehkä ei suinkaan hartevin. Tämä
jälkimmäinen etu ja kunnia on Tuomaan, joka oikein on kuuluisa
hartioittensa levyyden tähden. Omituisuus, joka heitä kaikkia
yhteisesti merkitsee, on heidän ruskea ihonsa ja kankea,
hampunkarvainen tukkansa, jonka karheus etenkin Juhanilla on
silmään pistävä.
</p>
<hr class="hr-text-highlight" />
<p class="text-highlight">
Veljesten nimet vanhimmasta nuorimpaan ovat:<br />Juhani,
Tuomas, Aapo, Simeoni, Timo, Lauri ja Eero.
</p>
<hr class="hr-text-highlight" />
<p>
Heidän isäänsä, joka oli ankaran innokas metsämies, kohtasi
hänen parhaassa iässään äkisti surma, kun hän tappeli äkeän
karhun kanssa. Molemmat silloin,
<b>niin metsän kontio kuin mies, löyttiin kuolleina</b>,
toinen toisensa rinnalla maaten verisellä tanterella. Pahoin
oli mies haavoitettu, mutta pedonkin sekä kurkku että kylki
nähtiin puukon viiltämänä ja hänen rintansa kiväärin tuiman
luodin lävistämänä. Niin lopetti päivänsä roteva mies, joka
oli kaatanut enemmän kuin viisikymmentä karhua. Mutta näiden
metsäretkiensä kautta löi hän laimin työn ja toimen
talossansa, joka vähitellen, ilman esimiehen johtoa, joutui
rappiolle. Eivät kyenneet hänen poikansakaan kyntöön ja
kylvöön; sillä olivatpa he perineet isältänsä saman
voimallisen innon metsäotusten pyyntöön. He rakentelivat
satimia, loukkuja, ansaita ja teerentarhoja surmaksi linnuille
ja jäniksille. Niin viettivät he poikuutensa ajat, kunnes
rupesivat käsittelemään tuliluikkua ja rohkenivat lähestyä
otsoa korvessa.
</p>
<p>
Äiti kyllä koetti sekä nuhteilla että kurilla saattaa heitä
työhön ja ahkeruuteen, mutta heidän uppiniskaisuutensa oli
jäykkä vastus kaikille hänen yrityksillensä. Oli hän muutoin
kelpo vaimo; tunnettu oli hänen suora ja vilpitön ehkä hieman
jyrkkä mielensä. Kelpo mies oli myös hänen veljensä, poikien
oiva eno, joka nuoruudessaan oli uljaana merimiehenä,
purjehtinut kaukaiset meret, nähnyt monta kansaa ja kaupunkia;
mutta näkönsäpä kadotti hän viimein, käyden umpisokeaksi, ja
vietti ikänsä pimeät päivät Jukolan talossa. Hän silloin
usein, veistellen tunteensa viittauksen mukaan kauhoja,
lusikoita, kirvesvarsia, kurikkoja ja muita huoneessa
tarpeellisia kaluja, kertoili sisarensa pojille tarinoita ja
merkillisiä asioita sekä omasta maasta että vieraista
valtakunnista, kertoili myös ihmeitä ja tapauksia raamatusta.
Näitä hänen jutelmiansa kuultelivat pojat kaikella hartaudella
ja painoivat lujasti muistoonsa. Mutta yhtä mieluisasti eivät
he kuullelleetkaan äitinsä käskyjä ja nuhteita, vaan olivatpa
kovakorvaisia vallan, huolimatta monestakaan
pieksiäislöylystä. Useinpa kyllä, huomatessaan selkäsaunan
lähestyvän, vilkasi veliparvi karkutielle, saattaen tämän
kautta sekä äitillensä että muille murhetta ja kiusaa, ja
sillä omaa asiaansa pahentaen.
</p>
</div>
</div>
</div>
</div>
<div class="col-2 right-column-bg padding-right padding-left">
<script type="text/javascript">
const ajassaNavigation = [
{
id: 0,
label: "Oma työpöytä",
url: "/omatyopoytä",
fa: "fa-desktop",
},
{
id: 1,
label: "Uutiset",
url: "/uutiset",
fa: "fa-newspaper-o",
},
{
id: 2,
label: "Ilmoitukset",
url: "/ilmoitukset",
fa: "fa-bell",
},
{
id: 3,
label: "Kalenteri",
url: "/kalenteri",
fa: "fa-calendar",
},
{
id: 4,
label: "Ryhmätyötila",
url: "/ryhmatyotila",
fa: "fa-group",
},
{
id: 5,
label: "Keskustelu",
url: "/keskustelut",
fa: "fa-comments",
},
{
id: 6,
label: "Sähköposti",
url: "/sahkoposti",
fa: "fa-envelope",
},
];
const infoNavigation = [
{
id: 0,
label: "Henkilöstö",
url: "/henkilosto",
fa: "fa-group",
},
{
id: 1,
label: "Koulutukset",
url: "/koulutukset",
fa: "fa-graduation-cap",
},
{
id: 2,
label: "Asiakkaat ja vastuut",
url: "/asiakkaatjavastuut",
fa: "fa-briefcase",
},
{
id: 3,
label: "Työsuunnitelmat",
url: "/Tyosuunnitelmat",
fa: "fa-pie-chart",
},
{
id: 4,
label: "Tietoturva",
url: "/tietoturva",
fa: "fa-lock",
},
{
id: 5,
label: "Kirjasto",
url: "/kirjasto",
fa: "fa-book",
},
{
id: 6,
label: "Yhteystiedot",
url: "/yhteystiedot",
fa: "fa-address-card",
},
];
document.write(
`<div class="left-navi-headline"><h4>AJASSA</h4></div>`
);
ajassaNavigation.map((item) =>
document.write(
`<a href=${item.url} key=${item.id}><div class="left-navi"><i class="fa ${item.fa}"></i> ${item.label}</div></a>`
)
);
document.write(
`<div class="left-navi-headline"><h4>INFO</h4></div>`
);
infoNavigation.map((item) =>
document.write(
`<a href=${item.url} key=${item.id}><div class="left-navi"><i class="fa ${item.fa}"></i> ${item.label}</div></a>`
)
);
</script>
</div>
</div>
<!-- container end -->
</div>
<footer class="header-footer-bg mt-auto py-3 h-25">
<div class="container">
<span class="text-light"
><abako-connect-info></abako-connect-info
></span>
</div>
</footer>
</body>
</html>