Introduction

Template Name: Canvaa HTML Templates

Version: 1.0.0

Created On: 14 February 2022

Author: BuyHTMLTemplates

Canvaa is the complete package that was built to help you create a custom and unique user interface for your project.

With Canvaa you’re not limited to creating a single web page. You’ll have over many pre-built page templates to choose from, covering many popular scenarios and content types. All the page templates are highly customizable.

Canvaa comes with 6 different pages and other supportive/helper pages. Canvaa is a responsive HTML template that is based on the CSS framework Bootstrap 5 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Canvaa and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Canvaa is packed with pages that come complete with documented code to simplify the customization process.

Thank you so much for choosing this template. Your comments and ratings would be highly appreciated. You have purchased this template so, you will get full support from us. We will update this template time to time and we want to hear from you for the future updates or for complete new templates. If you have any questions that are beyond the scope of this document, feel free to email at hireus@buyhtmltemplates.com

DEPENDENCIES

Template Features

  • HTML5 & SCSS
  • Bootstrap v5.0.2
  • Gulp
  • Font-awesome
  • Simple Line Icon
  • jQuery
  • 6 Homepage
  • 9+ Bonus Page's
  • Responsive Design
  • Contact Us form integrated with PHP
  • All form with validation
  • Best Coding Standard followed
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize
  • Blog Details Page
  • Project Portfolio Page

Installation

After download a source package From our Store.

Install Node.js From https://nodejs.org/en/download/

After that open command promt or any other terminal and go to Package Path.

cd [root] / code /

Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.

npm install --global npm@latest

To check weather is node succesfully install or not.

npm --version

For yarn package manager.

npm install --global yarn

To check weather is yarn succesfully install or not.

yarn --version

Now, run the below command(This command will install the necessary libraries in node_modules folder which is generated by this command):

npm install

Normally project will run on the localhost:3000 or it will take port accordingly and for run the project run the below command:

gulp watch or npm start

How to Install npm dependencies?

In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder.

How to Install npm packages?

npm install packagename, this command will install the package in node modules.

Getting started

After unzip the downloaded pack, you'll get a SRC and DIST folder. DIST folder is compiled version of SRC. SRC is raw files using gulp you will generate the dist files. All the configuration of gulp will be in gulp file.

You can directly use the compiled DIST and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so. You need to edit in SRC files by the help of gulp it convert the SRC files into DIST files and You will able to see the changes.

You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).

After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.

Once the files are done uploading go to www.yourdomainname.com/index.html

Folder Structure

After purchasing our template extract the zip file and you will see this structure.

  • Canvaa/
    • documentation/
    • App/
      • dist/
        • assets/
          • css/
          • images/
          • js/
          • vendors/
        • php/
        • HTML Files
      • src/
        • assets/
          • js/
          • scss/
        • Partials
        • HTML Files
    • Gulp.js
    • package.json

Template Structure

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the all template's. Here is the general structure of all the pages.

                                    
<!--=========== Preloader start ===============-->
<div id='preloader'></div>
<!--=========== scroll to top button ===============-->
<div class="scroll-top-btn" data-scroll-goto="0">
    <a href="#" class="scroll-top">
        <span class="scroll-top-icon"></span>
    </a>
