nick/murder-mystery-layout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling works

Browse Source
This commit is contained in:
Nick Goodall
2026-02-09 15:22:08 +00:00
commit 2d70a9074e
31 changed files with 566 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
index.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Murder Mystery Character Card Template</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="template-stack">
<section class="sheet cover-page" aria-label="Murder mystery invitation cover card">
<div class="cover-rule" aria-hidden="true"></div>
<h1 class="cover-title">
<span class="line-1">THE ADMIRAL'S</span>
<span class="line-2">RECKONING</span>
</h1>
<div class="cover-main">
<div class="cover-copy">
<p class="intro">Lady Juliana Talbot invites you to Talbot<br>House for an evening of merriment to<br>celebrate her birthday .</p>
<p class="character">Your character: <strong>CHARLOTTE</strong><br><strong>TALBOT.</strong> The flighty and romantic<br>youngest daughter of Lord and Lady<br>Talbot.</p>
<p class="warning">DO NOT OPEN AND READ THIS<br>CARD UNTIL YOU ARE READY TO<br>BEGIN THE GAME.</p>
</div>
<figure class="cover-portrait">
<img class="cover-portrait-art" src="assets/images/mansion-sketch.png" alt="Sketch of Talbot House">
<img class="cover-portrait-frame" src="assets/images/portrait-frame.png" alt="" aria-hidden="true">
</figure>
</div>
</section>
<section class="sheet character-page" aria-label="Character briefing sheet">
<img class="sheet-border" src="assets/images/sheet-border.png" alt="" aria-hidden="true">
<div class="character-content">
<header class="character-header">
<h2>CHARLOTTE TALBOT</h2>
<p>Younger daughter of Lord and Lady Talbot</p>
</header>
<div class="cards-grid">
<article class="ornate-card tall">
<h3>Key information</h3>
<p>You are the youngest daughter of Lord and Lady Talbot. You are beautiful, flighty, and romantic - some lesser souls call you selfish or spoiled.</p>
<p>You read sensational novels, write terrible poetry, and imagine yourself the heroine of a great romance.</p>
<p>Your father adores you, and would do anything for you.</p>
</article>
<article class="ornate-card tall">
<h3>Secret</h3>
<p>You are beginning to have romantic feelings for the handsome French naval officer, Henri Levesque. You caught him poking around your father's study this afternoon, and you had a frisson of sexual tension - you're sure he felt it too.</p>
<p>He left without taking anything; he seemed surprised and disappointed to have run into you there. It's a shame he's married... but does that really count, if he's French?</p>
</article>
<article class="ornate-card medium">
<h3>Goals</h3>
<ul>
<li>Make something dramatic happen. Maybe fall in love with someone?</li>
<li>Catch the murderer.</li>
</ul>
</article>
<article class="ornate-card medium">
<h3>Items</h3>
<ul>
<li>A diamond necklace, worth around &pound;200</li>
<li>Several amateurish oil paintings, by you, of the house and grounds</li>
</ul>
</article>
<article class="ornate-card short">
<h3>Clues</h3>
<p>You borrowed a paint set from Marie-Claire Levesque. She was running very low on green paint. And now, she's running low on everything! (You produced some masterpieces.)</p>
</article>
<article class="ornate-card short">
<h3>Did you kill Juliana Talbot?</h3>
<p>Of course not! She's your <em>mother</em>.</p>
</article>
</div>
<div class="footer-flourish" aria-hidden="true">&#10086;</div>
</div>
</section>
</main>
</body>
</html>