index.html

---
title: Home
layout: default
---

<main class="page-homepage">

	<section class="section-intro">
		<div class="page-wrapper">
			<div class="grid-flex">
				<div class="column w-40">
					<h2>Welcome</h2>
					<p>
						Welcome to this software craftsmanship challenge !!! <br />
						This site contains cards and instructions to organize and play craft challenges in your organizations.
					</p>
					<div class="btn bg-gradient-main-color" onclick="openARandomCard()">Choose a random card</div>
				</div>

				<div class="column o-20 w-40">
					<div class="has-background">
						<h2>Aim of this game</h2>
						<p>
							Share the practices and the mindset associated to software craftsmanship and agile.
							Take some time to <a href="{{ site.baseurl }}/software craftsman/">read this page</a> before to start.
						</p>
					</div>
				</div>
			</div>


		</div>
	</section>

	<section class="section-how-to-play">
		<div class="page-wrapper">
			<h2 class="text-center">How to play</h2>
			<p class="sub-title text-center">2 proposed game modes</p>

			<div class="grid-flex">
				<div class="column">
					<img src="{{ site.baseurl }}/assets/images/competitive-mode.png" class="shadow-img" />
				</div>
				<div class="column">
					<img src="{{ site.baseurl }}/assets/images/mob-mode.png"  class="shadow-img" />
				</div>
			</div>

			<div class="box-message bg-blue" role="alert">
				<h6>Please share, for each card you can:</h6>
				<ul>
					<li>- Tweet the completed challenges</li>
					<li>- Comment directly on the page</li>
				</ul>
			</div>
		</div>
	</section>

	<section class="section-categories">
		<div class="page-wrapper">
			<h2 class="text-center">4 categories</h2>
			<div class="grid-flex">
				<div class="column"><a href="{{ site.baseurl }}/challenges/" class="btn bg-gradient-black">Challenges</a></div>
				<div class="column"><a href="{{ site.baseurl }}/dev/" class="btn  bg-gradient-green">Dev</a></div>
				<div class="column"><a href="{{ site.baseurl }}/practices/" class="btn bg-gradient-blue">Practices</a></div>
				<div class="column"><a href="{{ site.baseurl }}/culture/" class="btn bg-gradient-yellow ">Culture</a></div>
			</div>
		</div>
	</section>

	<section class="section-print">
		<div class="page-wrapper">
			<h2 class="text-center">Print</h2>
			<div class="grid-flex">
				<div class="column text-center">
					<a href="{{ site.baseurl }}/files/craft-challenges-modes.pdf" target="_blank">
						<img src="{{ site.baseurl }}/assets/images/print-1.jpg" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);" />
						<p style='margin-top: 10px;color: #000000;font-weight: 700;'>Print the game modes</p>
					</a>
				</div>
				<div class="column text-center">
					<a href="{{ site.baseurl }}/files/craft-challenges-cards.pdf" target="_blank">
						<img src="{{ site.baseurl }}/assets/images/print-2.jpg" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);" />
						<p style='margin-top: 10px;color: #000000;font-weight: 700;'>Print the cards</p>
					</a>
				</div>
				<div class="column text-center">
					<a href="{{ site.baseurl }}/files/scoreboards.pdf" target="_blank">
						<img src="{{ site.baseurl }}/assets/images/print-3.jpg" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);" />
						<p style='margin-top: 10px;color: #000000;font-weight: 700;'>Print the score boards</p>
					</a>
				</div>
			</div>
		</div>
	</section>
</main>