Features

This template has everything that you need to easy develop a minimal and modern website:

  • Semantically Correct / Valid HTML Code
  • Fully Responsive Layout
  • Cross browser compatible (Firefox, Safari, Opera, Chrome etc.)
  • 8 color schemes
  • 4 page variations of home-page for different types of apps
  • Working AJAX Contact Form with validation
  • Easy to Use and Customize
  • Google Web Fonts and Material design icons

Project Structure

Template has a following project structure:

  • documentation
  • template
    • assets
      • css
      • img
      • js
      • scss
      • video
    • blog
      • 12_blog.html
      • 13_blog_filter.html
      • posts.json
    • posts
      • 01_video_post.html
      • 02_gallery_post.html
      • 03_standard_post.html
    • 02_messenger.html
    • 03_webapp.html
    • 04_desktop.html
    • 05_features.html
    • 06_pricing.html
    • 07_about.html
    • 08_faq.html
    • 09_privacy.html
    • 10_get-app.html
    • 11_calculator.html
    • index.html
    • letter.html
    • calculator.php
    • mail.php

HTML Structure

All html-files consist of a menu, a header, sections and a footer. They use UTF-8 codepage. Use the editor with UTF-8 support to avoid problems with unreadable symbols.

Layout

This template has its 12-column grid. A container has width equal 1560px. Next classes of columns are used for:

Class .col- .col-m- .col-t- .col-l-
Max-width >= 1200px < 1200px < 990px < 768px

Tags with meta-information are located inside <head> tag. Fill them to provide information about your CV to search engines:

<meta name="description" content="">
<meta name="author" content="">

Also there is <title> tag which you can edit too:

<title>Document</title>

You can choose one of 8 finished color schemes. Just write name of css-file here:

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

The whole navigation panel is placed inside <div class="menu"> and <div class="mobile-menu d-none d-t-block"> tags. The navigation panel is divided into three parts: logo, center menu and right menu. Also it has opportunity of adding dropdowns. Center and right menus have a similar structure:

<div class="menu__item d-t-none">
  <nav class="menu__center-nav"> <!--or <nav class="menu__left-nav d-l-none">-->
    <ul>
      <li>
        <div class="menu__dropdown">
          <a class="link link--gray menu__dropdown-btn">Home
            <span><i class="mdi mdi-chevron-down"></i></span>
          </a>
          <div class="menu__dropdown-content">
            <a class="link link--gray link--gray-active" href="index.html">Mobile App</a>
            <a class="link link--gray" href="messenger.html">Messenger</a>
            <a class="link link--gray" href="webapp.html">Web App</a>
            <a class="link link--gray" href="desktop.html">Desktop App</a>
          </div>
        </div>
      </li>
      <li><a href="features.html" class="link link--gray">Features</a></li>
      <li><a href="pricing.html" class="link link--gray">Pricing</a></li>
    </ul>
  </nav>
</div>

You can easy change items and add new. But also you need edit links in <div class="mobile-menu d-none d-t-block">. In mobile menu the code above looks like:

<nav class="mobile-menu__wrapper">
  <ul class="mobile-menu__ul">
    <li class="mobile-menu__li mobile-menu__li-collapse"><a class="link link--dark-gray">Home
      <span><i class="mdi mdi-chevron-down"></i></span>
    </a></li>
  <li class="mobile-menu__ul--collapsed">
    <ul class="mobile-menu__ul">
      <li class="mobile-menu__li">
        <a class="link link--gray" href="index.html">Mobile App</a>
      </li>
        <li class="mobile-menu__li"...>
        <li class="mobile-menu__li"...>
        <li class="mobile-menu__li"...>
      </ul>
    </li>
    <li class="mobile-menu__li">
      <a href="features.html" class="link link--dark-gray">Features</a>
    </li>
    <li class="mobile-menu__li">
      <a href="pricing.html" class="link link--dark-gray">Pricing</a>
    </li>
    <!--Also add items from right menu-->
  </ul>
</nav>

Don't forget add menu.js and mobile-menu.js before </body>!!!

