<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>