ICO Crypto - ICO Landing Page & Multi-Purpose Cryptocurrency HTML Template + User Dashboard

  • Version: 1.9.5
  • Updated: 04/02/2022
  • By: Softnio

ICO Crypto is a modern and elegant landing page, created for ICO Agencies and digital crypto currency investment website.

ICO Crypto is based on Bootstrap 4, So it give you more flexible for customize. All files are clearly organised we believe it will be easy to use and edit them. Design is very clean, elegant and modern. Any one can customize this template as his wishes.

Thank you for purchasing our ICO Crypto Landing HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user profile contact form here. Thanks so much!

Geting Started

In our package folder you will see a file called _blank.html, Just duplicate this page and start adding your content.

Please check our elements page for styled html elements and pre-build components. Also all shorts of pages designed specily for ico management system, you can also start with pre-build pages and edit them as you see fit.

We're introducing new version (v1.5 or latest) of ICO Crypto Template. In this version we re-coded the new new template and it availabel fully separate. New template codes are more flexiable, re-usable, light-weight and specially block based design structure.

So please don't update your existing site code if you using any version before v1.5.0

HTML Files & Structure

V 1.5.0 (New 50 files)
  • index.html
  • index-gentian.html
  • index-gentian-pro.html
  • index-gentian-multi.html
  • index-gentian-multi-woa.html
  • index-gentian-woa.html
  • index-gentian-pro-woa.html
  • page-about.html
  • page-contact.html
  • page-faq.html
  • page-features.html
  • page-wallets.html
  • page-login.html
  • page-register.html
  • page-reset.html
  • page-login-v2.html
  • page-register-v2.html
  • page-reset-v2.html
  • page-roadmap.html
  • page-team.html
  • page-token-sale.html
  • blog-3clmn.html
  • blog-sidebar-right.html
  • blog-sidebar-left.html
  • blog-details.html
  • blog-details-full.html
  • element-accordian.html
  • element-alert.html
  • element-button.html
  • element-chart.html
  • element-color.html
  • element-content.html
  • element-countdown.html
  • element-form.html
  • element-grid.html
  • element-modal.html
  • element-notification.html
  • element-progress-bar.html
  • element-tab.html
  • element-table.html
  • element-video.html
  • element-typography.html
  • block-ath.html
  • block-banner.html
  • block-contact.html
  • block-faq.html
  • block-feature-card.html
  • block-feature-panel.html
  • block-footer.html
  • block-navbar.html
  • block-page-header.html
  • block-partner.html
  • block-roadmap.html
  • block-subscribe.html
  • block-team.html
  • block-token-info.html
  • _blank.html
V 1.6.0 (4 New files)
  • index-azalea.html
  • index-azalea-woa.html
  • index-azalea-multi.html
  • index-azalea-multi-woa.html
V 1.6.1 (Additional Block Added)
  • block-banner.html
  • block-contact.html
  • block-faq.html
  • block-feature-card.html
  • block-feature-panel.html
  • block-footer.html
  • block-partner.html
  • block-roadmap.html
  • block-team.html
  • block-token-info.html
V 1.7.0 (26 New files)
  • index-gentian-video.html
  • index-zinnia.html
  • index-zinnia-woa.html
  • index-salvia.html
  • index-salvia-woa.html
  • index-lungwort.html
  • index-lungwort-woa.html
  • index-jasmine.html
  • index-jasmine-woa.html
  • index-lobelia.html
  • index-lobelia-woa.html
  • index-muscari.html
  • index-muscari-woa.html
  • index-lavender.html
  • index-lavender-woa.html
  • index-azure-pro.html
  • index-azure-pro-woa.html
  • index-azure.html
  • index-azure-woa.html
  • index-dark-pro.html
  • index-dark-pro-woa.html
  • index-dark.html
  • index-dark-woa.html
  • index-light.html
  • index-light-woa.html
  • element-icon.html
V 1.8.0 (2 New files)
  • index-linum-wallet.html
  • index-flax-wallet.html
V 1.9.0 (4 New files)
  • index-crocus-multi.html
  • page-about-v2.html
  • page-wallets-v2.html
  • page-download.html
V 1.9.1 (17 New files)
  • index-cynus-multi.html
  • page-about-v3.html
  • page-contact-v2.html
  • page-mission.html
  • page-exchange.html
  • page-partner.html
  • page-career.html
  • coming-soon-azalea.html
  • coming-soon-gentian.html
  • coming-soon-gentian-alt.html
  • coming-soon-dark.html
  • coming-soon-light.html
  • error-404-azalea.html
  • error-404-gentian.html
  • error-404-gentian-alt.html
  • error-404-dark.html
  • error-404-light.html

