Cards
unknown
html
4 days ago
4.7 kB
2
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Murder Mystery Game Cards</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .card { width: 300px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 10px; padding: 15px; position: relative; overflow: hidden; border: 2px solid #ddd; } .card-header { background-color: #d0e3c4; /* Sage green */ padding: 10px; color: #333; font-weight: bold; text-align: center; border-bottom: 2px solid #bbb; } .card-content { padding: 10px; } .card-content p { margin: 5px 0; } .card-footer { text-align: center; font-size: 0.9em; color: #666; margin-top: 10px; } .floral { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; background-image: url('floral-pattern.png'); /* Replace with your floral pattern image */ background-size: cover; opacity: 0.2; pointer-events: none; } </style> </head> <body> <div class="card"> <div class="card-header">Rune, The Lead Detective</div> <div class="card-content"> <p><strong>Background:</strong> Rune is a brilliant young detective renowned for her sharp mind and keen observation skills. She is the lead investigator in the case.</p> <p><strong>Motive:</strong> None—she’s neutral and focused on solving the crime.</p> <p><strong>Key Detail:</strong> Always carries a detective notebook where she jots down clues and observations.</p> </div> <div class="card-footer">Character Card</div> <div class="floral"></div> </div> <div class="card"> <div class="card-header">Lady Feiona, The Secretive Heiress</div> <div class="card-content"> <p><strong>Background:</strong> Lady Feiona is a reclusive heiress who recently returned from a long absence. She has a troubled past and is known for her secretive nature.</p> <p><strong>Motive:</strong> The victim threatened to expose her family secrets, which could ruin her and her family's reputation.</p> <p><strong>Key Detail:</strong> A broken locket with an old photograph was found at her estate, hinting at her hidden past.</p> </div> <div class="card-footer">Character Card</div> <div class="floral"></div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Murder Mystery Game Cards</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .card { width: 300px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 10px; padding: 15px; position: relative; overflow: hidden; border: 2px solid #ddd; } .card-header { background-color: #d0e3c4; /* Sage green */ padding: 10px; color: #333; font-weight: bold; text-align: center; border-bottom: 2px solid #bbb; } .card-content { padding: 10px; } .card-content p { margin: 5px 0; } .card-footer { text-align: center; font-size: 0.9em; color: #666; margin-top: 10px; } .floral { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; background-image: url('floral-pattern.png'); /* Replace with your floral pattern image */ background-size: cover; opacity: 0.2; pointer-events: none; } </style> </head> <body> <div class="card"> <div class="card-header">Rune, The Lead Detective</div> <div class="card-content"> <p><strong>Background:</strong> Rune is a brilliant young detective renowned for her sharp mind and keen observation skills. She is the lead investigator in the case.</p> <p><strong>Motive:</strong> None—she’s neutral and focused on solving the crime.</p> <p><strong>Key Detail:</strong> Always carries a detective notebook where she jots down clues and observations.</p> </div> <div class="card-footer">Character Card</div> <div class="floral"></div> </div> <div class="card"> <div class="card-header">Lady Feiona, The Secretive Heiress</div> <div class="card-content"> <p><strong>Background:</strong> Lady Feiona is a reclusive heiress who recently returned from a long absence. She has a troubled past and is known for her secretive nature.</p> <p><strong>Motive:</strong> The victim threatened to expose her family secrets, which could ruin her and her family's reputation.</p> <p><strong>Key Detail:</strong> A broken locket with an old photograph was found at her estate, hinting at her hidden past.</p> </div> <div class="card-footer">Character Card</div> <div class="floral"></div> </div> </body> </html>
Leave a Comment