Add achievements banner to index

2 files changed, 47 insertions, 0 deletions

diff --git a/static/index.css b/static/index.css
index 06e60b1..0838304 100644
--- a/static/index.css
+++ b/static/index.css
@@ -36,3 +36,31 @@
 	font-size: large;
 	font-style: italic;
 }
+
+.achievements {
+	padding: 2rem 1rem;
+
+	/* Use a dark and twisted color to make this band stand out as a separate element. */
+	background-color: #6e1818;
+
+	/* Disperse achievements evenly horisontally */
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.achievements__item {
+	/* Stack the two children vertically */
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.achievements__item__number {
+	/* Numbers should be big and attention grabbing */
+	font-size: 2rem;
+	font-style: bold;
+}
+
+.achievements__item__text {
+}
diff --git a/views/index.html b/views/index.html
index 5c2c206..245e346 100644
--- a/views/index.html
+++ b/views/index.html
@@ -13,5 +13,24 @@
 		<h1 class="hero__title">Blind</h1>
 		<p class="hero__subtitle">An epic guild for epic gamers</p>
 	</div>
+
+	<div class="achievements">
+		<div class="achievements__item">
+			<span class="achievements__item__number">#1</span>
+			<span class="achievements__item__text">...at raiding</span>
+		</div>
+		<div class="achievements__item">
+			<span class="achievements__item__number">9,398,988</span>
+			<span class="achievements__item__text">...coins</span>
+		</div>
+		<div class="achievements__item">
+			<span class="achievements__item__number">1 morbillion</span>
+			<span class="achievements__item__text">...monsters slain</span>
+		</div>
+	</div>
+
+	{# TODO: Add a series of boxes, each either an image or some text
+	describing the guild. We will create two columns and have a kind of
+	asymmetric layout where the two columns don't line up row-wise. #}
 {% endblock %}