The template is based on Bootstrap 5.1 Framework. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Main content is placed between header and footer area.

<main class="main">
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          Your content	
        </div>
        <div class="col-md-8">
          Your content
        </div>
      </div>
    </div>
  </section>
</main>

• /css (Template CSS)
• /vendor (External libs CSS files)
  • animate.css
  • bootstrap-grid.min.css
  • bootstrap-grid.min.css.map
  • bootstrap-grid.rtl.min.css
  • bootstrap-grid.rtl.min.css.map
  • bootstrap-reboot.min.css
  • bootstrap-reboot.min.css.map
  • bootstrap-reboot.rtl.min.css
  • bootstrap-reboot.rtl.min.css.map
  • bootstrap-utilities.min.css
  • bootstrap-utilities.min.css.map
  • bootstrap-utilities.rtl.min.css
  • bootstrap-utilities.rtl.min.css.map
  • bootstrap-utilities.rtl.min.css.map
  • bootstrap.min.css
  • bootstrap.min.css.map
  • bootstrap.rtl.min.css
  • bootstrap.rtl.min.css.map
  • swiper-bundle.min.css
• style.css (Main CSS file)
• style.min.css (Main CSS file, minified version)
• /img (All Images and Icons)
• /js (Template JS)
• /vendor (External libs JS files)
  • bootstrap.bundle.min.js
  • bootstrap.bundle.min.js.map
  • bootstrap.min.js
  • bootstrap.min.js.map
  • jquery-3.6.0.min.js
  • swiper-bundle.min.js
  • wow.min.js
• script.js (Main JS file)
• /scss (You don't need to include this folder in the project, it contains SCSS style files, in case you want to develop this theme in more depth. The builder is not included in the theme)
• 404.html (404 page)
• about.html (About page)
• blog.html (Blog page)
• blog-post.html (Single Blog post)
• faq.html (FAQ page)
• index.html (Main page)
• roadmap.html (Roadmap page)
• team.html (Reviews page)
• text.html (Page with some text, heading and image examples)

To install the template to your hosting server you need to upload the template files using the FTP Manager. You can use your hosting control panel file manager or some third party FTP manager like FileZilla, CuteFTP etc. Upload the theme files to your server. Change the texts or images in the HTML and CSS files as needed.

The theme archive includes two versions of the theme - dark and light. Just upload the files of the selected theme to the server.

The theme uses the PT Sans font from Google Fonts and the local Ambidexter font. The Google Fonts font is included in the header of the theme, while the local font is included in the CSS file using the import directive and assigned to elements in the styles file.

<link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet" />

@font-face {
  font-family: Ambidexter_Regular;
  font-display: swap;
  src: url("../fonts/Ambidexter_Regular.woff2") format("woff2"), 
       url("../fonts/Ambidexter_Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "PT Sans", sans-serif;
}
h1, h2, h3 {
  font-family: "Ambidexter_Regular", cursive;
}

The theme's styles are in css/style.css and css/style.min.css (minified version). Also, for advanced developers, the theme includes the original style files in SASS format (the assembler is not included in the theme).

All theme scripts are in /script.js file - animation of images movement, opening and closing FAQ items, displaying Scroll-to-Top button, displaying social buttons, search and action button in the header and slider initialization.

$(".section-hero__slide").mousemove(function (e) {
  let elemOffset = $(this).offset();
  let x = e.pageX - elemOffset.left;
  let y = e.pageY - elemOffset.top;
  $(this)
    .find("img")
    .css({
      transform: "translate3d(" + x * 0.05 + "px, " + y * 0.05 + "px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)",
    });
});
$(".section-hero__slide").mouseout(function (e) {
  $(this).find("img").css({
    transform: "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)",
  });
});

The images included in the theme are in the img folder. You can either replace the images with your own, keeping the name, or add new ones by adding or correcting the path for the image in the HTML files).

The theme comes with Swiper Slider, which gives you the ability to create carousels and sliders. Here is the official Swiper documentation explaining how to use it. The plugin files are in the js/vendor and css/vendor folders. Options can be changed in the /script.js file

const swiperTeam = new Swiper(".section-team__swiper", {
  slidesPerView: 2,
  spaceBetween: 8,
  breakpoints: {
    320: {
      slidesPerView: 2,
      spaceBetween: 8,
    },
    768: {
      slidesPerView: 4,
      spaceBetween: 16,
    },
    992: {
      slidesPerView: 5,
      spaceBetween: 16,
    },
    1200: {
      slidesPerView: 7,
      spaceBetween: 20,
    },
  },
  pagination: {
    el: ".section-team .swiper-pagination",
    clickable: true,
  },
});

The theme uses animate.css and wow.js animation to create cool effects for images, texts, and titles. The plugin files are in the js/vendor and css/vendor folders. To remove the animation effect, just delete its classes: animate__animated animate__fadeIn. To change the style of the animation effect, copy the effect class in the animate.css documentation and replace the last class according to the chosen effect, for example, animate__heartBeat. The effect delay is controlled by the data-wow-delay attribute. Simply change the value of the delay or remove this attribute.

<p class="section-action__text wow animate__animated animate__fadeIn" data-wow-delay="0.2s">
  Your content
</p>