Getting Started

Thank you very much for buying our template. We have prepared an user-friendly documentation to help you quickly customize Cryptency ICO landding page template. We hope that you can work with our template easily and that you will have a lot of success with this template.

We are hopefully that you will love the template as much as we do. We try our best to prepare a special landing page with nice features and lovely style. Your opinion is very important for us and we will appreciate if you can rate and review Cryptency ICO Landing Page on ThemeForest Rating Page.

If you have any questions that aren’t stated in this documentation, feel free to contact us at our Pixel Speaks Envato Page where we can provide more detailed support.

Thank you so much and have fun with our template!
Team Pixel Speaks

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be a folder with documentation and a folder "assets" with the html templates. Upload the assests folder to your server via FTP client.

What's Included

  • assets
    • cryptency-light
      • cssContaining all css files
      • imagesHere is a place to put your media files like logo, images, etc.
      • jsContaining all js files
      • index.html Main HTML File
      • contact-mail.php Mail function PHP file for Contact Form
      • newsletter.php Mail function PHP file for Newsletter Form
      • .htaccess Configuration File
      • favicon.icon Favicon Icon

HTML page sturture

code preview

Components

Preloader

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section.

<div class="site-loader">
<div class="loader-dots">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
</div>

Favicon

Favicon is an icon associated with URL that is displayed at various places such as in a browser’s address bar or next to the site name in a bookmark list. Following code is for favicon, to change just place your favicon.png file in images folder

<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

Basic Styling

Color Scheme

Cryptency ICO templates uses multiple color for heading, sub headings, backgrounds and paragrpahs.

To change the color scheme find the respective class name in main.css file and replace # color with your color

<!--=============== Light Verstion color scheme =============-->
<!---- Light blue font ---->
.template-color {
color: #6E7FF3;
}

<!---- Dark blue background ---->
. template-bg {
background-color: #3D4E81;
color: #fff;
}

<!---- Light background ---->
.light-bg {
background-color: #f5faff;
}

<!---- Dark background ---->
.dark-bg {
background-color: #F1F5FF;
}

