From cfa86a148229108fccbe03319dc03acebf33d144 Mon Sep 17 00:00:00 2001
From: Linnnus <linnnus@users.noreply.github.com>
Date: Wed, 27 Mar 2024 13:57:10 +0100
Subject: Add info boxes to index

---
 static/base.jpeg | Bin 0 -> 92603 bytes
 static/crew.jpeg | Bin 0 -> 261527 bytes
 static/index.css |  38 ++++++++++++++++++++++++++++++++++++++
 views/index.html |  53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 91 insertions(+)
 create mode 100644 static/base.jpeg
 create mode 100644 static/crew.jpeg

diff --git a/static/base.jpeg b/static/base.jpeg
new file mode 100644
index 0000000..c51aca5
Binary files /dev/null and b/static/base.jpeg differ
diff --git a/static/crew.jpeg b/static/crew.jpeg
new file mode 100644
index 0000000..9f93e76
Binary files /dev/null and b/static/crew.jpeg differ
diff --git a/static/index.css b/static/index.css
index 0838304..504b859 100644
--- a/static/index.css
+++ b/static/index.css
@@ -64,3 +64,41 @@
 
 .achievements__item__text {
 }
+
+.boxes {
+	/* The columns should be aligned in the center.
+	 * N.B. margin matches padding of achievements. */
+	max-width: 600px;
+	margin: 2rem auto;
+}
+
+.boxes__column {
+	--gap: 1rem;
+	width: calc(50% - var(--gap) / 2);
+}
+
+.boxes__column--right {
+	float: right;
+}
+
+.boxes__column--left {
+	float: left;
+	margin-right: var(--gap);
+}
+
+.boxes__item {
+
+}
+
+.boxes__header {
+
+}
+
+.boxes__body-text {
+	line-height: 1.5;
+}
+
+.boxes__image {
+	max-width: 100%;
+	height: auto;
+}
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
index 245e346..84de07f 100644
--- a/views/index.html
+++ b/views/index.html
@@ -32,5 +32,58 @@
 	{# 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. #}
+
+	<div class="boxes">
+		<div class="boxes__column boxes__column--left">
+			<section class="boxes__item">
+				<h2 class="boxes__header">Raiding</h2>
+				<p class="boxes__body-text">
+					We love raiding.
+					In the clan we have a good culture of doing bi-weekly raids.
+					It's not just about the loot;
+					raids provide opportunities for bonding
+					and leveling up less skilled players.
+				</p>
+			</section>
+			<section class="boxes__item">
+				<h2 class="boxes__header">Community</h2>
+				<p class="boxes__body-text">
+					We are probably the #1 guild in the EU at socializing.
+					Being nice to other guildes and building inter-guild community is one of the core values of our guild.
+					Petty behavior and trolling only serves to antagonize other players
+					and worsens the experience for all players in the long run.
+					As such, we have a strict no-troll policy.
+				</p>
+			</section>
+			<section class="boxes__item">
+				<h2 class="boxes__header">Our base</h2>
+				<img class="boxes__image" src="/static/base.jpeg" width="1200" height="675" alt="A very dark and mysterious palace">
+			</section>			
+		</div>
+		<div class="boxes__column boxes__column--right">
+			<section class="boxes__item">
+				<h2 class="boxes__header">The crew</h2>
+				<img class="boxes__image" src="/static/crew.jpeg" width="1600" height="1200" alt="A crew of high-level WoW players">
+			</section>
+			<section class="boxes__item">
+				<h2 class="boxes__header">Coins</h2>
+				<p class="boxes__body-text">
+					We love coins and buying stuff.
+					All guild members contribute to the guild treasury according to their means
+					and members are compensated according to their needs.
+				</p>
+			</section>
+			<section class="boxes__item">
+				<h2 class="boxes__header">Slaying monsters</h2>
+				<p class="boxes__body-text">
+					We view it as the moral duty of any guild worth its salt to slay monsters.
+					Slaying monsters not only gives XP but,
+					much more importantly,
+					keeps the world safe for non-combat based players.
+					It is therefore totally in line with out universalist philosophy to slay as many monsters as we can.
+				</p>
+			</section>
+		</div>
+	</div>
 {% endblock %}
 
-- 
cgit v1.2.3