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
|
<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/laar.jpg" alt="Mart Laar 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="laar" class="list"></div>
</div>
<div class="list col startBasket text-center">
<div id="pats" class="list-item" draggable="true">Mart Laar</div>
<div id="lauristin" class="list-item" draggable="true">Marju Lauristin</div>
<div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div>
<div id="toome" class="list-item" draggable="true">Indrek Toome</div>
<div id="savisaar" class="list-item" draggable="true">Edgar Savisaar</div>
<div id="valjas" class="list-item" draggable="true">Vaino Väljas</div>
</div>
<div class="col imgBox text-center">
<img src="pildid/lauristin.jpg" alt="Marju Lauristin 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="lauristin" class="list"></div>
</div>
</div>
</div>
<!-- Teine rida -->
<div class="lists">
<div class="row">
<div class="col-3 imgBox text-center">
<img src="pildid/ruutel.jpg" alt="Arnold Rüütel 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="ruutel" class="list"></div>
</div>
<div class="col-3 imgBox text-center">
<img src="pildid/savisaar.jpg" alt="Savisaar 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="savisaar" class="list"></div>
</div>
<div class="col-3 imgBox text-center">
<img src="pildid/valjas.jpg" alt="Vaino Väljas 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="valjas" class="list"></div>
</div>
<div class="col imgBox text-center">
<img src="pildid/toome.jpg" alt="Indrek Toome 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="toome" 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>
|
