Introduction

Begin your journey with the Kaiyun platform. Access professional sports news and data services to enhance your understanding of global sports.

Getting Started

Start using the Kaiyun platform today to build brand awareness, drive traffic, and connect with sports enthusiasts worldwide. Visit our download page.

CSS

Link this stylesheet in your `<head>` section, before all other stylesheets, to load Kaiyun's core CSS. This ensures consistent styling across the platform.

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

JS

Many components require JavaScript for full functionality. Ensure jQuery and our custom JavaScript plugins are included. Place these `<script>` tags just before the closing `</body>` tag. Load jQuery 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>

Basic Template Setup

Ensure your page is set up with the latest standards. This includes the HTML5 doctype and the viewport meta tag for responsive design. A properly configured page will look like this:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>kaiyun (China) Official Website - KAIYUN PC Access</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Kaiyun (China) Official Website provides PC access to sports news, live scores, schedules, and team updates for football, basketball, and more. Explore comprehensive sports information." />
        <meta name="keywords" content="kaiyun Sports, kaiyun Platform, kaiyun Official Website, kaiyun Download, kaiyun APP" />

        <!-- Website 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>

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

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

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

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

        <!-- Back to Top Start -->
        <a href="#" class="--------" id="#--------">
            --------
            --------
        </a>
        <!-- Back to Top End -->

        <!-- JavaScript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        Discover more about kaiyun Sports with kaiyun.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript End -->
    </body>
</html>

RTL Version

RTL Version:

To enable Right-to-Left (RTL) display, replace the `style.css` reference with `style-rtl.css` in your stylesheet links.

Dark Mode

Dark Mode:

For a dark theme, swap your `style.css` link for `style-dark.css` in the header.

Dark RTL Version:

To activate both dark mode and RTL support, use `style-dark-rtl.css` in place of `style.css`.

Navigation Right-Aligned

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

Navigation Left-Aligned

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

Light Navigation Centered

For a centered, light-themed navigation, apply the `nav-light` class to your navigation element.

Light Navigation Right-Aligned

To achieve a right-aligned, light-themed navigation, combine `nav-right` and `nav-light` classes on your navigation element.

Light Navigation Left-Aligned

For a left-aligned, light-themed navigation, use both `nav-left` and `nav-light` classes on your navigation element.

Documentation