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!
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
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 & 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>
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:
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; }
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:
/*! * 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*/
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' );
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' ); //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
//$mail->isSMTP(); //$mail->SMTPDebug = 0; //$mail->Host = 'smtp_host'; //$mail->Port = 587; //$mail->SMTPAuth = true; //$mail->Username = 'smtp_user_name'; //$mail->Password = 'smtp_pass';
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.
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.
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.