Create account

1JHaEMi2KnsEymQw4XTcpkLWmAurYs98gE
1983d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">

<title>Memory Game</title>

<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;

}

body {
height: 80vh;
display: flex;
background: #111;
margin: auto;
flex-direction:column;
}

.mbutton{
padding: 15px;
float: right;
}

.memory-game {
width: 60vh;
height: 60vh;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 880px;
}

.memory-card {
width: calc(25% - 10px);
height: calc(25% - 10px);
margin: 5px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
border-radius: 265px;
}

.memory-card:active {
transform: scale(0.97);
transition: transform .2s;

}

.memory-card.flip {
transform: rotateY(180deg);
}

.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 10px;
position: absolute;
border-radius: 12px;
background: #FFFFFF;
backface-visibility: hidden;

}

.front-face {
transform: rotateY(180deg);
}
</style>





</head>
<body>


<section class="mbutton">
<!-- This line should go where you want to put your button -->
<div class="money-button"
data-to="1485"
data-amount="1"
data-currency="USD"
data-label=""
data-client-identifier="e78343cefb08ae71141cf925dfa09b7f"
data-button-id="1563183513965"
data-button-data="{}"
data-type="tip"
data-editable="true"
></div>
<!-- This line can go anywhere -->
<script src="https://www.moneybutton.com/moneybutton.js"></script>
</section>
<section class="memory-game">
<div class="memory-card" data-framework="calvin">
<img class="front-face" src="https://bico.media/36d3fea0ffafc2141323eca1be8d5654ed09f558ce4de2cc70681e33ac95f572.jpg" alt="Calvin" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="calvin">
<img class="front-face" src="https://bico.media/36d3fea0ffafc2141323eca1be8d5654ed09f558ce4de2cc70681e33ac95f572.jpg" alt="Calvin" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="alex">
<img class="front-face" src="https://bico.media/db75acb86f0012258fc236f732cad459cb58c0ef29adff24acc2779c3264fbdc.jpg" alt="Alex" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="alex">
<img class="front-face" src="https://bico.media/db75acb86f0012258fc236f732cad459cb58c0ef29adff24acc2779c3264fbdc.jpg" alt="Alex" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="brendan">
<img class="front-face" src="https://bico.media/1f05738cbb8fe419bca678060aeaaa218b3f56d5ebbda02d9670e7ff5574bab1.jpg" alt="Brendan" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="brendan">
<img class="front-face" src="https://bico.media/1f05738cbb8fe419bca678060aeaaa218b3f56d5ebbda02d9670e7ff5574bab1.jpg" alt="Brendan" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="craig">
<img class="front-face" src="https://bico.media/b0b1938838dbe75c9bb9c10dc9767cb7a021a4e5526758dd1378bf59775e44e4.jpg" alt="Craig" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="craig">
<img class="front-face" src="https://bico.media/b0b1938838dbe75c9bb9c10dc9767cb7a021a4e5526758dd1378bf59775e44e4.jpg" alt="Craig" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="daniel">
<img class="front-face" src="https://bico.media/be92c00224efca0db2bb8968204168f070323bb7d856a4fb285177c06ee406b3.jpg" alt="Daniel" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="daniel">
<img class="front-face" src="https://bico.media/be92c00224efca0db2bb8968204168f070323bb7d856a4fb285177c06ee406b3.jpg" alt="Daniel" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="unwriter">
<img class="front-face" src="https://bico.media/b14043b340549b84f5f927055c18bbf10bbab214151176ecc30e616e037f03a0.jpg" alt="Unwriter" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="unwriter">
<img class="front-face" src="https://bico.media/b14043b340549b84f5f927055c18bbf10bbab214151176ecc30e616e037f03a0.jpg" alt="Unwriter" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="roger">
<img class="front-face" src="https://bico.media/8a101708fc25e4a11ef71dc3ea560e0e1d62728a5b3064f090228c64b8b85370.jpg" alt="Roger" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="roger">
<img class="front-face" src="https://bico.media/8a101708fc25e4a11ef71dc3ea560e0e1d62728a5b3064f090228c64b8b85370.jpg" alt="Roger" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="ryan">
<img class="front-face" src="https://bico.media/879b42dfaafc65839d351d6ab2b81c35e148d0442506432ae2cef15e5c07ec2b.jpg" alt="Ryan" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="ryan">
<img class="front-face" src="https://bico.media/879b42dfaafc65839d351d6ab2b81c35e148d0442506432ae2cef15e5c07ec2b.jpg" alt="Ryan" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="jimmy">
<img class="front-face" src="https://bico.media/f6faf03711584bcb350efa6149d5eacf43ef55f8ec3df9b14e4c66e35f0ba2e2.jpg" alt="Jimmy" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="jimmy">
<img class="front-face" src="https://bico.media/f6faf03711584bcb350efa6149d5eacf43ef55f8ec3df9b14e4c66e35f0ba2e2.jpg" alt="Jimmy" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>

<div class="memory-card" data-framework="frog">
<img class="front-face" src="https://bico.media/7e2412347a6cf2836e872391830ecc6d4c62e775969888811b0624fef0e9d5f4.jpg" alt="Frog" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
<div class="memory-card" data-framework="frog">
<img class="front-face" src="https://bico.media/7e2412347a6cf2836e872391830ecc6d4c62e775969888811b0624fef0e9d5f4.jpg" alt="Frog" />
<img class="back-face" src="https://bico.media/42111b335c1f29147ea060e7db1d504574c41f91f2a58cc2ebd0c344ae558511.jpg" alt="SV Badge" />
</div>
</section>









<script>
const cards = document.querySelectorAll('.memory-card');


let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;

this.classList.add('flip');

if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;

return;
}

secondCard = this;
checkForMatch();
}

function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

isMatch ? disableCards() : unflipCards();
}

function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);

resetBoard();
}

function unflipCards() {
lockBoard = true;

setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');

resetBoard();
}, 1500);
}

function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}

(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();

cards.forEach(card => card.addEventListener('click', flipCard));



</script>
</body>
</html>


About Privacy Terms Stats