`<!DOCTYPE html>
<html>
<head>
<title>Memory game</title>
<style>
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body {
height: 100vh;
display: grid;
margin: 0;
place-items: center;
background-color: #938BA1;
}
.field {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 20px;
border-radius: 10px;
background-color: #424B54;
}
h1 {
text-align: center;
font-size: 2rem;
margin-bottom: 10px;
}
</style>
</head>
<body>
<main>
<section>
<header>
<h1>Memory Game</h1>
</header>
<div class="field">
<div class="card" type="129409">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🦁
</div>
</div>
</div>
<div class="card" type="129409">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🦁
</div>
</div>
</div>
<div class="card" type="9917">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
⚽
</div>
</div>
</div>
<div class="card" type="9917">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
⚽
</div>
</div>
</div>
<div class="card" type="127758">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🌎
</div>
</div>
</div>
<div class="card" type="127758">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🌎
</div>
</div>
</div>
<div class="card" type="127790">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🌮
</div>
</div>
</div>
<div class="card" type="127790">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🌮
</div>
</div>
</div>
<div class="card" type="127789">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🌭
</div>
</div>
</div>
<div class="card" type="127789">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🌭
</div>
</div>
</div>
<div class="card" type="127823">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🍏
</div>
</div>
</div>
<div class="card" type="127823">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🍏
</div>
</div>
</div>
<div class="card" type="127844">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🍤
</div>
</div>
</div>
<div class="card" type="127844">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🍤
</div>
</div>
</div>
<div class="card" type="127849">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🍩
</div>
</div>
</div>
<div class="card" type="127849">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back">
🍩
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>`
