BuyCoin Documentation

Hello! Thank you for purchasing!

Created: 16/12/2017 By: Dmitry Volkov Email: [email protected]

Getting Started

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

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

  • index1.html — landing page style 1.
  • index2.html — landing page style 2.
  • index3.html — landing page style 3.
  • index4.html — landing page style 4.

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

HTML structure

In my theme 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">
  <div class="container">
    <div class="row">

      <div class="col-xs-12">
        <h2 class="section__title">BuyCoin Template</h2>
        <span class="section__tagline">Excellent for your business</span>
      </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>

Home

Slider

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

<section id="home" class="home">
  <div class="owl-carousel home__slider">
    <div class="item" data-bg="img/home/slide.jpg"></div>
    ...
  </div>
</section>

Parallax

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

<section id="home" class="home" data-parallax="scroll" data-image-src="img/home/slide.jpg">
  <div class="container">
    ...
  </div>
</section>

Static

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

<section id="home" class="home section--bg" data-bg="img/home/slide.jpg">
  <div class="container">
    ...
  </div>
</section>

About

To change section style, open HTML file and replace modification class on any of the following:

  • about--wave
  • about--arrow
  • about--angle
  • about--angle2

For example the about section with "arrow" style:

<section id="about" class="about about--arrow section--gradient">
  <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>

section--pt0 – section without an upper indent

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

section--bg – section with static background image

<section class="section section--bg" data-bg="img/section-bg/section-bg1.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 [email protected].