<header> has main information about your item. Just write a few words about your product to interest users. Main structure of header looks like:

<header class="header-home"> <!--You can add bg here-->
  <div class="container"> <!--Or here-->
    <div class="row">
      <div class="col-12">
        <h2 class="header-home__title">Your title</h2>
        <p class="header-home__description">A few wors about your product</p>
        <div class="header-home__btns"> <!--Btns to other pages or web-sites-->
          <a href="" class="site-btn site-btn--accent header-home__btn">Buy</a>
          <a href="" class="site-btn site-btn--light header-home__btn">Learn more</a>
        </div>
      </div>
    </div>
  </div>
</header>

Add a class .header-home--center-content in <header> to center all elements.

Wave-backround

Some pages of template have waves on a background. Add between <header> and <div class="container"> a new div:

<header class="header-home header-home--color">
	<div class="background background--wave">
		<div class="container">
      <!--Add something-->
    </div>
	</div>
</header>

You can try add waves somewhere else if you want.

Section

All html-files consist of sections. They have a next structure:

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h3 class="section__title">Title of section</h3>
        <p class="section__description">Some information</p>
      </div>
    </div>
    <div class="row"> <!--Add class of your block-->
      <!--Block content-->
    </div>
  </div>
</section>

The template has some variables of a sections' design: main, light-gray and dark-gray. Add .section--light class in a section tag to add light gray color of background or .section--dark to dark-gray color. Also you can add .section--half to get section which has light background of top half of section and light gray background of bottom (examples you can find in messenger.html and desktop.html).

Balloon

You can add the balloon in the end of a page:

<div class="section section--last">
  <img class="section__img" src="assets/img/img_backgroud_footer.png">
</div>

Clouds

Also you can decorate your website with help of clouds. Just add this code after a section tag:

<div class="section section--light background background--clouds"></div>

The template has two types of navs for navigation inside a page: sidebar and navbar (the last fixes to bottom of main menu).

Sidebar

Examples of sidebars you can find in faq.html and privacy.html:

<section class="section">
  <div class="container">
    <div class="row faq">
      <div class="col-9 col-t-12" ...> <!--Don't forget add anchors for chapters here-->
      <div class="col-3 d-t-none">
        <nav class="sidebar">
          <ul class="sidebar__list">
            <li class="sidebar__item active"><a href="#chapter1">Chapter 1</a></li>
            <!--You can add more links here-->
            <li class="sidebar__item"><a href="#chapterN">Chapter N</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</section>

But the sidebar don't work without two js-files: jquery.waypoints.js and sidebar.js!!!

Topbar

There is the one topbar in features.html. It fixes when scrolling to bottom of menu and hide when it isn't needed anymore. The code of this nav looks like:

<nav class="topbar">
  <div class="container">
    <div class="row">
      <div class="col-2 topbar__item">
        <a class="link link--gray topbar__link active" href="#freetrial">Free Trial</a>
      </div>
      <div class="col-2 topbar__item">
        <a class="link link--gray topbar__link" href="#nosetup">No setup</a>
      </div>
      <div class="col-2 topbar__item">
        <a class="link link--gray topbar__link" href="#safety">Safety</a>
      </div>
      <div class="col-2 topbar__item">
        <a class="link link--gray topbar__link" href="#optimized">Optimized Data</a>
      </div>
      <div class="col-2 topbar__item">
        <a class="link link--gray topbar__link" href="#access">Quick Access</a>
      </div>
      <div class="col-2 topbar__item">
        <a class="link link--gray topbar__link" href="#support">24h Support</a>
      </div>
    </div>
  </div>
</nav>

You can try add 12 links instead 6 writing .col-1 class instead .col-2 or leave only 2 and write .col-6. But you need add js-files (jquery.waypoints.js and topbar.js) otherwise nothing will work... Oo

Buttons & links

Buttons

This template has 4 types of buttons:

Accent Dark Light Invert

Their code looks like:

