camill/memory-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Video 5

Browse Source
This commit is contained in:
Marina Ferreira 2018-07-16 21:09:19 -03:00
parent ec7b78ecb6
commit d4d2d3d8ad
3 changed files with 131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
video-5/index.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="memory-game">
<div class="memory-card">
<img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/vue.svg" alt="Vue" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/vue.svg" alt="Vue" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/angular.svg" alt="Angular" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/angular.svg" alt="Angular" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/ember.svg" alt="Ember" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/ember.svg" alt="Ember" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/backbone.svg" alt="Backbone" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/backbone.svg" alt="Backbone" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/react.svg" alt="React" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card">
<img class="front-face" src="../img/react.svg" alt="React" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
</section>
<script src="scripts.js"></script>
</body>
</html>

7
video-5/scripts.js Normal file
View File

@ -0,0 +1,7 @@
const cards = document.querySelectorAll('.memory-card');
function flipCard() {
this.classList.toggle('flip');
}
cards.forEach(card => card.addEventListener('click', flipCard));

55
video-5/styles.css Normal file
View File

@ -0,0 +1,55 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #060AB2;
}
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 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);
}
.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: 20px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}