Kimono

Template Information

Description :

Kimono is a creative, elegant, modern, clean and Responsive HTML5/CSS3 template for Photography Agency based on Bootstrap 5. Compatible with Desktop, Laptop, tablet, mobile or any device. Kimono is simple and clean design. All files are clearly organized. We believe it will be easy to use and edit them.

Content Mapping :

Template root has all .html files and assets.
Stylesheets (CSS files) of this template are placed in assets/css directory. It has different css file for different section and page with proper file name.
All css files imported into main.css file.
All Images are in assets/img directory.
And all Javascripts files are in assets/js directory.

HTML Structure

The template is based on Bootstrap 5 the world's most popular front-end component library for developing responsive, mobile-first projects on the web.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Create a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding, then create .row and add columns with appropriate device name (xs, sm, md, lg) and grid number (2, 4, 6, 12).

For full documentation, please visit Bootstrap 5 site: https://getbootstrap.com/docs/5.0/getting-started/download/

<section id="" class="">
    <div class="container">
        ...
        ...
    </div>
</section>

CSS Linking On page

Well organized and labeled CSS files is one of my priorities.
These are the CSS file you're be using in the template:

                                
                                        Inside page head tag you only have to link this css (css/main.css). 

										all css files are imported into main.css file.

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

The initialization of the elements, libs and features is made by the file custom.js, in the js folder.

Hader / Navigation

Open any .html file and see coding pattern for our navigation.

There are different types of Header in our full template.

For these category Header Markup start as like bellow:

<header class="header">

Theme Color Version

Open any .html file and include theme-style--light class in body, like bellow, for the light version

<body class="theme-style--light">

Backgrounds

Some of the sections have backgrounds image and to change those backgrounds:
1. Simply open proper css file and find that section class name, change background image by change the link of image directory
OR
2. In that image directory keep your image as same name as like us.
3. How will find proper css file where have to change image?
Ans: Open the file in any browser, then on the section where you have need change, mouse right click and slect inspect.
Then show the css file directory and line number in right side.

For example here showing background image adding method through css file or inline css:

.wptb-page-heading {
    position: relative;
    background-image: url(../images/background/5.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

or inline css

<div class="wptb-page-heading" style="background-image: url('assets/img/background/page-header-bg.jpg');">

Slider Section

We are using Swiper js for slider and Carousel

Slider control option API in custom.js. And you can add/remove/edit api by following swiper slider, mention at bellow.

Please follow the swiper documentation mention in bellow.

Contact

Open contact-1.html in any editor and see the contact form markup structure.

Template Preloader

Just open any .html file and see the preloader HTML Markup under body tag.

<!-- Preloader -->
    <div id="preloader">
    <div class="preloader-inner">
        <div class="spinner">
            <img src="assets/img/preloader-logo.svg" alt="img">
            <img src="assets/img/preloader-wheel.svg" alt="img" class="wheel">
        </div>
        <div class="loading-text">
            <img src="assets/img/preloader-logo-text.svg" alt="img">
        </div>
    </div>
</div>

Here you can change your Preloader Text.

If you have no need preloader, you can remove the above markup.

Google Fonts

Open main.css in any text editor from css folder. And see imported Google font link.

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600;700&family=Montserrat:wght@400;600;700&display=swap');

We are using Google Font and other open source font. You can change here font link that you want. Then need to change font-family at that div / tag/ section class in css file.

Google Font Link

Icons

We have used Bootstrap Icons and FontAwesome icon sets, that you can change color and size using CSS.
If you need more information about these icon sets, please visit this sites: Bootstrap Icons

These font css file in this directory: assets/css/bootstrap-icons.css and assets/css/font-awesome.css

Fontface for this icon set in assets/fonts

Use icon class name from above css files.

HTML Markup:

<i class="fa fa-facebook"><i>
<i class="bi bi-search"><i>

You can use another icon you like. Then keep fonts family. And keep icon font css in css folder like bootstrap-icons

Then use font in HTML as per using method of that font.

Source & Credits

Fonts:
Google Web Fonts - Link

Scripts:
jQuery - Link
Bootstrap Framework - Link
Swiper Slider - Link
Bootstrap Icons - Link
FontAwesome - Link