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

Head

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>

Navs

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 Toggle 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:

How many cats you want: 1-39 40+ I read and agree to Terms & Conditions

<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.

Carousel

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:

Li Chang

Director Product Development, Company Ltd.

Elegant and efficient

“ An elegant, yet efficient, magic tool! I love the overall design and the simple way that you can update or change a process. Awesome product. The guys have put huge effort into this app and focused on simplicity and ease of use. “

Li Chang

Director Product Development, Company Ltd.

Elegant and efficient

“ An elegant, yet efficient, magic tool! I love the overall design and the simple way that you can update or change a process. Awesome product. The guys have put huge effort into this app and focused on simplicity and ease of use. “

Li Chang

Director Product Development, Company Ltd.

Elegant and efficient

“ An elegant, yet efficient, magic tool! I love the overall design and the simple way that you can update or change a process. Awesome product. The guys have put huge effort into this app and focused on simplicity and ease of use. “

Li Chang

Director Product Development, Company Ltd.

Elegant and efficient

“ An elegant, yet efficient, magic tool! I love the overall design and the simple way that you can update or change a process. Awesome product. The guys have put huge effort into this app and focused on simplicity and ease of use. “

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.