Dfood - Organic Food HTML Template

Thank you so much for purchasing our item from themeforest.

  • Version: 1.0.0

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded dfood package and open the /dfood folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • dfood/assets - Contains all of the assets referenced
      • assets/css - Stylesheet files
      • assets/img - Images files
      • assets/js - Javacript files
      • assets/sass - Sass files
      • assets/vendors - All external libs.
      • assets/webfonts - Website Fonts.
    • dfood/index.html - Home Page 1
    • dfood/index2.html - Home Page 2
    • dfood/index3.html - Home Page 3
    • dfood/about.html - About Us Page
    • dfood/shop.html - Shop/Products Page
    • dfood/shop-single.html - Shop Single Page
    • dfood/cart.html - Shop Cart Page
    • dfood/checkout.html - Shop Checkout Page
    • dfood/blog.html - Blog Grid Page
    • dfood/blog-list.html - Blog List Page
    • dfood/blog-single.html - Blog Single Page
    • dfood/contact.html - Contact Us Page
  3. You should upload all or specific HTML files as per your need.
  4. You are good to go for adding your content now!

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - dfood/assets/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your style.scss File.

Google Fonts



            <!-- Google Fonts -->

            @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Work+Sans:wght@400;500;600;700&display=swap');

Source File (CSS)



            <!-- All css here -->

            <link rel="stylesheet" href="assets/vendors/animations/animate.min.css">

            <link rel="stylesheet" href="assets/vendors/bootstrap/bootstrap.min.css">

            <link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css">

            <link rel="stylesheet" href="assets/vendors/swiper/swiper-bundle.min.css">

            <link rel="stylesheet" href="assets/vendors/themify-icons/themify-icons.css">

            <link rel="stylesheet" href="assets/vendors/nice-select/nice-select.css">

            <link rel="stylesheet" href="assets/vendors/jquery-ui/jquery-ui.min.css">

            <link rel="stylesheet" href="assets/css/viewer.min.css">

            <link rel="stylesheet" href="assets/css/style.css">

Source File (JS)



            <!-- All js here -->

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

            <script src="assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>

            <script src="assets/vendors/swiper/swiper-bundle.min.js"></script>

            <script src="assets/vendors/imagesloaded/imagesloaded.pkgd.min.js"></script>

            <script src="assets/vendors/isotope/isotope.pkgd.min.js"></script>

            <script src="assets/vendors/animations/wow.min.js"></script>

            <script src="assets/vendors/counterup/waypoints.min.js"></script>

            <script src="assets/vendors/nice-select/jquery.nice-select.min.js"></script>

            <script src="assets/vendors/jquery-ui/jquery-ui.min.js"></script>

            <script src="assets/vendors/countdown/jquery.countdown.min.js"></script>

            <script src="assets/js/viewer.min.js"></script>

            <script src="assets/js/main.js"></script>

HTML Structure

Dfood follows a simple and easy to customize coding structure. Here is the sample for your reference: 



            <!DOCTYPE html>

            <html lang="en">

            <head>

              <!-- Stylesheet

              ============================== -->

              <!-- Bootstrap -->

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

              <!-- Font Awesome Icon -->

              <link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css" />

              <!-- Magnific Popup -->

              <link rel="stylesheet" type="text/css" href="assets/vendor/magnific-popup/magnific-popup.min.css" />

              <!-- Highlight Syntax -->

              <link rel="stylesheet" type="text/css" href="assets/vendor/highlight.js/styles/github.css" />

              <!-- Custom Stylesheet -->

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

  

              <!-- Here goes your custom.css

              ============================================= -->

              <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />

            </head>



            <body>

              <!-- Main Wrapper   

              =============================== -->

              <div id="wrapper" class="wrapper">  

                <!-- Header -->

                <header id="site-header" class="header-area header-area-1">

                ......

                </header>

                <!-- Header End --> 

                

                <!-- Footer -->

                <footer class="footer footer--layout1">

                  ......

                </footer>

                <!-- Footer end --> 

              </div>

              <!-- Main Wrapper end --> 

              <!-- JavaScript -->

            </body>

            </html>

Template Customization

How to Change Logo

Logo Container can be found in the Header Container - <header>



            <!-- Logo -->

            <div class="site-logo">

              <a href="index.html">

                <img src="assets/img/logo.svg" alt="FigTheme">

              </a>

            </div>

            <!-- Logo End -->

Icons Fonts

Font Awesome



            <i class="fa-brands fa-facebook-f"></i>

            <i class="fa-brands fa-twitter"></i>

            <i class="fa-brands fa-linkedin-in"></i>

            <i class="fa-brands fa-instagram"></i>

            <i class="fa-brands fa-pinterest-p"></i>

NotePlease go to their official documentation pages: Font Awesome

Themefy Icons



            <i class="ti-close"></i>

            <i class="ti-heart"></i>

            <i class="ti-shopping-cart"></i>

            <i class="ti-control-shuffle"></i>

NotePlease go to their official documentation pages: Themify Icons

Source & Credits

Images:

Fonts:

Scripts:

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +6 time zone and we answer all questions within 24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Changelog

Version 1.0.0

Initial Release