<!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>
</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">Tikud</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">Tikud</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">Õlu</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">Õlu</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">Jahu</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">Jahu</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">Pasta</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">Pasta</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/pesu.svg" alt="Pesu" />
<span class="talong-text">Pesu</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/pesu.svg" alt="Pesu" />
<span class="talong-text">Pesu</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="riis">
<img class="front-face" src="img/riis.svg" alt="Riis" />
<span class="talong-text">Riis</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="riis">
<img class="front-face" src="img/riis.svg" alt="Riis" />
<span class="talong-text">Riis</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="sokid">
<img class="front-face" src="img/sokid.svg" alt="Sokid" />
<span class="talong-text">Sokid</span>
<img class="back-face" src="img/taga.svg" alt="taga" />
</div>
<div class="memory-card" data-framework="sokid">
<img class="front-face" src="img/sokid.svg" alt="sokid" />
<span class="talong-text">Sokid</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>
</body>
</html>