Phoenix One Page Parallax Documentation

Fully responsive one paged template built on Bootstrap 3 Framework.

Item Support

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Phoenix One Page Parallax is a multipurpose template that can be used by a creative agency, a corporate company or as personal portfolio for a freelancer .

It is a fully responsive one paged template built on Bootstrap 3 Framework which is a powerful mobile-first framework. It is Retina display ready, it is using the Parallax plugin and Isotope filtering for a powerful portfolio section.


General Markup

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

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

    <head>

        <!-- Meta Data -->
        <title>Phoenix Parallax One Page Template</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="author" content=""/>
        <link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-touch-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-touch-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-touch-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-touch-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-touch-icon-152x152.png">
        <link rel="icon" type="image/png" href="img/favicon/favicon-196x196.png" sizes="196x196">
        <link rel="icon" type="image/png" href="img/favicon/favicon-160x160.png" sizes="160x160">
        <link rel="icon" type="image/png" href="img/favicon/favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16">
        <link rel="icon" type="image/png" href="img/favicon/favicon-32x32.png" sizes="32x32">
        <meta name="msapplication-TileColor" content="#333333">
        <meta name="msapplication-TileImage" content="img/favicon/mstile-144x144.png">


        <!-- Fonts-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link href="css/font-awesome.min.css" rel="stylesheet">

        <!-- Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/owl.carousel.css" rel="stylesheet">

        <link href="style.css" rel="stylesheet">
        <link href="css/responsive.css" rel="stylesheet">




        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>


<body>

Features

Main features of the file

  1. Minimal and Bold Design
  2. Unique design
  3. 3 Homepage Versions
  4. Isotope Portfolio filtering (Save $25)
  5. Parallax One Page
  6. Animated Counters
  7. 100% Responsive
  8. Clean Code
  9. Bootstrap 3 Framework
  10. Browser Compatibility
  11. Filterable Portfolio
  12. AJAX Portfolio
  13. Video Background Home Version
  14. Working contact form
  15. 400+ Font Awesome Icons
  16. Retina Ready
  17. Pricing Tables
  18. Google Fonts
  19. Logo PSD included - so you can create your own
  20. Progress Bars
  21. Customized Google Map
  22. and much more...

In the zip package you download you will find 3 folders: HTML, DOCUMENTATION and PSD (containing the logo PSD).

  • HTML FOLDER: this is the folder that concerns you. It contains the main html and css files. Make the customizations you need and upload this folder files to you server.
  • DOCUMENTATION: info about this template

Plugin Name Description
Font-Awesome Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
For more info and full preview of the icons visit: http://fortawesome.github.io/Font-Awesome/
Owl Carousel Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
Isotope Wonderful plugin used for gallery filtering and for creating a beautiful layout for it.
Backstretch A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
Parallax Parallax plugin is a technique of scrolling to move images, text around the web page frame to create interesting visual movements.
Images Loaded Detect when images have been loaded.
Retina.js When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Stylesheets

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

File Name Description
css/font-awesome.min.css Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
css/bootstrap.min.css Bootstrap's Base CSS file
css/owl.carousel.css OWL Carousel's css file.
style.css Main Stylesheet of the template - where you will find most of the customizable CSS.
responsive.css Responsive Stylesheet of the template.

JavaScript Files

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Plugin Filename Description
jquery.min.js jQuery library main file
bootstrap.min.js Bootstrap javascript file
isotope.pkgd.js js file used for Isotope filtering
owl.carousel.js js file used for #clients and #testimonials carousel
jquery.backstretch.js A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
jquery.stellar.js Parallax plugin is a technique of scrolling to move images, text around the web page frame to create interesting visual movements.
imagesloaded.pkgd.js Detect when images have been loaded.
retina.min.js When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
fitvids.js Making embbed videos responsive.
custom.js js file for initialization and customization of the plugins found above

Change Background Image

If you want to change the background image of the intro section, open up the file index.html and change the following code:

        /* BACKSTRETCH FULL WIDTH INTRO IMAGE */
        $('#intro').ready(function() {
            $.backstretch("img/background1.jpg");
        });

Customize Slider

If you want to change the slider's speed transition, open up the file index-slider.html and change the following code:

            // Duration is the amount of time in between slides,
            // and fade is value that determines how quickly the next image will fade in
                $.backstretch([
                    "img/background1.jpg"
                    , "img/background2.jpg"
                    , "img/background3.jpg"
                ], {duration: 2000, fade: 750});

Customize Clients and Testimonials Slider

If you want to change the slider's speed transition, open up the file custom.js and change the following code:

$(document).ready(function(){
    'use strict';
    $("#owl-clients").owlCarousel({
        margin:20,
        loop:true,
        stagePadding:50,
        autoplay:true,
        responsive : {
                // breakpoint from 0 up
                0 : {
                    items:1
            },
            // breakpoint from 480 up
            480 : {
                items:3
                  },
        // breakpoint from 768 up
        768 : {
            items:4
                }
        },
        dots:false
    });
});

$(document).ready(function(){
    'use strict';
    $("#owl-client-testimonials").owlCarousel({
        items:3,
        loop:true,
        autoplay:true,
        responsive : {
            // breakpoint from 0 up
            0 : {
                items:1
            },
            // breakpoint from 480 up
            480 : {
                items:2
            },
            // breakpoint from 768 up
            768 : {
                items:3
            }
        },
        nav:true,
        navText:[
            "",
            ""
        ]
    });
});


$(document).ready(function(){
    'use strict';
    $("#owl-team").owlCarousel({
        items:4,
        loop:false,
        autoplay:true,
        responsive : {
            // breakpoint from 0 up
            0 : {
                items:1
            },
            // breakpoint from 480 up
            480 : {
                items:2
            },
            // breakpoint from 768 up
            768 : {
                items:3
            },

            1195 :{
                items:4
            }
        },
        nav:false,
        dots:false
    });
});



Customize Timers

Customize the counters found in the #charts section by opening custom.js and change the following code:

$('#charts').waypoint(function() {
    "use strict";
    // first timer
    $('.timer1').countTo({

        from: 0, // the number you want to start
        to: 250, // the number you want to reach
        speed: 250,
        refreshInterval: 1

    });

    // second timer
    $('.timer2').countTo({

        from: 0,// the number you want to start
        to: 70,// the number you want to reach
        speed: 250,
        refreshInterval: 1

    });


    // third timer
    $('.timer3').countTo({

        from: 0,// the number you want to start
        to: 120,// the number you want to reach
        speed: 250,
        refreshInterval: 1
    });


    // fourth timer
    $('.timer4').countTo({

        from: 0,// the number you want to start
        to: 101,// the number you want to reach
        speed: 250,
        refreshInterval: 1,
        onComplete: function(value) {
            $( '.timer' ).stop();
        }

    });


}, { offset: 500 });



contact.php

The php file that process the information received from the contact form (#contact) from the index.html

$address = "vladthemes@yahoo.com";


I've used the following images, icons or other files as listed.

JavaScript

  1. jQuery
  2. Retina
  3. Isotope
  4. Backstretch
  5. Owl carousel
  6. imagesLoaded
  7. Retina

Images

  1. Unsplash

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

My profile page - http://themeforest.net/user/artbreeze