世界杯(FIFA WorldCup)官方网站-全球热门赛事资讯平台

模板文件夹“Sland”包含在下载的zip文件中。解压zip文件即可找到模板及文档文件夹。

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

assets/css — 包含CSS文件的文件夹。
assets/fonts — 包含字体文件的文件夹。
assets/images — 包含图片文件的文件夹。
assets/js — 包含JavaScript文件的文件夹。

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

文件编辑与上传:

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

以下是加载在Head Section中的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 Section结束之前的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>

The Sland is a responsive template and is based on the Bootstrap Framework. For more information you can check the Bootstrap CSS.

整体模板结构在整个模板中是相同的，每个部分都包含在一个带有部分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

世界杯官方网站使用指南

快速入门

文件编辑与上传:

CSS文件结构

JavaScript文件结构

HTML文件结构

字体说明

主色调修改

轮播图(Slick)设置

如何隐藏滚动动画

如何编辑/关闭预加载器

性能优化

如何更换图片

如何为现有模板添加新更新

鸣谢