68 New blocks added in block pages

            
<!DOCTYPE html>
<html lang="zxx" class="js">
<head>
<meta charset="utf-8">
<meta name="author" content="Softnio">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- Fav Icon  -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- Site Title  -->
<title>ICO Crypto - ICO Landing Page &amp; Multi-Purpose Cryptocurrency HTML Template</title>
<!-- Bundle and Base CSS -->
<link rel="stylesheet" href="assets/css/vendor.bundle.css?ver=150">
<link rel="stylesheet" href="assets/css/style.css?ver=150">
<!-- Color Scheme CSS -->
<link rel="stylesheet" href="assets/css/theme.css?ver=150" id="theming">
</head>
<body class="nk-body body-wider bg-light">
    <div class="nk-wrap">
        <header class="nk-header page-header is-transparent is-sticky" id="header">
            <!-- Banner @s -->
            <div class="header-banner">
                <div class="nk-banner">
                    <div class="banner banner-fs banner-single">
                        <div class="banner-wrap">
                            <div class="container">
                                <div class="row align-items-center justify-content-center">
                                </div><!-- .row -->
                            </div>
                        </div>
                    </div>
                </div><!-- .nk-banner -->
            </div>
            <!-- .header-banner @e -->
        </header>
        <main class="nk-pages">
            <section class="section section-l bg-light">
                <div class="container">
                    <!-- Section Head @s -->
                    <div class="section-head text-center wide-auto">
                    </div><!-- .section-head @e -->
                    <!-- Block @s -->
                    <div class="nk-block">
                        <div class="row justify-content-center">
                        </div><!-- .row -->
                    </div>
                    <!-- Block @r -->
                </div>
            </section>
            <!-- // -->
            <section class="section section-l bg-white">
                <div class="container">
                    <!-- Section Head @s -->
                    <div class="section-head text-center wide-auto">
                    </div><!-- .section-head @e -->
                    <!-- Block @s -->
                    <div class="nk-block">
                        <div class="row">
                        </div><!-- .row -->
                    </div><!-- .block @e -->
                </div>
            </section>
        </main>
        <footer class="nk-footer bg-theme-grad">
            <section class="section no-pdy section-contact bg-transparent">
            </section>
            <section class="section section-footer section-l tc-light bg-transparent">
            </section>
        </footer>
    </div>
    <div class="preloader"><span class="spinner spinner-round"></span></div>
<!-- JavaScript -->
<script src="assets/js/jquery.bundle.js?ver=150"></script>
<script src="assets/js/scripts.js?ver=150"></script>
<script src="assets/js/charts.js"></script>
</body>
</html>
 
                

CSS Files & Structure

All CSS are located in the "assets/css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:

Third-Party Vendor
  1. bootstrap
  2. font-awesome
  3. themify-icons
  4. magnific-popup
  5. select2
  6. owlcarousel
Used Files
  1. vendor.bundle.css
  2. style.css
  3. theme.css
10 Extra Color Preset added on v1.7.0
  1. style-azalea.css
  2. style-zinnia.css
  3. style-salvia.css
  4. style-lungwort.css
  5. style-jasmine.css
  6. style-lobelia.css
  7. style-muscari.css
  8. style-lavender.css
  9. style-azure.css
  10. style-dark.css

To use above presets, at first keep a backup of your main 'stlye.css' file and then rename your preferred stylsheet with a name of (style.css).

