Documentation

01
Mosby - Agency & Freelancer Portfolio

# Template introduction

- TEMPLATE BY tavonline
- WEBSITE tavonline.net
- EMAIL hi@tavonline.net
- CREATED 07/11/2019

Welcome! First of all we want to thank you for purchasing our HTML5 Template Mosby. If you have any questions please email us.

In the following sections we will explain how to set up and use Mosby the easiest way possible. We are aware that not all of our buyers have excellent knowledge of HTML and CSS, so this documentation is pretty detailed.

### If you like this item please do not forget to rate it ‪☺️‬

## Template Features

- Bootstrap based - Mosby is bootstrap based which makes it fully customizable and easy to edit. get your site up and running in minutes.
- Fully responsive design - Mosby is compatible with all devices.We have tested our code on a multitude of phones and tablets
- Extensive documentation - Not familiar with coding? It's not an issue. that's why we included extensive help files on how to use and customize Mosby.
- Built with SEO in mind - Well thought and organized markup, real copy about the subject, no lorem lpsum, only SEO optimized content.
- Quality & Organized markup - Clean, well organized and commented markup will make your customization and use easy and fast, even if you have no coding skills.
- Crossbrowser compatibility - It works in harmony with all browsers. All the necessary tests were done.
- Validated files - It is prepared in accordance with W3C rules.
- Over 400+ Font Awesome Icons - The most common icon font library is Font-awesome.
- Quick support - Any time you need help, you can contact us.

## Change Log

You can be found here all updates to the template

- Nov 15, 2019 - Added slider version
- Nov 6, 2019 - Version 1.0, Template Release

02
the main structure of all files

# Template structures

The top sections and footer sections of all html pages are the same. The difference in files structure will be in the inner page. Other than that, HTML structure is the same for all pages. Home pages have hero image at the top and other pages have page title.

## 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

03
How to customize the template

# Template customization

Here we will explain how to customize all sections. (If you do not want to deal with customization, you can send us all your pictures and contents, you can get hire us for customizations)

## 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.

04
IMAGES AND OTHER THINGS

# Sources and credits

- 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

## Support

Thank you for purchasing Mosby. We hope this file helped you with customizations and setting up your site. however if you have any questions or would like to hire us for customizations please email us