<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memori</title>
<link rel="stylesheet" href="style.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>
<div class="left">
<div class="left-text">
<h1>Memori</h1>
<p>Mängu läbimiseks leia üles kõik kümme Talongipaari</p>
</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">
<div class="modalHeaderWrapper">
<h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
</div>
<img class="avatar" alt="avatar" src="img/avatar.png"/>
</div>
<div class="modal-body">
No on alles aeg! Poelettidel valitseb selline tühjus, et tikutoosigi pole osta! <br/>
Talongimajandus leevendab olukorda niipalju, et nüüd on vähemalt VÕIMALUS midagi saada! Sest ega talong ju kaupa poes ei kindlusta. Kui kell 16 tööl lõpetan, lähen kohe järjekorda. <br/>
Kell 17 pannakse kaup välja. Kunagi ei tea, kas õnnestub midagi saada või lõpeb kaup enne otsa. <br/> <br/>
Talongide peal on kogu esmatarbe kaup: <br/>
<strong>või, nisujahu, tangained, makaronitooted, sool, suhkur, alkohol, tuletikud, wc paber, pesupulber. Nii tore oleks, kui saaks neid kõiki topelt! Talongimemoiin aitab!</strong>
</div>
</div>
</div>
</div>
<section class="memory-game">
<div class="memory-card" data-framework="või">
<img class="front-face"src="img/butter.svg" alt="või" />
<span class="talong-text">Või</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="või">
<img class="front-face" src="img/butter.svg" alt="või" />
<span class="talong-text">Või</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="tikud">
<img class="front-face" src="img/tikud.svg" alt="tikud" />
<span class="talong-text">Tuletikud</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="tikud">
<img class="front-face" src="img/tikud.svg" alt="Tikud" />
<span class="talong-text">Tuletikud</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="alko">
<img class="front-face" src="img/alko.svg" alt="Alko" />
<span class="talong-text">Alkohol</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="alko">
<img class="front-face" src="img/alko.svg" alt="Alko" />
<span class="talong-text">Alkohol</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="jahu">
<img class="front-face" src="img/jahu.svg" alt="Jahu" />
<span class="talong-text">Nisujahu</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="jahu">
<img class="front-face" src="img/jahu.svg" alt="Jahu" />
<span class="talong-text">Nisujahu</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="pasta">
<img class="front-face" src="img/pasta.svg" alt="Pasta" />
<span class="talong-text">Makaron</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="pasta">
<img class="front-face" src="img/pasta.svg" alt="Pasta" />
<span class="talong-text">Makaron</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="pesu">
<img class="front-face" src="img/pesupulber.svg" alt="Pesu" />
<span class="talong-text">Pesupulber</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="pesu">
<img class="front-face" src="img/pesupulber.svg" alt="Pesu" />
<span class="talong-text">Pesupulber</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="tang">
<img class="front-face" src="img/tang.svg" alt="Tang" />
<span class="talong-text">Tangained</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="tang">
<img class="front-face" src="img/tang.svg" alt="Tang" />
<span class="talong-text">Tangained</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="wcpaber">
<img class="front-face" src="img/wcpaber.svg" alt="Wcpaber" />
<span class="talong-text">Wc-paber</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="wcpaber">
<img class="front-face" src="img/wcpaber.svg" alt="wcpaber" />
<span class="talong-text">Wc-paber</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="sool">
<img class="front-face" src="img/sool.svg" alt="Sool" />
<span class="talong-text">Sool</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="sool">
<img class="front-face" src="img/sool.svg" alt="Sool" />
<span class="talong-text">Sool</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="suhkur">
<img class="front-face" src="img/suhkur.svg" alt="suhkur" />
<span class="talong-text">Suhkur</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="suhkur">
<img class="front-face" src="img/suhkur.svg" alt="suhkur" />
<span class="talong-text">Suhkur</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
</section>
<div class="right row align-items-center text-center">
<div class="col">
<button class="moveOn" disabled>Liigu Edasi</button>
</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>