# 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)