CRYPTEN

Crypten – Cryptocurrency & ICO HTML Template


Made with ♥ by GFXPARTNER

Image

If you're looking to setup a modern and effective cryptocurrency website then Crypten is a premium HTML template for Cryptocurrency & ICO websites. It comes in 2 color schemes, dark and light and with 5 unique homepage designs. Design also has login and signup pages along with 404 pages.

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Markup Markup customization and highlights

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Email</title>

<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">

<!--stylesheet-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>

Change Site Header

Here is the css style for site header.

/********************
header
********************/
.header{ position: absolute; top: 0; z-index: 100; background-color: transparent; padding: 3.6rem 0 5rem 0; width: 100%;
  &__wrapper{ display: flex;  padding: 0 4.4rem; align-items: flex-end; justify-content: space-between; width: 100%; }
  &__nav{
    ul{ display: inline-block; margin-bottom: 0;}
    li{ list-style: none; display: inline-block;
      a{ font-size: 1.4rem; color: white; text-transform: uppercase; padding: 0 $header-nav-padding; font-weight: 500 !important; @media (min-width: 991.98px) {@include textHoverLine(white, $header-nav-padding);
      }}
    }
    &-primary{ margin-right: 5.9rem; }
    span { display: none; position: absolute; top: 2%; right: 5%; font-size: 3rem; color: white; font-weight: 900 !important; cursor: pointer; }
    @media (min-width: 991.98px) and (max-width: 1126px) {
        margin-left: 0;
        li{
          a{ padding: 0 $header-nav-padding/2; }
        }
    }
    }
  &__bars{ width: 5rem; justify-content: flex-end; display: none; @include floatfix; @include animateIt; cursor: pointer; padding: 1rem; border: 1px solid transparent;
    &:hover{ border: 1px solid white; }
    &-bar{  height: .2rem; display: block; background-color: white; margin: .3rem 0; float: right;
      &-1{width: 100%;}
      &-2{width: 70%;}
      &-3{width: 40%;}
    }
  }
}

@media (max-width: 991.98px) {
.header{
  &__wrapper{ justify-content: space-between; }
  &__nav{ height: 100vh; width: 100%; position: absolute; top: 0; right: 100%; 
    background-color: $bg-color-1; @include animateIt; padding-top: 10%;
    ul{ display: block; width: 100%; }
    li{display: block; width: 100%; @include animateIt;
      a{ font-size: 2rem; padding: 2.1rem 4.4rem; display: block; width: 100%; @include animateIt; }
      &:hover{ background-color: white;
        a{ color: $bg-color-1; }
      }
    }
    span{ display: block; }
    &-primary{ margin-left: 0; }
    &-secondary{float: none;}
  }
  &__bars{ display: block; }
}
}

Edit loading and page transition

Here is the css style for loading elements and classes.

/********************
preloader
********************/
.preloader{position: fixed; top: 0; width: 100vw; height: 100vh; z-index: 200; @include animateIt; transition-delay: 1s;
  background-color: $primary-color;
  &__svg{@include absoluteCenter;
    &-path:nth-child(1) {
    stroke-dasharray: 155.26px;
    stroke-dashoffset: 155.26px;
    @include line-anim-mixin(1,155.26px);
    animation: line-anim-1 3s ease forwards infinite;
    }
    &-path:nth-child(2) {
    stroke-dasharray: 240.69px;
    stroke-dashoffset: 240.69px;
    @include line-anim-mixin(2,240.69px);
    animation: line-anim-2 3s ease forwards infinite;
    }
    &-path:nth-child(3) {
    stroke-dasharray: 222.78px;
    stroke-dashoffset: 222.78px;
    @include line-anim-mixin(3,222.78px);
    animation: line-anim-3 3s ease forwards infinite;
    }
    &-path:nth-child(4) {
    stroke-dasharray: 252.96px;
    stroke-dashoffset: 252.96px;
    @include line-anim-mixin(4,252.96px);
    animation: line-anim-4 3s ease forwards infinite;
    }
    &-path:nth-child(5) {
    stroke-dasharray: 110.33px;
    stroke-dashoffset: 110.33px;
    @include line-anim-mixin(5,110.33px);
    animation: line-anim-5 3s ease forwards infinite;
    }
    &-path:nth-child(6) {
    stroke-dasharray: 251.91px;
    stroke-dashoffset: 251.91px;
    @include line-anim-mixin(6,251.91px);
    animation: line-anim-6 3s ease forwards infinite;
    }
    &-path:nth-child(7) {
    stroke-dasharray: 233.91px;
    stroke-dashoffset: 233.91px;
    @include line-anim-mixin(7,233.91px);
    animation: line-anim-7 3s ease forwards infinite;
    }
  }
}
body.loaded .preloader{ transform: translateY(-100%);  }

Styles Styles customization and highlights

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
bootstrap.min.css Detault bootstrap css file
all.css Font Awesome font icons
nice-select.css Jquery Nice Selcetor
slick.css Slick Slider css file
swiper.min.css Swiper Slider css file
style.css Template main css

JavaScript JavaScript customization and highlights

JavaScript Files

This is the list of all the jquery files are we used for our theme.

Tag Description
modernizr-3.6.0.min.js modernizr min
jquery-1.12.4.min.js jQuery library
bootstrap-min.js Bootstrap min
popper.min.js popper min
slick.min.js slick slider js file
swiper.min.js swiper slider js file
jquery.nice-select.min.js nice selector js
circle-progress.min.js circle progress js
jquery.syotimer.min.js syotimer js
main.js All the plug-ins initializing

Photoshop Files Photoshop customization and highlights

There is no included psd file with this item:

Credits Files Some of your credits and sources

I've used the following images, icons or other files as listed.

JavaScript

  1. Bootstrap
  2. Masonry
  3. Swiper Carousel
  4. Parallax

Images

  1. http://www.istockphoto.com/ — Some of images we used from here
  2. http://www.shutterstock.com/ — Some of images we used from here

Once again, thanks for purchasing this template and if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.