Cards
unknown
html
4 months ago
4.7 kB
2
Indexable
<!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