<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Money Story Cards</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f9fafb;
color: #1f2937;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
}
h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
text-align: center;
}
p.subtitle {
color: #6b7280;
margin-bottom: 2rem;
text-align: center;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
max-width: 900px;
width: 100%;
}
a.card {
display: block;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
}
a.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
a.card h2 {
font-size: 1.15rem;
margin-bottom: 0.35rem;
}
a.card span {
font-size: 0.875rem;
color: #6b7280;
}
</style>
</head>
<body>
<h1>🃏 Money Story Cards</h1>
<p class="subtitle">Choose a deck to explore</p>
<div class="cards">
<a class="card" href="Money%20Story%20Cards%20Complete%20Collection.html">
<h2>Complete Collection</h2>
<span>The full set of all money story cards</span>
</a>
<a class="card" href="Money%20Story%20Cards%20Core%20Deck.html">
<h2>Core Deck</h2>
<span>The essential money story cards</span>
</a>
<a class="card" href="Money%20Story%20Cards%20Expansion%20Bundle.html">
<h2>Expansion Bundle</h2>
<span>Additional cards beyond the core deck</span>
</a>
<a class="card" href="Money%20Story%20Cards%20for%20Business%20Owners.html">
<h2>For Business Owners</h2>
<span>Cards tailored for business owners</span>
</a>
<a class="card" href="Money%20Story%20Cards%20for%20Business%20Partners.html">
<h2>For Business Partners</h2>
<span>Cards for business partner conversations</span>
</a>
<a class="card" href="Money%20Story%20Cards%20for%20Parents%20and%20Children.html">
<h2>For Parents & Children</h2>
<span>Cards for family money conversations</span>
</a>
<a class="card" href="Money%20Story%20Cards%20for%20Romantic%20and%20Life%20Partners.html">
<h2>For Romantic & Life Partners</h2>
<span>Cards for couples and life partners</span>
</a>
</div>
</body>
</html>