Introduction

Welcome to leyu! Here, you can easily get the latest sports information and start your exciting journey of exploring events.

Quick Start

Ready to harness the power of leyu? It can help you attract attention, increase traffic, and build closer connections with sports enthusiasts. Visit our download page now.

CSS

Add this `<link>` tag to the `<head>` section of your HTML, before other stylesheets, to load leyu's professional CSS styles.

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

JS

For leyu's features to work correctly, you need to include JavaScript. Please place the following `<script>` tag before the `</body>` tag. Ensure jQuery is loaded first, followed by bootstrap.bundle.min.js, and finally leyu's JS plugins.

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

JavaScript Snippet

Getting Started Guide

Ensure your web pages follow the latest design standards, including using the HTML5 doctype and viewport meta tag, for the best responsive experience. Integrating these elements will give your page a fresh new look.

Basic Setup:

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

        <meta charset="utf-8" />
        <title>leyu Official Website - Documentation Center</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="leyu Official Website, your trusted sports information partner, covering football, basketball, esports, etc., providing real-time match updates and in-depth analysis." />
        <meta name="keywords" content="leyu APP, leyu All-site, leyu Live, leyu Official Website, leyu 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="#--------">
            --------
            --------
        </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>

RTL Mode

RTL Mode:

Want to experience right-to-left reading direction? Simply replace `style.css` with `style-rtl.css` to achieve it easily.

Dark Mode

Dark Mode:

To enable the cool dark mode, just replace `style.css` with `style-dark.css`.

Dark RTL Mode:

Want dark mode and RTL support? Replace `style.css` with `style-dark-rtl.css`.

Navigation Right Alignment

Want the navigation menu to display on the right? Simply add `nav-right` to the navigation class.

Navigation Left Alignment

Want the navigation menu to display on the left? Simply add `nav-left` to the navigation class.

Light Navigation Center

If you prefer a centered and clean-style navigation, simply add `nav-light` to the navigation class.

Light Navigation Right Alignment

Want a right-aligned light navigation? Add both `nav-right` and `nav-light` to the navigation class.

Light Navigation Left Alignment

If you need a left-aligned light navigation, simply add `nav-left` and `nav-light` to the navigation class.

Documentation