/*!
 * Theme Name: ICOCrypto
 * Author: Softnio
 * Author URI: http://themeforest.net/user/softnio
 * Version: 1.5.0
 * Updated: 02.09.2019
**/
/**
----------------------
## TABLE CONTNETS ##
01. Fonts
02. Utilities
--  02.1 Reset
--  02.2 Spacing
--  02.3 Colors
--  02.4 Misc
03. Elements
--  03.1 Buttons
04. Components
05. Layouts
06. Override
---------------------- **/
/** IMPORTANT NOTE: DO NOT Edit this file. Best to write own code in css/custom.css file. It will helps you to easy update of the template. */
/** 01. Fonts */
@font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Light.eot"); src: local("Roboto Light"), local("Roboto-Light"), url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Regular.eot"); src: local("Roboto"), local("Roboto-Regular"), url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Medium.eot"); src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Bold.eot"); src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; }
/** 02. Utilities */
/** 02.1 Reset */
html, body { font-family: "Roboto", sans-serif; color: #415076; font-size: 14px; line-height: 1.6; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media (min-width: 576px) { html, body { font-size: 16px; line-height: 1.6; font-weight: 300; } }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; }

*[hidden] { display: none; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote::after, blockquote::before, q::after, q::before { content: none; }

table { border-collapse: collapse; border-spacing: 0; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #1940b0; font-weight: 500; font-family: "Roboto", sans-serif; line-height: 1.3; margin-bottom: 0.5rem; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, .h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child { margin-bottom: 0; }
.tc-light h1, .tc-light a:not(.btn) h1, .tc-light h2, .tc-light a:not(.btn) h2, .tc-light h3, .tc-light a:not(.btn) h3, .tc-light h4, .tc-light a:not(.btn) h4, .tc-light h5, .tc-light a:not(.btn) h5, .tc-light h6, .tc-light a:not(.btn) h6, .tc-light .h1, .tc-light a:not(.btn) .h1, .tc-light .h2, .tc-light a:not(.btn) .h2, .tc-light .h3, .tc-light a:not(.btn) .h3, .tc-light .h4, .tc-light a:not(.btn) .h4, .tc-light .h5, .tc-light a:not(.btn) .h5, .tc-light .h6, .tc-light a:not(.btn) .h6 { color: #fff; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol, table { margin: 0; padding: 0; }

strong, b { font-weight: 500; }

a { outline: 0; transition: all 0.5s; color: #16a3fe; }
a:link, a:visited { text-decoration: none; }
a:hover, a:focus, a:active { outline: 0; color: #23c99d; }

img { max-width: 100%; height: auto; }

h1, .h1, .fz-1 { font-size: 2.75rem; }

h2, .h2, .fz-2 { font-size: 2.25rem; }

h3, .h3, .fz-3 { font-size: 1.87rem; }

h4, .h4, .fz-4 { font-size: 1.6rem; }

h5, .h5, .fz-5 { font-size: 1.2rem; }

h6, .h6, .fz-6 { font-size: 0.94rem; }
                

JavaScript Files & Structure

All JS are located in the "assets/js" folder of the template. Each JS File is well commented and easy to use and customize to your own needs. Here's the list of the JS files:

Third-Party Vendor
  1. jquery
  2. bootstrap
  3. jquery easing
  4. jquery countdown
  5. select2
  6. magnific-popup
  7. chart js
  8. form plugin
  9. form validation
  10. owlcarousel
  11. jquery scrollify
  12. particles
  13. toastr
  14. waypoint
Used Files
  1. jquery.bundle.js
  2. toastr.examples.js
  3. charts.js
  4. script.js
/*!
 * ICOCrypto v1.5.0 by Softnio.
**/
var NioApp = (function (jQ, win, doc){
    "use strict";
    var NioApp = {AppInfo: {name: "ICOCrypto", package: "1.5.0", version: "1.0.1", author: "Softnio"} },
        components = {docReady: [], docReadyDefer: [], winLoad: [], winLoadDefer: []};
 
    jQ(doc).ready(docReady);
    jQ(win).on("load", winLoad);
 
    NioApp.components   = components;
    NioApp.docReady  = docReady;
    NioApp.winLoad     = winLoad;
 
    return NioApp;
}(jQuery, window, document));
 
NioApp = function (NioApp, $, window, document) {
    "use strict";
// Defined Variables
    var $win = $(window),  
// is exists @v1.0
$.fn.exists = function () {
        return this.length > 0;
    };
    NioApp.components.docReady.push(NioApp.Util.classInit);
 
    // PreLoader !Util @v1.0
    NioApp.Util.preLoader = function () {
var $preloader  = $('.preloader'),
$spinner  = $('.spinner');
 
if ($preloader.exists()) {
            $body.addClass("page-loaded");
            $spinner.fadeOut(300);
            $preloader.delay(600).fadeOut(300);
        }
};
    // Browser Check !Util @v1.0
    NioApp.Util.browser = function() {
        var isChrome = !!window.chrome, 
        isFirefox = typeof InstallTrigger !== 'undefined',
        isIE = /*@cc_on!@*/false || !!document.documentMode, 
        isEdge = !isIE && !!window.StyleMedia, 
        isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
        isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
        if(isChrome == true) {
            $body.addClass('chrome');
        } else if (isFirefox){
            $body.addClass('firefox');
        }
    }
return NioApp;
}(NioApp, jQuery, window, document);
/* END @iO*/
                

How to Set Email Address for Form Important

First open the php file located into form folder. Files are 'contact.php', 'subscribe.php'. On the file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email.

// Enter Your Sitename
$sitename = 'your site';

// Enter your email addresses: @required
$emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );
If you want to add BCC / CC email address then just enable below line and update same way as email too.
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
//$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
If you want to use SMTP, please enable bellow line of code and upate with your smtp information.
//$mail->isSMTP();
//$mail->SMTPDebug = 0;
//$mail->Host = 'smtp_host';
//$mail->Port = 587;
//$mail->SMTPAuth = true;
//$mail->Username = 'smtp_user_name';
//$mail->Password = 'smtp_pass';

How To Use RTL Version

ICO Crypro supports RTL mode, You can use this for your RTL mode project. Here is the instruction for uses of RTL mode.

For use RTl, You just need to copy HTML files from folder of "rtl-html" and paste into your "main-html" folder. Remember it will ask you to replace existing HTML files, so if you do this you will loose reguler html version, please take a backup before this action

Caution : if you try to open HTMl file from "rtl-html" folder, then it will not work, these file only works when it open from "root/main-html" folder.

How To Use on Scroll Animation

At first add a class .animated to your elmement. Then add data-animate="fadeInUp", data-animate="fadeInDown", data-animate="fadeInLeft", data-animate="fadeInRight" For animation direction. Also use data-delay=".3" for animation start delay time.

How To Add or Remove Particale

To add particale just use div with a class .particles-bg and give it an id any-id-you-want

Also if you want to remove a particale then just find a div containing class .particles-bg and remove that element.