Introduction

Begin your journey with the KAIYUN platform. Access comprehensive sports news and data services, designed to enhance your understanding of global sports.

Getting Started

Start leveraging the KAIYUN platform today to build brand awareness, drive engagement, and connect with sports enthusiasts worldwide. Visit our download page.

CSS

Link this stylesheet within your `<head>` section, preceding all other stylesheets, to integrate KAIYUN platform's CSS.

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

JS

Many of our components require JavaScript functionality. This includes jQuery and our custom JavaScript plugins. Place the following `<script>` tags just before the closing `</body>` tag to activate them. Ensure jQuery is loaded first, followed by bootstrap.bundle.min.js, and then our plugins.

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

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

Core Template

Ensure your page is structured according to modern web standards. This involves using the HTML5 doctype and including the viewport meta tag for optimal responsive behavior. Integrating these elements will set up your page correctly.

HTML Structure:

<!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="KAIYUN (China) Official Website provides convenient PC access to hot sports news like football and basketball, live scores, schedules, and team updates. Get comprehensive sports info with real-time news, data analysis, and special features." />
        <meta name="keywords" content="kaiyun Sports, kaiyun Platform, kaiyun Official Website, kaiyun Download, kaiyun APP" />

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

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        Discover more about 开云体育 with kaiyun.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

RTL Version

RTL Version:

To activate Right-to-Left (RTL) display, 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 RTL Version:

To activate Dark Mode with RTL support, replace the reference to `style.css` with `style-dark-rtl.css`.

Center-Right Navigation

To position the navigation menu to the right, add the class `nav-right` to your navigation element.

Center-Left Navigation

To position the navigation menu to the left, add the class `nav-left` to your navigation element.

Centered Light Navigation

For a centered navigation menu with a light theme, add the class `nav-light` to your navigation element.

Right-Aligned Light Navigation

For a right-aligned navigation menu with a light theme, add both `nav-right` and `nav-light` classes to your navigation element.

Left-Aligned Light Navigation

For a left-aligned navigation menu with a light theme, add both `nav-left` and `nav-light` classes to your navigation element.

Documentation