Documentation.

FORZO – a creative, beautiful and minimalistic PSD template designed for photographers & portfolio. In it you can exhibit their work in a portfolio, you can also use it as a journal or a personal blog.

Features Template.

The main advantages that you will get.

Amazing Design

Clean and minimal design will make your site awesome.

Amazing animation

Beautiful animation and effects, including parallax effect.

Perfect Coding

Modern coding technologies: SASS, BEM – will make your project flexible.

Retina Ready

Only vector and font icons for better display on the retina screen.

Free update

Free updates that include new pages and various improvements.

Easy to Use

Customize and manage the template as you wish.

Customizing.

Some template settings that will easily help you customize it.

1. Replacement of the logo.

To replace the logo, you must replace the following code in each html file:

<svg viewBox="0 0 197 39" class="logotype">
    <path d="M174 15a11 11 0 1 1-11 11 11 11 0 0 1 11-11m0 18a7 7 0 1 0-7-7 7 7 0 0 0 7 7M90 15a11 11 0 1 1-11 11 11 11 0 0 1 11-11m0 18a7 7 0 1 0-7-7 7 7 0 0 0 7 7m103 0a2 2 0 1 1-2 2 2 2 0 0 1 2-2M78 0H53v39h2V2h23V0zM20.4 0h-1L13 11l-4 7L3 8 1.5 9 12 27H0v2h20.2l-5.8 10h2.3l5.8-10h.5v-.8l3.6-6.2L33 33l1.6-1-11-19H36v-2H15.4l6-10.4-1-.6zM14 27l-4-7 4.2-7h7.2l4 7-4 7zM78 6H59v12h14v-2H61V8h17V6zm96 7a13 13 0 1 0 13 13 13 13 0 0 0-13-13zm0 18a5 5 0 1 1 5-5 5 5 0 0 1-5 5zm-18-18h-22v2h19.4l-11.2 16h-.2v.2l-.4.5.4.2v1h14v-2h-11.4l11.2-16h.2v-.4l.4-.5-.4-.2v-1zm-27 0h-15v2h15v-2zm-19 0h-2v26h2V13zm-20 0a13 13 0 1 0 13 13 13 13 0 0 0-13-13zm0 18a5 5 0 1 1 5-5 5 5 0 0 1-5 5zm54-12h-10v2h7.4l-7.7 10.8 1.7 1 8.4-11.8h.2v-.3l.4-.5-.4-.2v-1zm-15 0h-15v20h2V21h13v-2zm-56 3H59v17h2V24h12v-2zm120 9a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm-37 6h-22v2h22v-2z"/>
</svg>
Note: SVG code can be obtained if you open the file in any text editor.

If you have a logo in the format jpeg, png, gif, then you need to replace the code above with this one:

<img src="path_to_your_logo" alt="Name website">
2. Customizing Slider

In order to edit or add a new slide, find the code section at the beginning of the file ("Hero" section), where:

  • img/your_image.jpg – is a link to your image.
  • Your title for the slide – is the title of the slide.
  • Your description for the slide – is a description for the slide.
<!-- Hero -->
...
<div class="item" style="background-image: url(img/your_image.jpg)" data-top-top="transform:translateY(0px)" data-100-top-bottom="transform:translateY(200px)">
    <div class="slider__caption" data-top-top="opacity:1;" data-100-top-bottom="opacity:0;">
        <h2 class="title__h1 hero__title" data-animation-in="bounceInLeft" data-animation-out="animate-out fadeOut">Your title for the slide</h2>
        <p class="hero__description" data-animation-in="bounceInRight" data-animation-out="animate-out fadeOut">Your description for the slide</p>
    </div>
</div>
...
<!-- /Hero -->
3. Add an item to Portfolio

To edit or add a new photo, simply add the following code to the container with photos of grid__portfolio, where:

  • img/your_image.jpg – is a link to your image.
  • Your title – is the title of the photo.
  • Your category – is a category for the photo.
<!-- Portfolio -->
...
<figure class="item__portfolio item__portfolio_column_4">
    <div class="item__portfolio__inner">
        <img class="image__portfolio" src="img/your_image.jpg" alt="Photo">
        <div class="item_portfolio_hover">
            <a class="link__portfolio" href="#"></a>
            <div class="liked__box is_unliked">
                <button class="icon__liked"></button>
                <span class="like-count">0</span>
            </div>
            <div class="heading__portfolio">
                <h5 class="title__h5 title_portfolio">Your title</h5>
                <span class="category__portfolio">Your category</span>
            </div>
        </div>
    </div>
</figure>
...
<!-- /Portfolio -->
4. Customization of contact form

