Ctrlk

Quickstart

Jump-start your development using this amazing templates.

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:

<!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:

Sidebar Nav

Below is sample coding structure:

Offcanvas Nav

The logo container is in the <nav> tag inside the <header>.

Below is sample coding structure:

Logo

The logo container is in the <nav> tag inside the <header>.

Below is sample coding structure:

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:

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:

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:

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.

PreviousFolder Structure NextHeader Structure

Last updated 1 year ago

<!-- 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>

<!-- 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>

<!-- 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>

/*--- 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;
}

@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");

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;
}