Profile

Begin your journey with 华体会APP. Launch your sports insights experience and benefit from our professional website design and management capabilities.

Getting Started

Get started with 华体会APP, equipped with everything you need to boost brand visibility, drive traffic, and build connections. Head to the download page.

CSS

Link this stylesheet <link> within your <head> section, placed before all other stylesheets, to load the base CSS.

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

JS

Many of our components require JavaScript to function correctly. Specifically, they require jQuery and our own JavaScript plugins. Place the following <script> tags at the end of your page, just before the closing `</body>` tag, to enable them. jQuery must be loaded first, followed by bootstrap.bundle.min.js, and finally our JavaScript plugins.

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

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

Core Structure

Ensure your page setup adheres to the latest design and development standards. This means using the HTML5 doctype and including a viewport meta tag for proper responsive behavior. Integrating all of this, your page should look like this:

HTML:

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

        <meta charset="utf-8" />
        <title>Get the latest sports updates with 华体会APP.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="HTH SPORTS provides global sports insights, live scores, official news, data analysis, and team tracking with a seamless interface and multi-device support." />
        <meta name="keywords" content="华体会官网, 华体会APP, 华体会登录入口, 华体会客户端, HTH SPORTS" />

        <!-- 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="loader">
            --------
            --------
        </div>
        <!-- Loader End -->

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

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

        <!-- Footer Start -->
        <footer>
            <div class="container">
                --------
                --------
                --------
                --------
            </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>
        With real-time event updates, synchronized globally, 华体会APP brings a fast, seamless experience.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

Multi-language Support

Multi-language:

To enable multi-language support, 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 Multi-language Mode:

To enable dark mode with multi-language support, replace the reference to `style.css` with `style-dark-rtl.css`.

Centered Navigation

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

Left-aligned Navigation

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

Centered Light Navigation

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

Right-aligned Light Navigation

For a right-aligned navigation menu with a light theme, add both `nav-right` and `nav-light` classes alongside the `navigation-menu` class.

Left-aligned Light Navigation

For a left-aligned navigation menu with a light theme, add both `nav-left` and `nav-light` classes alongside the `navigation-menu` class.

Documentation