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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Õpime soome keelt</title>
<!-- Bootstrap - CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Button trigger modal -->
<button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
Sissejuhatus
</button>
<div class="container text-white text-center">
<h1>Õpime soome keelt</h1>
<p>
Leia sõnastikust soomekeelsetele sõnadele vasted ja asenda need kirja.
<br/>
PS: Pane sõnad ka õigesse käändesse.
</p>
<div class="text-center">
<div class="col">
<button class="moveOn" disabled>Liigu Edasi</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modalHeaderWrapper">
<h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
</div>
<img class="avatar" alt="avatar" src="pildid/avatar.png"/>
</div>
<div class="modal-body">
Tsau!
<br/>
Vaata, äri ajades peab ikka keelt oskama, vähemalt natukenegi - ilma soome keeleta tänapäeval enam bisnisit ei tee.
<br/>
Nali on aga selles, et meil on nii palju sarnaseid sõnu, mis võivad tähendada hoopis teisi asju. Nii et keelt tundmata võid vastu pükse saada.
Et paremini mõikaksid, millest ma räägin, kirjutasin sulle kirja.
<br/><br/>
<strong>
Leia sõnastikust soomekeelsetele sõnadele õiged tähendused ja kirjuta asemele eestikeelsed! Neid sõnu läheb sul nii Viru(o)s kui Soomes vaja!
</strong>
</div>
</div>
</div>
</div>
<!-- Main Stuff -->
<div class="content">
<div class="leftSide">
<h3>Sõnastik</h3>
<ul>
<li>halba - odav</li>
<li>housut - püksid</li>
<li>kaikki kunnossa – kõik on korras</li>
<li>kaikki parhaat- kõike head</li>
<li>kassi - kott</li>
<li>kesä - suvi</li>
<li>moikkaa – tere</li>
<li>ostoksille - ostlema </li>
<li>pibo - kootud suusamüts</li>
<li>puhelin - telefon </li>
<li>puhuma - rääkima</li>
<li>pulma - probleem</li>
<li>purukummi - näts</li>
<li>pusero – sametist dressipluus</li>
<li>takki- jope</li>
<li>T-paita - T-särk</li>
</ul>
</div>
<div class="rightSide">
<p>
<span id="Moikka" contenteditable="true">Moikka </span>
, jälle mina, Toits!!
Ma ei saa sinuga pikalt <span contenteditable="true" id="puhuda">puhuda </span>.
<span contenteditable="true" id="Pulma">Pulma </span> on
selles, et kiirustan laevale, sõidan Helsingisse <span contenteditable="true" id="ostoksille">ostoksille </span>,
sealt saab <span contenteditable="true" id="halba">halba </span> kraami! Kuluvaid on kindlasti juurde vaja
<span contenteditable="true" id="pibod">pibod </span> ning <span contenteditable="true" id="Tpaitad">T-paitad </span>
lähevad ka hästi kaubaks.
Eelmisest korrast on veel mõned <span contenteditable="true" id="puserod">puserod </span>,
<span contenteditable="true" id="takkid">takkid </span> ja veits <span contenteditable="true" id="purukummi">purukummi </span>
alles, aga nendega <span contenteditable="true" id="pulma">pulma </span> pole, kätte küll midagi ei jää.
Võtan seekord suurema <span contenteditable="true" id="kassi">kassi </span> - äkki saan kassette ka.
Ööbin Pekka juures, tal on <span contenteditable="true" id="puhelin">puhelin </span> - võtan ühendust.
Nii et praegu on <span contenteditable="true" id="kaikkiKunnossa">kaikki kunnossa </span>!
<br/>
<br/>
<span contenteditable="true" id="KaikkiParhaat">Kaikki parhaat </span> teile seniks!
</p>
</div>
</div>
<script src="script.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
|
