829 lines
78 KiB
HTML
829 lines
78 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Cache-control" content="max-age=31536000">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Welcome to spacingtech - Your Destination for Exceptional Web Design and Development Products</title>
|
|
<meta name="description" content="At spacingtech, we take pride in being a leading Web Design and Development Company with a passion for creating stunning online experiences. Our commitment to excellence is showcased through our premium HTML templates, exceptional UI/UX designs, and our proficiency in crafting seamless solutions on platforms like Shopify, WordPress, Prestashop, BigCommerce, and Opencart.">
|
|
<meta name="keywords" content="web agency, web design HTML Templates, UI/UX design, e-commerce platforms, innovation, customization, quality, customer approach, support, product, online store, mobile friendly, user friendly, responsive design, SEO, digital marketing, services, idea, stunning, realities, crafting digital experiences, redefining possibilities, one page template, dark mode, light mode">
|
|
<meta name="author" content="spacingtech_webify">
|
|
<!-- favicon -->
|
|
<link rel="icon" type="image/x-icon" href="assets/image/favicon.png">
|
|
<!-- plugin css -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/plugin.css">
|
|
<!-- theme css -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/theme.css">
|
|
<!-- style css -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- header start -->
|
|
<header id="header" class="position-fixed top-0 start-0 end-0 z-2 body-bg ptb-10 beb">
|
|
<div class="container-fluid">
|
|
<div class="row align-items-center header-area">
|
|
<div class="col-6 col-md-3 header-element header-logo">
|
|
<!-- header-logo start -->
|
|
<div class="header-theme-logo">
|
|
<a href="index.html" class="d-inline-block theme-logo">
|
|
<img src="assets/image/logo.png" class="width-120 width-xl-144 img-fluid" alt="logo">
|
|
</a>
|
|
</div>
|
|
<!-- header-logo end -->
|
|
</div>
|
|
<div class="col-6 col-md-9 d-flex align-items-center justify-content-end header-element header-menu-icon">
|
|
<div class="header-menu">
|
|
<nav class="navbar-expand-md">
|
|
<!-- mainmenu-content start -->
|
|
<div class="mainmenu-content collapse navbar-collapse p-absolute p-md-unset top-100 start-0 end-0 body-bg z-2 beb beb-md-none" id="navbar">
|
|
<div class="main-menu">
|
|
<ul class="main-ul d-md-flex flex-md-wrap align-items-md-center" id="main-menu">
|
|
<li class="menu-li bst bst-md-none">
|
|
<a href="https://themeforest.net/user/spacingtech_webify/portfolio" class="link-title d-block body-primary-color pst-10 peb-10 psl-15 per-15">Our themes</a>
|
|
</li>
|
|
<li class="menu-li bst bst-md-none">
|
|
<span class="link-title d-block pst-10 pst-xl-0 peb-10 peb-xl-0 psl-15 per-15">
|
|
<a href="https://themeforest.net/user/spacingtech_webify/portfolio" class="d-flex align-items-center btn-style secondary-btn" target="_blank">Buy now <i class="ri-arrow-right-line icon-16 msl-5"></i></a>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- mainmenu-content end -->
|
|
</nav>
|
|
</div>
|
|
<div class="header-icon">
|
|
<ul class="shop-element d-flex align-items-center">
|
|
<!-- side-toggler start -->
|
|
<li class="side-wrap side-toggler-wrap d-lg-none">
|
|
<button type="button" class="d-block side-toggler secondary-color icon-16 lh-1" aria-label="Side-toggler menu"><i class="ri-contract-left-line"></i></button>
|
|
</li>
|
|
<!-- side-toggler end -->
|
|
<!-- navbar-toggler start -->
|
|
<li class="side-wrap toggler-wrap d-md-none msl-15">
|
|
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-label="Toggler menu"><span class="line"></span></button>
|
|
</li>
|
|
<!-- navbar-toggler end -->
|
|
<!-- theme-switch start -->
|
|
<li class="side-wrap switch-wrap msl-15">
|
|
<label class="cust-switch-label d-block theme-switch position-relative">
|
|
<input type="checkbox" id="themeSwitch" name="themeSwitch" class="cust-switch position-absolute top-0 end-0 bottom-0 start-0 h-auto opacity-0" aria-label="Switch" checked>
|
|
<span class="cust-switch-slide position-absolute top-0 end-0 bottom-0 start-0 d-flex align-items-center primary-bg"></span>
|
|
</label>
|
|
</li>
|
|
<!-- theme-switch end -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- header end -->
|
|
<main id="main">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-3 col-xxl-2">
|
|
<aside class="col-lg-3 col-xxl-2 position-fixed psl-lg-15 psl-xl-30 z-2 overflow-auto">
|
|
<div class="side-menu-close position-sticky top-0 d-lg-none d-flex justify-content-end extra-bg beb">
|
|
<button type="button" class="side-menu-close-btn d-block secondary-color icon-16 ptb-15 plr-15 lh-1" aria-label="Close"><i class="ri-close-line"></i></button>
|
|
</div>
|
|
<nav class="extra-bg" id="side-navbar">
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-1" class="nav-link body-secondary-color ptb-15 plr-15 rounded-0"><i class="ri-file-paper-line icon-16 mer-5"></i>Introduction</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-1-1" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-flashlight-line icon-16 mer-5"></i>Features</a>
|
|
<a href="#item-1-2" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-file-text-line icon-16 mer-5"></i>Files</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-1-2-1" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-folder-line icon-16 mer-5"></i>Documentation</a>
|
|
<a href="#item-1-2-2" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-folder-line icon-16 mer-5"></i>Theme</a>
|
|
</nav>
|
|
</nav>
|
|
<a href="#item-2" class="nav-link body-secondary-color ptb-15 plr-15 rounded-0"><i class="ri-install-line icon-16 mer-5"></i>Installation</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-2-1" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-file-download-line icon-16 mer-5"></i>Download theme</a>
|
|
<a href="#item-2-2" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-file-download-line icon-16 mer-5"></i>Install theme</a>
|
|
</nav>
|
|
<a href="#item-3" class="nav-link body-secondary-color ptb-15 plr-15 rounded-0"><i class="ri-booklet-line icon-16 mer-5"></i>Template structure</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-3-1" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-html5-line icon-16 mer-5"></i>HTML5</a>
|
|
<a href="#item-3-2" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-css3-line icon-16 mer-5"></i>CSS</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-3-2-1" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-file-text-line icon-16 mer-5"></i>Theme.css</a>
|
|
<a href="#item-3-2-2" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-file-text-line icon-16 mer-5"></i>Style.css</a>
|
|
<a href="#item-3-2-3" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-file-text-line icon-16 mer-5"></i>Plugin.css</a>
|
|
</nav>
|
|
<a href="#item-3-3" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-font-sans icon-16 mer-5"></i>Font</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-3-3-1" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-bookmark-line icon-16 mer-5"></i>Link tag</a>
|
|
<a href="#item-3-3-2" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-bookmark-line icon-16 mer-5"></i>@import rule</a>
|
|
<a href="#item-3-3-3" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-bookmark-line icon-16 mer-5"></i>Apply font</a>
|
|
<a href="#item-3-3-4" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-bookmark-line icon-16 mer-5"></i>Font icon</a>
|
|
</nav>
|
|
<a href="#item-3-4" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-image-line icon-16 mer-5"></i>Image</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-3-4-1" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-file-image-line icon-16 mer-5"></i>Logo sample</a>
|
|
</nav>
|
|
<a href="#item-3-5" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-javascript-line icon-16 mer-5"></i>JavaScript</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-3-5-1" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-file-text-line icon-16 mer-5"></i>Theme.js</a>
|
|
<a href="#item-3-5-2" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-file-text-line icon-16 mer-5"></i>Plugin.js</a>
|
|
</nav>
|
|
</nav>
|
|
<a href="#item-4" class="nav-link body-secondary-color ptb-15 plr-15 rounded-0"><i class="ri-file-edit-line icon-16 mer-5"></i>Change contents</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-4-1" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-code-s-slash-line icon-16 mer-5"></i>Images</a>
|
|
<a href="#item-4-2" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-code-s-slash-line icon-16 mer-5"></i>Color</a>
|
|
<a href="#item-4-3" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-code-s-slash-line icon-16 mer-5"></i>Header</a>
|
|
<a href="#item-4-4" class="nav-link body-secondary-color ptb-15 psl-30 per-15 rounded-0"><i class="ri-code-s-slash-line icon-16 mer-5"></i>Slider</a>
|
|
<nav class="nav nav-pills flex-column">
|
|
<a href="#item-4-5-1" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-arrow-left-right-line icon-16 mer-5"></i>Swiper</a>
|
|
<a href="#item-4-5-2" class="nav-link body-secondary-color ptb-15 psl-45 per-15 rounded-0"><i class="ri-arrow-left-right-line icon-16 mer-5"></i>Slick slider</a>
|
|
</nav>
|
|
</nav>
|
|
<a href="#item-5" class="nav-link body-secondary-color ptb-15 plr-15 rounded-0"><i class="ri-open-source-line icon-16 mer-5"></i>Sources & credits</a>
|
|
<a href="#item-6" class="nav-link body-secondary-color ptb-15 plr-15 rounded-0"><i class="ri-customer-service-line icon-16 icon-16 mer-5"></i>Support</a>
|
|
</nav>
|
|
</nav>
|
|
</aside>
|
|
</div>
|
|
<div class="col-12 col-lg-9 col-xxl-10">
|
|
<div class="scrollspy-example-2" data-bs-spy="scroll" data-bs-target="#side-navbar" data-bs-smooth-scroll="true" tabindex="0">
|
|
<section class="ptb-30">
|
|
<div class="counter-area row-mtm d-flex flex-column">
|
|
<div class="counter-num" id="item-1">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-margin">
|
|
<!-- document start -->
|
|
<div class="doc-info peb-30 meb-30 beb">
|
|
<h6 class="font-18">Beluxe - Documentation</h6>
|
|
</div>
|
|
<!-- document end -->
|
|
<!-- introduction start -->
|
|
<h2 class="section-heading">Introduction</h2>
|
|
<div class="intro-content">
|
|
<h6 class="font-16">Beluxe - Beauty & Cosmetics eCommerce HTML5 Template</h6>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Thank you very much for choosing our theme. We truly appreciate and really happy that you'll enjoy our theme!</p>
|
|
<p>Beluxe is a <strong>Fully Responsive</strong> HTML5 Theme like modern design website, HTML5 template, responsive design, SEO which has build by bootstrap. It features a clean and responsive design, we blend creativity with functionality to design spaces that inspire.</p>
|
|
<p>It has a fully responsive width adjusts automatically to any screen size or resolution. Theme have with lot of option like <strong>Header, Footer, Slider, Banner, Product Grid-list, Timer option, Blog, Article, Root directory option (like body, heading, secton heading, paragraph etc...) Typography option, Preloader, Section padding option, Button option, Animation etc...</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- introduction end -->
|
|
</div>
|
|
<div class="counter-sub-num">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-sub-margin" id="item-1-1">
|
|
<!-- intro-feature start -->
|
|
<h2 class="section-sub-heading">Theme features</h2>
|
|
<div class="intro-feature-content">
|
|
<ul class="row row-mtm10 intro-feature-ul">
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">HTML5</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">CSS3</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Bootstrap 5</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Jquery</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Typography</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Color</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Icon</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Easy to customize</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Fully responsive</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">W3C validate</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Dropdown menu</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Clean code</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Clean design</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Grid</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">List</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Blog</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Slider</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Social share</span>
|
|
</li>
|
|
<li class="col-6 col-sm-4 col-lg-3 intro-feature-li">
|
|
<span class="d-block">Best rated</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- intro-feature end -->
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-1-2">
|
|
<!-- intro-files start -->
|
|
<h2 class="section-sub-heading">Files included</h2>
|
|
<div class="intro-files">
|
|
<ol class="intro-files-ul row-mtm10 d-flex flex-column meb-0 psl-17">
|
|
<li class="intro-files-li">
|
|
<span>Documentation</span>
|
|
</li>
|
|
<li class="intro-files-li">
|
|
<span>Template</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/files/files-include.jpg" class="img-fluid" alt="files-include">
|
|
</div>
|
|
<!-- intro-files end -->
|
|
<div class="counter-sup-num mst-30">
|
|
<div class="row row-mtm">
|
|
<div class="col-12" id="item-1-2-1">
|
|
<!-- intro-documentation start -->
|
|
<h2 class="section-sub-heading">Documentation</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Documentation folder include whole theme option from strat to end.</p>
|
|
<p>Open index file to show the documentation page, Open in browser to show perfect view of the documentation.</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/files/documentation.jpg" class="img-fluid" alt="documentation">
|
|
</div>
|
|
<!-- intro-documentation end -->
|
|
</div>
|
|
<div class="col-12" id="item-1-2-2">
|
|
<!-- intro-theme start -->
|
|
<h2 class="section-sub-heading">Template</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Template folder included file.</p>
|
|
<p>Template folder file contain to show file with same as you shown in template with image ratio.</p>
|
|
<p>Image ratio means you will may know about the exact image dimension of the HTML template, So you will add that image dimension in your demo file respectively and show your future theme how it look.</p>
|
|
</div>
|
|
<!-- intro-theme end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-num" id="item-2">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-margin">
|
|
<!-- installation start -->
|
|
<h2 class="section-heading">Installation</h2>
|
|
<div class="intro-content">
|
|
<h6 class="font-16">Package download from <strong>envatomarket</strong></h6>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Go to the <a href="https://themeforest.net/" class="secondary-color text-decoration-underline" target="_blank">envatomarket</a> website and log in to your account. This is the account you used to make the purchase.</p>
|
|
<p>After logging in, look for a <strong>Downloads</strong> tab to download your purchase theme from your <strong>envatomarket</strong> account. The specific wording and location may vary depending on the website's design.</p>
|
|
<p>In the <strong>Downloads</strong> tab, you should see the theme you purchased listed there. Click on <strong>Download</strong> button.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- installation end -->
|
|
</div>
|
|
<div class="counter-sub-num">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-sub-margin" id="item-2-1">
|
|
<!-- download-theme start -->
|
|
<h2 class="section-sub-heading">Download the theme</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>You will typically be provided with options to download the theme files. Download the files to your computer. The theme files might be in a compressed format like ZIP.</p>
|
|
<p>If the theme files are in a compressed format, unzip or extract them to a location on your computer.</p>
|
|
</div>
|
|
<!-- download-theme end -->
|
|
<div class="mst-15">
|
|
<img src="assets/image/account.jpg" class="img-fluid" alt="account">
|
|
</div>
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-2-2">
|
|
<!-- install-theme start -->
|
|
<h2 class="section-sub-heading">Install the theme</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Follow the documentation or instructions provided with the theme to develop an ecommerce big platform like <strong>wordpress, shopify, opencart, prestashop, bigcommerce</strong>.</p>
|
|
<p>After Devlope HTML theme in variours platform then installation, activate the theme as per the instructions. This might involve going to your website's admin panel or theme settings and selecting the newly installed theme.</p>
|
|
<p>Envaomarket website layout and theme delivery process may change over time, so it's important to follow the specific instructions provided on their website or in the <strong>documentation</strong> that comes with the theme you purchased.</p>
|
|
</div>
|
|
<!-- install-theme end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-num" id="item-3">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-margin">
|
|
<!-- template start -->
|
|
<h2 class="section-heading">Template structure</h2>
|
|
<div class="intro-content">
|
|
<h6 class="font-16">Theme folder template package structure</h6>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>There are many types of structure to build template.</p>
|
|
<p>We follow below type of structure for <strong>template</strong>.</p>
|
|
</div>
|
|
<div class="temp-files mst-15">
|
|
<ol class="temp-files-ul row-mtm10 d-flex flex-column meb-0 psl-17">
|
|
<li class="temp-files-li">
|
|
<span>Assets folder</span>
|
|
</li>
|
|
<li class="temp-files-li">
|
|
<span>HTML5 files</span>
|
|
</li>
|
|
</ol>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/structure.jpg" class="img-fluid" alt="structure">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>We follow below type of structure for <strong>assets folder</strong>.</p>
|
|
</div>
|
|
<div class="temp-files mst-15">
|
|
<ol class="temp-files-ul row-mtm10 d-flex flex-column meb-0 psl-17">
|
|
<li class="temp-files-li">
|
|
<span>CSS files</span>
|
|
</li>
|
|
<li class="temp-files-li">
|
|
<span>Font files</span>
|
|
</li>
|
|
<li class="temp-files-li">
|
|
<span>Image files</span>
|
|
</li>
|
|
<li class="temp-files-li">
|
|
<span>JavaScript files</span>
|
|
</li>
|
|
</ol>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/assets.jpg" class="img-fluid" alt="assets">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- template end -->
|
|
</div>
|
|
<div class="counter-sub-num">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-sub-margin" id="item-3-1">
|
|
<!-- HTML5 start -->
|
|
<h2 class="section-sub-heading">HTML5 structure</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>The main contents are inside the 'body' tag divided into different section & div (i.e. preloader, top-bar, header, main,... footer etc.).</p>
|
|
<p>The general template structure is the same throughout the template. Here is the general structure.</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/html.jpg" class="img-fluid" alt="html">
|
|
</div>
|
|
<!-- HTML5 end -->
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-3-2">
|
|
<!-- CSS start -->
|
|
<h2 class="section-sub-heading">CSS files structure</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>We are using various type of CSS files (i.e. account.css, blog.css, collection.css, other.css, product.css, style.css, theme.css,... etc.) and several vendor css files (i.e. plugin.css).</p>
|
|
<p>CSS file structure is as follows:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/css.jpg" class="img-fluid" alt="css">
|
|
</div>
|
|
<!-- CSS end -->
|
|
<div class="counter-sup-num mst-30">
|
|
<div class="row row-mtm">
|
|
<div class="col-12" id="item-3-2-1">
|
|
<!-- theme-css start -->
|
|
<div class="col-12">
|
|
<h2 class="section-sub-heading">Theme css</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Theme css file include all tag css (i.e. body, heading, anchor link, paragraph, header,... footer etc.).</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/theme_css.jpg" class="img-fluid" alt="theme_css">
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/theme_css2.jpg" class="img-fluid" alt="theme_css2">
|
|
</div>
|
|
</div>
|
|
<!-- theme-css end -->
|
|
</div>
|
|
<div class="col-12" id="item-3-2-2">
|
|
<!-- style-css start -->
|
|
<div class="col-12">
|
|
<h2 class="section-sub-heading">Style css</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Style css file include index layout css.</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/style_css.jpg" class="img-fluid" alt="style_css">
|
|
</div>
|
|
</div>
|
|
<!-- style-css end -->
|
|
</div>
|
|
<div class="col-12" id="item-3-2-3">
|
|
<!-- plugin-css start -->
|
|
<div class="col-12">
|
|
<h2 class="section-sub-heading">Plugin css</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Plugin css file include all several vendor css files (i.e. bootstrap, animate, remix-icon, owl-carousel, swiper,... custom etc.).</p>
|
|
<p>Custom css is our customize files (i.e. margin, padding, other,... etc.).</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/plugin_css.jpg" class="img-fluid" alt="plugin_css">
|
|
</div>
|
|
</div>
|
|
<!-- plugin-css end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-3-3">
|
|
<!-- Font start -->
|
|
<h2 class="section-sub-heading">Font files structure</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>To use <a href="https://www.google.com/fonts" class="secondary-color text-decoration-underline" target="_blank">Google Fonts Library</a> in an HTML5 template, you can follow these steps.</p>
|
|
<p>Google Fonts provides two ways to include fonts in your HTML template:</p>
|
|
</div>
|
|
<!-- Font end -->
|
|
<div class="counter-sup-num mst-30">
|
|
<div class="row row-mtm">
|
|
<!-- font-head start -->
|
|
<div class="col-12" id="item-3-3-1">
|
|
<h2 class="section-sub-heading">'Link' tag css (Recommended)</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Google Fonts will provide you with a "link" tag that you should include in the "head" section of your HTML document. It looks like this:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/font_head.jpg" class="img-fluid" alt="font_head">
|
|
</div>
|
|
</div>
|
|
<!-- font-head end -->
|
|
<!-- font-css start -->
|
|
<div class="col-12" id="item-3-3-2">
|
|
<h2 class="section-sub-heading">@import CSS Rule</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>If you prefer to include fonts using CSS, Google Fonts also provides a CSS @import rule. It looks like this:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/font_css.jpg" class="img-fluid" alt="font_css">
|
|
</div>
|
|
</div>
|
|
<!-- font-css end -->
|
|
<!-- font-css start -->
|
|
<div class="col-12" id="item-3-3-3">
|
|
<h2 class="section-sub-heading">Apply the font to your HTML elements</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Once you have linked to the google font in your HTML document, you can apply the font to specific HTML elements using CSS. For example, to apply the font to all paragraphs, you can do this in your CSS file</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/font_apply.jpg" class="img-fluid" alt="font_apply">
|
|
</div>
|
|
</div>
|
|
<!-- font-css end -->
|
|
<!-- font-icon start -->
|
|
<div class="col-12" id="item-3-3-4">
|
|
<h2 class="section-sub-heading">Font icon rule</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>If you want to add any other font icon need to attach that vendor file and download that font and store that font in font files with rendom folder (i.e. eot, ttf, woff, woff2,... etc.). It looks like this:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/font_folder.jpg" class="img-fluid" alt="font_folder">
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/font_folder_icon.jpg" class="img-fluid" alt="font_folder_icon">
|
|
</div>
|
|
</div>
|
|
<!-- font-icon end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-3-4">
|
|
<!-- Image start -->
|
|
<h2 class="section-sub-heading">Image files structure</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Image folder include whole theme image location.</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/image.jpg" class="img-fluid" alt="image">
|
|
</div>
|
|
<!-- Image end -->
|
|
<div class="counter-sup-num mst-30">
|
|
<div class="row row-mtm">
|
|
<!-- logo-sample start -->
|
|
<div class="col-12" id="item-3-4-1">
|
|
<h2 class="section-sub-heading">Logo sample</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Suppose you want to change the following image file. It looks like this:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/image_logo.jpg" class="img-fluid" alt="image_logo">
|
|
</div>
|
|
</div>
|
|
<!-- logo-sample end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-3-5">
|
|
<!-- JavaScript start -->
|
|
<h2 class="section-sub-heading">JavaScript files structure</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>We are using one custome js files (i.e. theme.js,... etc.) and several vendor css files (i.e. plugin.min.js).</p>
|
|
<p>JavaScript file structure is as follows:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/js.jpg" class="img-fluid" alt="js">
|
|
</div>
|
|
<!-- JavaScript end -->
|
|
<div class="counter-sup-num mst-30">
|
|
<div class="row row-mtm">
|
|
<div class="col-12" id="item-3-5-1">
|
|
<!-- theme-css start -->
|
|
<div class="col-12">
|
|
<h2 class="section-sub-heading">Theme js</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Theme js file include whole template js (i.e. loadpage, imgresize, switchclick, headersticky, navactive, contactform, backtotop, cursorpoint, animatetemplate,... custom etc.).</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/theme_js.jpg" class="img-fluid" alt="theme_js">
|
|
</div>
|
|
</div>
|
|
<!-- theme-css end -->
|
|
</div>
|
|
<div class="col-12" id="item-3-5-2">
|
|
<!-- plugin-css start -->
|
|
<div class="col-12">
|
|
<h2 class="section-sub-heading">Plugin js</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Plugin js file include all several vendor css files (i.e. popper, bootstrap, jquery, jquery-nav, waypoints, owl-carousel, swiper,... custom etc.).</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/template/plugin_js.jpg" class="img-fluid" alt="plugin_js">
|
|
</div>
|
|
</div>
|
|
<!-- plugin-css end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-num" id="item-4">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-margin">
|
|
<!-- template start -->
|
|
<h2 class="section-heading">Change contents</h2>
|
|
<div class="intro-content">
|
|
<h6 class="font-16">Change the content as per your requirements</h6>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Moslty these type of changes contents follow below like this.</p>
|
|
</div>
|
|
<div class="content-files mst-15">
|
|
<ol class="content-files-ul row-mtm10 d-flex flex-column meb-0 psl-17">
|
|
<li class="content-files-li">
|
|
<span>Logo & Favicon</span>
|
|
</li>
|
|
<li class="content-files-li">
|
|
<span>Color</span>
|
|
</li>
|
|
<li class="content-files-li">
|
|
<span>Header</span>
|
|
</li>
|
|
<li class="content-files-li">
|
|
<span>Slider</span>
|
|
</li>
|
|
<li class="content-files-li">
|
|
<span>Footer</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- template end -->
|
|
</div>
|
|
<div class="counter-sub-num">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-sub-margin" id="item-4-1">
|
|
<!-- changing-images start -->
|
|
<h2 class="section-sub-heading">Changing images (i.e. logo, favicon,... etc.)</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>To change any images of the website.</p>
|
|
<p>Carefully collect the source name of the image.</p>
|
|
<p>Open the file called image.</p>
|
|
<p>Find the particular image file.</p>
|
|
<p>Replace the file with your image.</p>
|
|
<p>Make sure that the file name does not change.The file name should be the same.</p>
|
|
<p>Suppose you want to change the following image file.</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/content/change_img_logo.jpg" class="img-fluid" alt="change_img_logo">
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/content/change_img_favicon.jpg" class="img-fluid" alt="change_img_favicon">
|
|
</div>
|
|
<!-- changing-images end -->
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-4-2">
|
|
<!-- changing-colors start -->
|
|
<h2 class="section-sub-heading">Changing default template colors</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>We have used root directory in <strong>theme.css</strong> for this project to write css.</p>
|
|
<p>If you are familiar with <strong>theme.css</strong> you should customize only the <strong>theme.css</strong> files.</p>
|
|
<p>Please make sure you compile the <strong>theme.css</strong> file after you have made changes in any of the <strong>theme.css</strong> files.</p>
|
|
<p>Open the <strong>theme.css</strong> file from <strong>assets > css > defaults</strong> folder with a text-editor.</p>
|
|
<p>Change the right-side values of the variables to change any default colors of your site.</p>
|
|
<p>Save your file.</p>
|
|
<p>Have a look at the following image for a visual description:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/content/change_color.jpg" class="img-fluid" alt="change_color">
|
|
</div>
|
|
<!-- changing-colors end -->
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-4-3">
|
|
<!-- header-sticky start -->
|
|
<h2 class="section-sub-heading">Changing sticky header</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>If you don't want sticky header then remove js from <strong>theme.js</strong> files.</p>
|
|
<p>Follow instructions in image below:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/content/change_sticky.jpg" class="img-fluid" alt="change_sticky">
|
|
</div>
|
|
<!-- header-sticky end -->
|
|
</div>
|
|
<div class="counter-sub-margin" id="item-4-4">
|
|
<!-- slider start -->
|
|
<h2 class="section-sub-heading">Changing slider</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>We are using two slider now (i.e. swiper, slick... etc.).</p>
|
|
<p>These both several vendor css & js files store in <strong>plugin.min.css</strong> & <strong>plugin.min.js</strong> respectively.</p>
|
|
<p>If you want to change any features then edit js from <strong>theme.js</strong> files.</p>
|
|
</div>
|
|
<!-- slider end -->
|
|
<div class="counter-sup-num mst-30">
|
|
<div class="row row-mtm">
|
|
<!-- swiper-slider start -->
|
|
<div class="col-12" id="item-4-5-2">
|
|
<h2 class="section-sub-heading">Swiper slider</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Swiper slider file structure is as follows:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/content/change_swiper.jpg" class="img-fluid" alt="change_swiper">
|
|
</div>
|
|
</div>
|
|
<!-- swiper-slider end -->
|
|
<!-- slick-slider start -->
|
|
<div class="col-12" id="item-4-5-1">
|
|
<h2 class="section-sub-heading">Slick slider</h2>
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Slickl slider file structure is as follows:</p>
|
|
</div>
|
|
<div class="mst-15">
|
|
<img src="assets/image/content/change_slick.jpg" class="img-fluid" alt="change_slick">
|
|
</div>
|
|
</div>
|
|
<!-- slick-slider end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-num" id="item-5">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-margin">
|
|
<!-- source start -->
|
|
<h2 class="section-heading">Sources & credits</h2>
|
|
<div class="intro-content">
|
|
<h6 class="font-16">Our source has given in below structure</h6>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>We've used the following source as listed.</p>
|
|
</div>
|
|
<div class="source-files mst-15">
|
|
<ol class="source-files-ul row-mtm10 d-flex flex-column meb-0 psl-17">
|
|
<li class="source-files-li">
|
|
<span>Google fonts</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Bootstrap</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>jQuery</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Magnific Popup</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Waypoints js</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Swiper slider</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Slick slider</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Smooth scroll</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Zoom</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Card</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Ckeditor5 classic</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Html2canvas</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Jspdf</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Animate</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Remix icon</span>
|
|
</li>
|
|
<li class="source-files-li">
|
|
<span>Other custom source css (i.e. color, margin, padding, other-property,... etc.)</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- source end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="counter-num" id="item-6">
|
|
<div class="row-mtm d-flex flex-column">
|
|
<div class="counter-margin">
|
|
<!-- source start -->
|
|
<h2 class="section-heading">Support</h2>
|
|
<div class="intro-content">
|
|
<h6 class="font-16">Our support always available for our client</h6>
|
|
<div class="mst-20">
|
|
<div class="row-mtm10 d-flex flex-column">
|
|
<p>Thank you for purchasing our template.</p>
|
|
<p>If you have any questions that are beyond the scope of this help file, please feel free to open a new ticket at <a href="mailto:spacingtech10@gmail.com" class="secondary-color text-decoration-underline" target="_blank">spacingtech10@gmail.com</a> respectively.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- source end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- footer start -->
|
|
<footer id="footer" class="position-sticky bottom-0 body-bg ptb-10 text-center bst">
|
|
<div class="container">
|
|
<p>Powered by <a href="https://themeforest.net/user/spacingtech_webify/portfolio" class="secondary-color text-decoration-underline">spacingtech</a><sup>TM</sup></p>
|
|
</div>
|
|
</footer>
|
|
<!-- footer end -->
|
|
<!-- back-to-top start -->
|
|
<a href="#" id="top" class="secondary-btn position-fixed d-flex align-items-center justify-content-center z-1 opacity-0 invisible rounded-circle lh-1" aria-label="Back to top"><i class="ri-arrow-up-line"></i></a>
|
|
<!-- back-to-top end -->
|
|
<!-- plugin js -->
|
|
<script src="assets/js/plugin.js" defer></script>
|
|
<!-- theme js -->
|
|
<script src="assets/js/theme.js" defer></script>
|
|
</body>
|
|
</html> |