To customize a contact form, you need to open the file form-contact.php from the folder php, find and replace line 27 on your emeil example@example.com
Optionally, you can edit the text email template.

$EmailTo = "example@example.com";
5. Customization the team carousel
  • img/your_image.jpg – is a link to your image.
  • Profession – Profession, position, etc.
  • NAME/SURNAME – Name and surname.
<div class="item__carousel team_02" style="background-image: url(img/your_image.jpg)">
    <div class="team__description">
        <h6 class="title__h6 team_specialty">Profession</h6>
        <h3 class="title__h3 team_name">NAME <span class="text_uppercase">SURNAME</span>.</h3>
        <p>Short description...</p>
        <ul class="elsewhere list-unstyled list-inline">
            <li><a href="#"><i class="fa fa-medium" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-deviantart" aria-hidden="true"></i></a></li>
        </ul>
    </div>
</div>
6. Enable RTL

In order to activate RTL support, you need to find the following line at the beginning of the page:

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style/style.css"/>

And after it add additional styles:

<link rel="stylesheet" type="text/css" href="style/bootstrap-rtl.min.css"/>
<link rel="stylesheet" type="text/css" href="style/style-rtl.css"/>

At the end of the page, find:

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

And change this line to:

<script src="js/common-rtl.js" type="text/javascript"></script/>

+ 19 Pages Included.

Let's see what we have. Go!

Photo
Home Page v1
Fullwidth slider, fullwidth gallery, original team carousel and more.
Photo
Home Page v2
Refined minimalism will add the original slider and floating blocks.
Photo
Home Page v3
Do you want a background image instead of a slider? Then this is what you need.
Photo
Blog Two Column
Easy and compact version of the blog in two columns.
Photo
Blog Full Post
A beautiful and magnificent full-sized blog.
Photo
Blog Single v1
Write and talk about anything – your posts will look beautiful.
Photo
Blog Single v2
A full-screen background image will make your blog special.
Photo
Blog Single Video
You can also insert a video (youtube, vimeo) instead of an image.
Photo
Blog Single Sidebar
Classic version of the blog with a sidebar.
Photo
Portfolio v1
Your work and photos will look great.
Photo
Portfolio Fullwidth v2
Fullwidth gallery.
Photo
Portfolio Creative v3
Make your portfolio interesting, unique and unusual.
Photo
Portfolio Single v1
We also took care that you could tell in detail about your project.
Photo
Portfolio Single v2
Do you want a vertical grid? No problem.
Photo
Portfolio Single v3
Original portfolio page with your gallery.
Photo
About Us
Tell us about yourself and your amazing team.
Photo
Contact Us
Your customers and partners will always be able to contact you.
Photo
Services
All important information and prices for your customers.
Photo
Page 404
Original error page.
Photo
Cooming Soon
More new amazing pages...

Credit.

Libraries and plugins that were used for the template.

Plugin Description
jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Modernizr Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Validator The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form.
Autosize A small, stand-alone script to automatically adjust textarea height.
OwlCarousel Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
mo.js Motion Graphics For The Web.
Skrollr Parallax scrolling for the masses.
Jarallax Smooth parallax scrolling effect for background images.
Snap.svg SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Masonry Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
imagesLoaded Detect when images have been loaded.
Lightcase A beautiful, flexible and responsive Lightbox Plugin to present various types of media and content famously.
Sticky-kit A jQuery plugin for making smart sticky elements.
Object fit Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
Styles/Fonts/Images Description
animate.css Just-add-water CSS animations.
Font Awesome Font Awesome gives you scalable vector icons that can instantly be customized.
Stroke Gap Icons Webfont Icons.
Flaticon The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
Unsplash Free high-resolution photos.
Google Font Making the web more beautiful, fast, and open through great typography.

Changelog.

All changes and updates you can learn from the Changelog.

/* Version 1.5 - Jun 28th, 2017 */
- Add new page "blog_single_video.html"

/*-------------------------------------------*/

/* Version 1.4 - Jun 3th, 2017 */
- Added effects (Glitch, Reveal)

/*-------------------------------------------*/

/* Version 1.3 - Jun 2th, 2017 */
- Minor improvements

/*-------------------------------------------*/

/* Version 1.2 - May 31th, 2017 */

- Add new page "portfolio_single_fullwidth.html"

/*-------------------------------------------*/

/* Version 1.1 - May 29th, 2017 */

- Support RTL
- Add new page "blog single sidebar.html"

/*-------------------------------------------*/

/* Version 1.0 - May 15th, 2017 */

- Initialization release

Forzo – is an excellent solution for those who value their reputation and value style. Elegant and modern showcase will emphasize the attractiveness of your work.

Purchase naw