{% set page_title = 'Superpower for Gaming Websites' %}

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

{% block header %}
<div class="mpl-banner-content mpl-box-lg">
    <div class="container">
        <div class="row">
            <div class="col-lg-9" data-sr="banner" data-sr-interval="200" data-sr-duration="1200" data-sr-distance="20">
                <h1 class="display-1" data-sr-item="banner">MonsterPlay - Superpower for Gaming Websites</h1>
                <p class="lead" data-sr-item="banner">
                    MonsterPlay is an HTML template for Gaming websites with unlimited possibilities. You can build any type of pages with Bootstrap components, you will need just start with one of 4 pre-packed demos.
                </p>
                <div class="row hgap-sm vgap-sm justify-content-center justify-content-sm-start">
                    <div class="col-auto" data-sr-item="banner">
                        <a class="btn btn-md btn-brand" href="#demo">See Demos</a>
                    </div>
                    <div class="col-auto" data-sr-item="banner">
                        <a class="btn btn-md btn-default" href="https://1.envato.market/nk-portfolio" target="_blank">
                            <span class="name">Purchase</span>
                            {{ icon(["M1 1H5L7.68 14.39M7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6L7.68 14.39ZM10 21C10 21.5523 9.55228 22 9 22C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C9.55228 20 10 20.4477 10 21ZM21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21C19 20.4477 19.4477 20 20 20C20.5523 20 21 20.4477 21 21Z"]) }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="mpl-box-lg text-center" id="demo" data-sr="demos" data-sr-interval="200" data-sr-duration="1200" data-sr-distance="20">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                <h2 class="display-2" data-sr-item="demos">Pre-Packed <span class="text-brand">4</span> Demos</h2>
                <p class="lead mb-60" data-sr-item="demos">Kick-start your next project with no effort using one of pre-packed demos</p>
            </div>
        </div>
        <div class="row hgap-lg vgap-lg justify-content-center">
            {% macro demo_item(image="", title="", description="", href="") %}
            <div class="mpl-demo-item">
                <a class="mpl-demo-item-image" href="{{ href }}" target="_blank">
                    <img src="assets/images/{{ image }}" alt="">
                </a>
                <a class="mpl-demo-item-title h3" href="{{ href }}" target="_blank">{{ title }}</a>
                <span class="mpl-demo-item-description">{{ description | safe }}</span>
                <a class="mpl-demo-item-btn btn btn-brand" href="{{ href }}" target="_blank">See Demo</a>
            </div>
            {% endmacro %}
            <div class="col-12 col-md-6" data-sr-item="demos">
                {{ demo_item('demo/demo-main.jpg', 'Main', 'Suitable for fantasy sites.<br>The monsters here are especially beautiful', 'dark-index.html') }}
            </div>
            <div class="col-12 col-md-6" data-sr-item="demos">
                {{ demo_item('demo/demo-shooter.jpg', 'Shooter', 'As the title says, it is for shooter sites.<br>Always full ammo guarantee', 'shooter-index.html') }}
            </div>
            <div class="col-12 col-md-6" data-sr-item="demos">
                {{ demo_item('demo/demo-studio.jpg', 'Studio', 'Murderous portfolio for gaming studios.<br>An entry point for your clients', 'studio-index.html') }}
            </div>
            <div class="col-12 col-md-6" data-sr-item="demos">
                {{ demo_item('demo/demo-gamer.jpg', 'Gamer', 'Are you a streamer? This is awesome.<br>Let&apos;s play with MonsterPlay and personal website', 'gamer-index.html') }}
            </div>
        </div>
    </div>
</div>


<section class="mpl-box-lg bg-light text-center" data-sr="feature" data-sr-interval="140" data-sr-duration="1200" data-sr-distance="20">
    <div class="container">
        <h2 class="display-2 mb-60" data-sr-item="feature">Main Features</h2>
        <div class="row vgap justify-content-center">
            <div class="col-12 col-md-6 col-lg-4" data-sr-item="feature">
                {{ feature(
                    icon_fill(['M5.5 21V3H12.4811C15.5327 3 17.5981 4.7962 17.5981 7.49049C17.5981 9.36389 16.239 11.1079 14.5217 11.4195V11.5194C16.9435 11.8311 18.5 13.5529 18.5 15.9475C18.5 19.1158 16.2508 21 12.458 21H5.5ZM7.72393 10.7587H11.2822C13.9138 10.7587 15.3471 9.69827 15.3471 7.74993C15.3471 5.96622 14.1365 4.9807 11.9733 4.9807H7.72393V10.7587ZM12.1223 19.0165C14.8034 19.0165 16.212 17.9185 16.212 15.8374C16.212 13.7562 14.7539 12.694 11.9126 12.694H7.72393V19.0182L12.1223 19.0165Z']),
                    'Bootstrap 4', "The well-known framework is at the core of our template", 'h4'
                ) }}
            </div>
            <div class="col-12 col-md-6 col-lg-4" data-sr-item="feature">
                {{ feature(
                    icon(["M12 21.9979C11.6489 21.9979 11.304 21.9055 11 21.73L4 17.73C3.69626 17.5546 3.44398 17.3025 3.26846 16.9988C3.09294 16.6952 3.00036 16.3507 3 16V7.99999C3.00036 7.64927 3.09294 7.3048 3.26846 7.00116C3.27454 6.99064 3.28071 6.9802 3.28696 6.96981M12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16V7.99999C20.9996 7.64927 20.9071 7.3048 20.7315 7.00116C20.7255 6.99064 20.7193 6.98019 20.713 6.96981M12 21.9979V12.01M12 12.01L3.28696 6.96981M12 12.01L20.713 6.96981M3.28696 6.96981C3.28894 6.96653 3.29092 6.96326 3.29292 6.95999M3.28696 6.96981L3.29292 6.95999M20.713 6.96981C20.7111 6.96653 20.7091 6.96326 20.7071 6.95999M20.713 6.96981L20.7071 6.95999M3.29292 6.95999C3.46707 6.6747 3.7101 6.43737 4 6.26999L11 2.26999C11.304 2.09446 11.6489 2.00204 12 2.00204C12.3511 2.00204 12.696 2.09446 13 2.26999L20 6.26999C20.2899 6.43737 20.5329 6.6747 20.7071 6.95999"]),
                    '20+ Components', "A lot of components, which will help you quickly build pages", 'h4'
                ) }}
            </div>
            <div class="col-12 col-md-6 col-lg-4" data-sr-item="feature">
                {{ feature(
                    icon(['M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z']),
                    'Login Pages', "Pages with sign in and sign up forms are waiting for your backend code", 'h4'
                ) }}
            </div>
            <div class="col-12 col-md-6 col-lg-4" data-sr-item="feature">
                {{ feature(
                    icon(['M5 17H4C3.46957 17 2.96086 16.7893 2.58579 16.4142C2.21071 16.0391 2 15.5304 2 15V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H20C20.5304 3 21.0391 3.21071 21.4142 3.58579C21.7893 3.96086 22 4.46957 22 5V15C22 15.5304 21.7893 16.0391 21.4142 16.4142C21.0391 16.7893 20.5304 17 20 17H19M12 15L17 21H7L12 15Z']),
                    'eSports', "Tournaments, Matches, Teams. Everything you need for esports website", 'h4'
                ) }}
            </div>
            <div class="col-12 col-md-6 col-lg-4" data-sr-item="feature">
                {{ feature(
                    icon(['M1 1H5L7.68 14.39M7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6L7.68 14.39ZM10 21C10 21.5523 9.55228 22 9 22C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C9.55228 20 10 20.4477 10 21ZM21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21C19 20.4477 19.4477 20 20 20C20.5523 20 21 20.4477 21 21Z']),
                    'Shop', "Sale your merch or accessories with the MonsterPlay template", 'h4'
                ) }}
            </div>
            <div class="col-12 col-md-6 col-lg-4" data-sr-item="feature">
                {{ feature(
                    icon(['M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z']),
                    'Social Network', "Build your gaming social network, or forum for Clan members", 'h4'
                ) }}
            </div>
        </div>
    </div>
</section>


<div class="mpl-box-md" data-sr="blog" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
    <div class="container">
        <div class="row hgap-lg vgap-lg align-items-center">
            <div class="col-12 col-lg-5 order-lg-5">
                <h2 class="display-2" data-sr-item="blog">Blog Pages</h2>
                <p class="lead" data-sr-item="blog">Write blog posts or news, use the review system for games, image galleries with popups, etc...</p>
                <a href="blog-grid-sidebar-right.html" class="btn btn-md mt-20" data-sr-item="blog">View Blog</a>
            </div>
            <div class="col-12 col-lg-7">
                <div class="mpl-demo-blog" data-sr="blog-img" data-sr-delay="300" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
                    <div data-sr-item="blog-img">
                        {{ img('demo/blog-1.jpg', class="mpl-demo-img") }}
                    </div>
                    <div data-sr-item="blog-img">
                        {{ img('demo/blog-2.jpg', class="mpl-demo-img") }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="mpl-box-md bg-light" data-sr="shop" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
    <div class="container">
        <div class="row hgap-lg vgap-lg align-items-center">
            <div class="col-lg-5">
                <h2 class="display-2" data-sr-item="shop">E-Commerce</h2>
                <p class="lead" data-sr-item="shop">Sale your merch or accessories, display it in masonry list, add product photos, manage product reviews, etc...</p>
                <a href="shop-sidebar-right.html" class="btn btn-md mt-20" data-sr-item="shop">View Store</a>
            </div>
            <div class="col-lg-7">
                <div class="mpl-demo-shop" data-sr="shop-img" data-sr-delay="300" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
                    <div data-sr-item="shop-img">
                        {{ img('demo/shop-1.jpg', class="mpl-demo-img") }}
                    </div>
                    <div data-sr-item="shop-img">
                        {{ img('demo/shop-2.jpg', class="mpl-demo-img") }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="mpl-box-md" data-sr="esports" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
    <div class="container text-center">
        <h2 class="display-2" data-sr-item="esports">eSports</h2>
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8" data-sr-item="esports">
                <p class="lead">Tournaments, Matches, Teams and Players.<br>Everything you need for esports website</p>
            </div>
        </div>
        <a href="esports-teams.html" class="btn btn-md mt-20" data-sr-item="esports">View Teams</a>
    </div>
    <div class="mpl-demo-esports">
        <div class="container">
            <div data-sr data-sr-duration="1000" data-sr-delay="300" data-sr-origin="right" data-sr-distance="20">
                {{ img('demo/esports-1.jpg', class="mpl-demo-img") }}
            </div>
            <div data-sr data-sr-duration="1200">
                {{ img('demo/esports-2.jpg', class="mpl-demo-img") }}
            </div>
            <div data-sr data-sr-duration="1000" data-sr-delay="500" data-sr-origin="left" data-sr-distance="20">
                {{ img('demo/esports-3.jpg', class="mpl-demo-img") }}
            </div>
        </div>
    </div>
</div>


<div class="mpl-box-md bg-light" data-sr="forum" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
    <div class="container">
        <div class="row hgap-lg vgap-lg align-items-center">
            <div class="col-lg-5">
                <h2 class="display-2" data-sr-item="forum">Forum</h2>
                <p class="lead" data-sr-item="forum">The home with discussions and flame for your lovely community members</p>
                <a href="forums.html" class="btn btn-md mt-20" data-sr-item="forum">View Forum</a>
            </div>
            <div class="col-lg-7">
                <div class="mpl-demo-forum" data-sr="forum-img" data-sr-delay="300" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
                    <div data-sr-item="forum-img">
                        {{ img('demo/forum-1.jpg', class="mpl-demo-img") }}
                    </div>
                    <div data-sr-item="forum-img">
                        {{ img('demo/forum-2.jpg', class="mpl-demo-img") }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="mpl-banner big{{ ' mpl-banner-parallax' if content_parallax }}" data-sr="purchase" data-sr-interval="200" data-sr-duration="1000" data-sr-distance="20">
    <div class="mpl-image"{{ (' data-speed="' + content_parallax_speed + '"') | safe if content_parallax }}>
        <img class="jarallax-img" src="{{ bg_2 }}" alt="">
    </div>

    <div class="mpl-banner-content text-center container">
        <h2 class="display-2" data-sr-item="purchase">Start your Journey with MonsterPlay</h2>

        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <p class="lead" data-sr-item="purchase">
                    We are sure that you will enjoy using our template not only in the design part but also in technical terms
                </p>
                <a class="btn btn-md btn-brand" href="https://1.envato.market/nk-portfolio" target="_blank" data-sr-item="purchase">Purchase Now</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}