Introduction

Integrate JJB Esports and start your esports journey. We provide comprehensive match information and interactive features to help you stay on top of the game.

Quick Start

Experience JJB Esports now and get everything you need to fuel your esports passion. Visit the download page.

CSS

Add the following style link to your `<head>` tag, loading it before all other stylesheets to correctly apply the JJB Esports interface.

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

JS

Some interactive features require JavaScript. Include jQuery, bootstrap.bundle.min.js, and JJB's custom script before the closing `</body>` tag for full functionality.

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.bundle.min.js"></script>

Base Template

Ensure your page follows the latest design and development standards. Use the HTML5 doctype and viewport meta tag for optimal responsive layout.

HTML :

<!doctype html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title> Landrick - Saas & Software Landing Page Template </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="JJB Esports official documentation: integrate real-time scores, data analysis, and community features for DOTA2, LOL, CSGO." />
        <meta name="keywords" content="竞技宝APP, 竞技宝官网, 竞技宝DOTA2, 竞技宝LOL, 竞技宝CSGO" />

        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- Main css -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- Loader Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="--------">
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="nav-link" id="nav-home">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        Built around professional data and in-depth analysis, 竞技宝 keeps refining a better service.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

International Version

International Version :

To enable international (RTL) mode, replace `style.css` with `style-rtl.css`.

Dark Version

Dark Mode :

To enable dark mode, replace `style.css` with `style-dark.css`.

Dark International Version :

To enable dark international (RTL) mode, replace `style.css` with `style-dark-rtl.css`.

Nav Center to Right

To move the navigation menu from center to right, add the `navigation-menu` and `nav-right` classes to the nav element.

Nav Center to Left

To move the navigation menu from center to left, add the `navigation-menu` and `nav-left` classes to the nav element.

Light Nav Centered

For a light navigation with centered menu, add the `navigation-menu` and `nav-light` classes.

Light Nav Right

For a light navigation with right-aligned menu, add `navigation-menu`, `nav-right`, and `nav-light` classes.

Light Nav Left

For a light navigation with left-aligned menu, add `navigation-menu`, `nav-left`, and `nav-light` classes.

Documentation