Arda

Bitcoin and Cryptocurrency ICO Template

Overview

Arda – Bitcoin Cryptocurrency ICO Template consist of 4 different layouts and 4 pre-prepared colors with prepared Bootstrap framework. You can easily customize the template and colors.

We continue to add new things to make our template more beautiful and strong every day. You will be free to use all our updates.

Quick Start

  1. Download the latest template source from ThemeForest.
  2. Extract zip file. Extracted zip file will have 43folders.
    • documentation
    • html
    • scss
  3. Download and install Node.js from nodejs.org/en/download/
  4. Start command prompt window or terminal and change directory to
npm install –global gulp-cli
cd /YourTemplateDirectory
npm install
gulp watch

So you will run Gulp to make SCSS developments. Using Gulp to develop SCSS is not compulsory, you can choose another method. https://sass-lang.com/install

Ready Color Usage

This template comes with 4 different colors prepared in advance, these colors are called purple, green, dark and blue. There are 2 things you need to do to change the color of the template you are using.

1- You must change the style file located between <head></head> tags. Listed below.

<link href="assets/css/purple.css" rel="stylesheet" type="text/css">
<link href="assets/css/green.css" rel="stylesheet" type="text/css">
<link href="assets/css/dark.css" rel="stylesheet" type="text/css">
<link href="assets/css/blue.css" rel="stylesheet" type="text/css">

2- You must change the particle js file found before the </body> tag. Listed below.

<script src="assets/js/particle-purple.js"></script>
<script src="assets/js/particle-green.js"></script>
<script src="assets/js/particle-dark.js"></script>
<script src="assets/js/particle-blue.js"></script>

Creating Your Own Color Chambers

Customizing color in our template is very simple. Just replace the theme-***.scss file in your scss folder with your own colors.

// General Colors
$primaryColor: #747FEB;
$secondaryColor: #FB236A;

// Gradient Colors
$gradientDark: #516093;
$gradientLight: #7A88F1;

//Heading Color
$headingDark: #3B566E;
$headingLight: #ffffff;

// Text Colors
$textDark: #6F8BA4;
$textLight: #D5D8F3;

Token Purchase Input Spinner

This tool has been specially developed for the template. By default, 100 is incremented or decremented. To customize, you can change the data-step = "100" line.

<div class="token-input">
     <input type="text" placeholder="100" data-step="100" />
     <i class="fa fa-plus"></i>
     <i class="fa fa-minus"></i>
     <button>PURCHASE TOKEN NOW</button>
</div>

Countdown Usage

The Countdown plugin counts down for a specific date. To set your date, you need to modify assets/js/custom.js file. Your date format must be MM/DD/YYYY H:M:S

if($('.countdown').length){
    $('.countdown').downCount({
         date: '07/05/2018 12:00:00',
         offset: +10
    });
}

Token Progress Usage

Token progress has been specially developed for this template. You should change the number in percentage (%) in data-position="25%" to mark the location of important developments.

<div class="token-progress">
    <ul id="test">
        <li class="progress-active" data-progress="50%"></li>
        <li class="item complate" data-position="0%">
            <strong>0</strong>
            <span>Start</span>
        </li>
        <li class="item complate" data-position="25%">
            <strong>$2 M</strong>
            <span>Pre Sale</span>
        </li>
        <li class="item complate" data-position="48%">
            <strong>$12 M</strong>
            <span>Soft Cap</span>
        </li>
        <li class="item" data-position="73%"></li>
    </ul>
</div>

Credits