Introduction
Thank you! for buying one of our template, if you find any kind of issue or bug don't hesitate on contact us. We will resolve your problem as soon as possible.
Template information:
- Name: CryptoHouse
- Author: Electronthemes
- Language: HTML, CSS, Javascript, jQuery
- Demo: CryptoHouse
- Created: 03 March 2021
- Update: 04 June 2023
- Version: 4.0.0
Pages
- Home(homepage.html)
- Pages
- Homepage
- Homepage 01(homepage.html)
- Homepage 02(homepage2.html)
- Homepage 03(homepage-three.html)
- Landing Page 01(homepage-four.html)
- Landing Page 02(homepage-six.html)
- Landing Page 03(homepage-five.html)
- Landing Page 04(homepage-seven.html)
- About
- About 01(about.html)
- About 02(about2.html)
- Token
- Token 01(token.html)
- Token 02(token2.html)
- Statistics
- Statistics 01(statistic.html)
- Statistics 02(statistic2.html)
- Roadmap
- Roadmap 01(roadmap.html)
- Roadmap 02(roadmap2.html)
- Team
- Team 01(team-one.html)
- Team 02(team2.html)
- Blog
- Blog(blog.html)
- Blog Details (blog-details.html)
- Contact
- Contact 01(contact.html)
- Contact 02(contact2.html)
- Error
- Error 01(error.html)
- Error 02(error2.html)
- Homepage
- Megamenu
- Header List
- Header One(blog.html)
- Header Two(homepage2.html)
- Header Three(blog.html)
- Header Four(header-four.html)
- Header Five(header-five.html)
- Footer List
- Footer One(homepage.html)
- Footer Two(blog.html)
- Footer Three(footer-three.html)
- Footer Four(homepage2.html)
- Footer Five(footer-five.html)
- Header List
- Blog(blog.html)
- Market Cap(market-cap.html)
- Shortcode(short-code.html)
- Signin(sign-in.html)
- Signup(signup.html)
Installation
Follow the steps below to get started with your Site Template:
- Unzip the downloaded zip file
cryptohouse.zipfolder - File Location:
│ Documentation │ cryptohouse │ │ devolopment file │ │ main-file │ │───.html │ └───assets │ │ css │ │ fonts │ │ img │ │ js │ │ scss - Open folder named
cryptohouse > main-file - You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below
You uploaded file structure for server
│ main-file │ │ .html │ └───assets │ │ css │ │ fonts │ │ img │ │ js │ │ scssassets/css- Extra Stylesheets Folder plus Main Stylesheet Fileassets/img- Images Folderassets/js- Javacripts Folderassets/scss- SCSS Folder ( who knows scss and want to use ).htmlextension files - Inner pages Files
.htmlextension files. - You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.
To install this html template in your server, follow the instructions:
Normal installation
- Downloaded template files from themeforest downloads
- Main html files contains in the folder main-file
- Upload the file in your server
Upload files using cpanel
- Downloaded template files from themeforest downloads
- Main html files contains in the folder main-file
- Open the folder in File Manager where you want to upload
Upload files using FTP
- Downloaded template files from themeforest downloads
- Main html files contains in the folder main-file
- Open the folder in FTP Client where you want to upload. I use Cyberduck to upload
Development Files
If you are a developer, you can use development-file to edit with Gulp and SCSS. Follow the instructions below:
Run Gulp
In this template, Gulp is used for building HTML files. If you don't know about Gulp, you can visit here
To run file using development file, follow the instructions:
- Install NodeJS from here if you don't have installed in your computer
- Open terminal and go to folder path
- Check node version
node -v - Install SASS globally
npm install -g sass - Install yarn globally
npm install -g yarn. ( If you want to use yarn) - Install gulp globally
npm install --global gulp-cli - Run
npm installoryarn - Run
npm run startoryarn start
Now. You are ready to customize the html template in the Development files. Edit all the file in the .twig for html code and edit .scss files for css styles. You will get dist folder where html file will
be generated
Customization
CSS used
<!-- All plugin css Include This File ______________________________________ --> <link rel="stylesheet" href="assets/css/base-style.css"> <!-- All Custom css Include This File ______________________________________ --> <link rel="stylesheet" href="assets/css/style.css">
Javascript Plugins used
<!-- Jquery --> <script src="assets/js/jquery-3.3.1.min.js"></script> <script src="assets/js/jquery-migrate-3.0.0.min.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- aos js --> <script src="assets/js/aos.js"></script> <!-- countdown js --> <script src="assets/js/jquery.countdown.min.js"></script> <!-- Magnific POPUP JS --> <script src="assets/js/jquery.magnific-popup.min.js"></script> <!-- Modal Video --> <script src="assets/js/owl-carousel/modal-video.min.js"></script> <!-- Moment JS --> <script src="assets/js/moment.min.js"></script> <!-- Nodes JS --> <script src="assets/js/nodes.js"></script> <!-- Owl Carousel js --> <script src="assets/js/owl.carousel.min.js"></script> <!-- waypoints js --> <script src="assets/js/waypoints.min.js"></script> <!-- scrollspy JS --> <script src="assets/js/scrollspy.js"></script> <!-- Custom js --> <script src="assets/js/scripts.js"></script>
HTML Structure
Megaone follows a simple coding structure. here is the sample:
<!DOCTYPE html> <html dir="ltr" lang="en"> <!-- All your metas will be here --> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <!-- Your Stylesheets, Title --> </head> <body> <!-- Header --> <header class="ch-header-sec"> <!-- Copyrights --> </header> <!-- Site Content --> <section> <div class="container"> ... </div> </section> <!-- Footer --> <footer> <div class="container"> <!-- Copyrights --> </div> </footer> <!-- Your All Scripts will be here --> </body> </html>
Jqurey Stauture
we have used User-friendly jqurey script.if you close any function just go to script.js init:function()list and close any function.this script is not working
(function($) {
var allfunction = {
[function-name]: () => {
},
init: function() {
allfunction.[function-name]()
},
}
$(document).ready(function() {
allfunction.init();
});
})(jQuery);
Favicons & Apple Touch Icons
You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:
<link rel="icon" href="assets/img/favicon.ico" sizes="16x16">
You can add Apple Touch Icons to your Website using the following code:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Logo Settings
The Logo Container can be found in the header-area. You can change the following markup.
Image Logo
<!--header-logo-->
<a href="homepage.html " class="h-logo pe-3">
<img src="assets/img/logo.svg" alt="Logo">
</a>
Text Logo
<!--header-logo-->
<a href="homepage.html " class="h-logo">logo</a>
Changing Fonts
Change your Fonts from Google Fonts Library directly if you plan to use a Google Font. You can find the Linking to the Font Files in the assets/css/base-style.css file.
@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800&display=swap");
In order to change the Fonts, you will need to Edit the Above Links with your Custom Font, if you plan to use a Google Font or Remove it completely if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.
By default, Megaone uses two Fonts namely: Mukta from the Google Fonts Library
Image to svg convert
We have create all icon img to svg convert.if you used .svg extension img.this script have convert svg file in your img.
Warning if you remove this script. Cryptohouse all icon default black color.icon not change any color
function jetix_svg() {
jQuery('img').each(function() {
var jQueryimg = jQuery(this);
var imgClass = jQueryimg.attr('class');
var imgURL = jQueryimg.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var jQuerysvg = jQuery(data).find('svg');
// Add replaced image's classes to the new SVG
if (typeof imgClass !== 'undefined') {
jQuerysvg = jQuerysvg.attr('class', imgClass + ' replaced-svg');
}
jQuerysvg = jQuerysvg.removeAttr('xmlns:a');
// Replace image with new SVG
jQueryimg.replaceWith(jQuerysvg);
}, 'xml');
});
}
$(document).each(function() {
jetix_svg();
})
Css Variable
We have used all colorbackground-color and font-familly used Css Variable.simple if you change any one just go scss folder and find _variables.scssyou change
any one variable.your site fully change.its just awosome and User-friendly
:root{
--ff-primary: 'Mukta', sans-serif;
}
html[data-theme="light"]{
--body-bg: #ffffff;
--body-color: #555555;
--menu-bg: #ffffff;
--primary: #FF002E;
--primary-gradient: linear-gradient(180deg, #FF7A00 -12.44%, #FF002E 100%);
--primary-gradient2: linear-gradient(90deg, #FF002E 0%, #FF7A00 100%);
--primary-light: #FFF2F5;
--secondary: #000349;
--secondary-alpha: 0, 3, 73;
--secondary-gradient: linear-gradient(90deg, #000349 0%, #005B8E 100%);
--secondary-gradient2: linear-gradient(179.09deg, #000349 -1.11%, #005B8E 99.25%);
--success: #00B2FF;
--success-alpha: 0, 178, 255;
--success-gradient: linear-gradient(90deg, #00B2FF 0%, #00FFC2 100%);
--heading: #121B25;
--paragraph: #555555;
--border: #dadada;
--border-light: #bcbcbc;
--border-light-alpha: 188, 188, 188;
--menu-color: #0E0F1B;
--white: #ffffff;
--black: #000000;
--black-gradient: linear-gradient(#000000, #000000);
--black-alpha: 0, 0, 0;
--white-permanent: #ffffff;
--white-alpha: 255, 255, 255;
--gray: #c4c4c4;
--gray-alpha: 196, 196, 196;
--light-gray: #F9F9F9;
--light-gray-alpha: 249, 249, 249;
--footer-bg: #ffffff;
--copyright-color: #666666;
--copyright-bg: #F9F9F9;
--title-watermark: rgba(85, 85, 85, 0.15);
--card-bg: #ffffff;
}
Page Elements
You can customize the template very easily. It is customize header, footer and other template
Header
We have used 5 different header in this template.please check Cryptohouse header list and choice your attractive header
Note: If you don't choice radious shape header please find .ch-header div and remove .rounded-100 class
- Innercurve Header One:If you choice this Header please copy this code and use anywhere in Cryptohouse Template.
<div class="innerpage-header-sec header-one"> <header class="ch-header-sec"> <div class="container-fluid"> <div class="header-top py-2"> <p>Bitcoin Rate $1756.38 <i class="icofont-long-arrow-up"></i> 17.65%</p> <div class="h-lang"> <span class="lang-text">Language</span> <div class=""> <label class="lang-item"> <input type="radio" name="lang"> <span>BN</span> </label> <label class="lang-item"> <input type="radio" name="lang" checked> <span>EN</span> </label> <label class="lang-item"> <input type="radio" name="lang"> <span>RU</span> </label> </div> </div> </div> <div class="ch-header rounded-100 py-2 py-xl-0"> <a href="" class="h-logo pe-3"> <img src="assets/img/logo.svg" alt="Logo"> </a> <div class="header-right"> <div class="h-menu-wrap d-none d-xl-block"> <ul class="h-menu"> <li><a href="homepage.html" class="active">Home</a></li> <li><a href="">Pages</a></li> <li><a href="token.html">Megamenu</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="menu-trigger d-xl-none"> <span></span> <span></span> <span></span> </div> <div class="h-btn d-none d-xl-block ms-xl-4"> <a href="sign-in.html" class="btn btn-primary rounded-40"> Sign In </a> <a href="signup.html" class="text-heading fw-semibold ms-3"> Sign Up </a> </div> </div> </div> </div> <div class="mobile-menu-wrap d-xl-none"> <div class="menu-close"> <i class="icofont-close-line"></i> </div> <div class="mobile-menu"></div> <div class="my-4"> <a href="" class="btn btn-primary rounded-40 me-3"> Sign In </a> <a href="" class="btn btn-primary rounded-40"> Sign Up </a> </div> </div> </header> </div>
- Innercurve Header Two:If you choice this Header please copy Innercurve Header One code.If you choice This header Background just Find
.innerpage-header-sec .header-oneClass and Replace.innerpage-header-sec .ch-banner-secClass.
- Innercurve Header Three:If you choice this Header please copy this code and use anywhere in Cryptohouse Template.
<header class="ch-header-sec"> <div class="container-fluid"> <div class="header-top py-2"> <p>Bitcoin Rate $1756.38 <i class="icofont-long-arrow-up"></i> 17.65%</p> <div class="h-lang"> <span class="lang-text">Language</span> <div class=""> <label class="lang-item"> <input type="radio" name="lang"> <span>BN</span> </label> <label class="lang-item"> <input type="radio" name="lang" checked> <span>EN</span> </label> <label class="lang-item"> <input type="radio" name="lang"> <span>RU</span> </label> </div> </div> </div> <div class="ch-header rounded-10 bg-white box-shadow px-3 py-2 py-xl-0"> <a href="" class="h-logo pe-3"> <img src="assets/img/logo.svg" alt="Logo"> </a> <div class="header-right"> <div class="h-menu-wrap d-none d-xl-block"> <ul class="h-menu"> <li><a href="homepage.html" class="active">Home</a></li> <li> <a href="">Pages</a></li> <li><a href="token.html">Megamenu</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="menu-trigger d-xl-none"> <span></span> <span></span> <span></span> </div> <div class="h-btn d-none d-xl-block ms-xl-4"> <a href="" class="btn btn-secondary rounded"> Sign In </a> <a href="" class="text-heading fw-semibold ms-3"> Sign Up </a> </div> </div> </div> </div> <div class="mobile-menu-wrap d-xl-none"> <div class="menu-close"> <i class="icofont-close-line"></i> </div> <div class="mobile-menu"></div> <div class="my-4"> <a href="" class="btn btn-secondary me-3"> Sign In </a> <a href="" class="btn btn-secondary"> Sign Up </a> </div> </div> </header>
- Innercurve Header Four:If you choice this Header please copy this code and use anywhere in Cryptohouse Template.
Note:If you don't Need Background Image just remove<div class="py-100 mb-5" style="background:url(assets/img/3.jpg) no-repeat scroll center/cover">This div and start to<header></header>tag.
<div class="py-100 mb-5" style="background:url(assets/img/3.jpg) no-repeat scroll center/cover"> <header class="ch-header-sec"> <div class="container-fluid"> <div class="header-top bg-gray px-3 py-2 py-xl-0"> <div class="h-lang"> <span class="lang-text">Language</span> <div class=""> <label class="lang-item"> <input type="radio" name="lang"> <span>BN</span> </label> <label class="lang-item"> <input type="radio" name="lang" checked> <span>EN</span> </label> <label class="lang-item"> <input type="radio" name="lang"> <span>RU</span> </label> </div> </div> <p>Bitcoin Rate $1756.38 <i class="icofont-long-arrow-up"></i> 17.65%</p> <div class=""> <a href="" class="lang-text">Log In</a> <a href="" class="text-heading">Sign Up</a> </div> </div> <div class="ch-header bg-white box-shadow px-3 py-2 py-xl-0"> <a href="" class="h-logo pe-3"> <img src="assets/img/logo.svg" alt="Logo"> </a> <div class="header-right"> <div class="h-menu-wrap d-none d-xl-block"> <ul class="h-menu"> <li><a href="homepage.html" class="active">Home</a></li> <li><a href="">Pages</a></li> <li><a href="token.html">Megamenu</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="menu-trigger d-xl-none"> <span></span> <span></span> <span></span> </div> <div class="h-btn d-none d-xl-flex ms-xl-4"> <a href="" class="btn btn-secondary me--1"> Sign In </a> <a href="" class="btn btn-primary ms--1"> Sign Up </a> </div> </div> </div> </div> <div class="mobile-menu-wrap d-xl-none"> <div class="menu-close"> <i class="icofont-close-line"></i> </div> <div class="mobile-menu"></div> <div class="my-4"> <a href="" class="btn btn-secondary me-3"> Sign In </a> <a href="" class="btn btn-secondary"> Sign Up </a> </div> </div> </header> </div>
- Innercurve Header Five:If you choice this Header please copy this code and use anywhere in Cryptohouse Template.
Note:If you don't Need Background Image just remove<div class="py-100" style="background:url(assets/img/4.jpg) no-repeat scroll center/cover">This div and start to<header></header>tag.
<div class="py-100" style="background:url(assets/img/4.jpg) no-repeat scroll center/cover"> <header class="ch-header-sec"> <div class="container-fluid"> <div class="header-top bg-white px-3 py-2 py-xl-0"> <p>Bitcoin Rate $1756.38 <i class="icofont-long-arrow-up"></i> 17.65%</p> <div class="h-lang"> <span class="lang-text">Language</span> <div class=""> <label class="lang-item"> <input type="radio" name="lang"> <span>BN</span> </label> <label class="lang-item"> <input type="radio" name="lang" checked> <span>EN</span> </label> <label class="lang-item"> <input type="radio" name="lang"> <span>RU</span> </label> </div> </div> </div> <div class="ch-header bg-secondary-gradient box-shadow ch-header-special header-light"> <a href="" class="h-logo"> <img src="assets/img/logo.svg" alt="Logo"> </a> <div class="header-right px-3 py-2 py-xl-0"> <div class="h-menu-wrap d-none d-xl-block"> <ul class="h-menu"> <li><a href="homepage.html" class="active">Home</a></li> <li><a href="">Pages</a></li> <li><a href="token.html">Megamenu</a> </li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="menu-trigger d-xl-none"> <span></span> <span></span> <span></span> </div> <div class="h-btn d-none d-xl-block ms-xl-4"> <a href="" class="btn btn-light rounded"> Sign In </a> <a href="" class="text-white fw-semibold ms-3"> Sign Up </a> </div> </div> </div> </div> <div class="mobile-menu-wrap d-xl-none"> <div class="menu-close"> <i class="icofont-close-line"></i> </div> <div class="mobile-menu"></div> <div class="my-4"> <a href="" class="btn btn-secondary me-3"> Sign In </a> <a href="" class="btn btn-secondary"> Sign Up </a> </div> </div> </header> </div>
Footer
We have used 5 different Footer in this template.please check Cryptohouse Footer list and choice your attractive Footer
- Cryptohouse Footer One:If you choice this Footer please copy this code and use anywhere in Cryptohouse Template.
<footer class="bg-secondary-gradient"> <div class="footer-sec pt-50"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 py-4"> <div class="footer-widget"> <a href="" class="footer-logo mb-4"> <img src="assets/img/logo-white.svg" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non, lobortis in in tortor nam pulvinar elementum.</p> <div class="social-icons"> <a href=""> <i class="icofont-facebook"></i> </a> <a href=""> <i class="icofont-twitter"></i> </a> <a href=""> <i class="icofont-instagram"></i> </a> <a href=""> <i class="icofont-youtube-play"></i> </a> </div> </div> </div> <div class="col-lg-3 col-sm-6 py-4"> <div class="footer-widget"> <h4 class="footer-widget-title">Sitemap</h4> <ul class="footer-widget-menu column-2"> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Token</a></li> <li><a href="">Statistic</a></li> <li><a href="">Roadmap</a></li> <li><a href="">Team</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> <div class="col-lg-2 col-sm-6 py-4"> <div class="footer-widget"> <h4 class="footer-widget-title">Link</h4> <ul class="footer-widget-menu mb-4"> <li><a href="">Help & FAQ</a></li> <li><a href="">Terms & Condition</a></li> <li><a href="">Privecy Policy</a></li> </ul> </div> </div> <div class="col-lg-4 py-4 col-md-6"> <div class="footer-widget"> <h4 class="footer-widget-title">Newsletter</h4> <p>Subscribe our newsletter for get Update</p> <div class="newsletter-widget mb-4"> <input type="email" placeholder="Enter your email address"> <input type="submit" value="Send"> </div> </div> </div> </div> </div> </div> <div class="copyright-sec border-top border-white"> <div class="container"> <div class="copyright-inner text-center d-block"> <p>Copyright © 2021 CryptoHouse All Rights Reserved.</p> </div> </div> </div> </footer>
- Cryptohouse Footer Two:If you choice this Footer please copy this code and use anywhere in Cryptohouse Template.
<footer> <div class="footer-sec bg-light pt-50 footer-curve-bg-light"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-lg-4 col-md-6 py-4 order-lg-1 order-2"> <div class="footer-widget"> <ul class="footer-widget-menu column-4"> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Token</a></li> <li><a href="">Statistic</a></li> <li><a href="">Roadmap</a></li> <li><a href="">Team</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> <div class="col-lg-4 py-4 order-lg-2 order-1"> <div class="footer-widget text-center w700 mx-auto"> <a href="" class="footer-logo mb-4"> <img src="assets/img/logo.svg" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non, lobortis in in tortor nam pulvinar elementum.</p> <div class="d-flex flex-wrap justify-content-center"> <h5 class="footer-widget-title me-3 my-2"> Follow Us <i class="icofont-long-arrow-right text-primary"></i> </h5> <div class="social-icons"> <a href=""> <i class="icofont-facebook"></i> </a> <a href=""> <i class="icofont-twitter"></i> </a> <a href=""> <i class="icofont-instagram"></i> </a> <a href=""> <i class="icofont-youtube-play"></i> </a> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 py-4 order-lg-3 order-3"> <div class="footer-widget"> <h4 class="footer-widget-title">Newsletter</h4> <p>Subscribe our newsletter for get Update</p> <div class="newsletter-widget mb-4"> <input type="email" placeholder="Enter your email address"> <input type="submit" value="Send"> </div> </div> </div> </div> </div> </div> <div class="copyright-sec bg-primary"> <div class="container"> <div class="copyright-inner"> <a href="" class="cr-single-menu">Help & FAQ</a> <p>Copyright © 2021 CryptoHouse All Rights Reserved.</p> <a href="" class="cr-single-menu">Terms & Condition</a> </div> </div> </div> </footer>
- Cryptohouse Footer Three:If you choice this Footer please copy this code and use anywhere in Cryptohouse Template.
<footer class="py-80 bg-overlay-primary" style="background: url('assets/img/1.jpg') no-repeat fixed center/cover;"> <div class="container-fluid"> <div class="footer-sec bg-white pt-50 text-center"> <img src="assets/img/bitcoin2.png" alt="" class="footer-bitcoin-img-one d-none d-sm-block"> <img src="assets/img/bitcoin3.png" alt="" class="footer-bitcoin-img-two d-none d-sm-block"> <div class="container"> <div class="footer-widget w550 mx-auto"> <a href="" class="footer-logo mb-4"> <img src="assets/img/logo.svg" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non, lobortis in in tortor nam pulvinar elementum.</p> <div class="social-icons"> <a href=""> <i class="icofont-facebook"></i> </a> <a href=""> <i class="icofont-twitter"></i> </a> <a href=""> <i class="icofont-instagram"></i> </a> <a href=""> <i class="icofont-youtube-play"></i> </a> </div> </div> <div class="footer-widget py-4"> <ul class="footer-widget-menu menu-inline"> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Token</a></li> <li><a href="">Statistic</a></li> <li><a href="">Roadmap</a></li> <li><a href="">Team</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> </div> </div> <div class="container-fluid"> <div class="copyright-sec bg-light"> <div class="container"> <div class="copyright-inner"> <a href="" class="cr-single-menu">Help & FAQ</a> <p>Copyright © 2021 CryptoHouse All Rights Reserved.</p> <a href="" class="cr-single-menu">Terms & Condition</a> </div> </div> </div> </div> </footer>
- Cryptohouse Footer Four:If you choice this Footer please copy this code and use anywhere in Cryptohouse Template.
<footer> <div class="footer-sec bg-light pt-50"> <div class="container-fluid"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-lg-4 py-4"> <div class="footer-widget"> <a href="" class="footer-logo mb-4"> <img src="assets/img/logo.svg" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non, lobortis in in tortor nam pulvinar elementum.</p> </div> </div> <div class="col-lg-4 py-4"> <div class="footer-widget"> <ul class="footer-widget-menu column-4"> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Token</a></li> <li><a href="">Statistic</a></li> <li><a href="">Roadmap</a></li> <li><a href="">Team</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> <div class="col-lg-3 py-4"> <div class="footer-widget"> <h5 class="footer-widget-title mb-3"> Follow Us <i class="icofont-long-arrow-right text-primary"></i> </h5> <div class="social-icons"> <a href=""> <i class="icofont-facebook"></i> </a> <a href=""> <i class="icofont-twitter"></i> </a> <a href=""> <i class="icofont-instagram"></i> </a> <a href=""> <i class="icofont-youtube-play"></i> </a> </div> </div> </div> </div> </div> </div> </div> <div class="copyright-sec bg-secondary"> <div class="container-fluid"> <div class="container"> <div class="copyright-inner"> <a href="" class="cr-single-menu">Help & FAQ</a> <p>Copyright © 2021 CryptoHouse All Rights Reserved.</p> <a href="" class="cr-single-menu">Terms & Condition</a> </div> </div> </div> </div> </footer>
- Cryptohouse Footer Five:If you choice this Footer please copy this code and use anywhere in Cryptohouse Template.
<footer class="bg-overlay-secondary-gradient" style="background: url('assets/img/1.jpg') no-repeat fixed center/cover;"> <div class="footer-sec pt-50"> <div class="container"> <div class="row"> <div class="col-xl-3 col-sm-6 py-4"> <div class="footer-widget"> <a href="" class="footer-logo mb-4"> <img src="assets/img/logo-white.svg" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non, lobortis in in tortor nam pulvinar elementum.</p> <div class="social-icons"> <a href=""> <i class="icofont-facebook"></i> </a> <a href=""> <i class="icofont-twitter"></i> </a> <a href=""> <i class="icofont-instagram"></i> </a> <a href=""> <i class="icofont-youtube-play"></i> </a> </div> </div> </div> <div class="col-xl-3 col-sm-6 py-4"> <div class="footer-widget"> <h4 class="footer-widget-title">Sitemap</h4> <ul class="footer-widget-menu column-2"> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Token</a></li> <li><a href="">Statistic</a></li> <li><a href="">Roadmap</a></li> <li><a href="">Team</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> <div class="col-xl-2 col-sm-6 py-4"> <div class="footer-widget"> <h4 class="footer-widget-title">Link</h4> <ul class="footer-widget-menu mb-4"> <li><a href="">Help & FAQ</a></li> <li><a href="">Terms & Condition</a></li> <li><a href="">Privecy Policy</a></li> </ul> <h4 class="footer-widget-title">Location</h4> <a href="" class="text-white"> See Google Map <i class="icofont-long-arrow-right"></i> </a> </div> </div> <div class="col-xl-4 col-sm-6 py-4"> <div class="footer-widget"> <h4 class="footer-widget-title">Newsletter</h4> <p>Subscribe our newsletter for get Update</p> <div class="newsletter-widget mb-4"> <input type="email" placeholder="Enter your email address"> <input type="submit" value="Send"> </div> <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-79a508e4-9f4e-4478-a9e0-4ce71ce115cd"></div> </div> </div> </div> </div> </div> <div class="copyright-sec bg-primary"> <div class="container"> <div class="copyright-inner text-center d-block"> <p>Copyright © 2021 CryptoHouse All Rights Reserved.</p> </div> </div> </div> </footer>
Menu
We have use Mega Menu & Dropdown Menu if you choice any one in your menu list.please check our menu. Copy this code and include Cryptohouse menu item
Mega Menu
Example:-If you create megamenu item please follow our instraction and create Cryptohouse megamenu
<ul class="h-menu">
<li>
<a href="#">Megamenu</a>
<!-- Mega menu html code insert here -->
</li>
</ul>
<!-- Mega menu html code here -->
<div class="megamenu">
<div class="mm-row">
<div class="mm-col">
<div class="mm-col-inner">
<h4 class="mm-widget-title">Header List</h4>
<ul class="mm-menu">
<li><a href="homepage.html">Header One</a></li>
<li><a href="homepage2.html">Header Two</a></li>
<li><a href="blog.html">Header Three</a></li>
<li><a href="header-four.html">Header Four</a></li>
<li><a href="header-five.html">Header Five</a></li>
</ul>
</div>
</div>
<div class="mm-col">
<div class="mm-col-inner">
<h4 class="mm-widget-title">Footer List</h4>
<ul class="mm-menu">
<li><a href="homepage.html">Footer One</a></li>
<li><a href="blog.html">Footer Two</a></li>
<li><a href="footer-three.html">Footer Three</a></li>
<li><a href="homepage2.html">Footer Four</a></li>
<li><a href="footer-five.html">Footer Five</a></li>
</ul>
</div>
</div>
<div class="mm-col">
<div class="mm-col-inner">
<h4 class="mm-widget-title">Mega Menu Title</h4>
<ul class="mm-menu">
<li><a href="">Token List</a></li>
<li><a href="">Statistic Daily Report</a></li>
<li><a href="">Sub Menu Lorem</a></li>
</ul>
</div>
</div>
<div class="mm-col">
<div class="mm-col-inner">
<h4 class="mm-widget-title">Mega Menu Title</h4>
<ul class="mm-menu">
<li><a href="">Token List</a></li>
<li><a href="">Statistic Daily Report</a></li>
<li><a href="">Sub Menu Lorem</a></li>
</ul>
</div>
</div>
</div>
</div>
Dropdown Menu
Example:-If you create Dropdown menu item please follow our instraction and create Cryptohouse Dropdown menu
<ul class="h-menu">
<li>
<a href="#">Dropdown menu</a>
<!-- Dropdown menu html code insert here -->
</li>
</ul>
<!-- Dropdown menu html code here -->
<ul>
<li><a href="#">Homepage</a>
<ul>
<li><a href="homepage.html">Homepage 01</a></li>
<li><a href="homepage2.html">Homepage 02</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="about.html">About 01</a></li>
<li><a href="about2.html">About 02</a></li>
</ul>
</li>
<li><a href="#">Token</a>
<ul>
<li><a href="token.html">Token 01</a></li>
<li><a href="token2.html">Token 02</a></li>
</ul>
</li>
<li><a href="#">Statistic</a>
<ul>
<li><a href="statistic.html">Statistic 01</a></li>
<li><a href="statistic2.html">Statistic 02</a></li>
</ul>
</li>
<li><a href="#">Roadmap</a>
<ul>
<li><a href="roadmap.html">Roadmap 01</a></li>
<li><a href="roadmap2.html">Roadmap 02</a></li>
</ul>
</li>
<li><a href="#">Team</a>
<ul>
<li><a href="team.html">Team 01</a></li>
<li><a href="team2.html">Team 02</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="contact.html">Contact 01</a></li>
<li><a href="contact2.html">Contact 02</a></li>
</ul>
</li>
<li><a href="#">Error</a>
<ul>
<li><a href="error.html">Error 01</a></li>
<li><a href="error2.html">Error 02</a></li>
</ul>
</li>
</ul>
Section Title
We have used Four different Section Title in this template.please check Cryptohouse Title list and choice your attractive Section Title
Title One
Note:- Cryptohouse Create Water Colour Heading Background Text.If you Change Background Text Just Find data-watermark="Road Map" Attribute and Insert Your Contnet.IF you Don't Like Gradient Colour Heading Just Remove Span tag In h1 Tag and you Don't like Animation just Remove data-aos="" Attribute.
<div class="sec-title text-center" data-aos="fade-up">
<h1 data-watermark="Road Map"><span>Road</span> Map</h1>
<p>The road map of our business system</p>
</div>
Title Two
Note:- If you Don't Like Gradient Colour Text Just Remove Span tag In h1 Tag and Don't like Animation Remove data-aos="" Attribute.
<div class="sec-title text-center text-white sec-title-line-modern line-success position-relative" data-aos="fade-up">
<h1>Road Map</h1>
<p>The road map of our business system</p>
</div>
Title Three
Note:- IF you Don't Like Gradient Colour Text Just Remove Span tag In h1 Tag and Don't like Animation Remove data-aos="" Attribute.
<div class="sec-title text-center sec-title-line-modern" data-aos="fade-up">
<h1><span>Token</span> info</h1>
<p>Today token sale price ratio</p>
</div>
Title Four
Note:- IF you Don't Like Gradient Colour Text Just Remove Span tag In h1 Tag and Don't like Animation Remove data-aos="fade-up" Attribute.
<div class="sec-title text-center sec-title-line" data-aos="fade-up">
<h1><span>Token</span> info</h1>
<p>Today token sale price ratio</p>
</div>
Countdown
We have used attractive Counter in this template.please Copy This Code and Use Anywhere in Cryptohouse Template
<div class="time-left bg-secondary py-60 px-3 rounded-20">
<div class="w600 mx-auto text-center">
<div class="text-white aos-init aos-animate" data-aos="fade-up">
<h1>Time Left</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="">
<div class="row countdown-clock countdown-lagency">
<div class="col-6 col-sm-3 py-3 aos-init aos-animate" data-aos="fade-up">
<div class="countdown-item">
<div class="ci-inner">
<div class="clock-days ci-value">225</div>
<h4>Days</h4>
</div>
</div>
</div>
<div class="col-6 col-sm-3 py-3 aos-init aos-animate" data-aos="fade-up" data-aos-delay="150">
<div class="countdown-item">
<div class="ci-inner">
<div class="clock-hours ci-value">10</div>
<h4>Hours</h4>
</div>
</div>
</div>
<div class="col-6 col-sm-3 py-3 aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
<div class="countdown-item">
<div class="ci-inner">
<div class="clock-minutes ci-value">59</div>
<h4>Minutes</h4>
</div>
</div>
</div>
<div class="col-6 col-sm-3 py-3 aos-init aos-animate" data-aos="fade-up" data-aos-delay="450">
<div class="countdown-item">
<div class="ci-inner">
<div class="clock-seconds ci-value">27</div>
<h4>Seconds</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Social Icons
We have used attractive Social icon in this template.please Copy This Code and Use Anywhere in Cryptohouse Template
<div class="social-icons">
<a href="">
<i class="icofont-facebook"></i>
</a>
<a href="">
<i class="icofont-twitter"></i>
</a>
<a href="">
<i class="icofont-instagram"></i>
</a>
<a href="">
<i class="icofont-youtube-play"></i>
</a>
</div>
APEXCHARTS
We have used APEXCHARTS in this template.if you use another chart in this template please visit apexcharts demos page and choice your chart
Columns & Grid
Bootstrap Grid
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7
Helper Classes
We have created some really useful helper classes for you. Here are a few of them:
Font Size
.fs-[value]-value of Font Size goes14,15,16,18,20,22.24 of elements
.fs-14{
font-size: 14px !important;
}
Width
.w-[value]-value of percent Width goes 33,66,20,20 of elements
.w-33{
width: 33.333%;
}
.w[value] -value of max Width goes 50 on every next step 100,50,150,200......1000 of elements
.w50{
max-width: 50px;
width: 100%;
}
Height
.min-h[value]-value of Min Height goes 100 on every next step 500,600,700.....1000 of elements
.min-h500{
min-height: 500px;
}
.h[value] -value of Height goes 100 on every next step 500,600,700.....1000 of elements
.h500{
height: 500px;
}
Padding
.p-[value]-value of Padding goes 10 on every next step 40,50,60.....100 of elements
.p-40{
padding: 40px;
}
.pt-[value] -value of Padding top goes 10 on every next step 40,50,60.....100 of elements
.pt-40{
padding-top: 40px;
}
.pb-[value] -value of Padding bottom goes 10 on every next step 40,50,60.....100 of elements
.pb-40{
padding-bottom:40px
}
.py-[value] -value of Padding top to bottom goes 10 on every next step 40,50,60.....100 of elements
.py-40{
padding-top: 40px;
padding-bottom:40px
}
Margin
.m-[value]-value of margin goes 10 on every next step 40,50,60.....100 of elements
.m-40{
margin: 40px;
}
.pt-[value] -value of margin top goes 10 on every next step 40,50,60.....100 of elements
.mt-40{
margin-top: 40px;
}
.mb-[value] -value of margin bottom goes 10 on every next step 40,50,60.....100 of elements
.mb-40{
margin-bottom:40px
}
.my-[value] -value of margin top to bottom goes 10 on every next step 40,50,60.....100 of elements
.my-40{
margin-top: 40px;
margin-bottom:40px
}
Border
.border-[value]-value of Border goestop,right,left,bottom,none of elements
.border{
border: 1px solid var(--border);
}
.border-top{
border-top: 1px solid var(--border);
}
Rounded
.rounded-[value]-value of rounded goes 10 on every next step 5,10,20,30 .......,100 around of elements
.m-5{
margin: 5px;
}
Button
Button Background Color
Note:- if you Created rounded button just Use Rounded class .btn-primary-to create Orange Gradient background button.btn-secondary-to create Blue Gradient background button.btn-success-to create Sky Gradient background button.btn-dark-to create Black background button
Website Optimization Tips
A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:
gZip Compression & Browser Caching
This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves 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, loading the Website fast.
Image Compression & Optimization
We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website.Here are some Tips which might come handy in optimizing images:
- 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's
<img>Tag without resizing it. The size/resolution of the Image matters sinceit is not recommended to use an Image size of1200pxx800pxin a Content Size of300pxx200pxas this is unnecessary. Resize it to300pxx200px - 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 MACuse ImageOptim
For Windows use Riot for compressing JPEG Images & PNG Gauntletfor PNG Images.
CSS & jQuery Minifications
It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations
are:
For CSS use
CSS Minifier and For Javascript use Javascript Minifier.
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 several CDN Hosting Providers available on the Internet but we
would recommend MaxCDN or CloudFlare. CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.
Fast Web Hosting Servers
A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.
Changelog
We are showing all of our change log here. You can find our regular updates based on version.
------------ VERSION - 4.0.0: Update on 04 june 2023 ------------
[+] CHANGED FILES
1.gulpfile.js
2.package.json
3.src/error.twig
4.src/error2.twig
5.src/homepage-seven.twig
6.src/index.twig
7.src/template/demo-popup.twig
8.src/template/header.twig
9.src/template/header2.twig
10.src/template/header3.twig
11.src/template/header4.twig
12.src/template/landing-header.twig
13.src/template/menu.twig
14.src/template/transparent-header.twig
15.src/template/v5-header.twig
------------ VERSION - 3.0.0: Update on 25 December 2021 ------------
. Three Landing Page
. Market-cap
. Performance improvements
[+] NEW ADDED FILES
1.homepage-five.html
2.homepage-six.html
3.homepage-seven.html
4.market-cap.html
[+] CHANGED FILES
1.scripts.js
2.app.min.js
3.style.css
------------ VERSION - 2.0.0: Update on 19 november 2021 ------------
[+] NEW ADDED FILES
1.homepage-three.html
2.homepage-four.html
3.short-code.html
[+] CHANGED FILES
1.scripts.js
2.app.min.js
3.style.css
------------ VERSION - 1.0.0: Release on 03 March 2021 ------------ [+] Initial Release
Support
If you have any questions, please use our profile contact form on Envato http://themeforest.net/user/electronthemes/