Droow Documentation

Hello! Thank you for purchasing!

Created: 20/12/2019 By: design grid Email: info@dsngrid.com

Getting Started

Unzip the archive and find out the folder Template There are all the template files in this folder. You can open the following files for viewing in browser.

  • assets/sass — folder with sass files.
  • assets/css — folder with css files.
  • assets/fonts — folder with icon fonts.
  • assets/img — folder with image files.
  • assets/js — folder with javascript files.

  • index.html — main page style 1.

Upload the template files (inside the folder www) to server with the help of one of the FTP-clients.

HTML structure

In my template I use Bootstrap grid, if you don't know how to use it, here is a detailed information on its use.

The standard section has the following HTML structure:

<section class="section" data-image-src="img/bg-1.jpg" data-overlay='8'>
  <div class="container">
    <div class="row">

      <div class="col-lg-6 mb-50">
	<div class="section-padding">
	  <span class="vertical-text">	Droow Template </span>
		<h5>	Droow Template </h5>
		<h2>	Droow Template </h2>
	</div>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="box2">
          <span class="lnr lnr-diamond box2__icon"></span>
          <h3 class="box2__title">Modern Design</h3>
          <p class="box2__text">If you are going to use a passage of Lorem Ipsum.</p>
        </div>
      </div>

    </div>
  </div>
</section>

Navbar

navbar item

To change the navbar item, open HTML file and replace the value of < a href="" class="nav-link dropdown-toggle">Main Demo > attribute of this construction:

<section class="header-controller">
  <div class="navbar navbar-expand-lg nav-overlay">
    <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle"></a>
    ...
  </div>
</section>

overlay

To change the background image, open HTML file and replace the value of data-overlay attribute of this construction:

<section id="header" class="cover-bg" data-overlay='8'>
  <div class="container">
    ...
  </div>
</section>

helper class

To add help Class, open scss file and open _header.scss and use modification class on any of the following:

  • Custom Margin
  • Custom Padding
  • line-height
  • letter-spacing

For example the helper class with "Custom Margin" style:

<section id="about" class="about mt-40  mb-0 section--padding">
  <div class="container">
    ...
  </div>
</section>

Sections

By default section have white background color, but you may change style:

section--grey – grey background color

<section class="section section--grey">
  <div class="container">
    ...
  </div>
</section>

section--gradient – gradient background

<section class="section section--gradient">
  <div class="container">
    ...
  </div>
</section>

pt-10 – section without an upper indent

<section class="section pt-10">
  <div class="container">
    ...
  </div>
</section>

cover-bg – section with static background image

<section class="section  cover-bg " data-image-src="img/bg-1.jpg">
  <div class="container">
    ...
  </div>
</section>

section with parallax image

<section class="section" data-src="img/section-bg/section-bg1.jpg" data-parallax>
  <div class="container">
    ...
  </div>
</section>

Color Scheme

To change color scheme, open HTML file and replace the value of href attribute

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

on any available (main-color1, main-color2, main-color3, main-color4, main-color5 or main-color6).

Animation

If you want to use appear inimation for some element, you need to add class animate to this element and set data attribute like this:

<div class="col-xs-12 animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.5s">
  ...
</div>

The full list of appear animation effects you can find here – Animate CSS

Support

If you have any questions, feel free to contact me at info@dsngrid.com.