CryptoCoin - Bitcoin Crypto Currency Wallet and Mining Template

CryptoCoin is a responsive HTML Template. This template is best for your Crypto Currency, Mining, Wallet, Exchange of Bitcoin related website. This Template is full customization options and lots features.

CryptoCoin is based on Bootstrap 1170px grid system. All files are clearly organised we believe it will be easy to use and edit them. The design is very clean, elegant and modern. Any one can customize this template as his wishes

Thank you for purchasing our Bitcoin Crypto Currency Wallet and Mining Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Features

• 1170 px bootstrap grid.
• Easy to customize.
• Fully Responsive.
• Modern and unique design.

Including page

• index.html
• index-wallet.html
• index-mining.html
• about.html
• blog.html
• blog-single.html
• buy-sell.html
• contact.html
• faqs.html
• market-data.html
• pricing.html
• pricing-table.html
• service.html
• service-single.html
• signup.html
• teams.html
• testimonial.html
• typography.html
• wallet-features.html
• work-process.html

Basic Structure:

	<body> 
    <!-- Header -->     <header class="site-header header-s1 is-sticky">         <!-- Topbar -->         <div class="topbar">         </div>         <!-- End Topbar -->         <!-- Navbar -->         <div class="navbar navbar-primary">         </div>         <!-- End Navbar -->         <!-- Banner/Slider -->         <div id="header" class="banner header-slider">         </div>         <!-- End Banner/Slider -->     </header>     <!-- End Header -->          <!-- BTC Ticker -->     <div class="btc-ticker">     </div>     <!-- End BTC Ticker -->          <!-- Features Box -->     <div class="features-box section section-pad">     </div>     <!--End Features Box -->          <!-- Section Footer -->     <div class="footer-section section section-pad-md has-bg light darker-filter bg-footer">     </div>     <!-- End Section -->          <!-- Copyright -->     <div class="copyright light">     </div>     <!-- End Copyright -->
</body>  

CSS Files:

All CSS are located in the "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
01. animate.css
02. bootstrap.min.css
03. font-awesome.min.css
04. owl.carousel.css
05. magnific-popup.css
06. pe-icon-7-stroke.css
---
Used Files
01. vendor.bundle.css
02. style.css
03. theme.css
---
Theme Files
01. theme.css
02. theme-blue.css
03. theme-cyan.css
04. theme-green.css
05. theme-purple.css
06. theme-yellow.css
---

CSS Structure Sample:

/*! 
Template Name: CryptoCoin
Author: Softnio
Version: 1.0.0
Update: 01.08.2018
*/
/*!
 * Table of Contents
 * 01.0 - Fonts
 * 02.0 - Reset
 * 03.0 - Utility
 * 04.0 - Common
 * 05.0 - Header/Navbar
 * 06.0 - Widgets
 * 07.0 - Forms
 * 08.0 - Buttons
 * 09.0 - Backgrounds
 * 10.0 - Tabs
 * 11.0 - Boxes
 * 12.0 - Blocks
 * 13.0 - Teams
 * 14.0 - Testimonials
 * 15.0 - Call to Action
 * 16.0 - Blogs
 * 17.0 - Contact
 * 18.0 - Steps
 * 19.0 - FAQ
 * 20.0 - Animation
 * 21.0 - Bitcoin Widgets
 */

Plugins:

All javascript are located in the "js" folder of the template

Third-Party Vendor
01. jquery.js
02. jquery.easing.min.js
03. bootstrap.min.js
04. form.plugins.js
05. magnific-popup.min.js
06. owl.carousel.min.js
---
Used Files
01. jquery.bundle.js
02. script.js

03. googleMap.js

Javascript code sample:

All javascript code are located in script.js file

