Start Implementation


Follow the steps below to setup your site template:
  1. Unzip the downloaded package and open the /HTML folder to find all the template files.There are 4 templates. You will need to upload these files to your hosting web server using FTP/cPanel in order to use it on your website.
  2. Below is the files/folders needs to be uploaded to your website root directory:
    • theme-assets/css - Contains stylesheet files
    • theme-assets/fonts - Font Icons files
    • theme-assets/images - template images
    • theme-assets/js - Javacript files
    • theme-assets/vendors - Vendor css & JS files
  3. You should upload all or specific HTML files as per your need.
  4. You're now good to go...! Start adding your content/images and generate your perfect ICO brand template for your users.
  5. Note: No need to upload SRC folder and Gulpfile.

    Note: Please use only assets folder for updation. That will overwrite your changes, Don't change theme-assets.

HTML Structure

This section contains HTML Structure to create perfect Crypto ICO layout. This layout has a navigation, content and diffrent sections which required to launch Crypto ICO with header & footer.

                <!doctype html>
    <html lang="en">
            <!-- title -->
            <meta charset="utf-8">
            <!-- description -->
            <meta name="description" content="">
            <!-- keywords -->
            <meta name="keywords" content="">
            <!-- favicon -->
            <!-- google Fonts -->
            <!-- vendor stylesheets  -->
            <!-- page level stylesheets  -->
            <!-- custom stylesheets  -->
            <!-- start header -->
                <!-- start navigation -->
                <nav class="main-menu static-top navbar-dark navbar fixed-top">
                <!-- end navigation -->
            <!-- end header -->
            <!-- start sections -->
            <!-- end sections -->
            <!-- start footer -->
                <div class="container">
            <!-- end footer -->
            <!-- vendor javascripts -->
            <!-- page vendor javascripts -->
            <!-- javascript libraries -->
            <!-- page level javascript libraries -->

Find Logo Container in the Nav Container .navbar class

                    <a class="navbar-brand animated fadeInDown" data-animation="fadeInDown" data-animation-delay="1s" href="#head-area">
                        <img src="images/logo.png" class="navbar-brand-logo" alt="Crypto Logo">
                        <img src="images/logo-dark.png" class="navbar-brand-logo-dark d-none" alt="Crypto Logo">
                        <span class="brand-text">Crypto ICO</span>

Favicon Settings

Image Settings

To change the favicon of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

                <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
                    <link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
                    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
                    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
                    <link rel="apple-touch-icon" href="images/apple-icon-120.png">

Image Settings

Image Settings

Crypto ICO download package contains images which are displayed in our online demo. You will see the image code as mentioned below. You can replace your images url with template image url like images/your_image.png

                   <img src="images/your_image_path.png" alt="image alt text">

Changing Fonts

Crypto ICO uses 1 font: Comfortaa from the Google Fonts Library. You can change the fonts from HTML files. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.

                    <!--Google Fonts-->
                    <link href=",400,500,700" rel="stylesheet">
                    <!--Font icons-->

Optimization Tips

Now a days fast & optimized website is must, so we would like to represent some optimization tips below which can affect your overall website speed:

gZip Compression & Browser Caching

This is probably one of the mostly used techniques you should definitely implement in order to increase your website's loading speed. gZip Compression is used to compress the Files that are delivered when loading a website. It includes HTML, CSS, Javascript & Font files along with other miscellaneous text files. This is used to save the static data in your browser itself so that when you open the next pages on the same website, the content does not gets downloaded again and hence further pages loads fast.

gZip compression & browser caching can be enabled using the .htaccess file on an Apache web server. You can use the codes from here: to enable these modules on your server.

Image Compression & Optimization

We normally use lots of images on our websites to make it look beautiful as well as easily understandable but it can make the website slow if we do not take care of image size. It is important to resize, optimize & compress your images before using it on your website. Here are some tips which can be helpful:

  • Resize your images: Resize your images before using it on your website. Do not just download an image & place it as it is in your website. The size/resolution of the image matters since it is not recommended to use an Image size of 1200px x 800px in a content size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px.
  • Image formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a flat background use JPEG images, for images with a transparent background use PNG images and for images with animations use GIF images.
  • Compressing images: Images compression is important as it considerably reduces the size without losing the quality. There are several FREE image optimization tools available to download.
    For MAC use ImageOptim
    For windows use riot for compressing JPEG images & PNG Gauntlet for PNG images.

CSS & jQuery Minifications

It is also a best practice to combine & minify all your CSS files to a single CSS file & all Javascript files to a single JS file as it reduces the size of the file and combining the files helps in reducing the number of HTTP requests made to the server. There are several tools available online to Minify your CSS & JS files.

We recommend to use CSS Minifier for CSS and use Javascript Minifier for JS.

Customize Header Expiry/Caching

By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time. It reduces the bandwidth needed and definitely help in serving the page faster.

Disable ETags

Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your .htaccess file: FileETags none
Note that this rule applies to sites that are in a server farm. If you’re using a shared host, you could skip this step, but we recommend that you do it regardless.

Content Delivery Network

You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font files. There are many CDN hosting providers available in the market but we would recommend MaxCDN or CloudFlare.

Note CDN setup requires extra monthly recurring fees to setup on your server.

Fast Web Hosting Servers

Website speed depends on your Web Hosting Servers also, so it is recommended that you choose a Hosting Company/Server that provides a reliable & a fast hosting service. You can refer some recommended hosting Services here: inmotion Hosting