Before You Start:
Please download the Crypt Template project bundle from ThemeForest ↗
to ensure you have all the files needed for installation. Once downloaded, extract the bundle and locate the folder for your chosen version.
HTML Structure
Crypt template is based on Bootstrap Framework (http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Below is sample coding structure:
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Crypt</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/button.css">
<link rel="stylesheet" href="./css/gsap.css">
<link rel="icon" type="image/svg" href="./images/favicon.svg">
</head>
<body>
<!-- Sidebar -->
<aside class="sidebar">
<div class="crypt-logo logo-expand mt-3">
...
</div>
<div class="side-wrapper">
...
</div>
</aside>
<!-- start header -->
<header>
<!-- header -->
<div class="header d-flex align-items-center">
...
</div>
<!-- navigation -->
<nav class="navbar py-0 navbar-dark bg-dark">
<div class="container-fluid">
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
...
</div>
</div>
</nav>
</header>
<!-- start section -->
<section>
<div class="container">
....
</div>
</section>
<!-- start footer -->
<footer>
<div class="container">
....
</div>
</footer>
<!-- Main Content End -->
<!-- javascript libraries -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="js/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" ></script>
<script src="js/particle-canvas.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html> Header
Below is sample coding structure:
Copy <!-- header -->
<header class="crypt-header blur-header align-items-center fixed-top z-3">
<div class="row align-items-center justify-content-between">
<!-- Menu -->
<div class="col-auto d-flex flex-row align-items-center">
...
</div>
<!-- Navigation menu / Button -->
<div class="col-auto d-flex flex-row align-items-center">
...
</div>
</div>
</header> Sidebar Nav
Below is sample coding structure:
Copy <!-- Sidebar -->
<aside class="sidebar">
<div class="crypt-logo logo-expand mt-3">
...
</div>
<div class="side-wrapper">
...
</div>
</aside> Offcanvas Nav
The logo container is in the <nav> tag inside the <header>.
Below is sample coding structure:
Copy <!-- navigation -->
<nav class="navbar py-0 navbar-dark bg-dark">
<div class="container-fluid">
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
...
</div>
</div>
</nav> Logo
The logo container is in the <nav> tag inside the <header>.
Below is sample coding structure:
Copy <!-- start logo -->
<div class="header d-flex align-items-center">
<div class="crypt-logo">
<a href="#!>
<img src="./images/logo.svg" alt="">
</a>
</div>
</div> Color Schemes
It's easy to change the colours on your website. Simply use this short code to add your colour scheme to the demo/css/style.css file using the following code:
Below is sample coding structure:
Copy /*--- colors Grayscale ----*/
.crypt-grayscale-100 {
color: #f1f3f5;
}
.crypt-grayscale-200 {
color: #e9ecef;
}
.crypt-grayscale-300 {
color: #dee2e6;
}
.crypt-grayscale-400 {
color: #ced4da;
}
.crypt-grayscale-500 {
color: #adb5bd !important;
}
.crypt-grayscale-600 {
color: #868e96 !important;
}
.crypt-grayscale-700 {
color: #495057 !important;
}
.crypt-grayscale-800 {
color: #343a40 !important;
}
.crypt-grayscale-900 {
color: #212529 !important;
}
/*--- colors Blue ----*/
.crypt-blue-200 {
color: #a5d8ff;
}
.crypt-blue-500 {
color: #339af0 !important;
}
/*--- colors Cyan ----*/
.crypt-cyan-400 {
color: #3bc9db;
}
.crypt-cyan-500 {
color: #22b8cf !important;
}
/*--- colors Red ----*/
.crypt-red-400 {
color: #ff8787;
}
.crypt-red-500 {
color: #ff6b6b !important;
}
/*--- Mix Colors ----*/
.crypt-blue {
color: #007bff !important ;
}
.crypt-pink {
color: #fb7ab9;
}
.crypt-dark-70 {
color: #ffffff94 !important ;
}
.crypt-dark {
background: #171b1f;
}
.crypt-dark .blur-header {
background: rgba(0, 0, 0, 0) !important;
backdrop-filter: blur(50px);
border-radius: 10px;
}
.crypt-dark.bg-grayscale {
background: #0a0e11 !important;
}
.crypt-dark h1,
.crypt-dark h2,
.crypt-dark h3,
.crypt-dark h4,
.crypt-dark h5,
.crypt-dark h6 {
color: #e9ecef;
text-decoration: none;
}
body.crypt-dark .input-group-text {
color: #7e7e7e;
text-align: center;
font-size: 13px;
white-space: nowrap;
background-color: #212529;
border: 1px solid #6c757d00;
border-radius: 6px;
}
body.crypt-dark .form-control {
color: #ffffff;
border: 1px solid #212529;
border-radius: 8px;
background-color: #0a0e11;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* TEXT GRADIENT */
.gd-text {
color: #ffffff;
background-image: -webkit-linear-gradient(54.39deg, #ffffff 28.27%, #c6b0f8 47.32%, #bf84fa 51.53%, #5b7de9 61.73%, #0e4eff 70.81%);
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
.gd-text1 {
background: #fceabb;
background: linear-gradient(to right, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gd-text2 {
background: #fceabb;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} Google Fonts
If you wish to add or change your website fonts. You simply need to set your fonts in the demo/css/style.css file using the following code:
Below is sample coding structure:
Copy @import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Oswald:wght@200..700&family=Sarina&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cactus+Classical+Serif&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100..900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap"); Using Self-hosted Fonts
If you plan to use a self-hosted fonts, use the following code possibly at the top of the demo/css/style.css file:
Copy body {
background: #f9faff;
overflow-x: hidden;
font-family: inter;
font-size: 15px;
text-decoration: none;
line-height: 26px;
}
/*-- Fonts --*/
h1,
.h1 {
font-size: 64px;
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
}
h2,
.h2 {
font-family: "Space Grotesk", sans-serif;
font-size: 48px;
line-height: 52px;
font-weight: 500;
}
h3,
.h3 {
font-family: "Space Grotesk", sans-serif;
font-size: 32px;
line-height: 38px;
font-weight: 500;
}
h4,
.h4 {
font-family: "Space Grotesk", sans-serif;
font-size: 24px;
line-height: 34px;
font-weight: 500;
}
h5,
.h5 {
font-family: "Space Grotesk", sans-serif;
font-size: 20px;
line-height: 30px;
}
h6,
.h6 {
font-size: 14px !important;
font-weight: 500;
line-height: 26px;
}
.crypt-dark a {
text-decoration: none !important;
}
.fancyfont {
font-family: "Sarina", cursive;
font-size: 100px;
line-height: 100px;
font-weight: 400;
}
.fs-7 {
font-family: "Geist Mono", serif;
font-size: 80px;
line-height: 80px;
font-weight: 900;
}
@media screen and (max-width: 575px) {
.fancyfont {
font-family: "Sarina", cursive;
font-size: 60px;
line-height: 100px;
font-weight: 400;
}
.fs-7 {
font-family: "Geist Mono", serif;
font-size: 36px;
line-height: 42px;
font-weight: 900;
}
}
.meta p {
font-size: 14px !important;
}
.underline {
text-underline-offset: 4px;
text-decoration-line: underline;
text-decoration-style: dashed;
}
JavaScript
Crypt comes with lots of helpful JavaScript plugins to make your website more user-friendly. These plugins add useful features for your website visitors. We built the JavaScript (JS) on a strong foundation using Object functions, making it sturdy and efficient.
You can locate the JS plugin files in the js/ folder.
Copy <script type="text/javascript" src="js/main.js"></script> 