{% extends "base.html" %}

{% block main %}
<section>
    <h2>Guides</h2>
    <div>How to get started and then how to master Sketchingpy</div>

    <section class="gallery">
        <div class="item">
            <div class="image-holder">
                <img src="/img/document.png" alt="Picture of the example sketch from the homepage.">
            </div>
            <div class="description">
                <span class="guide-title">Basics:</span> Installing and running your first sketches across different platforms. 
            </div>
            <div class="action">
                <a href="/guides/start.html" class="button">Get Started</a>
            </div>
        </div>
        <div class="item">
            <div class="image-holder">
                <img src="/img/why.png" alt="Pixel art of two men and a dog looking at a bird in a tree with Sutro Tower visible in the background.">
            </div>
            <div class="description">
                <span class="guide-title">Purpose:</span> What Sketchingpy offers and why we hope you will join us as a user or contributor.
            </div>
            <div class="action">
                <a href="/guides/why.html" class="button">Learn Why</a>
            </div>
        </div>
        <div class="item">
            <div class="image-holder">
                <img src="/img/deploy.png" alt="Picture of a plane with vases in the back.">
            </div>
            <div class="description">
                <span class="guide-title">Deploying:</span> How to package your work and give your sketches to others.
            </div>
            <div class="action">
                <a href="/guides/deploy.html" class="button">Share your Work</a>
            </div>
        </div>
        <div class="item">
            <div class="image-holder">
                <img src="/img/web_detailed.png" alt="Screenshot of a local web server">
            </div>
            <div class="description">
                <span class="guide-title">Web details:</span> Additional options for web deployments including self-host.
            </div>
            <div class="action">
                <a href="/guides/web_detailed.html" class="button">Customize Web</a>
            </div>
        </div>
    </section>
</section>
{% endblock %}