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
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Kuusused</title>
<link rel="stylesheet" href="styles.css">
<!-- 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">
</head>
<body class="bg-dark text-white">
<div class="container text-center text-white align-items-center pb-5">
<h1 class="pb-1 pt-2">Kuulsused</h1>
<p>Vii kokku inimese nimi ja nägu.</p>
<div class="row">
<div>
<button class="moveOn" disabled>Liigu Edasi</button>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
Sissejuhatus
</button>
</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">
<h5 class="modal-title" id="myModalLabel">Sissejuhatav info Kuulsuste Mängule</h5>
<button type="button" class="closeModalButton" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo?
Arcu non odio euismod lacinia at quis risus sed vulputate odio. Nullam non nisi est,
sit amet facilisis magna etiam tempor, orci eu lobortis elementum,
nibh tellus molestie nunc, non blandit massa enim nec dui nunc.
<br/>
Odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo?
Arcu non odio euismod lacinia at quis risus sed vulputate odio. Nullam non nisi est,
sit amet facilisis magna etiam tempor, orci eu lobortis elementum,
nibh tellus molestie nunc, non blandit massa enim nec dui nunc.
<br/>
odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo?
arcu non odio euismod lacinia at quis risus sed vulputate odio. nullam non nisi est,
sit amet facilisis magna etiam tempor, orci eu lobortis elementum,
nibh tellus molestie nunc, non blandit massa enim nec dui nunc.
</div>
</div>
</div>
</div>
<!-- Esimene rida -->
<div class="lists">
<div class="row">
<div class="col imgBox text-center">
<img src="pildid/valk.jpg" alt="Valk img">
<p>
"Siia Lühikene info sellekohta Kes oli ja Mida tegi.
natuke placeholder teksti veel ja nii ja naa ja see ka."
</p>
<div id="valk" class="list"></div>
</div>
<div class="list col startBasket text-center">
<div id="hanni" class="list-item" draggable="true">Liia Hänni</div>
<div id="kelam" class="list-item" draggable="true">Tunne Kelam</div>
<div id="matiisen" class="list-item" draggable="true">Alo Matiisen</div>
<div id="valk" class="list-item" draggable="true">Heinz Valk</div>
<div id="kogan" class="list-item" draggable="true">Jevgeni Kogan</div>
<div id="parek" class="list-item" draggable="true">Lagle Parek</div>
</div>
<div class="col imgBox text-center">
<img src="pildid/parek.jpg" alt="Parek img">
<p>
"Siia Lühikene info sellekohta Kes oli ja Mida tegi.
natuke placeholder teksti veel ja nii ja naa ja see ka."
</p>
<div id="parek" class="list"></div>
</div>
</div>
</div>
<!-- Teine rida -->
<div class="lists">
<div class="row">
<div class="col-3 imgBox text-center">
<img src="pildid/kelam.jpg" alt="Tunne Kelam img">
<p>
"Siia Lühikene info sellekohta Kes oli ja Mida tegi.
natuke placeholder teksti veel ja nii ja naa ja see ka."
</p>
<div id="kelam" class="list"></div>
</div>
<div class="col-3 imgBox text-center">
<img src="pildid/kogan.jpg" alt="Kogan img">
<p>
"Siia Lühikene info sellekohta Kes oli ja Mida tegi.
natuke placeholder teksti veel ja nii ja naa ja see ka."
</p>
<div id="kogan" class="list"></div>
</div>
<div class="col-3 imgBox text-center">
<img src="pildid/matiisen.jpg" alt="Alo img">
<p>
"Siia Lühikene info sellekohta Kes oli ja Mida tegi.
natuke placeholder teksti veel ja nii ja naa ja see ka."
</p>
<div id="matiisen" class="list"></div>
</div>
<div class="col-3 imgBox text-center">
<img src="pildid/hanni.jpg" alt="Hänni img">
<p>
"Siia Lühikene info sellekohta Kes oli ja Mida tegi.
natuke placeholder teksti veel ja nii ja naa ja see ka."
</p>
<div id="hanni" class="list"></div>
</div>
</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>
|
