Thank you very much for your purchase!

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Introduction

Template Name: Dark - Multipurpose Template

Version: 1.0.0

Created On: 30 May 2020

Author: LettStart Design

Email: support@lettstartdesign.com

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

Dark is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with preprocessor SCSS. SCSS compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or SCSS, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of creative 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.

Dark - Multipurpose template 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 support@lettstartdesign.com

Template Features

  • HTML5 & SCSS
  • Bootstrap 4
  • jQuery
  • Gulp
  • Responsive Design
  • Contact Us integrated with PHP
  • All form with validation
  • Best Coding Standard followed
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize
  • Line Icons
  • Google Font's

Installation

After unzip the download pack, you'll found a Template Folder(DIST) with all the files (HTML Files + Assets).

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

You can directly use the compiled 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.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

  • APP ├──
    • Dist ├──
      • ├── Assets/
        • ├── css
        • ├── js
        • ├── images
        • ├── fonts
        • ├── vendors
      • ├── HTML FIles
    • Documentation ├──
  • gulpfile.js
  • package.json

Gulp Installation and SASS Compilation

You need to install SASS and Gulp as Dependencies for this project if you want to customize it. To do this, you must have Node in your computer. We have setup GULP and Package file in the folder just you need to follow the steps.

Follow below steps after node/npm installation:-

1. Navigate to root folder where package.json placed.

2. Run command npm install. It will install all the dependencies in your current project.

3. To compile SASS file run command Gulp Watch. It will compile the scss file and watch the scss file also.

4. To combine/concate all js file into one run command CONCATJS.

5. To combine/concate all css file into one run command CONCATCSS.

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.

                                    
<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark - Agency Landing Page Template</title>
    <link rel="icon" href="images/favicon.png">

    <!-- font -->
    <link href="https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <!-- end font -->

    <!-- Styles -->
    <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendors/boxicons/css/boxicons.min.css">
    <link rel="stylesheet" href="assets/css/stylesheet.min.css">
</head>

<body>

    <!-- loader -->
    <div class="fakeLoader"></div>
    <!-- end loader -->

    <!-- navbar -->
    <nav class="navbar navbar-expand-md fixed-top">
    </nav>
    <!-- end navbar -->

    <!-- home intro -->
    <section id="home" class="home-intro" data-scroll-index="0">
    </section>
    <!-- end home intro -->

    <!-- services -->
    <section id="services" class="section" data-scroll-index="1">
    </section>
    <!-- end services -->

    <!-- project -->
    <section id="project" class="section-bottom-only" data-scroll-index="2">
    </section>
    <!-- end project -->

    <!-- pricing table -->
    <section id="pricing" class="section-bottom-only" data-scroll-index="3">
    </section>
    <!-- end pricing table -->

    <!-- testimonial -->
    <section id="testimonial" class="testimonial section-bottom-only" data-scroll-index="3">
    </section>
    <!-- end testimonial -->

    <!-- contact us -->
    <section id="contact" class="contact section-bottom-only" data-scroll-index="4">
    </section>
    <!-- footer -->
    <section class="footer" data-scroll-index="4">
    </section>
    <div class="py-30 text-center">
        <div class="container">
        </div>
    </div>
    <!-- end footer -->

    <!-- Project details -->
    <section class="project-details" id="project-details">
    </section><!-- Project details end -->
    <!-- scripts -->
</body>

</html>
CSS
File Description
bootstrap.min.css Dark uses the bootstrap v4.5.3. The core bootstrap file is being used in all the pages.
stylesheet.min.css This file is containing all common styles for all the pages.
JS
File Description
main.js This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc.

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.

                                    
                                        <link href="https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;600;700;900&display=swap" rel="stylesheet">

Body Fonts: Spartan

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

Icons

Box Icons: <i class="bx bx-x"></i>

References

Term Website
jQuery http://jquery.com/
Bootstrap https://getbootstrap.com
Google Fonts https://fonts.google.com/
jQuery Validation https://jqueryvalidation.org/
Swiper slider https://swiperjs.com/
Scroll It http://www.bytemuse.com/scrollIt.js/
Pixabay https://pixabay.com/
Unsplash https://unsplash.com/

All images is used to show demo. Please use your own images

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

Support

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

For feedback or report any bug you can send us mail at support@lettstartdesign.com . Reply times can be up to 12 / 24 hours Monday to Sunday. Please be patient when posting an issue as i work (IST+05:30) time zone.