Home	Score	Away	League	Time (CST)
No matches right now — check back soon.

Introduction

Begin your journey with 开云 platform. Leverage our expert design and management capabilities to build a user-centric sports content experience.

Getting Started

Get started with 开云 platform to generate engagement, drive traffic, and connect with fans. Visit our download page for the app.

CSS

Include the stylesheet link tag in your <head> section, placed before other stylesheets, to load the 开云 Sports theme.

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

JS

Enable interactive features by placing these script tags before the closing `</body>` tag. Ensure jQuery loads first, followed by Bootstrap's bundle, and then our custom scripts.

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

Bootstrap Bundle JS

Core Template

Ensure your page adheres to modern standards with an HTML5 doctype and viewport meta tag for optimal responsive performance. Your basic structure should look like this:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>开云 Platform - Your Sports Event Hub</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="开云 Sports specializes in global sports news dissemination and content integration, covering major events like the World Cup, professional leagues, basketball, and esports." />
        <meta name="keywords" content="开云平台, 开云官网开云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="--------" id="#--------">
            --------
            --------
        </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 right-to-left language support, replace `style.css` with `style-rtl.css`.

Dark Mode

Dark Mode:

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

Dark International Mode:

For a dark mode with right-to-left language support, use `style-dark-rtl.css`.

Right-Aligned Navigation

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

Left-Aligned Navigation

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

Menu Light with Center

For a centered, light-themed navigation, apply the `navigation-menu` and `nav-light` classes.

Light Nav - Right Align

To achieve a right-aligned, light-themed navigation, use `navigation-menu nav-right` and `nav-light` classes.

Light Nav - Left Align

For a left-aligned, light-themed navigation, apply `navigation-menu nav-left` and `nav-light` classes.

⚽ Soccer Live (0)

Documentation