{% set page_title = 'Gaming HTML Template' %}
{% set header_title = 'Youplay - Gaming Template' %}
{% set header_size = '' %}
{% set header_text_col = 'col-md-8' %}
{% set header_text = '
    <p class="lead">
        You are not limited to the features of this template. It is suitable for gaming site, and for any business project. Pre-packed demos will help you to quickly run your new creative website.
    </p>
    <br>
    <a class="btn btn-md active" href="#demo"><i class="fa fa-eye"></i>&nbsp; Demo</a><a class="btn btn-md" href="https://themeforest.net/item/youplay-game-template-based-on-bootstrap/11306207?ref=_nK"><i class="fa fa-shopping-cart"></i>&nbsp; Purchase</a>
' %}

{% extends 'layouts/layout-1.html' %}

{% block content %}
    <!-- Features -->
    <section class="youplay-features container mt-60 mb-30">
        <div class="col-sm-4">
            <div class="feature angled-bg">
                <i class="fa fa-rss"></i>
                <h3>Blog</h3>
                <div>
                    Youplay can be used for simple blogging, not only full-stack gaming template.
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="feature angled-bg">
                <i class="fa fa-shopping-cart"></i>
                <h3>Store</h3>
                <div>
                    If you want to sale goods, let's do it. This is so easy with Youplay.
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="feature angled-bg">
                <i class="fa fa-users"></i>
                <h3>Social Network</h3>
                <div>
                    Build your gaming social network, or forum for Clan members.
                </div>
            </div>
        </div>
    </section>
    <!-- /Features -->

    <!-- Demo -->
    <h2 class="text-center mt-60 fs-40" id="demo">Youplay Comes with 4 Demo</h2>
    <div class="container mt-60 mb-120">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="row vertical-gutter">
                    <div class="col-sm-6">
                        <a href="dark-index.html" target="_blank"><img src="assets/images/demo-dark.jpg" alt=""></a>
                        <h4 class="text-center mt-20">Dark <small>demo</small></h4>
                    </div>
                    <div class="col-sm-6">
                        <a href="shooter-index.html" target="_blank"><img src="assets/images/demo-shooter.jpg" alt=""></a>
                        <h4 class="text-center mt-20">Shooter <small>demo</small></h4>
                    </div>
                    <div class="col-sm-6">
                        <a href="anime-index.html" target="_blank"><img src="assets/images/demo-anime.jpg" alt=""></a>
                        <h4 class="text-center mt-20">Anime <small>demo</small></h4>
                    </div>
                    <div class="col-sm-6">
                        <a href="light-index.html" target="_blank"><img src="assets/images/demo-light.jpg" alt=""></a>
                        <h4 class="text-center mt-20">Light <small>demo</small></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Demo -->


    <!-- Realistic Battles -->
    <section class="youplay-banner youplay-banner-parallax big">
        <div class="image" data-speed="0.4">
            <img class="jarallax-img" src="assets/images/dark/game-dark-souls-ii-1920x1080.jpg" alt="">
        </div>

        <div class="info">
            <div>
                <div class="container">
                    <h2 class="fs-40 mt-45">A Bit More Features</h2>
                    <br>
                    <div class="youplay-features">
                        <div class="col-sm-4">
                            <div class="feature angled-bg">
                                <i class="fa fa-exclamation-triangle"></i>
                                <h3>Clan Wars</h3>
                                <div>
                                    Manage battles in the games. Add teams and fights.
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="feature angled-bg">
                                <i class="fa fa-clock"></i>
                                <h3>Coming Soon</h3>
                                <div>
                                    Use coming soon page with countdown before release feature or service.
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="feature angled-bg">
                                <i class="fa fa-paper-plane"></i>
                                <h3>AJAX Contact Form</h3>
                                <div>
                                    Everyone can contact you through user friendly ajax form.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /Realistic Battles -->


    <!-- The True Emotions -->
    <section class="container mt-120">
        <div class="row">
            <div class="col-xs-12">
                <h2 class="fs-40 mt-0">Have Any Questions?</h2>
                <p class="lead">Youplay comes with documentation. See it here - <a href="https://nkdev.info/docs/youplay-html/" target="_blank">https://nkdev.info/docs/youplay-html/</a></p>
                <p class="lead">Also we provide support for our users through ticket system - <a href="https://nk.ticksy.com/" target="_blank">https://nk.ticksy.com/</a></p>
            </div>
        </div>
    </section>
    <!-- /The True Emotions -->


    <!-- Preorder -->
    <section class="youplay-banner youplay-banner-parallax big mt-120">
        <div class="image" data-speed="0.4">
            <img class="jarallax-img" src="assets/images/dark/game-bloodborne-1920x1151.jpg" alt="">
        </div>

        <div class="info container align-center">
            <div>
                <h2>Purchase Today for $23</h2>
                <em class="date">If you interested in WordPress version, see it here - <a href="https://themeforest.net/item/youplay-gaming-wordpress-theme/11959042?ref=_nK">https://themeforest.net/item/youplay-gaming-wordpress-theme/11959042</a></em>

                <br><br><br><br>
                <a class="btn btn-lg" href="https://themeforest.net/item/youplay-game-template-based-on-bootstrap/11306207?ref=_nK">Purchase</a>
            </div>
        </div>
    </section>
    <!-- /Preorder -->
{% endblock %}