Html structures

So how this layout work? First we have header which contains logo and hamburger icon. There are two header, one is fixed and the other is moving with us as the page scrolls. When changing the logo, remember to change both. After that we have right bar items(social icons, up to top button) and full menu. And then we have page content. Inside of it you can place your real content - columns. Every page content have container which can be classes "container". Inside of a container there is a row. inside of a row you are placing columns - your content. Every row is one visual row which can contain columns where sum of the classes numbers is equal 12. That means you can have col-lg-6 and col-lg-6 in one row, for example. Or you can have three times col-lg-4. For more about how grid works you can visit official bootstrap pages as this template is based on Bootstrap's grid.

Css structures

All .css files are placed in "css" folder. Mosby includes following css files:

• style.css - Main template styling
• reset.css - Reset all styles
• margin.css - This is the style that contains the csss we set to set the spaces in the template
• assets.css - This file contains all of the plugin styles (Bootstrap, Owl carousel and Magnific popup)

Javascript Files

In this section we will present you all js files that are used in this template.

• jquery-2.1.4.min.js - jQuery is a fast, small, and feature-rich JavaScript library.
• main.js - This file contains all script about site.
• plugins.js - Instead of calling them separately, we put them all in it.

Content of plugins.js

• Isotope Plugin - Porfolio filter and other features plugin.
• Packery Layout - Plugin for portfolio masonry.
• Images loaded - For detect when images have been loaded.
• Infinite Scroll - For the load more portfolio with button.
• Owl Carousel - Owl carousel slider plugin.
• Magnific Popup - lightbox used on vehicle portfolio.
• Hover 3D - Effect used to portfolio hover

Understanding grid system

In this section we will present you and explain grid system used.

Mosby is based on Bootstrap Grid System. So what you need to know about using this grid system? First of all, every column, or page section must have it's container. That is div with class "container". Inside of it there must be div or section with class "row". Inside one row, you put your columns. One row is actually one row visually. That means that column with class .col-lg-12 will go inside one row. In row below that column can be another row that is containing for example .col-lg-4 and col-lg-8.

How do you combine columns? As there are 12 columns, sum of it's classes numbers must be 12. That is, in one row can go col-lg-7 and col-lg-5, or col-lg-3 and col-lg-9, and so on. Important thing to remember is that inside one row can go columns which sum is 12. Every row has it's bottom margin, which is 70px. So it is important to remember that one row is including only one visual row of columns. You can also use nested columns. For example you can have col-lg-9 (like on the page with sidebar) and inside of it you can place a row that containes two col-lg-6 columns. That columns inside will be half wide of it's parent column. Inside of these columns you can put your content.

Home page customization

This section will explain in detail how to customize the homepage.

Hero section

To change the background image, you can change the bg-image.jpg image from the img folder.

If you want to change the typed section on the homepage, simply change the fields marked in the image below.

Portfolio section

In the Portfolio section, each portfolio is marked as "a work". The work for each category is categorized with the class name in the marked area.

You can change the filters in the portfolio filter field or add new ones. All you have to do is have the class in the data filter field the same as a portfolio class.

Load more portfolio

Click on the load more button to add the subsequently loaded portfolios directly to the page-2.html page.

Home slider customization

You can find the slider-version.hml file in the white version folder. Differently the normal version, hero slider class has been added. Added slider-images div into hero-images div.

you can add new slider images or change existing ones from the inside of the box below. If you want to change the transition time, change the underlined delay section. (5000 means 5 second)

Studio page customization

To change the hero section, just change the text in h1. The part in the span is the pale part.

To change teammate section change the pictures and texts in this section.

Services section customization

To change the icons, Go to icon-fonts > flat-icon > flaticon.html you will find all the icons to here. All you have to do is copy the folder of the icon you want to use.

Portfolio detail customization

You can easily change the pictures and texts from the Hero section, just like on the homepage.

Portfolio lightbox

You can add as many images as you want to the lightbox gallery sections using the grid system.

After closing the portfolio gallery container, you can add the subtext section and create the galleries again.

• Bootstrap
• Fontawesome
• Flaticon

Images

The images used in the preview are not included in the download files. You can see some of them used below

• behance.net/gallery/26604265/Off-Season-Santas
• behance.net/gallery/84687187/Cream?tracking_source=curated_galleries
• behance.net/gallery/68628763/Wildflower?tracking_source=curated_galleries_list
• behance.net/gallery/85812245/Bookmark-Shop-selling-books?tracking_source=for_you_feed_activity
• behance.net/gallery/84863245/LEFAY-RESORTS-SPA?tracking_source=curated_galleries
• behance.net/gallery/67119105/Presley?tracking_source=for_you_feed_featured_category
• behance.net/gallery/85444121/Ville-de-Gatineau-Gatineau-pour-la-vie?tracking_source=search%7Cdrone
• behance.net/gallery/79518285/Stories-From-Venice?tracking_source=curated_galleries