02. All HTML Pages

• index.html for Home Page 1
• index-2.html for Home Page 2
• about.html for about page
• collection.html for nft collection page
• faq-nft.html for faq page about NFT
• Roadmap.html for the roadmap
• team.html for team Page
• team-single.html for Team Member Details or Artist Page
• blog.html for Blog Page
• blog-single.html for Blog Details Page
• contact.html for Contact Page
• 404.html for Error Page
• coming-soon.html for maintainance mode or coming soon page

03. Fonts

Go to Google Fonts and select your favorite fonts and then just replace the code in assets/sass/sub-stylesheet/base/fonts.scss file

      <!--Google Fonts-->
      
      @import
      url('https://fonts.googleapis.com/css2?family=Bakbak+One&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

      
    

05. Source File (CSS)

All required css files have been linked like below-

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/lightcase.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    

06. Source File (SASS)

Here is the SCSS folder structure example-

📦sass
┣ 📂abstracts
┃ ┣ 📜_extend.scss
┃ ┣ 📜_functions.scss
┃ ┣ 📜_mixins.scss
┃ ┗ 📜_variables.scss
┣ 📂base
┃ ┣ 📜_animations.scss
┃ ┣ 📜_fonts.scss
┃ ┣ 📜_helpers.scss
┃ ┗ 📜_typography.scss
┣ 📂components
┃ ┣ 📜_about.scss
┃ ┣ 📜_artist.scss
┃ ┣ 📜_blog.scss
┃ ┣ 📜_button.scss
┃ ┣ 📜_collection.scss
┃ ┣ 📜_coming-soon.scss
┃ ┣ 📜_community.scss
┃ ┣ 📜_countdown.scss
┃ ┣ 📜_counter.scss
┃ ┣ 📜_error.scss
┃ ┣ 📜_faq.scss
┃ ┣ 📜_partner.scss
┃ ┣ 📜_preloader.scss
┃ ┣ 📜_product.scss
┃ ┣ 📜_rating.scss
┃ ┣ 📜_roadmap.scss
┃ ┣ 📜_sale.scss
┃ ┣ 📜_team.scss
┃ ┗ 📜_widget.scss
┣ 📂layout
┃ ┣ 📜_banner.scss
┃ ┣ 📜_contact.scss
┃ ┣ 📜_footer.scss
┃ ┗ 📜_header.scss
┣ 📂pages
┃ ┗ 📜_home.scss
┣ 📂themes
┃ ┗ 📜_default.scss
┣ 📂vendors
┃ ┣ 📜_normalize.scss
┃ ┗ 📜_rfs.scss
┗ 📜style.scss
          

06. Source File (JS)

All required css files have been linked like below. if you need any customization in JAVASCRIPT you have to edit the function.js file.

    <!-- vendor plugins -->
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/all.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/aos.js"></script>
    <script src="assets/js/countdown.min.js"></script>
    <script src="assets/js/lightcase.js"></script>
    <script src="assets/js/purecounter_vanilla.js"></script>
    <script src="assets/js/custom.js"></script>
    

01. Header Menu

This is site Menu code Pattern, if you wanna change your menu just replace the name of the menu

  <div class="menu-area">
      <ul class="menu">
          <li>
              <a href="#home">Home</a>
          </li>

          <li>
              <a href="#about">About</a>
          </li>
          <li>
              <a href="#team">Team</a>
          </li>
          <li>
              <a href="#faq">FAQ</a>
          </li>
          <li>
              <a href="#0">Pages</a>
              <ul class="submenu">
                  <li><a href="javsascript:void();">Home</a>
                      <ul class="submenu">
                          <li><a href="index.html">Home 1</a></li>
                          <li><a href="index-2.html">Home 2</a></li>
                      </ul>
                  </li>
                  <li><a href="javsascript:void();">About</a>
                      <ul class="submenu">
                          <li><a href="about.html">About</a></li>
                          <li><a href="roadmap.html">Roadmap</a></li>
                          <li><a href="faq.html">FAQ</a></li>
                          <li><a href="team.html">Team</a></li>
                          <li><a href="team-single.html">Team Single</a></li>
                      </ul>
                  </li>
                  <li><a href="javsascript:void();">Blog</a>
                      <ul class="submenu">
                          <li><a href="blog.html">Blog</a></li>
                          <li><a href="blog-single.html">Blog single</a></li>
                      </ul>
                  </li>
                  <li><a href="collection.html">Collection</a></li>
                  <li><a href="contact.html">Contact</a></li>
                  <li><a href="404.html">404 Error</a></li>
                  <li><a href="coming-soon.html">Coming Soon</a></li>
              </ul>
          </li>
      </ul>
      <div class="header-btn">
          <a href="#" class="default-btn default-btn--secondary">
              <span>Join <i class="fa-brands fa-discord"></i></span>
          </a>
          <a href="#" class="default-btn" data-bs-toggle="modal" data-bs-target="#wallet-option">
              <span>Connect <i class="fa-solid fa-wallet"></i></span>
          </a>
      </div>

      <!-- toggle icons -->
      <div class="header-bar d-lg-none">
          <span></span>
          <span></span>
          <span></span>
      </div>
  </div>
          

To change the menu name you will need to edit in the tag <li><a href="#">menu name </a> </li> and add your text in the middle of the tag.

2. Logo Change

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

<div class="logo">
      <a href="index.html">
              <img src="assets/images/logo/logo.png" alt="logo">
      </a>
</div>
            

Note: Keep your logo inside the ./assets/images/logo folder. The logo size should be maximum 142x23 pixel.

Components customization

01. Section structure

Here is your section structure.

<section class="xyz-section padding-top padding-bottom">
    <div class="container">
        <div class="section-header">
          ....
        </div>
        <div class="section-wrapper">
            <div class="row">
              ....
            </div>
        </div>
    </div>
</section>
    

In the class="xyz-section" you can replace with your desired class.

padding-top is used for the space top of the sections.

padding-bottom is used for the space bottom of the sections.

And in the section-header div you can add your heading of sections and tagline of sections.

You can add your content on the 2nd .section-wrapper div.

Font size and Colors

You can Modify Font sizes and All colors of this template by channging the variable value in sass/sub-stylesheet/abstracts/variables.scss file

// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------

$bootstrap-sass-asset-helper: false !default;
//
// Variables
// --------------------------------------------------


// Colors

$title-color: #0d142f;
$theme-color: #00ffa3;
$secondary-color:#fee600;
$primary-color: #1d253b;
$border-color: #1d253b;
$white-color: #fff;
$ash-color: #f9fafb;
$body-color: #030b21;
$black-color:#000000;
$text-color: #dddddd;
// social-media color
$facebook: #3b5998;
$twitter: #55acee;
$linkedin: #007bb5;
$skype: #2fb7df;
$youtube: #cd201f;
$google: #dd4b39;
$camera: #e4405f;
$instagram: #e4405f;
$tumblr: #34465d;
$behance: #1769ff;
$star: #e9ba17;
$green: #0be881;
$green-h: #0fbcf9;
$red: #f53b57;
$yellow: #dec32b;
$nell: #212fb4;
$navy: #d8e0f3;
$placeholder: #a0a6bc;

//== Typography

// font-family

$text-font: 'Inter',
sans-serif;

$title-font: 'Bakbak One',
cursive;



// font-size

$fs-base: 16px !default;
$fs-h1: 72px;
$fs-h2: 48px;
$fs-h3: 30px;
$fs-h4: 24px;
$fs-h5: 20px;
$fs-h6: 18px;



// transition
$transition: all 0.3s ease;
          

Utility Classes

You can use all bootstrap's utility classes and besides this you also can you make your custom utility class in sass/sub-stylesheet/base/uitilities.scss file

//--------------------------------------------
//--This file contains all the utility classes
//---------------------------------------------
.theme-color {
color: $theme-color;
}

.yellow-color {
color: $royal-yellow;
}

.mb-30 {
@extend %mb-30;
}

.gap-10 {
gap: 10px;
}

.gap-15 {
gap: 15px;
}

.fs-36 {
@include font-size(36px);
}

.mb-70 {
margin-bottom: 70px;
}

Change Copyright

You Can Change Your Copyright text by changing footer sections copyright part like below-

<div class="footer__copyright">
      <div class="container">
          <div class="text-center py-4">
              <p class=" mb-0">© 2022 | All Rights Reserved </p>
          </div>
      </div>
</div>
    

Edit contact form Email

You Can Change the contact form info receiving mail very easy , just replace your email in contact.php file like bellow-

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "yourgmail@gmail.com";