<a href="" class="site-btn site-btn--accent">Accent</a>
<a href="" class="site-btn site-btn--dark">Dark</a>
<a href="" class="site-btn site-btn--light">Light</a>
<a href="" class="site-btn site-btn--invert">Invert</a>

Links

Also there are 3 types of links: Bold accent, Accent and Gray

Code of links:

<a href="" class="link link--accent-bold">Bold accent</a>
<a href="" class="link link--accent">Accent</a>
<a href="" class="link link--gray">Gray</a>

Toggle button

A toggle button we use only for pricing block in pricing.html and webapp.html:

Cats Owls

A toggle button has next code:

<div class="toggle-checkbox">
  <input class="toggle-checkbox__input" type="checkbox" id="toggle"/>
  <span class="toggle-checkbox__left">Cats</span>
  <label class="toggle-checkbox__input-label" for="toggle">Toggle</label>
  <span class="toggle-checkbox__right">Owls</span>
</div>

Checkbox and radio button

A checkbox and radio buttons are used in form. They have next style:

<div class="form__form-group">
  <label class="form__label">Company Size (Number of Emploees)</label>
  <label class="radio-btn">
    <input class="radio-btn__radio" type="radio" value="1-5" name="company-size" checked>
    <span class="radio-btn__radio-custom"></span>
  <span class="radio-btn__label">1-5</span>
  </label>
	<!--You can add more radio btn here-->
  <label class="radio-btn...>
</div>
<div class="form__form-group form__form-group--read-and-agree">
  <label class="checkbox-btn">
    <input class=" checkbox-btn__checkbox" type="checkbox" name="terms" required>
    <span class="checkbox-btn__checkbox-custom"><i class="mdi mdi-check"></i></span>
    <span class="checkbox-btn__label">I read and agree to
      <a href="" target="_blank" class="link link--accent link--accent-bold">Terms & Conditions</a>
    </span>
  </label>
</div>

Cards

Cards are used in almost every page of this template. A base of cards looks like:

<div class="card">
  <!--Content-->
</div>
Hi! I'm a card.
Me too :)
DRAKARYS!

F.A.Q. cards

Cards that are used in faq.html require more attention. They display a answer to a question only after click on a card and hide after second click.

Click me ;)

Hello, human! Do you like dragons?

These cards have next structure:

<div class="faq__card card">
  <h4 class="faq__card-title">Question
    <span class="faq__card-icon"><i class="mdi mdi-chevron-down"></i></span>
  </h4>
  <div class="faq__card-description">
    <p>Answer</p>
  </div>
</div>

They require js-code from faq.js.

This template has two kinds of a carousel slider. The first of them use a standard navigation and the second has a more complex navigation panel. More information about a plugin that used in this template you can find here.

Standard navigation

The carousel with the standard navigation looks like:

You can easy add new slides and change content of them. A base code is next:

<div class="row carousel">
  <div class="col-12">
    <div class="slider carousel__slider--think" id="user-thinks">
      <div class="carousel__slide-wrap">
        <div class="carousel__slide">
          <!--Slide's content-->
        </div>
      </div>
    <!--More slides here-->
    <div class="carousel__slide-wrap">
      <div class="carousel__slide"...>
    </div>
  </div>
</div>

Don't forget to include carousel.js and slick.min.js in your html-file.

Navigation panel with images

You can add a navigation panel as here:

Just add a additional row with the navigation panel's code like this:

<div class="row carousel">
  <div class="col-12">
    <div class="carousel__navigation">
      <ul id="carousel__navigation-feature-slider" class="carousel__navigation-items"
          role="tablist">
        <li class="carousel__navigation-item slick-active" role="presentation" value="0">
          <!--You can add img or svg here-->
          <p>Free Trial</p>
        </li>
        <!--Amount of li should be equal to amount of slides-->
        <li class="carousel__navigation-item" role="presentation" value="N"...>
      </ul>
    </div>
  </div>
  <div class="col-12">
    <div class="slider slider-img slider-img--big" id="feature-slider">
      <div class="carousel__slide">
        <!--Slide content-->
      </div>
      <!--Other slides-->
      <div class="carousel__slide"...>
    </div>
  </div>
