# Card Game
## Rules
## Code Snippets
`index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Game</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>My Card Game</h1>
<p>Click on the cards to see the backside. test</p>
<div class="deck">
<div class="card">
<img src="assets/image3.jpg" alt="Ace of Clubs">
</div>
<div class="card">
<img src="assets/image3.jpg" alt="Ace of Clubs">
</div>
<div class="card">
<img src="assets/image3.jpg" alt="Ace of Clubs">
</div>
<div class="card">
<img src="assets/image3.jpg" alt="Ace of Clubs">
</div>
<div id="homeless" class="card">
<img src="assets/image3.jpg" alt="Ace of Clubs">
</div>
<div class="card">
<img src="assets/image4.jpg" alt="Ace of Clubs">
</div>
</div>
<div id="controls">
<button id="draw">draw</button>
</div>
<script>
document.getElementById('draw').addEventListener('click', function(){
console.log(document.querySelector('#homeless'))
let activeCards = document.getElementsByClassName('active')
for (let i = 0; i < activeCards.length; i++) {
activeCards[i].classList.remove('active');
}
document.querySelector('#homeless').classList.add('active');
document.querySelector('#homeless').classList.toggle('slideanimate');
setTimeout(function(){
document.querySelector('#homeless').classList.remove('slideanimate');
}, 1000);
});
</script>
</body>
</html>
```
`css/styles.css`
```css
h1 {
color: green;
font-size: 20px;
}
.deck {
position: relative;
width: 300px;
height: 400px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
@keyframes example {
0% {left: 0px;transform: rotate(0deg);}
50% {left: 300px;transform: rotate(40deg); z-index: 1000;}
100% {left: 0px;transform: rotate(0deg); z-index: 1000;}
}
#controls {
padding: 10px;
}
.card {
position: absolute;
width: 300px;
height: 400px;
overflow: hidden;
border-radius: 10px;
border: 1px solid #ccc;
&.slideanimate {
animation-name: example;
animation-duration: 1s;
}
&.active {
z-index: 1000;
}
> img {
width: 300px;
height: 400px;
object-fit: cover;
}
}
```
#### Images found on Unsplash
https://unsplash.com/s/photos/illustrations
[Download Images Zip](https://eli-images.s3.us-east-2.amazonaws.com/Archive.zip)