</div>
<!--=========== Main content area start ===============-->
<div class="page-wrapper">
    <!-- **************************************-->
    <!-- **************Header**************-->
    <!-- **************************************-->
    <header class="header default">
        <!-- **************************************-->
        <!-- **************Nav Bar*****************-->
        <!-- **************************************-->
        <nav class="navbar navbar-expand-lg @@class">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img src="assets/images/logo-w.png" alt="Canvaa">
                    </a>
                    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto align-items-center">
                        <li class="nav-item">
                            <a class="scroll-item nav-link active" data-scroll-nav="1" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="scroll-item nav-link" data-scroll-nav="2" href="#about-us">About us</a>
                        </li>
                        <li class="nav-item">
                            <a class="scroll-item nav-link" data-scroll-nav="3" href="#service">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="scroll-item nav-link" data-scroll-nav="4" href="#works">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="scroll-item nav-link" data-scroll-nav="5" href="#team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="scroll-item nav-link" data-scroll-nav="6" href="#client">Client</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- **************************************-->
    <!-- **************Home banner***********-->
    <!-- **************************************-->
    <div class="home-banner text-white" data-scroll-index="1">
        <div class="container-fluid text-over-bg">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="home-content rellax" data-rellax-speed="3">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- **************************************-->
    <!-- **************About Us**************-->
    <!-- **************************************-->
    <section class="pt-100 pb-80" data-scroll-index="2">
        <div class="container">
            <div class="row align-items-center flex-lg-row-reverse">
                <div class="col-lg-6 mb-30" data-aos="fade-left" data-aos-duration="400">
                    <div class="about-us-content">
                        <div class="section-header text-start mb-30">
                            <span class="subtitle">About our Digital Agency</span>
                            <h2 class="mt-15">We are <span class="text-primary">A Design Agency</span> with a
                                passion to create
                                design</h2>
                        </div>
                        ...
                    </div>
                </div>
                <div class="col-lg-6 mb-30" data-aos="fade-right" data-aos-duration="400">
                    ...
                </div>
            </div>
        </div>
    </section>

    <!-- **************************************-->
    <!-- **************Our Service**************-->
    <!-- **************************************-->
    <section class="pt-100 pb-80 bg-light" data-scroll-index="3">
        <div class="container">
            <div class="section-header" data-aos="fade" data-aos-duration="400">
                <span class="subtitle">Our Services</span>
                <h2 class="mt-15">We Offer Awesome Sevrices</h2>
            </div>
            ...
        </div>
    </section>

    <!-- **************************************-->
    <!-- **************Our Works**************-->
    <!-- **************************************-->
    <section class="pt-100 pb-60" data-scroll-index="4">
        <div class="container">
            <div class="section-header" data-aos="fade" data-aos-duration="400">
                <span class="subtitle">Our Best Works</span>
                <h2 class="mt-15">We Love What We Do</h2>
            </div>
            ...
        </div>
    </section>

    <!-- **************************************-->
    <!-- **************Facts **************-->
    <!-- **************************************-->
    <div class="pt-100 pb-80 bg-light-gred">
        <div class="container">
            ...
        </div>
    </div>

    <!-- **************************************-->
    <!-- **************Testimonials**************-->
    <!-- **************************************-->
    <section class="testimonials-section section-spacer">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-xl-5">
                    <div class="section-header text-start" data-aos="fade" data-aos-duration="400">
                        <span class="subtitle">Our happy customers</span>
                        <h2 class="mt-15">Over 500+ Clients and Still Increases</h2>
                    </div>
                    ...
                </div>
                <div class="col-lg-6 col-xl-7 ps-xl-5" data-aos="fade" data-aos-delay="400" data-aos-duration="500">
                    ...
                </div>
            </div>
        </div>
    </section>

    <!-- **************************************-->
    <!-- **************Our Members**************-->
    <!-- **************************************-->
    <section class="pt-100 pb-80 bg-light" data-scroll-index="5">
        <div class="container">
            <div class="section-header" data-aos="fade" data-aos-duration="400">
                <span class="subtitle">Our Experts</span>
                <h2 class="mt-15">Our Skilled Team</h2>
            </div>
            ...
        </div>
    </section>

    <!-- **************************************-->
    <!-- **************Blogs **************-->
    <!-- **************************************-->
    <section class="pt-100 pb-80">
        <div class="container">
            <div class="section-header" data-aos="fade" data-aos-duration="400">
                <span class="subtitle">Top News</span>
                <h2 class="mt-15">Latest Blog</h2>
            </div>
            ...
        </div>
    </section>

    <!-- **************************************-->
    <!-- **************Client **************-->
    <!-- **************************************-->
    <div class="section-spacer bg-light-gred" data-scroll-index="6">
        <div class="container">
            <div class="section-header">
                <span class="subtitle">Our Happy Clients</span>
                <h2 class="mt-15">Some of Our Partner</h2>
            </div>
            ...
        </div>
    </div>
