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">
<head>
<!-- Meta tags, titile javascript and css links -->
</head>
<body>
<!-- Header -->
<header class="base-header">
</header>
<!-- /Header -->
<!-- Slider -->
<section class="main-slider main-slider-yellow" id="particles-js">
</section>
<!-- /Slider -->
<!-- Our Steps -->
<section class="section section-white our-steps">
</section>
<!-- /Our Steps -->
<!-- Recent Projects -->
<section class="section">
</section>
<!-- /Recent Projects -->
<!-- Our Features -->
<section class="section section-white our-features">
</section>
<!-- /Our Features -->
<!-- Free Started -->
<section class="section section-blue free-started">
</section>
<!-- /Free Started -->
<!-- Pricing Plans -->
<section class="section section-white">
</section>
<!-- /Pricing Plans -->
<!-- Our Success -->
<section class="section section-blue section-stats">
</section>
<!-- /Our Success -->
<!-- Quick Answers -->
<section class="section section-white section-answers">
</section>
<!-- /Quick Answers -->
<!-- Reviews -->
<section class="section section-white section-reviews">
</section>
<!-- /Reviews -->
<!-- News -->
<section class="section">
</section>
<!-- /News -->
<!-- Payment -->
<section class="section section-white">
</section>
<!-- /Payment -->
<!-- Footer -->
<footer class="base-footer">
</footer>
<!-- /Footer -->
<!-- Popup -->
<!-- JavaScripts -->
</body>
</html>
2. Install and Customizing#back to top
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 example@example.com
Optionally, you can edit the text email template.
$EmailTo = "example@example.com";
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 example@example.com
Optionally, you can edit the text email template.
$EmailTo = "example@example.com";
3. Pages Included 14 HTML Files#back to top
- index.html
- index-slider.html
- index-header-v1.html
- index-header-v2.html
- index-header-v3.html
- index-header-v4.html
- news.html
- news-left-sidebar.html
- news-right-sidebar.html
- news-single-image.html
- news-single-slider.html
- news-single-video.html
- news-single-audio.html
- projects-2-columns.html
- projects-3-columns.html
- projects-4-columns.html
- project-single.html
- about.html
- contacts.html
- faq.html
- 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
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/
- 1. style.css - Primary stylesheet
- 2. bootstrap.min.css - Bootstrap stylesheet
- 3. font-awesome.min.css - FontAwesome Font Icons stylesheet
- 4. style.css - Stroke Gap Icons stylesheet
- 5. animate.css - CSS3 animations css file
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/
- 1. jquery-1.12.3.min.js - Base JavaScript
- 2. particles.min.js - Creating particles JavaScript
- 3. modernizr.custom.js - Modernizr JavaScript
- 4. validator.min.js - Validator JavaScript
- 5. autosize.min.js - Autosize JavaScript
- 6. placeholders.js - HTML5 placeholder attribute.
- 7. AJAX PHP Contact Form - Contact form without reloading the page
- 8. Magnific Popup - Responsive lightbox & dialog script
- 9. SmoothScroll - Plugin smooth scroll page
- 10. objectFitPolyfill - Support the object-fit CSS property.
- 11. Countimator - Animated counter.
- 12. Masonry - Cascading grid layout library
- 13. OwlCarousel - Responsive carousel slider.
- 14. mo.js - Motion Graphics For The Web.
- 15. Skrollr - Parallax scrolling for the masses.
- 15. Jarallax - Smooth parallax scrolling effect for background images.
- 16. common.js - File for initialization and customization of the plugins
- 1. Roboto - Base Font
- 1. Freepik
- 2. Pixeden
- 2. Unsplash
- 2. Office & Business Line Icons - Used icons. A complete set you can buy them separately.
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.
Changelog
----------------------------------------------------------------------------------------- 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