QIMAT - Creative Agency, Corporate and Portfolio Multi-purpose Template
- Created: 23/03/2019
- latest Update: 23/03/2019
- By: abmathasuriya
- Email: abmathasuriya@gmail.com
Thank you for purchasing Qimat HTML theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form abmathasuriya on ThemeForest OR You can send me ticket from our support system. Thanks so much!
Installation
Follow the steps below to setup your site template:
- Unzip the downloaded package and open the /Qimat theme folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
- Below is the folder structure and needs to be uploaded to your website root directory:
css- Stylesheet filesfonts– Icon font filesimages- Image filesjs- Javacript filesassets– assets folder contains files for video, animated icon, particl effect files
- You should upload all or specific HTML files as per your need.
- You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
HTML Structure
Qimat theme follows a simple and easy to customize coding structure. Here is the sample for your reference:
Below are the general HTML structure of all pages.
<!doctype html> <html lang="en"> <head> <!-- title --> <meta charset="utf-8"> <!-- description --> <meta name="description" content=""> <!-- keywords --> <meta name="keywords" content=""> <!-- favicon --> <!-- style --> </head> <body> <!-- start header --> <!-- start navigation --> <nav class="main-nav"> ... </nav> <!-- end navigation --> <!-- end header --> <!-- start sections --> <section> ... </section> <!-- end sections --> <!-- start footer --> <footer> </footer> <!-- end footer --> <!-- javascript libraries --> </body> </html>
Each section further described in below.
Logo Settings
The Logo Container can be found in the Nav containing class- .main-nav. Some demo have two logo
files one for displaying homepage itself and other logo on navigation. Logo file have dark and white color logo for
displaying in dark and white background. Below are the general HTML structure for logo files.
Image & Favicon Settings
Image Settings
Qimat download package does not contain images which are there in our online demo. We are using placeholder
images instead of real images. You will see the image code as mentioned below. You can replace placeholder image
url with your image url like images/yourimage.jpg
<img src="image path" alt="image alt text">
Favicon Settings
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
Fonts
Qimat theme uses 2 fonts: Sarabun & Poppins from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.
<!-- Google font -->
@import url('https://fonts.googleapis.com/css?family=Sarabun:100,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,300i,400,500,500i,600,700,800,900');
class .font-face1 points to fonts Sarabun and class .font-face2 points to fonts Poppins
Home Pages Demos
Qimat theme is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose corporate agency and portfolio HTML5 template with 35+ ready home page demos.
View all demosNavigation Types
You can choose between 15+ Types of Navigation menu while creating your Pages. The list of various header types & its descriptions are provided below for your reference:
1. Dark Navigation
Header with black background color.
<!-- start navigation --> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
2. Dark Transparent Sticky Navigation
Sticky Header with no background color.
<!-- start navigation --> <nav class="main-nav dark transparent stick-fixed"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
3. Hidden Dark Navigation
Sticky Header with initial hidden navigation.
<!-- start navigation --> <nav class="main-nav dark transparent hide-menu stick-fixed"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
4. Dark bottom Navigation
Sticky Header with homepage bottom navigation.
<!-- start navigation --> <nav class="main-nav dark bottom-menu sticky"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
5. Center Navigation
Sticky Header with center navigation.
<!-- start navigation --> <nav class="main-nav dark"> <div class="full-wrapper center-menu relative"> ... </div> </nav> <!-- end navigation -->
6. Header with Hamburger menu
Sticky Header with fullscreen nav style-1.
<!-- start navigation --> <div class="fullscreen-menu"> <div class="fullscreen-menu-wrapper text-center"> ... </div> </div> <!-- end navigation -->
7. Fullscreen Nav style-2
Sticky Header with fullscreen nav style-2.
<!-- start navigation --> <div class="fullscreen-menu fullscreen-menu-layout-2"> <div class="fullscreen-menu-wrapper text-center"> ... </div> </div> <!-- end navigation -->
8. White Navigation
Header with white background color.
<!-- start navigation --> <nav class="main-nav sticky color-nav"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
9. White Transparent Sticky Navigation
Sticky Header with no background color.
<!-- start navigation --> <nav class="main-nav transparent stick-fixed color-nav"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
10. Hidden White Navigation
Sticky Header with initial hidden navigation.
<!-- start navigation --> <nav class="main-nav color-nav transparent hide-menu stick-fixed"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
11. White bottom Navigation
Sticky Header with homepage bottom navigation.
<!-- start navigation --> <nav class="main-nav color-nav bottom-menu sticky"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
12. Navigation without sticky
Sticky Header with homepage bottom navigation.
<!-- start navigation --> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
13. Navigation With Topbar
Header with Topbar and default navigation menu to showcase the additional information as per your requirements.
<!-- start navigation --> <div class="promo_banner"> </div> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
14. Navigation With Topbar-2
Header with Topbar and default navigation menu to showcase the additional information as per your requirements.
<!-- start navigation --> <div class="top-bar dark"> <div class="full-wrapper clearfix"> ... </div> </div> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
15. Classic Left Menu
Classic Left Menu provides functionality to display menu at left side in classic view.
<!-- start navigation --> <nav class="main-nav color-nav main-nav-mobile dt-mobile-nav"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
Mega Menus
You can start using the mega menu in 2, 3 & 4 columns. Below are the general structure for mega menus.
One page Menus
You can get one page menu code from any of our one page demos. Below are the general structure for one page menu.
Simple Dropdown Menu
You can use an additional sub menu on any page for sub navigation purpose.
Page Elements
You can choose between 12 Types of page titles while creating your pages. The list of page title options & its descriptions are provided below for your reference:
1. Dark Navigation
Header with black background color.
<!-- start navigation --> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
2. Dark Transparent Sticky Navigation
Sticky Header with no background color.
<!-- start navigation --> <nav class="main-nav dark transparent stick-fixed"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
3. Hidden Dark Navigation
Sticky Header with initial hidden navigation.
<!-- start navigation --> <nav class="main-nav dark transparent hide-menu stick-fixed"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
4. Dark bottom Navigation
Sticky Header with homepage bottom navigation.
<!-- start navigation --> <nav class="main-nav dark bottom-menu sticky"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
5. Center Navigation
Sticky Header with center navigation.
<!-- start navigation --> <nav class="main-nav dark"> <div class="full-wrapper center-menu relative"> ... </div> </nav> <!-- end navigation -->
6. Header with Hamburger menu
Sticky Header with fullscreen nav style-1.
<!-- start navigation --> <div class="fullscreen-menu"> <div class="fullscreen-menu-wrapper text-center"> ... </div> </div> <!-- end navigation -->
7. Fullscreen Nav style-2
Sticky Header with fullscreen nav style-2.
<!-- start navigation --> <div class="fullscreen-menu fullscreen-menu-layout-2"> <div class="fullscreen-menu-wrapper text-center"> ... </div> </div> <!-- end navigation -->
8. White Navigation
Header with white background color.
<!-- start navigation --> <nav class="main-nav sticky color-nav"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
9. White Transparent Sticky Navigation
Sticky Header with no background color.
<!-- start navigation --> <nav class="main-nav transparent stick-fixed color-nav"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
10. Hidden White Navigation
Sticky Header with initial hidden navigation.
<!-- start navigation --> <nav class="main-nav color-nav transparent hide-menu stick-fixed"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
11. White bottom Navigation
Sticky Header with homepage bottom navigation.
<!-- start navigation --> <nav class="main-nav color-nav bottom-menu sticky"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
12. Navigation without sticky
Sticky Header with homepage bottom navigation.
<!-- start navigation --> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
13. Navigation With Topbar
Header with Topbar and default navigation menu to showcase the additional information as per your requirements.
<!-- start navigation --> <div class="promo_banner"> </div> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
14. Navigation With Topbar-2
Header with Topbar and default navigation menu to showcase the additional information as per your requirements.
<!-- start navigation --> <div class="top-bar dark"> <div class="full-wrapper clearfix"> ... </div> </div> <nav class="main-nav dark"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
15. Classic Left Menu
Classic Left Menu provides functionality to display menu at left side in classic view.
<!-- start navigation --> <nav class="main-nav color-nav main-nav-mobile dt-mobile-nav"> <div class="full-wrapper relative"> ... </div> </nav> <!-- end navigation -->
Columns & Grid
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
.col-md-4.col-md-4.col-md-4Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
.col-md-3.col-md-6.col-md-3Two columns
Get two columns starting at desktops and scaling to large desktops.
.col-md-8.col-md-4Full width, single column
.col-md-12Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
.col-md-8
.col-md-6.col-md-6.col-md-4Mixed: mobile and desktop
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
.col-xs-12 .col-md-8.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6.col-xs-6Mixed: mobile, tablet, and desktop
.col-xs-12 .col-sm-6 .col-lg-8.col-xs-6 .col-lg-4.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4Column clearing
Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3.col-xs-6 .col-sm-3.col-xs-6 .col-sm-3Offset, push, and pull resets
Reset offsets, pushes, and pulls at specific breakpoints.
.col-sm-5 .col-md-6.col-sm-5 .col-sm-offset-2
.col-md-6 .col-md-offset-0.col-sm-6 .col-md-5 .col-lg-6.col-sm-6 .col-md-5
.col-md-offset-2 .col-lg-6 .col-lg-offset-0Helper classes
We have created some really useful helper classes for you. Here are a few of them:
Text alignment
You can set text alignment by using common class like .text-center{text-align:center !important;}
.text-right{text-align:right !important;}
.text-left{text-align:left !important;}
Text italic
You can set text italic and underline by using common class like .text-italic{font-style:italic}.text-underline{text-decoration:underline;}
Font case
You can set Font case i.e. uppercase/lowercase/none by using common class like .lowercase{text-transform:
lowercase;}
.uppercase{text-transform: uppercase;}
.nocase{text-transform:none;}
Font weight
You can set font weight (i.e. font-weight:100 TO 900) by using common class like
.fw100{font-weight:100 !important;}
.fw200{font-weight:200 !important;}....fw900
Letter Spacing
You can set letter spacing (positive and negative) by using common class like
/*2.3 letter-spacing(lp-) positive*/
.lp-0{letter-spacing:0px !important;}
.lp-1{letter-spacing:1px !important;}
.lp-2{letter-spacing:2px !important;}
.lp-3{letter-spacing:3px !important;}
.lp-4{letter-spacing:4px !important;}
.lp-5{letter-spacing:5px !important;}
.lp-6{letter-spacing:6px !important;}
.lp-7{letter-spacing:7px !important;}
.lp-8{letter-spacing:8px !important;}
.lp-9{letter-spacing:9px !important;}
.lp-10{letter-spacing:10px !important;}
position
You can set any component position i.e. left and right by using common class like .float-left{float:left
!important;}
.float-right{float:right !important;}
You can used position(relative/fixed/absolute/static) by using common class like.relative{position:relative
!important;}
.static{position:static !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
Background color style
Theme have mostly 3 background color style i.e. black, grey and color. You can specify background color scheme in
any section or block or any component by using common class like
.grey-section{
background-color:#f8f8f8 !important;
}
.black-section{
background-color:#212121 !important;
}
.color-section{
background-color:#3a332d !important;
}
Background overlay color style
You can set background overlay color opacity i.e. light color or black color in any section or block or any
component by using commnon style like/*5.2-Overlay background light*/
.overlay-light-alpha-10:before{background:rgba(255, 255, 255, 0.1);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-20:before{background:rgba(255, 255, 255, 0.2);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-30:before{background:rgba(255, 255, 255, 0.3);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-40:before{background:rgba(255, 255, 255, 0.4);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-50:before{background:rgba(255, 255, 255, 0.5);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-60:before{background:rgba(255, 255, 255, 0.6);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-70:before{background:rgba(255, 255, 255, 0.7);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-80:before{background:rgba(255, 255, 255, 0.8);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-light-alpha-90:before{background:rgba(255, 255, 255, 0.9);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
/*5.3-Overlay background dark*/
.overlay-dark-alpha-10:before{background:rgba(58, 51, 45, 0.1);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-20:before{background:rgba(58, 51, 45, 0.2);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-30:before{background:rgba(58, 51, 45, 0.3);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-40:before{background:rgba(58, 51, 45, 0.4);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-50:before{background:rgba(58, 51, 45, 0.5);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-60:before{background:rgba(58, 51, 45, 0.6);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-70:before{background:rgba(58, 51, 45, 0.7);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-80:before{background:rgba(58, 51, 45, 0.8);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
.overlay-dark-alpha-90:before{background:rgba(58, 51, 45, 0.9);content: " ";height: 100%;left: 0;position:
absolute;top: 0;width: 100%;}
For example you have to make a block with black background with overlay light.
class="black-section overlay-light-alpha-40">
Font family alter
Theme have used 3 google fonts in individual index pages. Each variants have mostly two font combination. You can
set font by using common class like
.font-face1
.font-face2
Horizontal and vertical CSS i.e. padding and margin
padding-margin.css file contains responsive Horizontal and vertical padding and margin.
margin-top : mt-0 TO mt-140
margin-bottom: mb-0 TO mb-140
margin-left : ml-0 TO ml-140
margin-right: mr-0 TO mr-140
@media only screen and (max-width:1200px)
margin-top : mt-lg-0 TO mt-lg-140
margin-bottom: mb-lg-0 TO mb-lg-140
margin-left : ml-lg-0 TO ml-lg-140
margin-right: mr-lg-0 TO mr-lg-140
@media only screen and (max-width:1024px)
margin-top : mt-md-0 TO mt-md-140
margin-bottom: mb-md-0 TO mb-md-140
margin-left : ml-md-0 TO ml-md-140
margin-right: mr-md-0 TO mr-md-140
@media only screen and (max-width:768px)
margin-top : mt-sm-0 TO mt-sm-140
margin-bottom: mb-sm-0 TO mb-sm-140
margin-left : ml-sm-0 TO ml-sm-140
margin-right: mr-sm-0 TO mr-sm-140
@media only screen and (max-width:767px)
margin-top : mt-xs-0 TO mt-xs-140
margin-bottom: mb-xs-0 TO mb-xs-140
margin-left : ml-xs-0 TO ml-xs-140
margin-right: mr-xs-0 TO mr-xs-140
@media only screen and (max-width:480px)
margin-top : mt-xxs-0 TO mt-xxs-140
margin-bottom: mb-xxs-0 TO mb-xxs-140
margin-left : ml-xxs-0 TO ml-xxs-140
margin-right: mr-xxs-0 TO mr-xxs-140
SAME FOR PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT AND PADDING-RIGHT. YOu can use like following way.
class="mt-120 mt-sm-80" - So initial in dasktop screen its margin-top with 120px and in small devices its
margin-top with 80px.
Center content
You can set any component center of the screen or center of the main wrapper by using commno class like .valign
{
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
And you can also set content in center position by using alternet class like.table-content
{position: relative;display: table;height: 100%;text-align: center;width: 100%;}
.table-center-text {display: table-cell;height: 100%;vertical-align: middle;}
Slider Types & Options
Qimat theme use swiper slider. Below are the general structure.
Swiper Slider Fullscreen
Qimat theme use swiper slider for all slider types. Below are the general HTML structure for swiper slider fullscreen.
Javascript (file path - /js/home-init.js). All slider initialize in this script file.
/* Home Fullscreen Slider*/
var swiper = new Swiper('.home-fullscreen-swiper', {
loop: true,
autoplay: {
delay: 1600,
},
disableOnInteraction: false,
speed: 1200,
spaceBetween: 5,
parallax: true,
centeredSlides: true,
grabCursor: true,
paginationClickable: true,
});
/* Home Fullscreen Slider Free mode*/
var swiper = new Swiper('.home-fullscreen-swiper-freeMode', {
pagination: {
el: '.home-fullscreen-swiper-pagination',
type: 'progressbar',
},
autoplay: {
delay: 1,
disableOnInteraction: true,
},
disableOnInteraction: false,
speed: 5000,
spaceBetween: 0,
freeMode: true,
loop: true,
grabCursor: true,
paginationClickable: true,
});
Elements and Shortcodes
Qimat theme use swiper slider. Below are the general structure.
Portfolio
Qimat theme use swiper slider. Below are the general structure.
Portfolio Boxed Layouts
You can choose portfolio boxed with 2 column, 3 column or 4 column grid layout or masonry layout or portfolio grid with fullscreen layout. Below are the general HTML structure for portfolio boxed layouts.
Portfolio Grid layoyt have two types for each 2,3 and 4 column. 1) Grid layoyt without spacing between grid and 2) Grid layout with space between individual grid.
<!-- Work without spacing--> <div class="container work-container"> <div class="projects-wrapper works-grid work-grid-2 clearfix"> <div class="work-item"> ... </div> </div> </div> <!-- end Work -->
<!-- Work grid with gutter--> <div class="container work-container"> <div class="projects-wrapper works-grid work-grid-2 work-grid-gut clearfix"> <div class="work-item"> ... </div> </div> </div> <!-- end Work -->
Portfolio Boxed Layouts style-2
You can choose portfolio boxed and portfolio boxed gutter with gallery and link layout. Below are the general HTML structure for portfolio boxed layouts.
Portfolio Boxed with Title
You can choose portfolio boxed with project title and portfolio boxed gutter with project title and portfolio masonry layout. Below are the general HTML structure for portfolio boxed with title layouts.
Blog
Qimat theme use 3 different style for blog pages. Below are the general structure.
Blog 2 column style-1
Below are the general structre for blog 2 column layouts
<!-- start Blog --> <div class="row multi-columns-row"> <div class="col-md-6 col-lg-6 mb-60 mb-xs-40"> <div class="idea-item bg-img" data-background="images/blog/blog-img9.jpg"> ... </div> </div> </div> <!-- end Blog -->
Blog 3 column style-1
Below are the general structre for blog 3 column layouts
<!-- start Blog --> <div class="row multi-columns-row"> <div class="col-sm-6 col-md-4 col-lg-4 mb-60 mb-xs-40"> <div class="idea-item bg-img" data-background="images/blog/blog-img9.jpg"> ... </div> </div> </div> <!-- end Blog -->
Blog 4 column style-1
Below are the general structre for blog 4 column layouts
<!-- start Blog --> <div class="row multi-columns-row"> <div class="col-lg-3 col-md-3 col-sm-4 mb-60 mb-xs-40"> <div class="idea-item bg-img" data-background="images/blog/blog-img9.jpg"> ... </div> </div> </div> <!-- end Blog -->
Blog 2 column style-2
Below are the general structre for blog 2 column layouts 2
<!-- start Blog --> <div class="row multi-columns-row"> <div class="col-md-6 col-lg-6 mb-60 mb-xs-40"> <article class="blog-style-2"> ... </article> </div> </div> <!-- end Blog -->
Blog 3 column style-2
Below are the general structre for blog 3 column layouts 2
<!-- start Blog --> <div class="row multi-columns-row"> <div class="col-sm-6 col-md-4 col-lg-4 mb-60 mb-xs-40"> <article class="blog-style-2"> ... </article> </div> </div> <!-- end Blog -->
Blog 4 column style-2
Below are the general structre for blog 4 column layouts 2
<!-- start Blog --> <div class="row multi-columns-row"> <div class="col-lg-3 col-md-3 col-sm-4 mb-60 mb-xs-40"> <article class="blog-style-2"> ... </article> </div> </div> <!-- end Blog -->
Blog masonry layouts
Qimat theme use blog layour with masonry 2 column, 3 column and 4 column layouts.
Blog classic layouts
You can choose blog with classic fullwidth layout, side bar right layout and side bar left layout. You can choose post type as image, video, Gallery and post with comment types.
Shop
Qimat theme use swiper slider. Below are the general structure.
Shop 2 column,3 column and 4 column grid layout style-1
Below are the general structre for Shop 2 column,3 column and 4 column grid layout style-1
Shop 2 column,3 column and 4 column grid layout style-2
Below are the general structre for Shop 2 column,3 column and 4 column grid layout style-2
Shop 2 column,3 column and 4 column grid layout style-3
Below are the general structre for Shop 2 column,3 column and 4 column grid layout style-3
Masonry Shop Layouts
Below are the general structre for Shop Masonry 2 column, 3 column and 4 column layout for style-1, style-2 and style-3
Credits
- jQuery Library
- Bootstrap
- font-awesome
- jquery.easing.1.3
- smooth-scroll.js
- masonry.pkgd.min.js
- jquery.sticky.js
- jquery.scrollTo.min.js
- jquery.parallax-1.1.3.js
- magnific-popup
- All images in theme (only in demo)- pixabay, Kaboompics and unsplash
Thanks!
Once again, thank you so much for purchasing Qimat theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. I'll do my best to assist.
please feel free to send me a message here: abmathasuriya on ThemeForest. OR you can send me ticket from our support system.