</div>
<!-- **************************************-->
<!-- **************Footer Section**************-->
<!-- **************************************-->
<footer class="@@class">
  <div class="container">
      <div class="row">
          <div class="col-md-6 col-lg-4">
              <div class="logo">
                  <a href="#">
                      <img src="assets/images/@@logo" alt="Canvaa" />
                  </a>
              </div>
              <p>Silo triple bottom line, optimism relief invest co-creation accessibility impact investing white
                  paper program area!</p>
              <div class="copyright mt-30">
                  <p>© Copyright 2022. BuyHTMLTemplates</p>
              </div>
          </div>
          <div class="col-md-6 offset-lg-1 col-lg-3">
              <h5>Contact US</h5>
              <ul class="footer-address-list">
                  <li>
                      <i class="icon-envelope"></i>
                      <p>Email
                          <span>
                              <a href="mailto:example@example.com">example@example.com</a>
                          </span>
                      </p>
                  </li>
                  <li>
                      <i class="icon-phone"></i>
                      <p>Phone
                          <span>
                              <a href="tel:+1 222 41 4447">+1 222 41 4447</a>
                          </span>
                      </p>
                  </li>
                  <li>
                      <i class="icon-map"></i>
                      <p>Address
                          <span>
                              0014414 B Street <br />New York
                          </span>
                      </p>
                  </li>
              </ul>
          </div>
          <div class="col-md-6 col-lg-2">
              <h5>Support </h5>
              <nav>
                  <ul>
                      <li><a href="#">Documentation</a></li>
                      <li><a href="#">FAQ's</a></li>
                      <li><a href="#">Privacy</a></li>
                      <li><a href="#">Support Forum</a></li>
                      <li><a href="#">Themes</a></li>
                      <li><a href="#">Account</a></li>
                  </ul>
              </nav>
          </div>
          <div class="col-md-6 col-lg-2">
              <h5>Useful Links </h5>
              <nav>
                  <ul>
                      <li><a href="#">About Us</a></li>
                      <li><a href="#">News</a></li>
                      <li><a href="#">Blogs</a></li>
                      <li><a href="#">Plugins</a></li>
                      <li><a href="#">Customers</a></li>
                      <li><a href="#">Feedback</a></li>
                  </ul>
              </nav>
          </div>
      </div>
  </div>
</footer>
CSS Files and Structure

These are the css files that are loaded into templates in head tag. 

                                    
<!--=== Icon Fonts ===-->
<link rel="stylesheet" href="assets/vendors/fontAwesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/vendors/simple-line-icons/css/simple-line-icons.css">
<!--=== Vendors CSS===-->
<link rel="stylesheet" href="assets/dist/css/plugins.css">
<!--=== Canvaa css ===-->
<link rel="stylesheet" href="assets/dist/css/style.min.css">
<!--=== Canvaa Theme 2 css ===-->
<link rel="stylesheet" href="assets/dist/css/style-2.min.css">

Remember style.min.css is page wise css. Package include 2 different theme's / User Experience. Theme name's follow by from style.min.css to style-2.min.css.

Javascript Files and Structure

These are the css files that are loaded into templates in the end of body tag. 

                                    
<!--=== Vendors JS ===-->
<script src="assets/dist/js/plugins.js"></script>

<!--=== Page JS ===-->
<script src="assets/dist/js/custom.js"></script>

Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

                                    
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Default Fonts: Poppins, and Open Sans

We are using Open sans as body font's and Poppins as heading font's in our templates.

