Introduction

Start your leyu journey to get all the professional sports information you need and don't miss any exciting events.

Quick Start

With leyu, easily grasp the latest sports dynamics, drive your passion, and build closer connections within the sports community.

CSS

Add this `<link>` tag to your `<head>` section to load leyu's CSS styles, ensuring it loads before all other stylesheets.

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

JS

To ensure leyu components function correctly, place jQuery and our JavaScript plugins before the closing `</body>` tag at the bottom of your page. Make sure to load them in this order: jQuery, then bootstrap.bundle.min.js, and finally our plugins.

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

Bootstrap Bundle JS

Getting Started Guide

Ensure your page follows the latest HTML5 standards and includes the viewport meta tag for optimal responsive experience. Integrating these elements will give your page a fresh look.

HTML Basics:

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

        <meta charset="utf-8" />
        <title>leyu Official Website - Help Center</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="leyu Official Website provides professional sports event information, covering football, basketball, esports, etc., to help you stay on top of sports news." />
        <meta name="keywords" content="leyu APP, leyu All-in-One, 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 a right-to-left reading experience? Simply replace `style.css` with `style-rtl.css`.

Dark Mode

Dark Mode:

Switch to dark mode for a more comfortable visual experience. Replace `style.css` with `style-dark.css`.

Dark RTL Version:

Combine dark mode and RTL layout by replacing `style.css` with `style-dark-rtl.css`.

Menu Center to Right

Make your navigation menu more dynamic! Add `nav-right` to the navigation class for a centered-to-right menu effect.

Menu Center to Left

Want a left-aligned menu? Add `nav-left` to the navigation class to easily achieve a centered-to-left menu.

Light Menu Center

Want a clean yet personalized navigation? Add `nav-light` to the navigation class for a centered, light-colored menu.

Light Menu Right Aligned

Combine `nav-right` and `nav-light` to create a right-aligned, refreshingly styled navigation menu.

Light Menu Left Aligned

Use `nav-left` and `nav-light` to achieve a left-aligned, light-colored navigation menu that is simple and elegant.

Documentation