</div>

Pricing

The template has 4 types of design of pricing. You can choose any of them.

Simple pricing

This type of pricing consists only of cards with buttons.

Basic

$ 108/year

$9 billed monthly

10 pages

2 Gb storage

Integrated e-commerce

Custom domain free

24/7 Customer support

Select plan

Recommended

Business

$ 228/year

$19 billed monthly

20 pages

16 Gb storage

Integrated e-commerce

Custom domain free

24/7 Customer support

Select plan

Pro

$ 468/year

$39 billed monthly

50 pages

500 Gb storage

Integrated e-commerce

Custom domain free

24/7 Customer support

Select plan

Its code is next:

<div class="row pricing pricing--simple">
  <div class="col-3 col-t-6">
    <div class="pricing__card card">
      <div class="pricing__card-head pricing__card-head--other-color-1">
        <h4 class="pricing__card-title">Basic</h4>
        <p class="pricing__card-price pricing__card-price--year">$ 108<span
              class="pricing__card-price-caption">/year</span></p>
        <p class="pricing__card-price--per-month">$9 billed monthly</p>
      </div>
      <div class="pricing__opportunities">
        <p>10 pages</p>
        <p>2 Gb storage</p>
        <div class="pricing__opportunities--not-available">
          <p>Integrated e-commerce</p>
          <p>Custom domain free</p>
          <p>24/7 Customer support</p>
        </div>
      </div>
      <a href="" class="site-btn site-btn--light">Select plan</a>
    </div>
  </div>
  <!--More cards-->
  <div class="col-3 col-t-6"...>
</div>

Pricing with a toggle

You can add a toggle of prices to your website:

Monthly Yearly

Basic

$ 108

$ 10

$9 billed monthly

Save 10%


10 pages

2 Gb storage

Integrated e-commerce

Custom domain free

24/7 Customer support

Select plan

Pro

$ 228

$ 24

$19 billed monthly

Save 15%


10 pages

2 Gb storage

Integrated e-commerce

Custom domain free

24/7 Customer support

Select plan

Basic

$ 468

$ 42

$39 billed monthly

Save 20%


10 pages

2 Gb storage

Integrated e-commerce

Custom domain free

24/7 Customer support

Select plan

Most of the code does not differ from the code of a simple pricing. The code of a toggle button you can find above in this documentation.

<div class="row pricing pricing--toggle">
  <div class="col-12">
    <div class="toggle-checkbox"...>
  </div>
  <div class="col-4">
    <div class="pricing__card card">
      <h4 class="pricing__card-title">Basic</h4>
      <p>This is the basic plan for getting started and growing your business.</p>
      <p class="pricing__card-price pricing__card-price--year">$ 108</p>
      <p class="pricing__card-price pricing__card-price--month">$ 10</p>
      <p class="pricing__card-price--per-month">$9 billed monthly</p>
      <div class="pricing__card-price-save-wrap">
        <p class="pricing__card-price-save">Save 10%</p>
        <hr class="pricing__hr">
      </div>
      <div class="pricing__opportunities">
        <p>10 pages</p>
        <p>2 Gb storage</p>
        <div class="pricing__opportunities--not-available">
          <p>Integrated e-commerce</p>
          <p>Custom domain free</p>
          <p>24/7 Customer support</p>
        </div>
      </div>
      <a href="" class="site-btn site-btn--light">Select plan</a>
    </div>
  </div>
  <div class="col-4"...>
  <div class="col-4"...>
</div>

Include pricing.js in your html to activate a function of the toggle.

Common Pricing

This type of pricing has a slider which can switch price plans:

$ 19.99

per month

$ 228.5

per year

Select plan

Basic

10 pages

2 Gb storage

Donations

Regular

20 pages

16 Gb storage

Donations

Integrated e-commerce

Custom domain free

Premium

30 pages

100 Gb storage

Donations

Integrated e-commerce

Custom domain free

24/7 Customer support

Enterprise

50 pages

500 Gb storage

Donations

