Cascadia - Agency/Personal Portfolio HTML5 Template

Template documentation version 1.1.1

Table of Content

  • Item Name : Cascadia - Agency/Personal Portfolio HTML5 Template
  • Item Version : Version 1.1.1
  • Minumum Required : PHP 5.4 for contact form and subscription
  • Author by : ArtStyles Brand (ArtTemplate, ArtIcons)

Thank you for purchasing your item.

Cascadia is a great, modern design with unique illustrations and icons, a multi-purpose and fully responsive HTML5 template suitable for any type of studio, agency, corporate, finance services, business websites.

Excellent SVG graphics, which perfectly look on retina devices. Cascadia was built with the latest Bootstrap framework so that this template will look great on any device. You can use any type of Cascadia for your project. Its easy to use and well documented.

If you have any questions that are beyond the scope of this help file, please feel free to write in the comments. Thank you!

Cascadia template has the following features:

  • - Material Design Trends
  • - 6 Headers Styles
  • - 2 News (Blog) Page Styles
  • - Unique SVG graphics and icons (all vector shapes)
  • - Bootstrap Grid 1170px
  • - Easy to Use and Customize
  • - Particles Effect
  • - Parallax Effect
  • - MOJS Animated
  • - Retina Ready
  • - Working AJAX Contact and Subscribe Forms
  • - Smooth page scrolling
  • - Google Free Fonts
  • - W3C Valid HTML
  • - Extended Documentation
  • and much more…

1. General Markup#back to top

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
<html lang="en">

    <!-- Meta tags, titile javascript and css links -->
    <!-- Header -->
    <header class="base-header">

    <!-- /Header -->

    <!-- Slider -->
    <section class="main-slider main-slider-yellow" id="particles-js">

    <!-- /Slider -->

    <!-- Our Steps -->
    <section class="section section-white our-steps">

    <!-- /Our Steps -->

    <!-- Recent Projects -->
    <section class="section">

    <!-- /Recent Projects -->

    <!-- Our Features -->
    <section class="section section-white our-features">
    <!-- /Our Features -->

    <!-- Free Started -->
    <section class="section section-blue free-started">

    <!-- /Free Started -->

    <!-- Pricing Plans -->
    <section class="section section-white">

    <!-- /Pricing Plans -->

    <!-- Our Success -->
    <section class="section section-blue section-stats">

    <!-- /Our Success -->

    <!-- Quick Answers -->
    <section class="section section-white section-answers">

    <!-- /Quick Answers -->

    <!-- Reviews -->
    <section class="section section-white section-reviews">

    <!-- /Reviews -->

    <!-- News -->
    <section class="section">

    <!-- /News -->

    <!-- Payment -->
    <section class="section section-white">

    <!-- /Payment -->
    <!-- Footer -->
    <footer class="base-footer">

    <!-- /Footer -->

    <!-- Popup -->

    <!-- JavaScripts -->


2. Install and Customizing#back to top

To use the contact and subscribe form required php version not lower than 5.4

Customizing Properties Map

To customize its coordinates on the map, you need to open the file map.init.js and find the lines: 5 and 13 and replace the coordinates on their own.

center: {lat: 40.7143528, lng: -74.0059731}
location: {lat: 40.7143528, lng: -74.0059731},

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

Optionally, you can edit the text email template.

$EmailTo = "";

Customization of subscription form

To customize a subscribe form, you need to open the file form-subscribe.php from the folder php, find and replace line 12 on your emeil

Optionally, you can edit the text email template.

$EmailTo = "";

3. Pages Included 14 HTML Files#back to top

  1. index.html
  2. index-slider.html
  3. index-header-v1.html
  4. index-header-v2.html
  5. index-header-v3.html
  6. index-header-v4.html
  7. news.html
  8. news-left-sidebar.html
  9. news-right-sidebar.html
  10. news-single-image.html
  11. news-single-slider.html
  12. news-single-video.html
  13. news-single-audio.html
  14. projects-2-columns.html
  15. projects-3-columns.html
  16. projects-4-columns.html
  17. project-single.html
  18. about.html
  19. contacts.html
  20. faq.html
  21. 404_page.html

4. Plug-ins Used #back to top

Mall description of every plugin used.

Plugin Filename 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.
Particles A lightweight JavaScript library for creating particles
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.
Placeholders Placeholders.js is a JavaScript polyfill for the HTML5 placeholder attribute.
Magnific Popup Responsive lightbox & dialog script.
SmoothScroll Plugin smooth scroll page.
objectFitPolyfill A jQuery polyfill for browsers that don't support the object-fit CSS property.
Countimator Animated counter.
Masonry Cascading grid layout library.
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.

5. Styles #back to top

Here's a list of the stylesheet files we are using with this template, you can find more information opening each file:

File Name Description
/css/bootstrap.min.css Bootstrap's Base CSS file
/fonts/font-awesome-4.6.1/css/font-awesome.min.css Font Icons.
/fonts/stroke-gap-icons/style.css Font Icons.
/css/animate.css Set CSS animations
/css/style.css Main Stylesheet of the template - where you will find most of the customizable CSS.

6. Credits Files #back to top

Included Stylesheets:

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included CSS codes under css/

Included JavaScript:

These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under js/

Font Used:
Included Images:

7. Version History (Changelog) #back to top

All changes and updates you can learn from the Changelog

Thank you for purchasing my template! Template will be regularly updated in the future. If you have any questions, you can leave them always in the comments and I'll try to answer them and help you maximize quality.


Version 1.1.2 - Jun 17th, 2017

- Minor fixed

Version 1.1.1 - Feb 4th, 2017

- Additional header
- Improved mobile navigation
- Various improvements overall plan.

Version 1.1 - July 17th, 2016

- Added a lot of different pages
- Fixed minor

Version 1.0 - June 23th, 2016

- Initialization release

I'll be very grateful to you for the rating of 5 stars!