index.html

---
layout: landing
---

<!-- Banner -->
<section id="banner">
	<div class="inner">
		<h2>{{ site.title }}</h2>
		<p>{{ site.description | markdownify }}</p>
		<ul class="actions">
			<li><a href="/atom-coderoad.html#install" class="button special">Quick Start</a></li>
		</ul>
	</div>
	<a href="#one" class="more scrolly">Learn More</a>
</section>

<!-- One -->
{% for summary in site.categories.summary %}
<section id="one" class="wrapper style1 special">
	<div class="inner">
		<header class="major">
			<h2>{{summary.title}}</h2>
			{{summary.content}}
		</header>
		<ul class="icons major">
			{% for lang in summary.languages %}
				{% include language-icon.html language=lang.name icon=lang.icon %}
			{% endfor %}
		</ul>
	</div>
</section>
{% endfor %}

<!-- Two -->
<section id="two" class="wrapper alt style2">

	<!-- Features -->
	{% for feature in site.categories.features reversed %}
	<section class="spotlight wide">
		<div class="image">
			{% if feature.image.href %}
			<a id="{{feature.image.id}}" href="#{{feature.image.href}}" class="modal-link">
			{% endif %}
				<img
          class="lazy"
          alt="{{feature.image.alt}}" 
				  src="{{feature.image.src}}"
				  height="{{feature.image.height}}"
          width="{{feature.image.height}}"
        />
			{% if feature.image.href %}
			</a>
			{% endif %}
		</div>

		<div class="content">
			<h2>{{feature.title}}</h2>
			{{feature.content}}
			{% if feature.actions %}
			<ul class="actions">
				{% for action in feature.actions %}
				<li><a href="{{action.href}}" class="button special">{{action.title}}</a></li>
				{% endfor %}
			</ul>
			{% endif %}
		</div>
	</section>
	{% endfor %}

<!-- Three -->
<section id="three" class="wrapper style3 special">
	<div class="inner">
		<header class="major">
			<h2>Tutorials</h2>
			<p>Interactive lessons = learning faster. Look forward to more tutorials in the near future.</p>
		</header>

			{% include tutorial-list.html %}

	</div>
</section>

<!-- CTA -->
<section id="cta" class="wrapper style4">
	<div class="inner">
		<header>
			<h2>Accelerated Education</h2>
			<p>Find out more about how to setup CodeRoad and get started learning and creating.</p>
		</header>
		<ul class="actions vertical">
			<li><a href="/atom-coderoad.html#install" class="button fit special">Quick Start</a></li>
				<li><a href="/overview.html" class="button fit">Overview</a></li>
		</ul>
	</div>
</section>


<!-- modals -->
{% include modal.html id="atom-coderoad-demo" title="Atom-CodeRoad" image="atom-coderoad.gif" %}
{% include modal.html id="builder-coderoad-demo" title="Builder-CodeRoad" image="builder-demo.gif" %}