Integrated e-commerce

Custom domain free

24/7 Customer support

<div class="row pricing pricing--common">
  <div class="col-10 col-t-12 col-offset-1">
    <div class="pricing__card card">
      <div class="pricing__card-price-wrap">
        <div class="pricing__card-price">
          <p id="month">$ 19.99</p>
          <p class="pricing__card-price-caption">per month</p>
        </div>
        <div class="pricing__card-price">
          <p id="year">$ 228.5</p>
          <p class="pricing__card-price-caption">per year</p>
        </div>
      </div>
      <select class="d-none" name="price-month" id="price">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <div class="pricing__plans">
        <div class="pricing__plan pricing__plan--hidden">
          <h4 class="pricing__card-title">Select plan</h4>
        </div>
        <div class="pricing__plan"...>
          <div class="pricing__plan active">
            <h4 class="pricing__card-title">Regular</h4>
            <div class="pricing__opportunities">
              <p>20 pages</p>
              <p>16 Gb storage</p>
              <p>Donations</p>
              <p>Integrated e-commerce</p>
              <p>Custom domain free</p>
            </div>
          </div>
          <div class="pricing__plan pricing__plan--disable"...>
          <div class="pricing__plan pricing__plan--disable pricing__plan--last"...>
        </div>
      </div>
    </div>
</div>

You need include pricing.js, jquery-ui.min.js and jquery.ui.touch-punch.min.js to use it.

Price table

A price table is a simple table with rows and columns:

Basic

Business

Pro

Users included

5

20

50

Conversations

Unlimited

Unlimited

Unlimited

Desktop and Mobile Apps

Notifications

Search engine

Select plan

Select plan

Select plan

There is only table tag in the code:

<div class="site-table">
  <table class="site-table--responsive site-table--responsive-js">
    <thead class="site-table__head">
      <tr>
        <th></th>
        <th class="site-table__head-th site-table__head-th--other-color-1">
          <p>Basic</p>
          <button class="site-table__btn-next" aria-label="Next" type="button">
            <span><i class="mdi mdi-chevron-right"></i></span>
          </button>
        </th>
        <th class="site-table__head-th site-table__head-th--accent"...>
        <th class="site-table__head-th site-table__head-th--other-color-2"...>
      </tr>
    </thead>
    <tbody class="site-table__body">
      <tr class="site-table__row">
        <th class="site-table__th site-table__th--new">Invisible mode</th>
        <td class="site-table__td"></td>
        <td class="site-table__td">
          <p><span class="site-table__icon"><i class="mdi mdi-check"></i></span></p>
        </td>
        <td class="site-table__td"...>
        <td class="site-table__td"...>
      </tr>
      <!--More rows-->
      <tr class="site-table__row"...>
      <tr class="site-table__btn-row">
        <th class="site-table__th"></th>
        <td class="site-table__td">
          <p><a href="" class="site-btn site-btn--light">Select plan</a></p>
        </td>
        <td class="site-table__td"...>
        <td class="site-table__td"...>
        <td class="site-table__td"...>
      </tr>
    </tbody>
  </table>
</div>

You can easy use such tables anywhere.

Contact form

Set up mail.php script to send e-mails on your address by providing your email address in following variable: $emailTo = "email@sitename.com". Also include form.js and validate.js in html-page with form. That’s it. Now contact form is working. Of course, if you set up PHP on your server right.

A footer nav has simple structure:

<div class="container footer-menu">
  <div class="row">
    <div class="col-12">
      <!--You can add img or svg here-->
      <nav class="footer-menu__nav">
        <ul>
          <li><a class="link link--gray" href="about.html">About</a></li>
          <li><a class="link link--gray" href="faq.html">FAQ</a></li>
          <li><a class="link link--gray" href="privacy.html">Privacy</a></li>
        </ul>
      </nav>
      <p class="footer-menu__social">
        <a class="link link--gray" href="">
          <i class="mdi mdi-twitter" aria-hidden="true"></i>
        </a>
        <a class="link link--gray" href=""...>
        <a class="link link--gray" href=""...>
      </p>
    </div>
  </div>
