Letstart - Multipurpose Template

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: Letstart - App Template

Version: 1.0.0

Created On: 30 March 2020

Author: MatrrDigital

Email: support@lettstartdesign.com

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

With Letstart - App theme 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.

Letstart - App theme comes with 6 different templates. Letstart 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 Letstart 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.

Letstart - App theme 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
6 Homepage
Responsive Design
Contact Us and Subscribe form integrated with PHP
All form with validation
Best Coding Standard followed
Pixel Perfect Design
Clean Code & Unique Design
Easy to Customize
Box Icons
Google Font's

Installation

After unzip the download pack, you'll found a Template Folder(HTML) 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:

HTML ├──

assets ├──

├── dist/

```
├── css
```
```
├── js
```

```
├── images/
```
```
├── vendors/
```
```
├── scss/
```

```
PHP ├──
```
- ```
├── PHP Files/
```
```
HTML files
```

Documentation ├──

assets ├──

├── dist/

```
├── css
```
```
├── js
```

```
├── images/
```
```
├── vendors/
```

```
HTML
```

```
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="en">

<head>
</head>

<body>

    <!-- Loader -->
    <div id="loading-mask">
    </div>
    <!-- Loader End -->

    <!-- Back to top -->
    <div class="scroll-top-btn">
        <i class="bx bxs-chevron-up"></i>
    </div>
    <!-- Back to top End -->

    <!--Navbar Start-->
    <nav class="navbar navbar-expand-lg navbar-custom sticky navbar-dark">
        <div class="container">
        </div>
    </nav>
    <!-- Navbar End -->

    <!-- Hero Start -->
    <section class="hero-banner d-flex align-items-center" data-scroll-index="0">
        <div class="container text-over-gred">
        </div>
        <div class="background-shapes">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="dot1"></div>
            <div class="dot2"></div>
            <div class="dot3"></div>
            <div class="dot4"></div>
            <div class="heart1"><i class="bx bx-heart"></i></div>
            <div class="heart2"><i class="bx bx-heart"></i></div>
            <div class="circle2"></div>
        </div>
    </section>
    <!-- Hero End -->

    <!-- Client Start -->
    <section class="clearfix" data-scroll-index="0">
        <div class="container">
        </div>
    </section>
    <!-- Client End -->

    <!-- Service Start -->
    <section class="section" data-scroll-index="1">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 mx-auto">
                    <div class="section-header text-center">
                        <h4 class="text-uppercase mb-0">Service</h4>
                        <div class="seprator"></div>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium.</p>
                    </div>
                </div>
            </div>
            <div class="row services">
            </div>
        </div>
    </section>
    <!-- Service End -->

    <!-- Feature 1 Start -->
    <section class="pb-80 features-section shape-bg shape-2" data-scroll-index="2">
        <div class="container">
        </div>
    </section>
    <!-- Feature 1  End -->

    <!-- Feature 2 Start -->
    <section class="pb-80 features-section shape-bg" data-scroll-index="2">
        <div class="container">
        </div>
    </section>
    <!-- Feature 2  End -->

    <!-- About us 1 Start -->
    <section class="pb-80 features-section shape-bg shape-2" data-scroll-index="2">
        <div class="container">
        </div>
    </section>
    <!-- About us 1 End -->

    <!-- About us 2 Start -->
    <section id="facts" class="py-50 features-section" data-scroll-index="2">
        <div class="container">
        </div> <!-- container -->
    </section>
    <!-- About us 2 End -->

    <!-- Testimonials Start -->
    <div class="testimonials-section pt-70" data-scroll-index="2">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 mx-auto">
                    <div class="section-header text-center">
                        <h2 class="text-uppercase mb-0">Testimonials</h2>
                        <div class="seprator"></div>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium.</p>
                    </div>
                </div>
            </div> <!-- end of row -->
            <!-- Card Slider -->
            <div class="testimonial-slider-container pb-100 owl-carousel">
            </div> <!-- end of slider-container -->
        </div> <!-- end of container -->
    </div>
    <!-- Testimonials End -->

    <!-- Pricing Start -->
    <section class="pt-100 pb-70" data-scroll-index="3">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 mx-auto">
                    <div class="section-header text-center">
                        <h2 class="text-uppercase mb-0">Pricing</h2>
                        <div class="seprator"></div>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium.</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
            </div>
        </div>
    </section>
    <!-- Pricing End -->

    <!-- Download App Start -->
    <section class="section download-app" data-scroll-index="4">
        <div class="overlay bg-primary"></div>
        <div class="bottom-shape">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="#fff" fill-opacity="1"
                    d="M0,64L48,101.3C96,139,192,213,288,240C384,267,480,245,576,224C672,203,768,181,864,192C960,203,1056,245,1152,250.7C1248,256,1344,224,1392,208L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" />
            </svg>
        </div>
        <div class="container">

            <div class="row">
            </div>
        </div>
    </section>
    <!-- Download App End -->

    <!-- Blog Start -->
    <section data-scroll-index="4" class="pt-100 pb-70 graybg">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 mx-auto">
                    <div class="section-header text-center">
                        <h2 class="text-uppercase mb-0">Blogs</h2>
                        <div class="seprator"></div>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium.</p>
                    </div>
                </div>
            </div>
            <div class="row">
            </div>
        </div>
    </section><!-- Blog End -->

    <!-- contact Us Start -->
    <section class="bg-light" data-scroll-index="5">
        <div class="contact-form-container section">
            <div class="background-shapes">
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
                <div class="dot1"></div>
                <div class="dot2"></div>
                <div class="heart1"><i class="bx bx-message-square"></i></div>
                <div class="heart2"><i class="bx bx-heart"></i></div>
            </div>
            <div class="container">
            </div>
        </div>
    </section><!-- contact Us End -->

    <!-- Footer Start -->
    <section class="footer" data-scroll-index="5">
        <div class="container">
        </div>
    </section>
    <!-- Footer End -->

    <!-- Details Lightbox -->
    <div id="details-lightbox-1" class="lightbox-basic zoom-anim-dialog mfp-hide">
        <div class="container">
        </div>
    </div>
    <!-- Details Lightbox End -->

    <!-- Demo Start -->
    <div class="demo">
    </div>
    <!-- Demo End -->

    <!-- javascript -->
    <script src="assets/dist/js/plugins.js"></script>
    <!-- Main Js -->
    <script src="assets/dist/js/app.js"></script>

</body>

</html>

CSS

File	Description
`bootstrap.min.css`	Letstart uses the bootstrap v4.3.1. The core bootstrap file is being used in all the pages.
`style.css/style.min.css`	This file is containing all common styles for all the pages.

JS

File	Description
`app.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.

                                    
@import url('https://fonts.googleapis.com/css?family=Barlow:300,500,600,700|Nunito:400,600,700&display=swap');

Default Fonts: Nonito, Barlow

We are using Nunito as body font's and Barlow as heading font's in our templates.

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

Icons

BoxIcons: <i class="bx bx-eye"></i>

References

Term	Website
jQuery	http://jquery.com/
Bootstrap	https://getbootstrap.com
Google Fonts	https://fonts.google.com/
Magnific Popup	https://dimsemenov.com/plugins/magnific-popup/documentation.html
jQuery Validation	https://jqueryvalidation.org/
Owl Carousel 2	https://owlcarousel2.github.io/OwlCarousel2/index.html
Particle JS	https://vincentgarreau.com/particles.js/
Scroll It	http://www.bytemuse.com/scrollIt.js/
Box Icons	https://boxicons.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

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.

You can generate ticket on support or send me 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+00:00) time zone.