Start

Cryptlight - ICO Landing Page HTML5 Template

Thank you for your recent purchase of Cryptlight HTML-5 template. Please don't forget to rate the template and give us your appreciated review.

Getting Statred

To install this HTML template you will need to upload all files and folders using an FTP client. We recommend using FileZilla FTP client. To upload your template you will need the following:

  • Domain
  • FTP Username
  • FTP Password

Once connected make sure to upload All files and folders within your preferred choice of styles within the "Cryptlight" folder of your download package.

Package Contents

After downloading the template package you will find the following structure:

Cryptlight Html Version

  • Cryptlight Consulting
    • style
      • css
      • font
      • images
      • js
    • Other HTML Files

Template Structure

HTML Files

Below you will find the HTML files With the name of index:

  • Home Page
    • index.html
    • index-2.html

CSS Files

  • animate.css ( Responsible for the css3 animation effects. )
  • flaticon.css ( Responsible for diffrent icons. )
  • bootstrap.min.css ( Bootstrap file css. )
  • font-awesome.min.css ( contains fontAwsome files. )
  • hover.css ( Responsible for the hover style. )
  • owl.carousel.css ( Responsible for the carousel slide style. )
  • owl.theme.css ( Responsible for the carousel slide style. )
  • fancybox.css ( Responsible for video popup and images popup. )
  • responsive.css ( Responsible for the responsive style. )
  • style.css ( Responsible for the main site styling. )

Images Folder

  • background ( contains background images. )
  • clients ( contains clients images. )
  • fancybox ( contains fancybox images. )
  • Gallery ( contains gallery images. )
  • icon ( contains icon images and loading GiF file. )
  • Resources ( contains resources images. )
  • And other single images files such as logo.

js Files

  • Jquery.js ( main jquery library. )
  • bootstrap.min.js ( Responsible for bootstrap file jQuery. )
  • fancybox.pack.js ( Responsible for images and video lightbox or popup. )
  • fancybox-media.js ( Responsible for images and video lightbox or popup )
  • owl.js ( Responsible for carousel slider. )
  • wow.js ( Responsible for animation. )
  • jquery.scrollTo.js ( Responsible for one page movement. )
  • jquery.nav.js ( Responsible for one page menu nav. )
  • scripy.js ( Responsible For all jquery work Plugin script. )

HTML file Structure

You can easily create HTML pages, or whatever you want using this easy clean Template. Code is clearly written and commented for each considerable part.
when you open any HTML file you will notice that they are all have the same header and footer so they have the same HTML code and we'll explain both as follows:

If You need to create a new html page you must include the following tags in the following order:

HEAD TAG

The Head TAG ( All pages must have the following head tag ):

						
                           <!DOCTYPE html>
							<html>
								<head>
								<meta charset="utf-8">
								<title>Cryptlight HTML Template | Homepage 02</title>

								<!-- Stylesheets -->
								<link href="css/bootstrap.css" rel="stylesheet">
								<link href="css/style.css" rel="stylesheet">
								<link href="css/responsive.css" rel="stylesheet">

								<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900
&family=Source+Serif+Pro:wght@200;300;400;600;700;900
&display=swap" rel="stylesheet">

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

								<!-- Responsive -->
								<meta http-equiv="X-UA-Compatible" content="IE=edge">
								<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

								<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
								<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->

							</head>

Site Preloader

						
            				<!-- Preloader -->
    						<div class="preloader"></div>

