{% extends "base.html" %}

{% block head %}
	{# Since the background image is declared in the CSS, we can improve
	loading times by instructing the browser to start loading the image
	*before* it has even parsed the CSS. #}
	<link rel="preload" as="image" href="/static/hero.jpeg">
	<link rel="stylesheet" href="/static/index.css">
{% endblock %}

{% block content %}
	<div class="hero">
		<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__number">#1</span>
			<span class="achievements__text">...at raiding</span>
		</div>
		<div class="achievements__item">
			<span class="achievements__number">9,398,988</span>
			<span class="achievements__text">...coins</span>
		</div>
		<div class="achievements__item">
			<span class="achievements__number">1 morbillion</span>
			<span class="achievements__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. #}

	<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 %}