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)
  • 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
  • swiper-bundle.min.js.map
• 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 template has two themes - dark and light. And in the dark theme the FAQ, Roadmap, and Gallery (Team) blocks have additional classes with --dark and --light modifiers, which allows you to add them in two views.

The theme uses the Fira Sans font from Google Fonts.

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

body {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
}

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 - opening and closing FAQ and Roadmap items, displaying Scroll-to-Top button, search field in the header and Swiper slider initialization.

const swiperHero = new Swiper(".section-hero__swiper", {
  autoplay: {
    delay: 2000,
  },
  autoplay: false,
  loop: true,
  effect: "fade",
  fadeEffect: {
    crossFade: true,
  },
  speed: 1500,
  draggable: true,
  pagination: {
    el: ".section-hero .swiper-pagination",
    clickable: true,
  },
});

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