diff options
Diffstat (limited to 'rannak/mangud/partorg/kuulsused/index.html')
| -rw-r--r-- | rannak/mangud/partorg/kuulsused/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html new file mode 100644 index 0000000..9944db7 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused/index.html @@ -0,0 +1,179 @@ +<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/pats.jpg" alt="Konstantin Päts 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="pats" class="list"></div> + </div> + + <div class="list col startBasket text-center"> + <div id="pats" class="list-item" draggable="true">Konstantin Päts</div> + <div id="karis" class="list-item" draggable="true">Alar Karis</div> + <div id="meri" class="list-item" draggable="true">Lennart Meri</div> + <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div> + <div id="ilves" class="list-item" draggable="true">Toomas Hendrik Ilves</div> + <div id="kaljulaid" class="list-item" draggable="true">Kersti Kaljulaid</div> + <div id="queen" class="list-item" draggable="true">Elizabth II</div> + <div id="galileo" class="list-item" draggable="true">Galileo Galilei</div> + </div> + + <div class="col imgBox text-center"> + <img src="pildid/karis.jpg" alt="Alar Karis 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="karis" class="list"></div> + </div> + + </div> + </div> + + <!-- Teine rida --> + + <div class="lists"> + <div class="row"> + + <div class="col 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 imgBox text-center"> + <img src="pildid/galileo.jpg" alt="Galileo 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="galileo" class="list"></div> + </div> + + <div class="col imgBox text-center"> + <img src="pildid/queen.jpg" alt="Queen 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="queen" class="list"></div> + </div> + + </div> + </div> + + <!-- Kolmas Rida --> + + <div class="lists"> + <div class="row"> + + <div class="col imgBox text-center"> + <img src="pildid/kaljulaid.jpg" alt="Kersti Kaljulaid 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="kaljulaid" class="list"></div> + </div> + + <div class="col imgBox text-center"> + <img src="pildid/ilves.jpg" alt="Toomas Hendrik Ilves 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="ilves" class="list"></div> + </div> + + <div class="col imgBox text-center"> + <img src="pildid/meri.jpg" alt="Lennart Meri 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="meri" 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> |