Logo And Global Menu Navigation

						
                        	>!-- Main Header-->
    >header class="main-header header-style-one">
    	
		>!-- Header Top -->
        >div class="header-top">
            >div class="auto-container">
                >div class="clearfix">
				
					>!-- Top Left -->
					>div class="top-left pull-left clearfix">
						
						>!-- Info List -->
                        >ul class="info-list">
							>li>>span class="icon flaticon-call-1">>/span> Make a call : >a href="tel:+0-000-000-000-000" 
 > +0 (000) 000 000 000>/a>>/li>
							>li>>span class="icon flaticon-placeholder-3">>/span> 27 Division St, Los Angeles, USA>/li>
						>/ul>
						
						>!-- Hiring -->
						>div class="hiring">Now Hiring: Are you a driven and motivated 1st Line IT Support Engineer?>/div>
						
					>/div>
					
					>!-- Top Right -->
                    >div class="top-right pull-right clearfix">
					
						>!-- Info List -->
                        >ul class="page-list">
							>li>>a href="about.html">About>/a>>/li>
							>li>>a href="contact.html">Locations>/a>>/li>
							>li>>a href="about.html">Resouces>/a>>/li>
						>/ul>
						
						>!-- Social Box -->
						>ul class="social-box">
							>li>>a target="_blank" href="http://facebook.com/" class="fab fa-facebook-f">>/a>>/li>
							>li>>a target="_blank" href="http://twitter.com/" class="fab fa-google">>/a>>/li>
							>li>>a target="_blank" href="http://twitter.com/" class="fab fa-twitter">>/a>>/li>
							>li>>a target="_blank" href="http://instagram.com/" class="fab fa-pinterest-p">>/a>>/li>
						>/ul>
						
                    >/div>
					
                >/div>
            >/div>
        >/div>
		
    	>!-- Header Upper -->
        >div class="header-upper">
        	>div class="auto-container">
            	>div class="inner-container clearfix">
                	
					>!-- Logo Box -->
                	>div class="pull-left logo-box">
                    	>div class="logo">>a href="index.html">>img src="images/logo.png" alt="" title="">>/a>>/div>
                    >/div>
                   	
					>!-- Nav Outer -->
                   	>div class="nav-outer clearfix">
						
						>!-- Mobile Navigation Toggler For Mobile -->
						>div class="mobile-nav-toggler">>span class="icon flaticon-menu">>/span>>/div>
						>!-- End Mobile Navigation Toggler For Mobile -->
						
						>!-- Main Menu -->
						>nav class="main-menu navbar-expand-md">
							>div class="navbar-header">
								>button class="navbar-toggler" type="button" data-toggle="collapse"  
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
									>span class="icon-bar">>/span>
									>span class="icon-bar">>/span>
									>span class="icon-bar">>/span>
								>/button>
							>/div>

							>div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
								>ul class="navigation clearfix">
									>li class="current dropdown">>a href="#">Home>/a>
										>ul>
											>li>>a href="index.html">Homepage One>/a>>/li>
											>li>>a href="index-2.html">Homepage Two>/a>>/li>
											>li>>a href="index-3.html">Homepage Three>/a>>/li>
											>li class="updates">New Updates>/li>
											>li class="dropdown">>a href="#">One Pager Style>/a>
												>ul>
													>li>>a href="index-4.html">HomePage One>/a>>/li>
													>li>>a href="index-5.html">HomePage Two>/a>>/li>
													>li>>a href="index-6.html">HomePage Three>/a>>/li>
												>/ul>
											>/li>
											>li class="dropdown">>a href="#">Header Styles>/a>
												>ul>
													>li>>a href="index.html">Header Style One>/a>>/li>
													>li>>a href="index-2.html">Header Style Two>/a>>/li>
													>li>>a href="index-3.html">Header Style Three>/a>>/li>
												>/ul>
											>/li>
										>/ul>
									>/li>
									>li class="dropdown">>a href="#">About>/a>
										>ul>
											>li>>a href="about.html">About us>/a>>/li>
											>li>>a href="price.html">Price>/a>>/li>
											>li>>a href="faq.html">Faq's>/a>>/li>
											>li>>a href="team.html">Team>/a>>/li>
											>li>>a href="team-detail.html">Team Detail>/a>>/li>
											>li>>a href="testimonial.html">Testimonial>/a>>/li>
											>li>>a href="comming-soon.html">Comming Soon>/a>>/li>
											>li>>a href="terms.html">Terms & Condition>/a>>/li>
											>li>>a href="privacy.html">Privacy & Policy>/a>>/li>
										>/ul>
									>/li>
									>li class="dropdown">>a href="#">Services>/a>
										>ul>
											>li>>a href="services.html">Services>/a>>/li>
											>li>>a href="design-review.html">Design Review>/a>>/li>
											>li>>a href="analysis.html">Data Analytics>/a>>/li>
											>li>>a href="machine-learning.html">Machine Learning>/a>>/li>
											>li>>a href="development.html">Softwere Development>/a>>/li>
											>li>>a href="management.html">IT Management>/a>>/li>
											>li>>a href="software-renew.html">Software Renew>/a>>/li>
										>/ul>
									>/li>
									>li class="dropdown">>a href="#">Projects>/a>
										>ul>
											>li>>a href="projects.html">Projects>/a>>/li>
											>li>>a href="projects-sidebar.html">Projects Sidebar>/a>>/li>
											>li>>a href="portfolio-single.html">Projects Detail>/a>>/li>
											>li>>a href="portfolio-single-2.html">Projects Detail 02>/a>>/li>
										>/ul>
									>/li>
									>li class="dropdown has-mega-menu">>a href="#">Pages>/a>
										>div class="mega-menu">
											>div class="mega-menu-bar row clearfix">
												>div class="column col-lg-3 col-md-6 col-sm-12">
													>h3>About Us>/h3>
													>ul>
														>li>>a href="about.html">About us>/a>>/li>
														>li>>a href="price.html">Price>/a>>/li>
														>li>>a href="faq.html">Faq's>/a>>/li>
														>li>>a href="team.html">Team>/a>>/li>
														>li>>a href="testimonial.html">Testimonial>/a>>/li>
														>li>>a href="comming-soon.html">Comming Soon>/a>>/li>
														>li>>a href="terms.html">Terms & Condition>/a>>/li>
														>li>>a href="privacy.html">Privacy & Policy>/a>>/li>
													>/ul>
												>/div>
												>div class="column col-lg-3 col-md-6 col-sm-12">
													>h3>Services>/h3>
													>ul>
														>li>>a href="services.html">Services>/a>>/li>
														>li>>a href="design-review.html">Design Review>/a>>/li>
														>li>>a href="analysis.html">Data Analytics>/a>>/li>
														>li>>a href="machine-learning.html">Machine Learning>/a>>/li>
														>li>>a href="development.html">Softwere Development>/a>>/li>
														>li>>a href="management.html">IT Management>/a>>/li>
														>li>>a href="software-renew.html">Software Renew>/a>>/li>
													>/ul>
												>/div>
												>div class="column col-lg-3 col-md-6 col-sm-12">
													>h3>Shops>/h3>
													>ul>
														>li>>a href="shop.html">Shop>/a>>/li>
														>li>>a href="shop-single.html">Shop Details>/a>>/li>
														>li>>a href="shoping-cart.html">Cart Page>/a>>/li>
														>li>>a href="checkout.html">Checkout Page>/a>>/li>
														>li>>a href="login.html">Login>/a>>/li>
													>/ul>
												>/div>
												>div class="column col-lg-3 col-md-6 col-sm-12">
													>h3>Blog>/h3>
													>ul>
														>li>>a href="blog.html">Our Blog>/a>>/li>
														>li>>a href="blog-sidebar.html">Blog Sidebar>/a>>/li>
														>li>>a href="news-detail.html">Blog Details>/a>>/li>
														>li>>a href="error-page.html">Error Page>/a>>/li>
													>/ul>
												>/div>
												
											>/div>
										>/div>
									>/li>
									>li class="dropdown">>a href="#">Blog>/a>
										>ul>
											>li>>a href="blog.html">Our Blog>/a>>/li>
											>li>>a href="blog-classic.html">Blog Classic>/a>>/li>
											>li>>a href="news-detail.html">Blog Details>/a>>/li>
											>li>>a href="error-page.html">Error Page>/a>>/li>
										>/ul>
									>/li>
									>li class="dropdown">>a href="#">Shop>/a>
										>ul>
											>li>>a href="shop.html">Shop>/a>>/li>
											>li>>a href="shop-single.html">Shop Details>/a>>/li>
											>li>>a href="shoping-cart.html">Cart Page>/a>>/li>
											>li>>a href="checkout.html">Checkout Page>/a>>/li>
											>li>>a href="login.html">Login>/a>>/li>
										>/ul>
									>/li>
									>li class="dropdown">>a href="#">Contact>/a>
										>ul>
											>li>>a href="contact.html">Contact us 01>/a>>/li>
											>li>>a href="contact-2.html">Contact us 02>/a>>/li>
											>li>>a href="contact-3.html">Contact us 03>/a>>/li>
										>/ul>
									>/li>
								>/ul>
							>/div>
							
						>/nav>
						
						>!-- Main Menu End-->
						>div class="outer-box clearfix">
						
							>!-- Cart Box -->
							>div class="cart-box">
								>div class="dropdown">
									>button class="cart-box-btn dropdown-toggle" type="button" id="dropdownMenu" 
 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">>span class="flaticon-shopping-bag-1">>/span> 
 >span class="total-cart">2>/span>>/button>
									>div class="dropdown-menu pull-right cart-panel" aria-labelledby="dropdownMenu3">

										>div class="cart-product">
											>div class="inner">
												>div class="cross-icon">>span class="icon fas fa-times">>/span>>/div>
												>div class="image">>img src="images/resource/post-thumb-1.jpg" alt="" />>/div>
												>h3>>a href="shop-single.html">Product 01>/a>>/h3>
												>div class="quantity-text">Quantity 1>/div>
												>div class="price">$49.00>/div>
											>/div>
										>/div>
										>div class="cart-product">
											>div class="inner">
												>div class="cross-icon">>span class="icon fas fa-times">>/span>>/div>
												>div class="image">>img src="images/resource/post-thumb-2.jpg" alt="" />>/div>
												>h3>>a href="shop-single.html">Product 02>/a>>/h3>
												>div class="quantity-text">Quantity 1>/div>
												>div class="price">$99.00>/div>
											>/div>
										>/div>
										>div class="cart-total">Sub Total: >span>$148>/span>>/div>
										>ul class="btns-boxed">
											>li>>a href="shoping-cart.html">View Cart>/a>>/li>
											>li>>a href="checkout.html">CheckOut>/a>>/li>
										>/ul>

									>/div>
								>/div>
							>/div>
							
							>!-- Search Btn -->
							>div class="search-box-btn search-box-outer">>span class="icon flaticon-search">>/span>>/div>
							
							>!-- Nav Btn -->
							>div class="nav-btn navSidebar-button">>span class="icon flaticon-menu-4">>/span>>/div>
							
							>!-- Button Box -->
							>div class="btn-box">
								>a href="contact.html" class="theme-btn btn-style-one">>span class="txt">Get a Quote>/span>>/a>
							>/div>
							>!-- End Button Box -->
							
						>/div>
					
					>/div>
                   
                >/div>
            >/div>
        >/div>
        >!--End Header Upper-->
        
		>!-- Mobile Menu  -->
        >div class="mobile-menu">
            >div class="menu-backdrop">>/div>
            >div class="close-btn">>span class="icon flaticon-cancel">>/span>>/div>
            
            >!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
            >nav class="menu-box">
            	>div class="nav-logo">>a href="index.html">>img src="images/logo-5.png" alt="" title="">>/a>>/div>
                
                >ul class="navigation clearfix">>!--Keep This Empty / Menu will come through Javascript-->>/ul>
            >/nav>
        >/div>>!-- End Mobile Menu -->
		
    >/header>
    >!--End Main Header -->

Inner Page Section

						
                        	<!--Hallery Section-->
                            <section class="gallery-section">
                                <div class="auto-container">
                                    <h2 class="wow fadeInUp animated" data-wow-delay="0ms" data-wow-duration="1500ms">Title Here</h2>
                                    <div class="row clearfix">
                                    
                                    </div>
           					</div>
                            </section>

Customize Twitter account feed

CSS Styling

The style.css file is the responsible for the Template styling as follows:

Table of Contents File Css:

						
                            /* ------------------------------------------ */
                            /*             TABLE OF CONTENTS
                            /* ------------------------------------------ */
                			/*   01 - Fonts   */
                            /*   02 - Reset           */
                            /*   03 - Global     */	
                            /*   04 - Main Header      */
                            /*   05 - Banner Section     */
                            /*   06 - Video Section         */
                            /*   07 - Services Section            */
                            /*   08 - Clients Section           */
                            /*   09 - Project Section / four Item Carousel     */	
                            /*   10 - Two Item Carousel      */
                            /*   11 - Call To Action Section     */
                            /*   12 - Four Item Carousel / Project Section         */
                            /*   13 - Footer Style            */

Credits

Note: Images used in the preview demo are not included in the Downloaded package.

Thanks for visiting and purchasing our template .