Remember to change the font into style.scss If you are using SASS. Without using sass change in style.css

Icons

Font Awesome: <i class="fa fa-eye"></i>

Simple Line Icon: <i class="icon-eye"></i>

How to setup gulp tasks

GULP is a task runner for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

How to use it:

Install all the dependencies that is required for the project like

1. npm install -gulp

2. Make gulpfile.js

3. Define task in gulpfile.js

We have already setup the gulp and defined the standard task. In case you want to add your extra task follow the below code.

											
gulp.task('sass', function () {
    return gulp.src('baseDir/assets/scss/**/*.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('baseDir/assets/css'))
    .pipe(browserSync.reload({
        stream: true
    }))
});
gulp.task('watch', gulp.series('sass', (done) => { //dependancies array
    browserSync.init({
        server: {
            baseDir: "Folder Directory"
        },
    })
    gulp.watch('baseDir/*.html', gulp.series(reloadBrowserSync));// reload browser if changes in js detected
    gulp.watch('baseDir/assets/scss/**/*.scss', gulp.series('sass')); // after detect changes run gulp series tasks.
    gulp.watch('baseDir/assets/**/*.js', gulp.series(reloadBrowserSync)); // reload browser if changes in js detected
    done();
}));

Utilities

Text Color
Class Results
.text-primary Text color.
.text-secondary Text color.
.text-orange Text color.
.text-warning Text color.
.text-success Text color.
.text-danger Text color.
.text-info Text color.
.text-dark Text color.
.text-gred-1 Text grediant color.
.text-gred-2 Text grediant color.
Button Types
Class Results
.btn .btn-primary
.btn .btn-outline-primary
.btn .btn-gred-primary
.btn .btn-gred-primary .effect-2
.btn .btn-gred-primary-2
.btn .btn-gred-primary-2 .effect-2
.more-link Navigation Link
Background
Class Results
.bg-gred
Grediant BG From Top to Bottom
.bg-gred-right
Grediant BG From Left to Right
.bg-gred-2
Grediant BG From Top to Bottom
.bg-gred-2-right
Grediant BG From Left to Right
.bg-light-gred
Light BG Gred
.bg-light-gred-rev
Reverse of Light BG Gred

References

Term Website
jQuery http://jquery.com/
Bootstrap https://getbootstrap.com
Simple Line Icon Not active link
FontAwesome https://fontawesome.com/icons
Google Fonts https://fonts.google.com/
Animate https://daneden.github.io/animate.css/
AOS JS https://michalsnik.github.io/aos/
jQuery Validation https://jqueryvalidation.org/
Owl Carousel 2 https://owlcarousel2.github.io/OwlCarousel2/index.html
Photoswipe https://photoswipe.com/
Particle JS https://vincentgarreau.com/particles.js/
Swiper Slider https://swiperjs.com/demos/
Shuffle JS https://vestride.github.io/Shuffle/
JParallax JS https://github.com/nk-o/jarallax
Pixabay https://pixabay.com/
CounterUp http://bfintal.github.io/Counter-Up/demo/demo.html
Moment https://momentjs.com/
Scroll It http://www.bytemuse.com/scrollIt.js/
Morphext JS https://morphext.fyianlai.com/
Magnific Popup https://dimsemenov.com/plugins/magnific-popup/
Textillate https://textillate.js.org/
Pixabay https://pixabay.com
Unsplash https://unsplash.com/

While images and illustration are not included in the download package – but if you need the images and illustration please feel free to contact with us.

This Template is not WordPress Theme, and can’t be installed in WordPress.

Support

If you encounter any problems or have questions once you purchased the theme feel free to contact me. You can also or generate ticket on Support or send us mail at hireus@buyhtmltemplates.com. Reply times can be up to 12 / 24 hours Monday to Sunday. Please be patient when posting an issue as i work (IST+00:00) time zone.