{% extends "juice/templates/index.html" %}

{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="/site.css" />
{% endblock head %}

{% block hero %}

<section class="text-center">
    <h1 class="heading-text animate__animated animate__jackInTheBox" style="font-size: 50px">
        Mine your own grades
    </h1>
    <h3 class="title-text">
        <b>Gradecoin</b> is the latest cutting edge blockchain technology agile grading framework that drives organic engagement and other buzzwords, with big data mining search engine optimization
    </h3>
    <div>
    </div>
</section>
<img class="hero-image" style="width: 40%" src="{{ get_url(path="gradecoin.png") }}">

<div class="explore-more text"
     onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
    ⇩ Learn How ⇩
</div>

<style>

.hero section {
    padding: 0 5rem;
}

@media screen and (max-width: 768px) {
    .hero section {
        padding: 0 2rem;
    }

    .hero-image {
        display: none
    }

}
footer {
    color: #8b8b8b;
}
</style>
{% endblock hero %}

{% block content %}

<div class="tcontainer" id="features">
    <div class="ticker-wrap">
        <div class="ticker-move">
            <div class="ticker-item"><b>News:</b></div>
            <div class="ticker-item">Gradecoin is in testnet mode, API is not stable, everything might reset at any time.</div>
            <div class="ticker-item">Blocks now only need 1 transaction in them, happy testing! </div>
            <div class="ticker-item">It was possible (and hilarious) to mine a new block with just 1 transaction, it is now fixed</div>
        </div>
    </div>
</div>

{{ section.content | safe }}
{% endblock content %}

{% block footer %}
<footer>
Built For ⁂ CENG489 ⁂ Introduction to Computer Security
</footer>
{% endblock footer %}