Crypt

> For the complete documentation index, see [llms.txt](https://tophivetheme.gitbook.io/crypt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tophivetheme.gitbook.io/crypt/getting-started/quickstart.md). # Quickstart {% hint style="danger" %} **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. {% endhint %} ## HTML Structure **Crypt** template is based on Bootstrap Framework [(http://getbootstrap.com/)](https://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: ```html Crypt

....

``` ### Header Below is sample coding structure: ```html

...

``` ### Sidebar Nav Below is sample coding structure: ```html ``` ### Offcanvas Nav The logo container is in the `

` tag inside the `

`. Below is sample coding structure: ```html ``` ### Logo The logo container is in the `

` tag inside the `

`. Below is sample coding structure: ```html ``` ### 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: ```css /*--- 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: ```css @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: ```css 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. ```html ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://tophivetheme.gitbook.io/crypt/getting-started/quickstart.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.