</div>

A footer is placed at the end of web-pages:

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>© 2021 Sigma – Featured as App Presentation PSD Template  |  Made by
        <a href="" class="link link--gray">Aspirity</a></p>
      </div>
    </div>
  </div>
</div>

Calculator

The template contains a example of a calculator. It looks like the contact form, but has more complex structure. It has three parts: form with variables, a sidebar with chosen parameters and a send form. When you choose values of inputs, a information of the sidebar updates and then you can send it via calculator.php. The example contains also ready html-letter with Sigma design. You can easy edit it.

The calculator requires calculator.js and validation.js.

Also the template contains letter design. There is its example inside letter.html, but it is creating in a server with help calculator.js (var formBill) and calculator.php. Example of the letter below:

Blog

There are pages of blog with examples of posts in the template. You can find them in blog and post folders. To add a new post in list you need to edit blog/posts.json. To start work with blog you need to use blog.js, post.js and blog_filter.js. Warning: to correct work of blog you need to run this template on a localhost or a server.

Instagram widget

To change widget for instagram you need to generate it here and replace this code:

<!-- LightWidget WIDGET -->
<div class="instagram">
  <iframe src="//lightwidget.com/widgets/8805af47fad15bfb82812dae1bccdff2.html" scrolling="no"
          allowtransparency="true" class="lightwidget-widget"
          style="width:100%;border:0;overflow:hidden;"></iframe>
</div>

Twitter widget

To change twitter account you just need to change user name ('AspirityThemes' -> 'your twitter name'):

<a class="twitter-timeline" href="https://twitter.com/AspirityThemes?ref_src=twsrc%5Etfw"
   data-tweet-limit="1">
  Tweets by AspirityThemes
</a>

CSS Structure

There are 6 css-files:

  • template
    • assets
      • css
        • blue.css
        • blue-gradient.css
        • green.css
        • green-gradient.css
        • jquery-ui.min.css
        • main.css
        • red.css
        • red-gradient.css
        • tablesaw.css
        • violet.css
        • violet-gradient.css

blue.css, green.css, red.css, violet.css blue-gradient.css, green-gradient.css, red-gradient.css, and violet-gradient.css are color schemes of template.
main.css is file which you can use to edit styles with help Sass. How do it here.
jquery-ui.min.css is used for pricing and tablesaw.css is used for tables.

Fonts

This template has a fonr from Google Fonts: Nunito - and Material design icons for icons.

JavaScript

All the js-files are placed here:

  • template
    • assets
      • js
        • calculator.js
        • carousel.js
        • device.js
        • faq.js
        • form.js
        • jquery.waypoints.js
        • jquery-ui.min.js
        • menu.js
        • mobile-menu.js
        • pricing.js
        • sidebar.js
        • slick.min.js
        • topbar.js
        • validation.js
        • video.js

calculator.js - getting and calculating in calculator.html and sending to email.
carousel.js - activate carousel sliders.
faq.js - functions of opening and closing F.A.Q cards.
form.js - validation form and sending data to mail.php.
device.js - identify a type of a device.
jquery.waypoints.js - a smooth scrolling to anchors inside a page.
menu.js - menu behavior.
mobile-menu.js - mobile menu behavior.
pricing.js - functions of all types of pricing.
sidebar.js - fixing a sidebar in faq.html and privacy.html.
slick.min.js - plugin of carousel sliders.
topbar.js - fixing a topbar in features.html.
validation.js - forms validation.
video.js - playing videos.

Editing source code

First of all you need to prepare your environment.

  1. Download and install latest stable version of node.js and npm.

  2. Install gulp: npm i gulp-cli.

  3. Open the folder with project in terminal (or cmd) and run: npm i.

  4. After you edit source .scss files run gulp or gulp build to compile your changes.

.scss-files have next structure:

  • template
    • assets
      • scss
        • base
        • components
        • generic
        • objects
        • settings
        • tools
        • utilities
        • vendor
        • main.scss

Main resources:

Good luck ;)