CrypSimple - HTML Template - Documentation

Description

CrypSimple - qualitative, easy and adaptive HTML pages of crypto-currency topics.

  • Modern design
  • 9 different color schemes
  • HTML5 and CSS3 Validated
  • CSS Grid - supported by all browsers standard Grid system.
  • Customizable Design & Code.
  • Source Files SCSS for developers.
  • All installed Extensions are included.
  • Fully Responsive and Crossbrowser.
  • Detailed Documentation Included (En, Ru) and free suported
  • Version: 1.1 (от 15.05.2018)
  • Type template: HTML/CSS3/jQuery
  • Grid: CSS Grid Layout
  • JS пагины: Slick / Lightbox / eTimer / ViewportChecker
  • Author: Aleksandr Merk (https://themeforest.net/)
  • Demo: crypsimple

Folder Structure

|-- assets
|-- | -- css/
|-- | -- img/
|-- | -- fonts/
|-- | -- js/
|-- scss/
|-- php/
|-- ***.html

All paths in files are specified from the root (html)

Start

Unzip the archive, select the color scheme by connecting the necessary style in the HTML file:

<link rel="stylesheet" href="./assets/css/color/purple.css">

You can edit the Grid file of styles or leave as is:

<link rel="stylesheet" href="./assets/css/grid/home1.css">

Images and photos from the demo are not in the archive. Use your own. For the convenience of adding images, we have all rendered in HTML.
For example, to change the background image, add the following style to the block with the class section

<header class="section section-theme section-full" id="preview" style="background-image: url(./assets/img/bg-main.jpg);">

HTML

To quickly make your adaptive and beautiful HTML page, use the following template (this is how all the pages of our template are built)

...
<body>
  <div class="main">
    <section class="section" id="{YOUR_ID}" style="{YOUR_IMAGE}" >
      <h1 class="section-title t-center">{YOUR_TITILE}</h1>
      <div class="container">
        <div class="block">
          {YOUR_CONTENT}
        </div>
        <div class="block">
          {YOUR_CONTENT}
        </div>
      </div>
    </section>
  </div>
</body>
...

To stylize the block, you can use the base classes:

.section - compulsory class
.section-white - white background
.section-theme - background color depends on the connected color style
.section-gray - gray background
.section-black - black background, as in footer
.section-full - full-height block
.section-fixsize - fixed-height block (min-height: 300px;)

Grid

Initially blocks .block from the previous example will stand horizontally one after another.

To set them vertically or set them to a specific size or position, use the stylesheet from the folder /grid/, which you have connected in point Start

<link rel="stylesheet" href="./assets/css/grid/home1.css">

For example, we need to make the 1st block 300px, and the second on the full width, which remained:

#{YOUR_ID} .container {
  grid-template-columns: 300px 1fr;
}

Use the other features of the standard CSS Grid. Read the documentation for the CSS Grid

Color

To change the color theme of the site, connect the necessary css style

<link rel="stylesheet" href="./css/color/purple.css">

All colors are available here /css/color/

To set your own color

1 option - take a css file with a color style, and replace the color codes with your own

2 option - use the source file /scss/color/color.scss

Image

To make the image adaptive, add a class:

<img src="./img/app.png" alt="" class="responsive-img">

Click to enlarge image:

<a href="./assets/img/shortnews1.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
  <img class="responsive-img mini-img" src="./assets/img/shortnews1.jpg" alt="">
</a>

Make photo gallery with image slider:

<div class="img-list slider-autoplay" height="200px">
  <a href="./assets/img/shortnews1.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews1.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews2.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews2.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews3.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews3.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews4.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews4.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews5.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews5.jpg" alt="">
  </a>
</div>

This functionality is implemented through the library LightBox read the documentation

Font and Icon

In this assembly CrypSimple 1.0, in folder ./fonts/ 3 free fonts, with documentation and license

All of them are connected separately and downloaded in the project

<link rel="stylesheet" href="./fonts/fontawesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="./fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="./fonts/quicksand/css/quicksand.css">
                

Connection according to the documentation of each font

<i class="fab fa-apple"></i>
<i class="flaticon-046-network"></i>
                

Slider

Our template uses the free slider Slick

You can implement this slider anywhere in the project, where the code structure:

<div class="slider-name">
  <div>...</div>
  <div>...</div>
</div>

Let's write the settings for our slider in main.js

$('.slider-name').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 4000,
});
              

An example of a slider is shown in the gallery in the section Image

Other settings you can see in the documentation for the slider Slick

Button

The colors of the buttons depend on the selected color scheme

If you use a group of buttons, you can wrap them in div with classes .btn-line - alignment, .btn-line-gap - indents

Tab

<div class="tab">
  <ul class="tab-nav">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
  </ul>
  <div class="tab-content active">
    <p>Content Tab 1</p>
  </div>
  <div class="tab-content">
    <p>Content Tab 2</p>
  </div> 
</div>
              
  • Tab 1
  • Tab 2

Content Tab 1

Content Tab 2

Pop-up

Create Pop-up:

<div id="{YOUR_MODAL_ID}" class="modal-form">
  <div class="modal-content">
    <div class="modal-close"><i class="fas fa-times"></i></div>
    <div class="modal-title t-center">{YOUR_MODAL_TITLE}</div>
    <div class="modal-body">
      {YOUR_MODAL_CONTENT}
    </div>
  </div>
</div>

Calling Pop-up:

<a href="#" data-modal="#{YOUR_MODAL_ID}" class="open-modal">{YOUR_LINK_NAME}</a>

Php + ajax Form

The contact form is already built into the project so that it will work In file ./php/sender/form.php change the following fields:

$to = "youb@mail.com"; // Your email
$subject = 'Message by CrypSimple!'; // E-mail subject
$headers .= "From: CrypSimple <youb@mail.com>\r\n"; // Your name and email

This simple form serves to demonstrate the work and convenience of the buyer. In terms of security, we do not recommend it to use.

Update HTML template

Important: Create a backup of your project before any updates.
It's highly recommended to create your own css/js files if you make changes.

For all questions and bugs, please visit the developer's site themeforest.net