Introduction

Download the MK Sports APP now to experience unparalleled sports information and event interaction, fully capturing the dynamics of the 2026 World Cup.

Rapid Integration

Download the MK Sports APP to access everything you need, driving user growth and connecting global football enthusiasts. Proceed to the download page.

CSS

Place this stylesheet link `<link>` within your `<head>` tag, preceding all other stylesheets, to ensure correct Bootstrap CSS loading.

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

JS

Many components rely on JavaScript for full functionality. Specifically, they require jQuery and our custom JavaScript plugins. Place the following `<script>` tags at the bottom of your page, just before the closing `</body>` tag, to activate them. Ensure jQuery loads first, followed by bootstrap.bundle.min.js, and finally our JavaScript plugins.

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

Core JavaScript

Base Template

Ensure your page adheres to the latest design and development standards. This includes using the HTML5 doctype and including a viewport meta tag for proper responsive behavior. Integrating all of these, your page should appear as follows:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>MK Sports APP: Your Exclusive 2026 World Cup Information Hub</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="MK Sports APP Official Download Center, focusing on the 2026 World Cup, providing professional sports information, real-time match status, HD live broadcasts, and highlight reels." />
        <meta name="keywords" content="MK Sports Official Website, MK Entertainment, MK Live Casino, MK Sports Platform, MK Sports APP, 2026 World Cup, Football News, Match Streaming" />

        <!-- 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="text-footer">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

Internationalization

Internationalization:

To enable Internationalization (RTL) mode, replace the reference to `style.css` with `style-rtl.css`.

Dark Mode

Dark Mode:

To enable Dark Mode, replace the reference to `style.css` with `style-dark.css`.

Dark International Mode:

To enable Dark Internationalization (RTL) mode, replace the reference to `style.css` with `style-dark-rtl.css`.

Right-Aligned Navigation

To shift the navigation menu from center to the right, simply add `nav-right` to the navigation class.

Menu Center to Left

To shift the navigation menu from center to the left, simply add `nav-left` to the navigation class.

Centered Light Navigation

If you desire a centered and light navigation menu, add `nav-light` to the navigation class.

Right-Aligned Light Navigation

For a right-aligned and light navigation menu, add both `nav-right` and `nav-light` to the navigation class.

Left-Aligned Light Navigation

For a left-aligned and light navigation menu, add both `nav-left` and `nav-light` to the navigation class.

Documentation