diff --git a/tarotcard-deal.css b/tarotcard-deal.css
new file mode 100644
index 0000000..e5fb2f0
--- /dev/null
+++ b/tarotcard-deal.css
@@ -0,0 +1,3 @@
+body {
+    color: green;
+}
diff --git a/test/index.html b/test/index.html
index f8aaa5d..b4bb343 100644
--- a/test/index.html
+++ b/test/index.html
@@ -16,10 +16,12 @@
 		</style>
 
 		<link rel="stylesheet" href="styles/tarotcard.css"/>
+		<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
 	</head>
 	<body>
 		<div class="center-grid">
 
+			<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
 			<div id="simple-card" class="tarot-card">
 				<div class="tarot-card__section tarot-card__section--art">
 					<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image." title="The Simple Card artwork image.">
@@ -30,6 +32,18 @@
 				</div>
 			</div>
 
+			<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
+			<div id="deal-card" class="tarot-card">
+				<div class="tarot-card__section tarot-card__section--art">
+					<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image.">
+				</div>
+
+				<div class="tarot-card__section tarot-card__section--title">
+					<h1 class="tarot-card__title">The Deal Card.</h1>
+				</div>
+			</div>
+
+
 		</div>
 	</body>
 </html>
diff --git a/test/styles/tarotcard-deal.css b/test/styles/tarotcard-deal.css
new file mode 120000
index 0000000..64ef053
--- /dev/null
+++ b/test/styles/tarotcard-deal.css
@@ -0,0 +1 @@
+../../tarotcard-deal.css
\ No newline at end of file
