Showcase Slider
This template provides a very elegant way to showcase your work using a WebGL fullscreen slider. Setting up is simple. Please use the following codes:
Code Example:
Your slide number here need to be the same as the slide image which is located into #canvas-slider
Code Example:
Slide
Showcase slide options
Options |
Description |
|---|---|
change-header |
Set this class if you want to invert the header color when this slide is in viewport |
data-slide="1" |
Set slide number which is assigend with the footer counter |
data-color="#558e2f" |
Set color for mouse cursor on title hover |
Showcase Carousel
This template provides another elegant way to showcase your work using a Carousel slider. Setting up is simple. Please use the following codes:
Code Example:
Your slide images should be the same as the images which is located into .thumb-container for fit thumb screen animation
Code Example:
Slide Title
Carousel slide title options
Options |
Description |
|---|---|
data-color="#558e2f" |
Set color for mouse cursor on title hover |
Portfolio Grid
This template provides another elegant way to showcase your work using a Portfolio Grid. Setting up is simple. Please use the following codes:
Code Example:
Portfolio Grid Options
Options |
Description |
|---|---|
metro-grid |
Set this class for having a two metro columns portfolio grid |
parallax-grid |
Set this class for having a random columns portfolio grid with parallax items |
ladder-grid |
Set this class for having a three columns portfolio grid with ladder style alignment |
scaleout-grid |
Set this class for having a three columns portfolio grid with scale out effect on leaving viewport |
classic-grid |
Set this class for having a two columns portfolio grid |
Portfolio Grid Animations
Options |
Description |
|---|---|
webgl-fitthumbs |
Set this class to animate item thumb image to fullscreen with webgl effects |
scale-fitthumbs |
Set this class to animate item thumb image to fullscreen only with scale effect |
no-fitthumbs |
Set this class to disable the animation effect |
Portfolio item Structure
Code Example:
Portfolio Grid Item Options
Options |
Description |
|---|---|
data-color="#558e2f" |
Set color for mouse cursor on title hover |
Project Page
This page is composed of three section:
Hero
This page section contains the project title, subtitle and image/video.
Code Example:
Hero Caption Options
Options |
Description |
|---|---|
parallax-scroll-caption |
Set this class to have the caption title parallax on scroll |
change-header-color |
Set this class to cahnge header over the hero image |
parallax-scroll-image |
Set this class to have the hero image parallax on scroll |
Main Page Content
On this page section contains you can build all the page content.
Code Example:
This section has the following option:
Options |
Description |
|---|---|
content-max-width |
Set this class to have the content maximum width up to 1280px |
content-full-width |
Set this class to have the content width like the viewport |
Next Project Navigation
The section should have the same atributes as the next project hero.
Code Example:
This section has the following options:
Options |
Description |
|---|---|
auto-trigger |
Set this class for autotrigger link on reach bottom of each project page |
data-color="#838b8a" |
Set the color for Mouse Circle Cursor hovering the next page title url |
Didn't find what
you were looking for?
If there’s anything unclear or you have some concerns
send us a message and we'll get back to you.