{% extends "base.html" %} {% block content %}
<div class="hero-body">
    <div class="container">
        <div class="columns">
            <div class="column is-12">
                <h1 class="title is-1">Doccano</h1>
                <h2 class="subtitle is-4">
                    A document annotation tool by active learning.
                </h2>
                <p>
                    <a class="button is-medium is-info is-outlined">
                        Try Demo
                    </a>
                </p>
            </div>
        </div>

        <div class="columns is-vcentered">
            <div class="column is-5">
                <figure class="image is-4by3">
                    <img src="https://picsum.photos/800/600/?random" alt="Description">
                </figure>
            </div>
            <div class="column is-6 is-offset-1">
                <h1 class="title is-2">
                    Document Classification
                </h1>
                <h2 class="subtitle is-4">
                    Document annotation for any document classification tasks.
                </h2>
                <br>
                <p>
                    <a class="button is-medium is-info is-outlined">
                        Try Demo
                    </a>
                </p>
            </div>
        </div>

        <div class="columns is-vcentered">

            <div class="column is-6">
                <h1 class="title is-2">
                    Sequence Labeling
                </h1>
                <h2 class="subtitle is-4">
                    A super easy interface to tag for named entity recognition, part-of-speech tagging, semantic role labeling.
                </h2>
                <br>
                <p>
                    <a class="button is-medium is-info is-outlined">
                        Try Demo
                    </a>
                </p>
            </div>

            <div class="column is-5 is-offset-1">
                <figure class="image is-4by3">
                    <img src="https://picsum.photos/800/600/?random" alt="Description">
                </figure>
            </div>
        </div>

        <div class="columns is-vcentered">
            <div class="column is-5">
                <figure class="image is-4by3">
                    <img src="https://picsum.photos/800/600/?random" alt="Description">
                </figure>
            </div>
            <div class="column is-6 is-offset-1">
                <h1 class="title is-2">
                    Sequence to Sequence
                </h1>
                <h2 class="subtitle is-4">
                    A super easy interface to label for any sequence to sequence tasks.
                </h2>
                <br>
                <p>
                    <a class="button is-medium is-info is-outlined">
                        Try Demo
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="columns">
            <div class="column is-8">
                <h2>
                    <strong>About</strong>
                </h2>
                <ul>
                    <li>
                        <a href="#">Get doccano</a>
                    </li>
                    <li>
                        <a href="#">Documentation</a>
                    </li>
                    <li>
                        <a href="#">Live Demo</a>
                    </li>
                    <li>
                        <a href="#">Support</a>
                    </li>
                    <li>
                        <a href="#">Frequently Asked Questions</a>
                    </li>
                    <li>
                        <a href="#">Terms & Conditions</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
{% endblock %}