{% extends 'base.html' %}

{% block content %}
    <style type="text/css">
        body {
            background-image: url('/media/bg.jpg'); background-size: cover; background-repeat: no-repeat;
        }
    </style>
    <div style="background-color: rgba(0, 0, 0, 0.6); color: #eeeeee; border-radius: 2px; margin-top: 10px;" class="container">
        <div style="padding: 20px;">
            <h2 style="text-align: justify;">Beyond Heroes</h2>
            <p style="text-align: justify;">
                The project that rose from the ashes of a game that was once. We aim to recreate the experience that we enjoyed throughout the years, while also adding new features that make it truly <i>Beyond</i> Heroes and Generals.<br>
            </p>
            <hr style="background-color: #999999;">
            <div class="container">
                <h3 style="text-align: justify;">Why Help Us</h3>
                <p style="text-align: justify;">
                    Similique earum unde unde exercitationem totam voluptatibus. Cupiditate reiciendis aut ducimus sunt. Sunt laboriosam rerum qui maxime quod aut aspernatur. Ipsa reprehenderit quas nihil vel dignissimos at. Repellendus minima dolorem ipsa sit est ipsum accusamus.<br>
                </p>
            </div>
            <div class="container">
                <h3 style="text-align: justify;">How to Help Us</h3>
                <p style="text-align: justify;">
                    Laborum nobis incidunt voluptate magnam voluptatibus. Itaque sequi eveniet vitae voluptas voluptatem ullam alias omnis. Officiis quia dolores architecto.Voluptate quia aspernatur excepturi voluptas molestias. Maxime magnam maiores sunt dolorum. Id possimus ullam rerum dignissimos.<br>
                </p>
                <button class="btn" style="padding: 5px 30px; font-family:'Trebuchet MS', sans-serif; font-size: 20px; font-weight: bold; background-color: #139358; color: white; border-radius: 2px;" onmouseover="this.style.backgroundColor='#0f7a4c'" onmouseout="this.style.backgroundColor='#139358'">
                Donate
                </button>
            </div>
        </div>
    </div>

{% endblock %}