/* Template    :    BitCo v1.0.0 */
;(function($){     'use strict';     var $win = $(window), $body_m = $('body');
    // Touch Class     if (!("ontouchstart" in document.documentElement)) {         $body_m.addClass("no-touch");     }
    // Get Window Width     function winwidth () {         return $win.width();     }     var wwCurrent = winwidth();     $win.on('resize', function () {         wwCurrent = winwidth();     });
    // Sticky     var $is_sticky = $('.is-sticky');     if ($is_sticky.length > 0 ) {         var $navm = $('#mainnav').offset();         $win.scroll(function(){             var $scroll = $win.scrollTop();             if ($win.width() > 991) {                 if($scroll > $navm.top+4 ){                   if(!$is_sticky.hasClass('has-fixed')) {$is_sticky.addClass('has-fixed');}                 } else {                   if($is_sticky.hasClass('has-fixed')) {$is_sticky.removeClass('has-fixed');}                 }             } else {                 if($is_sticky.hasClass('has-fixed')) {$is_sticky.removeClass('has-fixed');}             }         });     }
    // Nav collapse     $('.nav-item').on("click",function() {         $('.navbar-collapse').collapse('hide');     });
    //Carousel     var $has_carousel = $('.has-carousel');     if ($has_carousel.length > 0 ) {         $has_carousel.each(function(){             var $self = $(this);             var c_item = ($self.data('items')) ? $self.data('items') : 4;             var c_item_t = (c_item >= 3) ? 3 : c_item;             var c_item_m = (c_item_t >= 2) ? 2 : c_item_t;             var c_delay =($self.data('delay')) ? $self.data('delay') : 6000;             var c_auto =($self.data('auto')) ? true : false;             var c_loop =($self.data('loop')) ? true : false;             var c_dots = ($self.data('dots')) ? true : false;             var c_navs = ($self.data('navs')) ? true : false;             var c_ctr = ($self.data('center')) ? true : false;             var c_mgn = ($self.data('margin')) ? $self.data('margin') : 30;             $self.owlCarousel({                 navText: ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],                 items: c_item, loop: c_loop, nav: c_navs, dots: c_dots, margin: c_mgn, center: c_ctr,                 autoplay: c_auto, autoplayTimeout: c_delay, autoplaySpeed: 300,                 responsive:{ 0:{ items:1 }, 480:{ items: c_item_m }, 768:{ items: c_item_t }, 1170:{ items: c_item } }             });         });     } })(jQuery);

Google Map:

To change your location And change style of your google map, just follow those comments


Also you need change our Google map api key with yours. Get your api key from this link (Map API) then, go to bottom of your html page. replace your key with our key. note: if you don't do this then your file will work fine with your local page but you will be geting problem when you upload it on a web server.


// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
    // Basic options for a simple Google Map
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
    var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 14,
        // The latitude and longitude to center the map (always required)
        center: new google.maps.LatLng(40.6700, -73.9400), // New York
        // How you would like to style the map.
        // This is where you would paste any style found on Snazzy Maps.
        styles: []
    };
    // Get the HTML DOM element that will contain your map
    // We are using a div with id="gMap" seen below in the <body>
    var mapElement = document.getElementById('gMap');
    var map = new google.maps.Map(mapElement, mapOptions);
    
    // Let's also add a marker while we're at it
    marker = new google.maps.Marker({
        map:map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(40.6700, -73.9400), // Change those co-ordinates to yours.
        icon: '' // null = default icon
    });
}
Please Check the plugins documentation if you need to change any settings of our included library

First open the php file located into form folder. Files are 'contact.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' );

Javascript plugins:

jQuery :- https://jquery.com/
jQuery Easing:- http://gsgd.co.uk/sandbox/jquery/easing/
Owl Carousel 2 :- https://owlcarousel2.github.io/OwlCarousel2/
jQuery Form :- http://malsup.com/jquery/form/
jQuery Validation :- http://jqueryvalidation.org/
Magnific Popup :- https://github.com/dimsemenov/Magnific-Popup/

PHP

PHPMailer :- https://github.com/PHPMailer/PHPMailer/

Images From:

Pexel :- https://www.pexels.com/
DepositPhotos :- https://depositphotos.com/

Google Fonts:

Quicksand :- Quicksand
Open Sans :- Open Sans

Caution:
If you have order version, you can upgrade to newer version. Must aware upgrade process overwrite your custom code if you have already. So must keep backup before any process. Contact us if you face any problem.

Version 1.0.1 29 January, 2018

Add Color Variation and improve typography

New File Added and Update code:
+ theme.css
+ theme-blue.css
+ theme-cyan.css
+ theme-green.css
+ theme-purple.css
+ theme-yellow.css
@ javascript and stylesheet update regarding new improvement.

For updating your template to new version, you need to update javascript (script.js) and style sheet (style.css, theme.css, vendor.bundle.css).

Version 1.0 28 January, 2018

Initial Released Template