index.html

---
layout: html
title: CrypTools - Learn
description: The best platform to learn cryptography
---

<article>
	<section class="what">
		<h1>Welcome on our platform to learn cryptography</h1>
		<p>
			Cryptography is the art of writing and solving problems in order to prevent third parties or the public from reading private messages. And as any art, it can be taught. This was our mission by creating this platform. You'll have some challenges to complete,
			the first ones are easy, but don't worry, it will get much harder after some point.
			<br><br>
			<span class="italic">- CrypTools</span>
			<br>
			<a href="#levels">
				Get Started
			</a>
		</p>
	</section>
	<section id="levels" class="levels">
		<h2>Levels:</h2>
		<h3>You don't know code?</h3>
		<div class="progress">
			<div class="bg"></div>
		</div>
		<div class="row noob">
			{% for i in site.data.noob %}
			<a href="./noob#{{i.name}}" target="_blank" id="{{i.name}}">
				<span class="done"></span>
				<h1>#{{ forloop.index }}</h1>
				<h3>{{i.fancy}}</h3>
			</a> {% endfor %}
		</div>
		<div class="expand">
			<div class="more" id="0">
				More <i class="material-icons">expand_more</i>
			</div>
		</div>
		<h3>Know JavaScript?</h3>
		<div class="progress">
			<div class="bg"></div>
		</div>
		<div class="row js">
			{% for i in site.data.challenges %}
			<a href="./levels#{{i.name}}" target="_blank" id="{{i.name}}">
				<span class="done"></span>
				<h1>#{{ forloop.index }}</h1>
				<h3>{{i.fancy}}</h3>
			</a> {% endfor %}
		</div>
		<div class="expand">
			<div class="more" id="1">
				More <i class="material-icons">expand_more</i>
			</div>
		</div>
		<div class="beoncomp">
			<i class="material-icons">computer</i>
			<p>
				This section is not optimized for mobile devices. Please try on a computer. Otherwise it will be glitchy !
			</p>
		</div>
	</section>
</article>