世界杯官方网站使用指南

模板文件“世界杯”位于您下载的压缩包内。请先解压压缩包以找到模板及文档文件夹。

文件及文件夹结构如下所示：

1. assets/css — CSS文件文件夹。
2. assets/fonts — 字体文件文件夹。
3. assets/images — 图片文件文件夹。
4. assets/js — JavaScript文件文件夹。

使用FileZilla等FTP客户端将模板文件上传至服务器。

文件编辑与上传：

您可以通过代码编辑器（如VS Code）打开单个页面进行自定义。完成所有定制后，若要上线网站，您需要将更新后的项目文件通过FTP客户端（如FileZilla）上传至您域名的托管服务器。

以下是加载在Head区域的CSS文件列表：

<!--====== Font Awesome ======-->
<link rel="stylesheet" href="assets/css/fontawesome.5.9.0.min.css">
<!--====== Flaticon CSS ======-->
<link rel="stylesheet" href="assets/css/flaticon.css">
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.4.5.3.min.css">
<!--====== Magnific Popup ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick Slider ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate CSS ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Padding Margin ======-->
<link rel="stylesheet" href="assets/css/spacing.min.css">
<!--====== Menu css ======-->
<link rel="stylesheet" href="assets/css/menu.css">
<!--====== Main css ======-->
<link rel="stylesheet" href="assets/css/style.css">
<!--====== Responsive css ======-->
<link rel="stylesheet" href="assets/css/responsive.css">

以下是加载在HEAD或BODY区域结束前的JS文件列表：

<!--====== Jquery ======-->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap ======-->
<script src="assets/js/bootstrap.4.5.3.min.js"></script>
<!--====== Appear js ======-->
<script src="assets/js/appear.js"></script>
<!--====== WOW js ======-->
<script src="assets/js/wow.min.js"></script>
<!--====== Isotope ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Circle Progress ======-->
<script src="assets/js/circle-progress.min.js"></script>
<!--====== Image loaded ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Nice Select ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Magnific ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Slick Slider ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Main JS ======-->
<script src="assets/js/script.js"></script>

模板的整体结构在各个页面中保持一致，每个部分都包含一个带有特定ID的区域。通用结构如下：

<!--====== About Section Start ======-->
<section class="about-section rel z-1 pt-130 rpt-100 pb-45 rpb-15">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-7 col-lg-6">
                <div class="about-image rmb-55 wow fadeInLeft delay-0-2s">
                    <img src="assets/images/about/what-we-provide.webp" alt="About">
                </div>
            </div>
            <div class="col-xl-5 col-lg-6">
                <div class="about-content wow fadeInRight delay-0-2s">
                    <div class="section-title mb-25">
                        <span class="sub-title">What We Provides</span>
                        <h2>User Friendly Experience For Your Attendies</h2>
                    </div>
                    <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ainventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed <uia consequuntur magni dolores eos qui ratione voluptatem</p>
                    <ul class="list-style-one mt-30 mb-45">
                        <li>30-day free trial of our premium plan</li>
                        <li>100% Free - No payments required</li>
                        <li>Lifetime Upgradate</li>
                    </ul>
                    <a href="contact.html" class="theme-btn">Get Started <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== About Section End ======-->

字体代码位于 "style.css" 文件中，路径为：assets/css/style.css

// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;

文件路径: assets/css/style.css

// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;

文件路径: assets/js/script.js

// 08. Feedback Slider One
if ($('.feedback-wrap').length) {
    $('.feedback-wrap').slick({
        dots: true,
        infinite: false,
        autoplay: true,
        fade: true,
        autoplaySpeed: 5000,
        arrows: false,
        centerMode: false,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
    });
}  

更多信息请访问：Slick文档选项

请移除或注释掉以下代码文件路径：assets/js/script.js

// 15. WOW Animation
if ($('.wow').length) {
    var wow = new WOW({
        boxClass: 'wow', // animated element css class (default is wow)
        animateClass: 'animated', // animation css class (default is animated)
        offset: 0, // distance to the element when triggering the animation (default is 0)
        mobile: false, // trigger animations on mobile devices (default is true)
        live: true // act on asynchronously loaded content (default is true)
    });
    wow.init();
}

请移除或注释掉以下代码文件路径：assets/js/script.js

// 16. Preloader
function handlePreloader() {
    if ($('.preloader').length) {
        $('.preloader').delay(200).fadeOut(500);
    }
}
handlePreloader();

请移除或注释掉以上所有HTML文件中的相关代码

<!-- Preloader -->
<div class="preloader"></div>

请优化所有图片的KB/MB大小，并使用占位符文件路径指定的图片尺寸：assets/images/..

Tinypng

请压缩所有CSS文件，路径：assets/css/..

CSS压缩工具

请压缩所有JS文件，路径：assets/js/..

JavaScript压缩工具

请前往图片文件路径 'assets/images/...'，根据占位符图片的尺寸和名称替换您想要的图片。

我们将根据最新技术更新项目，但您需要自行更新模板中的内容。

注意：所有图片仅供预览，不包含在最终购买文件中。

图片来源： https://www.freepik.com/ https://pixabay.com/ https://unsplash.com/

字体： Inter Poppins

图标字体 Fontawesome Flaticon