Documentation

Stroop

Responsive Landing HTML Bootstrap 5 + RTL support

We have put a lot of time and effort to ensure that you have a positive experience using this theme. Our goal is to answer any questions you may have regarding this theme. If you have a question that is not answered please feel free to contact us via email: hi.minshark@gmail.com

Installation

Follow the steps below to get started with our template:

  1. Open the Template-Packages folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP or cPanel in order to use it on your website.
  3. Make sure you have upload the required files and folders listed below:
    • html/css - Main stylesheet files
    • html/fonts - Icon/Fonts files
    • html/img - Classic images folder (use only images you need the reset can be safely deleted)
    • html/js - Javascripts folder (Functions, jquery, vendors etc)
    • html/*.html - All the templates
    The other files can be used according to your preferences.
  4. Edit the files using a text based editor like VS Code (recommended) or Sublime text.
  5. Upload your files to your servers in the public_html folder (Apache) or /var/www/html Folder (Nginx).

Features Overview

  • Blazing Fast Loading
  • Image Optimization
  • Next Generation Animation
  • Award Winning Design concepts
  • Smooth Transition Effects
  • Scroll Animation Included
  • Hover Animation Included
  • Flat, minimal, modern and clean design
  • Dark & Light version
  • RTL support
  • Retina Ready
  • Sticky Header
  • Built with HTML5 & CSS3
  • Google fonts
  • W3C valid HTML files
  • Modern & Clean Design
  • Lifetime Free Updates
  • Premium Support
  • Touch Friendly
  • SEO-Friendly of all layout & pages
  • HTML & CSS & JS files are included
  • Easy to all element customization
  • Fully Responsive (Tested on Multiple Devices)
  • And much more ...

HTML Structure

Our 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 class="no-js" lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Responsive Landing HTML Bootstrap 5 + RTL support">
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0'>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.png">

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap" rel="stylesheet">

<!-- CSS -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<link rel="stylesheet" href="assets/css/photoswipe.css">
<link rel="stylesheet" href="assets/css/card.css">
<link rel="stylesheet" href="assets/css/aos.css">
<link rel="stylesheet" href="assets/css/jarallax.min.css">
<link rel="stylesheet" href="assets/css/lity.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-icons.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/main.css">
<title>Stroop - Responsive Landing Bootstrap 5 Template</title>
</head>

<body>
<!-- Start include modal, offcanvas, etc...  -->
<!-- End include modal, offcanvas, etc...  -->

<!-- Start header -->
<header id="header-fixed" class="position-fixed mode header-fixed">
    <nav class="navbar navbar-main navbar-expand-lg flex-column" data-aos="fade-down">

    </nav>
</header>
<!-- End header -->

<main>
<!-- start section -->
<section class="section">
    <div class="container">
                    ....
    </div>
</section>
    <!-- end section -->
</main>

<!-- Start footer -->
<footer class="section pb-5 overflow-x-hidden border-top">

</footer>
<!--End Footer-->

<!-- javascript libraries -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/form-validation.js"></script>
<script src="assets/js/card.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/aos.js"></script>
<script src="assets/js/lity.min.js"></script>
<script src="assets/js/jarallax.min.js"></script>
<script src="assets/js/typed.umd.js"></script>
<script src="assets/js/custom.js"></script>
<!-- end javascript libraries -->
</body>
</html>

CSS Code

We are using several CSS files in this template. It is designed with the latest trends and modern design concepts in mind, featuring eye-catching animations and smooth interactions. As you explore each page, you'll experience unparalleled flexibility and smoothness, making it easy to create a personal website that aligns perfectly with your professional style.

You can locate the CSS library files in the css/ folder.

main.css situated on css/ contain the the all necessary style which is well organized. To add any custom CSS Codes, just add them to the css/main.css file.

<link rel="stylesheet" href="css/main.css">

JS Code

Our template 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 functions, making it sturdy and efficient.

You can locate the JS plugin files in the js/ folder.

custom.js situated on js/ contain the the all necessary custom script which is well organized. To add any custom JS Codes, just add them to the js/custom.js file

<script type="text/javascript" src="js/custom.js"></script>

Customization

Logo Settings

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

 <!-- start logo -->
    <div class="logo">
        <div class="dark-v">
            <h1>
                <!--Brand-->
                <a aria-label="link" class="navbar-brand d-inline-block m-0" href="index.html">
                    <img alt="img"
src="assets/img/logo.png"
loading="lazy"
class="img-fluid ">
                </a>
            </h1>
        </div>
        <div class="light-v">
            <h1>
                <a aria-label="link" class="navbar-brand d-inline-block m-0" href="index.html">
                    <img alt="img"
src="assets/img/logo-white.png"
loading="lazy"
class="img-fluid ">
                </a>
            </h1>
        </div>
    </div>
    <!-- end logo -->

Note TThere are two logo images displayed for the dark & light versions.

Color Schemes

It's easy to change the primary color on your website. Simply use this short code to add your colour scheme to the bootstrap.css file:

:root {
    --bs-primary: #cbf716;
    --bs-primary-rgb: 203, 247, 22;
}

Font Sizes For Heading

It's easy to change the font size for heading on your website. Simply use this short code to add to the bootstrap.css file:

:root {
  --bs-heading-h0: 5rem;
  --bs-heading-h1: 4rem;
  --bs-heading-h2: 3rem;
  --bs-heading-h3: 2.5rem;
  --bs-heading-h4: 1.375rem;
  --bs-heading-h5: 1.125rem;
  --bs-heading-h6: 1rem;
}
@media screen and (min-width: 767px) {
  :root {
    --bs-padding-y: 10rem;
    --bs-heading-h0: 6rem;
    --bs-heading-h1: 5rem;
    --bs-heading-h2: 4rem;
    --bs-heading-h3: 2rem;
    --bs-heading-h4: 1.625rem;
    --bs-heading-h5: 1.25rem;
    --bs-heading-h6: 1.125rem;
  }
}
@media screen and (min-width: 1400px) {
  :root {
    --bs-heading-h0: 10rem;
    --bs-heading-h1: 6rem;
    --bs-heading-h2: 5rem;
    --bs-heading-h3: 4rem;
    --bs-heading-h4: 2rem;
    --bs-heading-h5: 1.5rem;
    --bs-heading-h6: 1.25rem;
  }
}

Changing Fonts

Our template uses the font from the Google Fonts Library. You can change the fonts from bootstrap.css file in below lines: 

:root {
    --bs-font-body: "Manrope", sans-serif;
    --bs-font-heading: "Manrope", serif;
    --bs-font-italic: "Lora", serif;
}

Using Google Fonts

If you wish to add or change your website fonts. You simply need to set your fonts in the html/*.html file using the following code:

 <!-- Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap" rel="stylesheet">

Enable Dark Mode

Set data-bs-theme="dark" on the <html> element.

Enable RTL?

  • Set dir="rtl" on the <html> element.
  • Add an appropriate lang attribute, like lang="ar", on the <html> element

You need change file to use.

<link rel="stylesheet" href="assets/css/bootstrap.rtl.css">