Thank you for purchasing the Perfector Coming Soon template and the confidence you have placed in Dart Simple Solutions.

In this document, you will find an in-depth description of all the template's features and functionality. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online to you free of charge on our website at

Developer website:

Customer service:



Key Features

  • Based On 1170px Grid System
  • MailChimp Integrated
  • Send email script integrated
  • Free Subscribe Email Management Tool
  • Free Google Fonts
  • Retina Ready
  • Unique Design & Super Clean Layout
  • All Files Are Well Commented
  • Built With Bootstrap 3x
  • Coded With Care Valid HTML5 / CSS3
  • Fully Responsive Layout
  • Over 580 Icons With Font Awesome 4
  • Beautiful CSS3 Animation
  • W3C Valid Code
  • Carefully Handpicked Google Fonts
  • Clean Source Code
  • Easy Installation & Updates
  • Easy To Customize


What you will Get with this Template

  • 3 Unique Variations for Tech, Business and Creative Concepts
  • 3 Html Files
  • 3 Unique Coming Soon Animated Layouts

Email Management Tool

Template includes custom-developed subscriber email management tool that saves and keeps track of all subscriber emails on your Coming Soon website. You can use a separate dashboard to review and export this email data to CSV and to your MailChimp account.


How to Use

Step 1: Set your password

The tool is saved in folder Admin. In this folder, you will find the file "settings.ini". Please open this file with notepad and locate fields Login, Password, and save your username and password to be used to log in to the admin panel with email subscriber data. If integrating with MailChimp, please also locate the field "list_id" in the "settings.ini" file, and set its value to your MailChimp API Key (Please refer to MailChimp user manual for further details at ). Your email management tool is now ready to use.

Step 2:  Log in to Email Management Tool

Your tool will be available for login as soon as you upload it to your server. Login form will appear at the address Once you load the form, please log in using the username and password set in Step 1. Upon logging in, you can review, edit, delete and export subscriber email data to CSV and to MailChimp.

Step 3: Savings Data is Automatic

The tool is integrated with your Coming Soon front-end HTML by default, and will be saving subscriber email data to your admin panel and to the subscribers.txt file automatically.


About the Theme

Perfector Coming Soon Template is a fully responsive HTML template with clean, unique modern design and integrated animated countdown. Countdown lets your users know when the site will be launched. Also included in an easy-to-use subscriber email management tool with MailChimp integration and integrated send email script that will connect to your smtp server and send emails from your users. Each web page is 100% W3C compliant with clean, well-commented and fully valid code.


Folder Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

├── Documentation/
├── TemplatePerfector/
│   └── admin/
│       └── css/
│           └── *.css
│       └── img/
│           └── favicons/
│               └── *.jpg, *.png, *.ico
│           └── *.jpg, *.png, *.ico
│       └── js/
│           └── *.js
│       └── index.php
│       └── login.html
│       └── settings.ini
│       └── subscribers.txt
│       └── template.html
│   └── assets/
│       └── plugins/
│           └── font-awesome/
│           └── jQuery/
│           └── jquery-validate/
│   └──css/
│       └── *.css
│   └── images/
│       └── favicon/
│           └── *.jpg, *.png, *.ico
│   └── js/
│   	└── *.js
│   └── {layout name}.html


Project Folder Description

Folder Name



Main directory


Contains documentation about template, dependencies and short description

Template Perfector

Main layout dirrectory


Contains mailchimp integration files and admin panel layout


Contains styles for admin panel


Contains images for admin panel


Contains javascript code for admin panel


Contains third party plugins


Contains main layout style files


Contains colors variations


Contains main layout omages


Contains favicon images and bookmark description


Contains javascript files of layout, plagins initiations and custom script

{layout name}.html

Unique layouts for 3 different variations


HTML Structure

Markup Customization

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Perfector Template follows an easy-to-use method of customization via HTML data attributes placed in the <body> tag, so you can quickly tweak the code and adjust the appearance of your website. All customizable elements and relevant attributes are listed below for your convenience.

Sample code:

<body data-deadline="29 May 2017 20:30:30 GMT-0400">


Data Attributes

Available Settings



Any date in provided format

Sets the date of project launch



When customizing the template, you will be able to utilize a number of predefined color schemes. To do so, please add the CSS file with different color scheme under the template.css file to change the color theme of the template:

<link rel="stylesheet" href="css/template.css">



In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags -->
<meta name="Perfector - Premium template" content="">

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

<!-- Meta descriptions -->
<meta name="keywords" content="Perfector, premium template, wg template, web grind" />
<meta name="description" content="Perfector - Premium template by Web Grind">

<!-- Url of your website (without extra pages) -->
<link rel="canonical" href="" />

<!-- Restrict google from scanning info from Dmoz or YahooDir -->
<meta name="robots" content="noodp,noydir"/>

<!-- Author markup -->
<meta name="author" content="Dart Simple - Premium HTML templates">
<meta name="copyright" content="Dart Simple">


Grid Markup

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (


CSS Structure

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Perfector is no exception to this rule. Full list of stylesheet files is available below for your review.

File Name



Main template Styles


File for custom/addition styles


Stylesheet Structure

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.


Perfector - Premium template by Dart Simple 
Copyright 2017

Table of contents

/* 01. Fonts*/
/* 02. Main layout*/
/* 03. Controls*/
/* 04. Header*/
/* 05. Menu*/
/* 06. Footer*/
/* 07. Modals*/
/* 08. Countdown*/
/* 09. Animations*/



CSS3 Animation




Animated stripes for “Perfector-Tech” layout


Animated stars for “Perfector-Tech” layout


Animated trees for “Perfector Business” layout


Animated clouds for “Perfector Business” layout


Animated clouds for “PerfectorCreative” layout


Framework used

jQuery v2.2.1

JavaScript Structure

When designing a theme or a template, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

Plugins are initialized and can be edited in the lower part of the code for each HTML file as follows:

<!-- jQuery plugin -->
<scripttype="text/javascript" src="assets/plugins/jquery.min.js"></script>
<!-- Validator Scripts -->
<script type="text/javascript" src="assets/plugins/jquery-validate/jquery.validate.min.js"></script>
<!-- Theme scripts -->
<script type="text/javascript" src="js/wg-scripts.min.js"></script>
<!-- Theme custom scripts -->
<script type="text/javascript" src="js/wg-custom.js"></script>


JavaScript folder structure and contents

│   └── wg-scripts.min.js
│   └── wg-plugins.min.js
│   └── wg-custom.min.js


JavaScript Plugins Initialization

Below we provide the code used to initialize JavaScript plugins used in the template.


    rules: {
        email: {
            required: true,
            email: true
            required: true
            required: true
    debug: true,
errorLabelContainer: '#errorMsgBox',
errorClass: 'error',
errorElement: 'span',
submitHandler: function (form) {…}



Callback Functions

Listed below are available callback functions and their relevant settings.

// Go to the next item
//Show modal window

//Hide all modal windows

// inits validation plugin for all app.validate.el

//inits countdown



JavaScript Plugins and Credits

jQuery Validate

Used for forms validating


Used for Grid, Modals, Main fetures style



Full custom puck of images