<!---- Gradient blue background ---->
.gradient-bg, .banner:after, .contact-form {
background: linear-gradient(-225deg, #3D4E81 0%, #5753C9 60%, #6E7FF3 100%);
color: #fff;
}

<!---- Gray light background ---->
.gray-light-bg {
background-color: #f9f9f9;
}
<!--=============== Dark Verstion color scheme =============-->
<!---- Dark Blue Background ---->
.dark-template-bg {
background-color: #171e31;
color: #fff; }

<!---- Light Blue Background ---->
.dark-template-light-bg {
background-color: #1b2238;
color: #fff; }

<!---- Medium Blue Background ---->
.dark-template-medium-bg {
background-color: #1d253d;
color: #fff; }

<!---- Light blue font ---->
.template-color {
color: #6E7FF3;
}

<!---- Gradient blue background ---->
.gradient-bg, .banner:after, .contact-form {
background: linear-gradient(-225deg, #3D4E81 0%, #5753C9 60%, #6E7FF3 100%);
color: #fff;
}

Font

Cryptency ICO template uses "Nunito sans-serif" Google WebFont. You can choose other fonts available in google fonts

To change fonts import google fonts in main.css file in css folder replace the font-family in body class in main.css file

You can learn more about how to use google fonts here

<!---- imported goole font path in main.css ---->
@import "https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800";

<!---- body where font family is used in main.css ---->
body {
font-family: 'Nunito', sans-serif;
color: #3D4E81;
}

Button

Cryptency ICO templates uses 3 different type of Buttons btn-alpha (dark blue button), btn-white (white border button), menu-btn (header button)

To change button color scheme find the respective class in main.css file and replace the # color code with your color

<!---- Gloable css for all button button size, font size, padding etc ---->
.btn-alpha, .btn-white, .menu-btn {
transition: 0.2s ease;
border-radius: 50px;
padding: 0 30px !important;
border: none;
box-shadow: 0px 3px 19px rgba(0, 0, 0, 0.07);
font-weight: 800;
display: inline-block;
line-height: 40px !important;
font-size: 0.85em;
text-transform: uppercase; }

<!---- Blue gradient background button---->
.btn-alpha {
background: linear-gradient(-225deg, #3D4E81 0%, #6E7FF3 100%);
color: #fff !important; }
<!---- Blue gradient background button hover effect ---->
.btn-alpha:hover {
background: linear-gradient(225deg, #3D4E81 0%, #6E7FF3 100%); }

<!---- css for white border button---->
.btn-white, .menu-btn {
color: #fff;
border: 2px solid #fff; }
<!---- white border button hover effect---->
.btn-white:hover, .menu-btn:hover {
background-color: #fff !important;
color: #3D4E81 !important; }

Page Layout

We have followed Bootstrap standard layout

<div class="container">
<div class="row">
<div class="col-md-X">
.......
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->

<div class="col-md-X"> Define how many columns you want in row, Where X is value from 1 to 12.

Some Example layout for Page column

One Half <div class="col-md-6">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Half <div class="col-md-6">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Third <div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Third <div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Third <div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

Elements

Count Down

Cryptency ICO template use jquery basic count down.

You can easily change the ICO date, you just need to go to main.js file in js folder and find the following code

/*---- Add you ICO date and time here---*/
var endTime = new Date("September 10, 2018 18:00:00 PDT");
var endTime = (Date.parse(endTime)) / 1000;
var now = new Date();
var now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (days < "10") { days = "0" + days; }
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$(".days").html(days + "Days");
$(".hours").html(hours + "Hours");
$(".minutes").html(minutes + "Minutes");
$(".seconds").html(seconds + "Seconds");
}
setInterval(function() { makeTimer(); }, 1000);
var NavBar = $('.navbar ');

In above code where it's showing var endTime = new Date("September 10, 2018 18:00:00 PDT"); replace current date and time with your date and time.

Contact form

To connect the newsletter subscribe form to your email account please enter your email address into the contact-mail.phpfile under :$recipient = "youremail@gmail.com";

Additionally you are able to change the subject line of the email you will get after sending a message for this please use the php line: $subject = "Your Subject $email";

code preview

Template Sections

Cryptency ICO template have many other sections, to make changes in section like about, services, faq, testimonial etc, go to respective section and make required changes. HTML is properly commented and arranged section wise, so we sure you will be easily make necessary changes

Helper Classes

We have created some really useful helper classes for you. These classes helps you to quick position elements without writing new css rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Class Description Class Description
.m0 which means margin 0px .m1 which means margin 10px
.m2 which means margin 20px .m3 which means margin 30px
.m4 which means margin 40px .m5 which means margin 50px
.m6 which means margin 60px
.mt0 which means margin top 0px .mt1 which means margin top 10px
.mt2 which means margin top 20px .mt3 which means margin top 30px
.mt4 which means margin top 40px .mt5 which means margin top 50px
.mt6 which means margin top 60px
.mb0 which means margin bottom 0px .mb1 which means margin bottom 10px
.mb2 which means margin bottom 20px .mb3 which means margin bottom 30px
.mb4 which means margin bottom 40px .mb5 which means margin bottom 50px
.mb6 which means margin bottom 60px
.ml0 which means margin left 0px .ml1 which means margin left 10px
.ml2 which means margin left 20px .ml3 which means margin left 30px
.mb4 which means margin left 40px .ml5 which means margin left 50px
.ml6 which means margin left 60px
.mr0 which means margin right 0px .mr1 which means margin right 10px
.mr2 which means margin right 20px .mr3 which means margin right 30px
.mr4 which means margin right 40px .mr5 which means margin right 50px
.mr6 which means margin right 60px
.p0 which means padding 0px .p1 which means padding 10px
.p2 which means padding 20px .p3 which means padding 30px
.p4 which means padding 40px .p5 which means padding 50px
.p6 which means padding 60px
.pl0 which means padding left 0px .pl1 which means padding left 10px
.pl2 which means padding left 20px .pl3 which means padding left 30px
.pl4 which means padding left 40px .pl5 which means padding left 50px
.pl6 which means padding left 60px
.pr0 which means padding right 0px .pr1 which means padding right 10px
.pr2 which means padding right 20px .pr3 which means padding right 30px
.pr4 which means padding right 40px .pr5 which means padding right 50px
.pr6 which means padding right 60px
.plr1 which means padding left right 10px .plr2 which means padding left right 20px
.plr3 which means padding left right 30px .plr4 which means padding left right 40px
.plr5 which means padding left right 50px .plr6 which means padding left right 60px