Thank you for purchasing Spectrum, an easy to use Bootstrap framework for creating one page websites! In this documentation, we cover some of the basic components built into the theme as well as the various options for each section category. Each section option includes a code snippet that you can easily copy and paste into your theme as well as usage instructions each section component.

Using a Pre-Built Sample:

There are a number of pre-built sample templates that come available with Spectrum. If you want to use one of the pre-built samples instead of building your own layout, just follow these easy steps:

Pick your sample template. These are your options to choose from, and they are availalble in the Spectrum folder you downloaded.

Depending on the template you picked, there will be steps to customize the image background, slider images, or video background of the header. You can find more information on how to do this in the docs below under the Headers section.
Choose your color scheme by choosing which CSS file you want to use. In each sample, there are 15 color schemes available. They are all commented out using HTML comments in the <head>of each page. Pick your desired color scheme and delete the comments around it, and then delete the other color schemes. Note: The spectrum.cssfile is the default blue color scheme. If you are using a different color scheme you want to DELETE the spectrum.cssfile!
Afer you've chose your colors, simply add your own content to the sample. Instructions for each section option are available in the docs below, and if you get stuck just reference that section within the documentation. If you still need help, feel free to email us at the support email address provided in the README.txt file.

Setting Up a Custom Layout:

Setting up your custom template is easy with Spectrum! Just follow these steps:

Go to the root directory of Spectrum and open the blank.htmlfile. This is your starting point for your one page website. This file includes all of the Spectrum plugins and extensions including CSS, JavaScript, and jQuery Plugins.
Rename blank.htmlto index.htmland delete the demo landing page.
Choose the color scheme you want to use with your template. The default color scheme is the spectrum.cssfile. If you want to use a different color scheme, for example spectrum-green.css, DELETE the spectrum.cssfile and REPLACE it with the file you want to use instead.
Pick your navigation option and copy it from the documentation below and paste it into your index.htmlin place of .
Pick your header option from the documentation below and copy/paste it in place of 
Pick your sections you want in your website and copy/paste them in place of 
Pick your footer your want in your website and copy/past it in place of 
Add your content to your header, sections, asides, and footer. Follow the documentation below for more details.
Link your navigation to your sections by giving each <section>and ID and linking to that ID in your menu bar.
Example: in your navigation menu, <a href="#about">About</a>should link to a corresponding <section id="about">.
After your navigation menu is linked to your sections, make sure to double check for anything you've missed, and then publish your site!
Optional: Delete un-used scripts from your page. See the documentation below to see JavaScript dependencies for each header, section, aside, and footer option.

If you run into trouble or have questions, please feel free to email us at the address provided in the README.txt file.

Included Plugins and Their Uses:

Font Awesome: Icon fonts used in numerous sections.
Google Maps API: Used for the map background in one of the contact section examples. You must get your own Google Maps API key in order to use correctly!
Isotope: Used for portfolio sorting.
jqBootstrapValidation: Used to validate the contact form in all of the contact options.
jquery.easing: Used for smooth scrolling from section to section when links are selected. Navigation links and the scroll down button enable an easing based page scroll.
jquery.fitvids: Used for responsive video. Example can be seen in the portfolio popup modals in Portfolio Option 1.
jquery.fs.wallpaper: Used for the video background in the Full Page mp4, webm, or ogg Video Background header option. Can also be used for a background image, or a non-looping YouTube video.
jquery.mousewheel: Used as part of the smooth mouse wheel scrolling feature for better looking parallax features.
jquery.simplr.smoothscroll: Uses jquery.mousewheel to create the smooth scrolling effect. Used for better looking parallax features.
jquery.tubular: Used for the video background in the Full Page YouTube Video Background header option. Looping video is built into the plugin.
owl.carousel: Used in numerous sections for image and content carousels.
scrollReveal: Used in the example pages but not included in the HTML snippets below, except for in the Screen Call To Action example. Allows for content to fade or fly in on scrolling.
stellar: Used for parallax backgrounds in the headers, call to action, and other sections.

Heading 1 Sub Heading

Heading 2 Sub Heading

Heading 3 Sub Heading

Heading 4 Sub Heading

Heading 5 Sub Heading

Heading 6 Sub Heading

Default Body Copy

This is an example of the body copy used in Spectrum. The font size is larger than the Bootstrap default for greater legibility. The default body font is an open source serif font called "Lora" but if you want to use a sans serif font instead you can use "Lato" in its place.
This is an example of bold text.
This is an example of italicized text.
This is an example of a link.

Sans Serif Body Copy

This is an example of the sans serif body copy used in Spectrum. The font size is larger than the Bootstrap default for greater legibility. This font is "Lato" - an open source web font. To use this font, simply use the helper class .sans-serifon anything you want to be in this type style. You can also change the <body>font directly in the CSS, or use the included LESS files to customize the font.
This is an example of bold sans serif text.
This is an example of italicized sans serif text.
This is an example of a sans serif link.

Text Color Helper Classes

Example Text .text-primary
Example Text .text-success
Example Text .text-info
Example Text .text-warning
Example Text .text-danger
Example Text .text-dark
Example Text .text-light

Font Style Helper Classes

Example Text .serif
Example Text .sans-serif
Example Text .heading
Example Text .script
Example Text .caps

Utility Classes

.nopadding- Removes all padding from the element.
.nomargin- Removes all margin from the element.

Horizontal Rules

<hr class="primary">

<hr class="dark">

<hr class="light">

Background Helper Classes

Light Background
.bg-light

Primary Background
.bg-primary

Success Background
.bg-success

Info Background
.bg-info

Warning Background
.bg-warning

Danger Background
.bg-danger

Dark Background
.bg-dark

Lighter Background
.bg-lighter

Aside and Section Overlay

You can also use the .aside-overlayor .section-overlayto overlay a background image section with a transparent, colored overlay. You must use the .nopaddinghelper class on the parent <aside>or <section>. See the examples below.

Aside Overlay Example:

<aside class="bg-parallax-dark nopadding" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5">
    <div class="aside-overlay">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2 class="section-heading">Call to Action with Overlay</h2>
                    <hr class="light">
                    <p>This parallax call to action box features a background image with an overlay. Parallax is disabled on mobile devices.</p>
                    <a href="#" class="btn btn-outline btn-light btn-lg">Click Me!</a>
                </div>
            </div>
        </div>
    </div>
</aside>

Section Overlay Example:

<section class="bg-parallax-dark nopadding" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5">
    <div class="section-overlay">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2 class="section-heading">Parallax Background Section with Overlay</h2>
                    <hr class="light">
                    <p>This section features a background image with an overlay. Parallax is disabled on mobile devices.</p>
                    <a href="#" class="btn btn-outline btn-light btn-lg">Click Me!</a>
                </div>
            </div>
        </div>
    </div>
</section>

Content that is revealed when scrolled to is activated using a plugin called scrollReveal.js. The scrolling effects are activated via the data-scrollrevealdata attribute. You will notice these data attributes in various places within the sample templates. For usage instructions, please reference the scrollReveal.js documentation on GitHub .

Retina images are supported in this theme via the retina.js plugin. First, make sure the retina.js script is called for within your document. The plugin checks your server to see if there are any high-res versions of your picture available, which are identified by having the @2xmodifier on the image.

For example, if you have an image on your webpage that looks like this <img src="path/to/image.jpg">then create another image called image@2x.jpgalong with the original image and on certain devices the high-res image will be served in place of the normal image.

For more details, visit the retina.js plugin documentation.

Default Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-default">Default</button>

Raised Buttons

<button type="button" class="btn btn-primary btn-raised">Primary</button>
<button type="button" class="btn btn-success btn-raised">Success</button>
<button type="button" class="btn btn-info btn-raised">Info</button>
<button type="button" class="btn btn-warning btn-raised">Warning</button>
<button type="button" class="btn btn-danger btn-raised">Danger</button>
<button type="button" class="btn btn-default btn-raised">Default</button>

Outline Buttons

<button type="button" class="btn btn-primary btn-outline">Primary</button>
<button type="button" class="btn btn-success btn-outline">Success</button>
<button type="button" class="btn btn-info btn-outline">Info</button>
<button type="button" class="btn btn-warning btn-outline">Warning</button>
<button type="button" class="btn btn-danger btn-outline">Danger</button>
<button type="button" class="btn btn-dark btn-outline">Dark</button>

Rounded Default Buttons

<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-default btn-rounded">Default</button>

Rounded Raised Buttons

<button type="button" class="btn btn-primary btn-raised btn-rounded">Primary</button>
<button type="button" class="btn btn-success btn-raised btn-rounded">Success</button>
<button type="button" class="btn btn-info btn-raised btn-rounded">Info</button>
<button type="button" class="btn btn-warning btn-raised btn-rounded">Warning</button>
<button type="button" class="btn btn-danger btn-raised btn-rounded">Danger</button>
<button type="button" class="btn btn-default btn-raised btn-rounded">Default</button>

Rounded Outline Buttons

<button type="button" class="btn btn-primary btn-outline btn-rounded">Primary</button>
<button type="button" class="btn btn-success btn-outline btn-rounded">Success</button>
<button type="button" class="btn btn-info btn-outline btn-rounded">Info</button>
<button type="button" class="btn btn-warning btn-outline btn-rounded">Warning</button>
<button type="button" class="btn btn-danger btn-outline btn-rounded">Danger</button>
<button type="button" class="btn btn-dark btn-outline btn-rounded">Dark</button>

Square Default Buttons

<button type="button" class="btn btn-primary btn-square">Primary</button>
<button type="button" class="btn btn-success btn-square">Success</button>
<button type="button" class="btn btn-info btn-square">Info</button>
<button type="button" class="btn btn-warning btn-square">Warning</button>
<button type="button" class="btn btn-danger btn-square">Danger</button>
<button type="button" class="btn btn-default btn-square">Default</button>

Square Raised Buttons

<button type="button" class="btn btn-primary btn-raised btn-square">Primary</button>
<button type="button" class="btn btn-success btn-raised btn-square">Success</button>
<button type="button" class="btn btn-info btn-raised btn-square">Info</button>
<button type="button" class="btn btn-warning btn-raised btn-square">Warning</button>
<button type="button" class="btn btn-danger btn-raised btn-square">Danger</button>
<button type="button" class="btn btn-default btn-raised btn-square">Default</button>

Square Outline Buttons

<button type="button" class="btn btn-primary btn-outline btn-square">Primary</button>
<button type="button" class="btn btn-success btn-outline btn-square">Success</button>
<button type="button" class="btn btn-info btn-outline btn-square">Info</button>
<button type="button" class="btn btn-warning btn-outline btn-square">Warning</button>
<button type="button" class="btn btn-danger btn-outline btn-square">Danger</button>
<button type="button" class="btn btn-dark btn-outline btn-square">Dark</button>

Dark Social Buttons

Note: Requires Font Awesome icon fonts.

<a href="#" class="btn btn-social-dark btn-android"><i class="fa fa-fw fa-android"></i></a>
<a href="#" class="btn btn-social-dark btn-apple"><i class="fa fa-fw fa-apple"></i></a>
<a href="#" class="btn btn-social-dark btn-bitcoin"><i class="fa fa-fw fa-bitcoin"></i></a>
<a href="#" class="btn btn-social-dark btn-css3"><i class="fa fa-fw fa-css3"></i></a>
<a href="#" class="btn btn-social-dark btn-dribbble"><i class="fa fa-fw fa-dribbble"></i></a>
<a href="#" class="btn btn-social-dark btn-dropbox"><i class="fa fa-fw fa-dropbox"></i></a>
<a href="#" class="btn btn-social-dark btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-social-dark btn-flickr"><i class="fa fa-fw fa-flickr"></i></a>
<a href="#" class="btn btn-social-dark btn-foursquare"><i class="fa fa-fw fa-foursquare"></i></a>
<a href="#" class="btn btn-social-dark btn-github"><i class="fa fa-fw fa-github"></i></a>
<a href="#" class="btn btn-social-dark btn-google-plus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-social-dark btn-html5"><i class="fa fa-fw fa-html5"></i></a>
<a href="#" class="btn btn-social-dark btn-instagram"><i class="fa fa-fw fa-instagram"></i></a>
<a href="#" class="btn btn-social-dark btn-linkedin"><i class="fa fa-fw fa-linkedin"></i></a>
<a href="#" class="btn btn-social-dark btn-linux"><i class="fa fa-fw fa-linux"></i></a>
<a href="#" class="btn btn-social-dark btn-maxcdn"><i class="fa fa-fw fa-maxcdn"></i></a>
<a href="#" class="btn btn-social-dark btn-pagelines"><i class="fa fa-fw fa-pagelines"></i></a>
<a href="#" class="btn btn-social-dark btn-pinterest"><i class="fa fa-fw fa-pinterest"></i></a>
<a href="#" class="btn btn-social-dark btn-renren"><i class="fa fa-fw fa-renren"></i></a>
<a href="#" class="btn btn-social-dark btn-skype"><i class="fa fa-fw fa-skype"></i></a>
<a href="#" class="btn btn-social-dark btn-stack-exchange"><i class="fa fa-fw fa-stack-exchange"></i></a>
<a href="#" class="btn btn-social-dark btn-stack-overflow"><i class="fa fa-fw fa-stack-overflow"></i></a>
<a href="#" class="btn btn-social-dark btn-trello"><i class="fa fa-fw fa-trello"></i></a>
<a href="#" class="btn btn-social-dark btn-tumblr"><i class="fa fa-fw fa-tumblr"></i></a>
<a href="#" class="btn btn-social-dark btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-social-dark btn-vimeo"><i class="fa fa-fw fa-vimeo-square"></i></a>
<a href="#" class="btn btn-social-dark btn-vk"><i class="fa fa-fw fa-vk"></i></a>
<a href="#" class="btn btn-social-dark btn-weibo"><i class="fa fa-fw fa-weibo"></i></a>
<a href="#" class="btn btn-social-dark btn-windows"><i class="fa fa-fw fa-windows"></i></a>
<a href="#" class="btn btn-social-dark btn-xing"><i class="fa fa-fw fa-xing"></i></a>
<a href="#" class="btn btn-social-dark btn-youtube"><i class="fa fa-fw fa-youtube"></i></a>

Light Social Buttons

Note: Requires Font Awesome icon fonts.

<a href="#" class="btn btn-social-light btn-android"><i class="fa fa-fw fa-android"></i></a>
<a href="#" class="btn btn-social-light btn-apple"><i class="fa fa-fw fa-apple"></i></a>
<a href="#" class="btn btn-social-light btn-bitcoin"><i class="fa fa-fw fa-bitcoin"></i></a>
<a href="#" class="btn btn-social-light btn-css3"><i class="fa fa-fw fa-css3"></i></a>
<a href="#" class="btn btn-social-light btn-dribbble"><i class="fa fa-fw fa-dribbble"></i></a>
<a href="#" class="btn btn-social-light btn-dropbox"><i class="fa fa-fw fa-dropbox"></i></a>
<a href="#" class="btn btn-social-light btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-social-light btn-flickr"><i class="fa fa-fw fa-flickr"></i></a>
<a href="#" class="btn btn-social-light btn-foursquare"><i class="fa fa-fw fa-foursquare"></i></a>
<a href="#" class="btn btn-social-light btn-github"><i class="fa fa-fw fa-github"></i></a>
<a href="#" class="btn btn-social-light btn-google-plus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-social-light btn-html5"><i class="fa fa-fw fa-html5"></i></a>
<a href="#" class="btn btn-social-light btn-instagram"><i class="fa fa-fw fa-instagram"></i></a>
<a href="#" class="btn btn-social-light btn-linkedin"><i class="fa fa-fw fa-linkedin"></i></a>
<a href="#" class="btn btn-social-light btn-linux"><i class="fa fa-fw fa-linux"></i></a>
<a href="#" class="btn btn-social-light btn-maxcdn"><i class="fa fa-fw fa-maxcdn"></i></a>
<a href="#" class="btn btn-social-light btn-pagelines"><i class="fa fa-fw fa-pagelines"></i></a>
<a href="#" class="btn btn-social-light btn-pinterest"><i class="fa fa-fw fa-pinterest"></i></a>
<a href="#" class="btn btn-social-light btn-renren"><i class="fa fa-fw fa-renren"></i></a>
<a href="#" class="btn btn-social-light btn-skype"><i class="fa fa-fw fa-skype"></i></a>
<a href="#" class="btn btn-social-light btn-stack-exchange"><i class="fa fa-fw fa-stack-exchange"></i></a>
<a href="#" class="btn btn-social-light btn-stack-overflow"><i class="fa fa-fw fa-stack-overflow"></i></a>
<a href="#" class="btn btn-social-light btn-trello"><i class="fa fa-fw fa-trello"></i></a>
<a href="#" class="btn btn-social-light btn-tumblr"><i class="fa fa-fw fa-tumblr"></i></a>
<a href="#" class="btn btn-social-light btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-social-light btn-vimeo"><i class="fa fa-fw fa-vimeo-square"></i></a>
<a href="#" class="btn btn-social-light btn-vk"><i class="fa fa-fw fa-vk"></i></a>
<a href="#" class="btn btn-social-light btn-weibo"><i class="fa fa-fw fa-weibo"></i></a>
<a href="#" class="btn btn-social-light btn-windows"><i class="fa fa-fw fa-windows"></i></a>
<a href="#" class="btn btn-social-light btn-xing"><i class="fa fa-fw fa-xing"></i></a>
<a href="#" class="btn btn-social-light btn-youtube"><i class="fa fa-fw fa-youtube"></i></a>

App Store Buttons

<a class="btn btn-primary btn-lg" href="#"><img src="../assets/img/app/apple-badge.png" alt=""></a>
<a class="btn btn-primary btn-lg" href="#"><img src="../assets/img/app/apple-badge.png" alt=""></a>

There are two navigation options to choose from when using Spectrum: a dark background and light background collapsing header. They are similar is look and feel, and share many components, but there are a few subtle differences that are important.

Option 1: Dark Background Collapsing Navigation

HTML:

<nav class="navbar navbar-dark navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#page-top">
                <span class="logo"><img src="path/to/logo.png" alt=""></span>
                <span class="logo-collapse"><img src="path/to/collapsed-logo.png" alt=""></span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#about">About</a>
                </li>
                <li class="page-scroll">
                    <a href="#features">Features</a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">Portfolio</a>
                </li>
                <li class="page-scroll">
                    <a href="#blog">Blog</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Usage:

First make sure that your body tag has a page-top id. It should look like this: <body id="page-top">. This will make sure that when a user clicks on the logo it will bring them back to the top of the page.

Each link should be within a <li class="page-scroll">. This will activate the smooth scrolling jQuery and will bring you to the target section.

Each link within the navigation should target a section ID. For example, if one of your menu items is <a href="#about">About</a>then there should be a corresponding <section id="about">somewhere within your HTML.

Note: DO NOT DELETE the first menu item within the list with the hiddenclass. This ensures that the active class will be removed from the first link when scrolled up past that section.

Setting the Logo Image:

There are two places you will need to set the logo image. The first <span class="logo"><img src="path/to/logo.png" alt=""></span>determines the logo image when the menu bar is expanded. The second <span class="logo-collapse"><img src="path/to/collapsed-logo.png" alt=""></span>determines the logo image when the menu bar is collapsed after scrolling. If you want the logos to be the same, you can delete the second line of code. If you want them to be different however, the option is there.

For the scrolling to work, make sure that your links have a parent class of .page-scrolllike in the example code. Also, make sure that your link targets match a section ID somewhere on your page.

Option 2: Light Background Collapsing Navigation

HTML:

<nav class="navbar navbar-light navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#page-top">
                <span class="logo"><img src="path/to/logo.png" alt=""></span>
                <span class="logo-collapse"><img src="path/to/collapsed-logo.png" alt=""></span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#about">About</a>
                </li>
                <li class="page-scroll">
                    <a href="#features">Features</a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">Portfolio</a>
                </li>
                <li class="page-scroll">
                    <a href="#blog">Blog</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Usage:

Each link should be within a <li class="page-scroll">. This will activate the smooth scrolling jQuery and will bring you to the target section.

Note: DO NOT DELETE the first menu item within the list with the hiddenclass. This ensures that the active class will be removed from the first link when scrolled up past that section.

Setting the Logo Image:

For the scrolling to work, make sure that your links have a parent class of .page-scrolllike in the example code. Also, make sure that your link targets match a section ID somewhere on your page.

Customizing the Logo

In order to customize the logo, we recommend creating a logo with a transparent background that has a height of 50px. The logo in the sample is white, but if your page background is lighter in color, your logo can be darker.

Also, you will want to create a high-res version of your logo, or the same logo but double the size, for mobile devices.

For example, the sample logo provided in the template is named logo.png but it also has a high-res version named logo@2x.png that is served on mobile devices. The retina.js plugin is what makes this happen. With your logo, simply use the same @2x condition for your high-res version and the plugin will do the rest!

Option 1: Full Page Parallax Background Image

This option features a full page parallax background image with a subtle overlay with a text content slider.

HTML:

<header class="intro-img intro-dark-bg" style="background-image: url(path/to/image.jpg)" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50">
    <div class="overlay"></div>
    <div class="intro-body">
        <div class="container">
            <div class="intro-welcome">...</div>
            <br>
            <h1 class="brand-heading">...</h1>
            <hr class="light">
            <div class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <h4>...</h4>
                    </div>
                    <div class="item">
                        <h4>...</h4>
                    </div>
                    <div class="item">
                        <h4>...</h4>
                    </div>
                </div>
            </div>
            <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                <a href="#" class="btn btn-scroll-light sink">
                    <i class="fa fa-angle-double-down"></i>
                </a>
            </div>
        </div>
    </div>
</header>

View Demo

Setting the Background Image:

The background image is conveniently set using inline CSS. To change it, enter the correct file path to your background image in place of style="background-image: url(path/to/image.jpg)". You can move this to a CSS stylesheet if preferred.

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Changing the Text Color:

The example above uses the intro-dark-bghelper class. If your background image is lighter, replace intro-dark-bgwith intro-light-bg. You will also need to change the light horizontal rule to a colored horizontal rule (dark, primary, or other).

Removing the Overlay:

You can remove the image overlay by deleting <div class="overlay"></div>.

Disabling Parallax:

You can disable the parallax feature by removing data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50"from the <header>

Scroll Down Button:

Make sure your scroll button links to the first section of your page.

Note: If your images are light in color and you are using the intro-light-bgclass, be sure to change btn-scroll-lightto btn-scroll-dark.

Plugin Dependencies:

stellar.js
jquery.easing.1.3.js
scrollReveal.js
hover.min.css
Font Awesome

Option 2: Half Page Parallax Background Image

This option features a half page parallax background image with a subtle overlay with a text content slider.

HTML:

<header class="intro-img-half intro-dark-bg" style="background-image: url(path/to/image.jpg)" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50">
    <div class="overlay"></div>
    <div class="intro-body">
        <div class="container">
            <div class="intro-welcome">...</div>
            <br>
            <h1 class="brand-heading">...</h1>
            <hr class="light">
            <div class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <h4>...</h4>
                    </div>
                    <div class="item">
                        <h4>...</h4>
                    </div>
                    <div class="item">
                        <h4>...</h4>
                    </div>
                </div>
            </div>
            <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                <a href="#" class="btn btn-scroll-light sink">
                    <i class="fa fa-angle-double-down"></i>
                </a>
            </div>
        </div>
    </div>
</header>

View Demo

Setting the Background Image:

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Changing the Text Color:

Removing the Overlay:

You can remove the image overlay by deleting <div class="overlay"></div>.

Disabling Parallax:

You can disable the parallax feature by removing data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50"from the <header>

Scroll Down Button:

Make sure your scroll button links to the first section of your page.

Note: If your images are light in color and you are using the intro-light-bgclass, be sure to change btn-scroll-lightto btn-scroll-dark.

Plugin Dependencies:

stellar.js
jquery.easing.1.3.js
scrollReveal.js
hover.min.css
Font Awesome

Option 3: Full Page Image Slider

This option features a full page image slider with captions using the built-in Bootstrap carousel.

HTML:

<header id="myCarousel" class="carousel slide carousel-fade intro-slider intro-dark-bg">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="fill" style="background-image:url('path/to/image.jpg');"></div>
            <div class="overlay"></div>
            <div class="carousel-caption">
                <div class="intro-body">
                    <p class="intro-welcome">...</p>
                    <br>
                    <h1 class="brand-heading">...</h1>
                    <hr class="light">
                    <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                        <a href="#" class="btn btn-scroll-light sink">
                            <i class="fa fa-angle-double-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('path/to/image.jpg');"></div>
            <div class="overlay"></div>
            <div class="carousel-caption">
                <div class="intro-body">
                    <p class="intro-welcome">...</p>
                    <br>
                    <h1 class="brand-heading">...</h1>
                    <hr class="light">
                    <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                        <a href="#" class="btn btn-scroll-light sink">
                            <i class="fa fa-angle-double-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('path/to/image.jpg');"></div>
            <div class="overlay"></div>
            <div class="carousel-caption">
                <div class="intro-body">
                    <p class="intro-welcome">...</p>
                    <br>
                    <h1 class="brand-heading">...</h1>
                    <hr class="light">
                    <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                        <a href="#" class="btn btn-scroll-light sink">
                            <i class="fa fa-angle-double-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

View Demo

Setting the Slider Images:

Each slides background image is conveniently set using inline CSS. To change it, enter the correct file path to your background image in place of style="background-image: url(path/to/image.jpg)"for each slide. The snippet above features three slides, but you can add more if desired. Be sure that you understand the Bootstrap carousel documentation before doing this. You can move the slide backgrounds to a CSS stylesheet if preferred.

Changing the Text Color:

Removing the Overlay:

You can remove the image overlay by deleting <div class="overlay"></div>.

Scroll Down Button:

Make sure your scroll button links to the first section of your page.

Note: If your images are light in color and you are using the intro-light-bgclass, be sure to change btn-scroll-lightto btn-scroll-dark.

Plugin Dependencies:

Bootstrap Carousel
jquery.easing.1.3.js
scrollReveal.js
hover.min.css
Font Awesome

Option 4: Half Page Image Slider

This option features a full page image slider with captions using the built-in Bootstrap carousel.

HTML:

<header id="myCarousel" class="carousel slide carousel-fade intro-slider-half intro-dark-bg">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="fill" style="background-image:url('path/to/image.jpg');"></div>
            <div class="overlay"></div>
            <div class="carousel-caption">
                <div class="intro-body">
                    <p class="intro-welcome">...</p>
                    <br>
                    <h1 class="brand-heading">...</h1>
                    <hr class="light">
                    <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                        <a href="#" class="btn btn-scroll-light sink">
                            <i class="fa fa-angle-double-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('path/to/image.jpg');"></div>
            <div class="overlay"></div>
            <div class="carousel-caption">
                <div class="intro-body">
                    <p class="intro-welcome">...</p>
                    <br>
                    <h1 class="brand-heading">...</h1>
                    <hr class="light">
                    <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                        <a href="#" class="btn btn-scroll-light sink">
                            <i class="fa fa-angle-double-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('path/to/image.jpg');"></div>
            <div class="overlay"></div>
            <div class="carousel-caption">
                <div class="intro-body">
                    <p class="intro-welcome">...</p>
                    <br>
                    <h1 class="brand-heading">...</h1>
                    <hr class="light">
                    <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                        <a href="#" class="btn btn-scroll-light sink">
                            <i class="fa fa-angle-double-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

View Demo

Setting the Slider Images:

Changing the Text Color:

Removing the Overlay:

You can remove the image overlay by deleting <div class="overlay"></div>.

Scroll Down Button:

Make sure your scroll button links to the first section of your page.

Note: If your images are light in color and you are using the intro-light-bgclass, be sure to change btn-scroll-lightto btn-scroll-dark.

Plugin Dependencies:

Bootstrap Carousel
jquery.easing.1.3.js
scrollReveal.js
hover.min.css
Font Awesome

Option 5: Full Page mp4, webm, or ogg Video Background

This option features a full page video background with a text carousel. Supported video formats for this header option are mp4, webm, or ogg. You can also set a mobile fallback image, see instructions below.

HTML:

<header class="video-bg">
    <div class="intro-video intro-dark-bg container">
        <div class="overlay"></div>
        <div class="intro-body">
            <div class="container">
                <a href="#" class="btn btn-primary btn-square btn-lg">Button</a>
                <br>
                <br>
                <h1 class="brand-heading">...</h1>
                <hr class="light">
                <div class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <h4>...</h4>
                        </div>
                        <div class="item">
                            <h4>...</h4>
                        </div>
                        <div class="item">
                            <h4>...</h4>
                        </div>
                    </div>
                </div>
                <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                    <a href="#about" class="btn btn-scroll-light sink">
                        <i class="fa fa-angle-double-down"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

jQuery:

<script>
$(".video-bg").wallpaper({
    source: {
        mp4: "path/to/video.mp4",
        ogg: "path/to/video.ogg",
        webm: "path/to/video.webm",
        poster: "path/to/image.jpg"
    }
});
</script>

View Demo

Usage Instructions and Setting the Video Background:

Copy the above HTML snippet onto your page and fill in the headings and captions with your desired content. Then copy the jQuery script above and put it at the end of your page, just before closing the </body>. Then link to your video in the script. You can delete video formats that aren't being used. The poster:file should be an image. This will serve as a mobile fallback and loading image. Note : The example in the demo is only using an mp4.

Changing the Text Color:

Removing the Overlay:

You can remove the overlay by deleting <div class="overlay"></div>.

Scroll Down Button:

Make sure your scroll button links to the first section of your page.

Note: If your images are light in color and you are using the intro-light-bgclass, be sure to change btn-scroll-lightto btn-scroll-dark.

Plugin Dependencies:

Wallpaper

jquery.fs.wallpaper.js
jquery.fs.wallpaper.css

jquery.easing.1.3.js
scrollReveal.js
hover.min.css
Font Awesome

Option 6: Full Page YouTube Video Background

This option features a full page video background with a text carousel. YouTube is the only video format supported in this example.

HTML:

<header class="video-bg">
    <div class="intro-video intro-dark-bg container">
        <div class="overlay"></div>
        <div class="intro-body">
            <div class="container">
                <a href="#" class="btn btn-primary btn-square btn-lg">Button</a>
                <br>
                <br>
                <h1 class="brand-heading">...</h1>
                <hr class="light">
                <div class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <h4>...</h4>
                        </div>
                        <div class="item">
                            <h4>...</h4>
                        </div>
                        <div class="item">
                            <h4>...</h4>
                        </div>
                    </div>
                </div>
                <div class="page-scroll" data-scrollreveal="enter bottom after .6s">
                    <a href="#about" class="btn btn-scroll-light sink">
                        <i class="fa fa-angle-double-down"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

jQuery:

<script>
$('.video-bg').tubular({
    videoId: 'gJCgGCS6ri4',
    start: 1
});
</script>

View Demo

Usage Instructions and Setting the Video Background:

Copy the above HTML snippet onto your page and fill in the headings and captions with your desired content. Then copy the jQuery script above and put it at the end of your page, just before closing the </body>. The videoID:is the ID if your YouTube video. The start:is the time you want the video to start at. This video automatically loops. It is recommended that you disable advertisements on your YouTube video for a better experience.

Changing the Text Color:

Removing the Overlay:

You can remove the overlay by deleting <div class="overlay"></div>.

Scroll Down Button:

Make sure your scroll button links to the first section of your page.

Note: If your images are light in color and you are using the intro-light-bgclass, be sure to change btn-scroll-lightto btn-scroll-dark.

Plugin Dependencies:

jquery.tubular.js
jquery.easing.1.3.js
scrollReveal.js
hover.min.css
Font Awesome

About Option 1: Hover Carousel with Intro Text

This option features a carousel with hover activated portraits along with some introduction text.

HTML:

<section class="about-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>About</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <p>...</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="about-1-carousel" class="text-center">

                    <!-- Single Item -->
                    <div class="item about-img-1">
                        <div class="info">
                            <!-- Mobile Fallback Image -->
                            <img class="img-responsive img-circle visible-xs" src="path/to/image.jpg" alt="">
                            <!-- Name / Position / Social Links -->
                            <h3>Name</h3>
                            <p>Role</p>
                            <ul class="list-inline">
                                <li>
                                    <a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a>
                                </li>
                                <li>
                                    <a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a>
                                </li>
                                <li>
                                    <a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End of Single Item -->

                </div>
            </div>
        </div>
    </div>
</section>

CSS:

@media(min-width:767px) {
    .about-img-1 {
        background-image: url(path/to/image.jpg);
    }
}

View Demo

Creating More Items:

The code example above features only one carousel item. To make more you will need to copy/paste everthing inbetween and as many times as needed. In the demo example, there are 8 single items being shown. You can use the demo page for reference.

Setting the Images:

The images in the carousel are set in TWO PLACES . First, there is a mobile fallback image set using inline CSS. This image will only display on small screen sizes. Second, you will need to set main image using a CSS media query. See the above CSS example and use the demo as reference.

Changing the Text Color:

Using Different Social Links:

The example uses Facebook, Twitter, and LinkedIn links within each profile. The social icons are set using the Font Awesome icon library. You can replace the example social networks with any icons that exist within Font Awesome.

Plugin Dependencies:

Owl Carousel

owl.carousel.js
owl.carousel.css
owl.theme.css
owl.transitions.css

Font Awesome

About Option 2: Personal Image with Text and Social Buttons

This option features a single image with a small text block and social buttons.

HTML:

<section class="about-2">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-1">
                <img src="path/to/image.jpg" class="img-circle img-responsive img-centered dark-faded-border" alt="">
            </div>
            <div class="col-lg-5 text-center">
                <h2>About</h2>
                <hr class="primary">
                <p>...</p>
                <ul class="list-inline">
                    <li>
                        <a href="#" class="btn btn-social-dark btn-facebook">
                            <i class="fa fa-fw fa-facebook"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-social-dark btn-linkedin">
                            <i class="fa fa-fw fa-linkedin"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-social-dark btn-twitter">
                            <i class="fa fa-fw fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-social-dark btn-dribbble">
                            <i class="fa fa-fw fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Image:

In this option, the image is set within the HTML. Simply change the <img src="">path to your image.

Changing the Text Color:

Using Different Social Buttons:

This example uses built in spectrum social buttons. There are two color options for these social buttons, either btn-social-darkor btn-social-light. Here is a list of the supported buttons:

.btn-android
.btn-apple
.btn-bitcoin
.btn-css3
.btn-dribbble
.btn-dropbox
.btn-facebook
.btn-flickr
.btn-foursquare
.btn-github
.btn-google-plus
.btn-html5
.btn-instagram
.btn-linkedin
.btn-linux
.btn-maxcdn
.btn-pagelines
.btn-pinterest
.btn-renren
.btn-skype
.btn-stack-exchange
.btn-stack-overflow
.btn-trello
.btn-tumblr
.btn-twitter
.btn-vimeo
.btn-vk
.btn-weibo
.btn-windows
.btn-xing
.btn-youtube

Plugin Dependencies:

Owl Carousel

owl.carousel.js
owl.carousel.css
owl.theme.css
owl.transitions.css

Font Awesome

About Option 3: Descriptive Text with a Single Image Carousel

This option features a single image with a small text block and social buttons.

HTML:

<section class="about-3 bg-parallax-dark text-center" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="750">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-6">
                <h2>About</h2>
                <hr class="light">
                <p>...</p>
            </div>
            <div class="col-lg-3 col-lg-offset-1 col-md-6">
                <h2>Team</h2>
                <hr class="light">
                <div id="about-3-carousel" class="text-center">

                    <!-- Single Item -->
                    <div class="item about-img-1">
                        <div class="info">
                            <!-- Mobile Fallback Image -->
                            <img class="img-responsive img-circle visible-xs" src="path/to/image.jpg" alt="">
                            <!-- Name / Position / Social Links -->
                            <h3>Name</h3>
                            <p>Role</p>
                            <ul class="list-inline">
                                <li>
                                    <a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a>
                                </li>
                                <li>
                                    <a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a>
                                </li>
                                <li>
                                    <a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End of Single Item -->

                </div>
            </div>
        </div>
    </div>
</section>

CSS:

@media(min-width:767px) {
    .about-img-1 {
        background-image: url(path/to/image.jpg);
    }
}

View Demo

Creating More Items:

Setting the Carousel Images:

Setting the Background Image:

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Using Different Social Links:

Disabling Parallax:

You can disable the parallax feature by removing data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50"from the <header>. You can replace the parallax effect with a fixed or static background image, or you can replace it with one of the built in background color options.

Plugin Dependencies:

stellar.js
Owl Carousel

owl.carousel.js
owl.carousel.css
owl.theme.css
owl.transitions.css

Font Awesome

Services Option 1: Icon Carousel with Hover Effect

This option features an icon carousel with a hover effect.

HTML:

<section class="services-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2>Services</h2>
                <hr class="primary">
                <p>...</p>
            </div>
            <div class="col-lg-12 text-center">
                <ul id="services-1-carousel" class="icon-effect list-inline">
                    <!-- ICON USAGE: The icons in this example are generated using Font Awesome unicodes. To use different icons you will need to create a custom CSS class like the ones used below (ex. icon-code, or icon-envelope-o). -->
                    <li class="item">
                        <span class="icon icon-code"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-envelope-o"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-mobile"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-info-circle"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-pencil"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-wrench"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-rocket"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                    <li class="item">
                        <span class="icon icon-flag"></span>
                        <h3>Title</h3>
                        <p>Description</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

CSS Icon Example:

.icon-rocket:before {
    content:"\f135";
}

View Demo

Changing the Icons:

The service icons in this example are set using CSS along with the Font Awesome unicodes. In the CSS Icon Example above, the content: "\f135";is the Font Awesome unicode for their rocket icon. To create more icons, you can create a new CSS class. An example would be .icon-new:before {content:"\f000";}where the 000 was replaced with your Font Awesome unicode and 'new' was replaced with your icon name.

Changing the Background and Text Color:

You can change the background color of the section by adding any of the background helper classes to the <section>tag. See the demo page for an example of this in use. The icon color and hover effect will change automatically.

Plugin Dependencies:

Owl Carousel

owl.carousel.js
owl.carousel.css
owl.theme.css
owl.transitions.css

Font Awesome

Services Option 2: Two Column Layout with Icons

This option features two columns of descriptive text with icons.

HTML:

<section class="services-2">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Services</h2>
                <hr class="primary">
            </div>
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <p>Intro Paragraph</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 services-col">
                <div class="row">
                    <div class="col-sm-3 text-center text-primary"><i class="fa fa-4x fa-mobile"></i>
                    </div>
                    <div class="col-sm-9">
                        <h3>...</h3>
                        <p>...</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 services-col">
                <div class="row">
                    <div class="col-sm-3 text-center text-primary"><i class="fa fa-4x fa-tint"></i>
                    </div>
                    <div class="col-sm-9">
                        <h3>...</h3>
                        <p>...</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 services-col">
                <div class="row">
                    <div class="col-sm-3 text-center text-primary"><i class="fa fa-4x fa-user"></i>
                    </div>
                    <div class="col-sm-9">
                        <h3>...</h3>
                        <p>...</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 services-col">
                <div class="row">
                    <div class="col-sm-3 text-center text-primary"><i class="fa fa-4x fa-check-circle-o"></i>
                    </div>
                    <div class="col-sm-9">
                        <h3>...</h3>
                        <p>...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

Changing the Icons:

The service icons in this example are set using Font Awesome icon classes. Just change the class to your desired Font Awesome icon.

Changing the Background and Text Color:

You can change the background color of the section by adding any of the background helper classes to the <section>tag. See the demo page for an example of this in use. You will need to manually change the color of the <hr>by changing it's class (primary, dark, light, etc.).

Plugin Dependencies:

Font Awesome

Services Option 3: Three Column Layout with Image Icons

This option features three columns with image icons, service names, and service descriptions.

HTML:

<section class="services-3">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-12">
                <h2>Services</h2>
                <hr class="primary">
                <br>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <img class="img-responsive img-centered" src="path/to/image.jpg" alt="">
                <h3>...</h3>
                <p>...</p>
            </div>
            <div class="col-md-4">
                <img class="img-responsive img-centered" src="path/to/image.jpg" alt="">
                <h3>...</h3>
                <p>...</p>
            </div>
            <div class="col-md-4">
                <img class="img-responsive img-centered" src="path/to/image.jpg" alt="">
                <h3>...</h3>
                <p>...</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <img class="img-responsive img-centered" src="path/to/image.jpg" alt="">
                <h3>...</h3>
                <p>...</p>
            </div>
            <div class="col-md-4">
                <img class="img-responsive img-centered" src="path/to/image.jpg" alt="">
                <h3>...</h3>
                <p>...</p>
            </div>
            <div class="col-md-4">
                <img class="img-responsive img-centered" src="path/to/image.jpg" alt="">
                <h3>...</h3>
                <p>...</p>
            </div>
        </div>
    </div>
</section>

View Demo

Changing the Icons:

The service icons in this example are set using images. Just set the image paths to your icon images. See the demo for a working example.

Changing the Background and Text Color:

Plugin Dependencies:

None

Portfolio Option 1: Hover Grid with Modal Windows

This option features a grid of portfolio images that have a hover effect. When clicked on, a modal window will appear to display details about the selected project.

HTML:

<section class="portfolio-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Portfolio</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 portfolio-col">
                <a href="#modalID" class="portfolio-item" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#modalID" class="portfolio-item" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#modalID" class="portfolio-item" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#modalID" class="portfolio-item" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#modalID" class="portfolio-item" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#modalID" class="portfolio-item" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

HTML (Modal Window):

<div id="modalID" class="portfolio-modal modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row first">
                <div class="col-lg-12">
                    <h2>Project Name</h2>
                    <p>Project Description</p>
                </div>
            </div>
        </div>
    </div>
</div>

View Demo

Setting the Preview Images:

The example above has 6 portfolio preview images. In order to set an image, simply set the <img src="">to the correct path.

Creating Modals:

The popup windows, or modals, that appear when an item is clicked on can be placed anywhere within the HTML. Make sure that the ID for each modal matches the ID that is linked to in it's respective preview. The above example is a blank slate modal window that you can add text, images, or embedded video to. For more modal examples, see the demo page.

Plugin Dependencies:

Bootstrap Modals

Portfolio Option 2: Hover Grid with Image Gallery

This option features a grid of portfolio images that have a hover effect. When clicked on, a lightbox image gallery will appear.

HTML:

<section class="portfolio-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Portfolio</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 portfolio-col">
                <a href="path/to/image.jpg" class="portfolio-item gallery-item">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="" />
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="path/to/image.jpg" class="portfolio-item gallery-item">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="" />
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="path/to/image.jpg" class="portfolio-item gallery-item">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="" />
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="path/to/image.jpg" class="portfolio-item gallery-item">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="" />
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="path/to/image.jpg" class="portfolio-item gallery-item">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="" />
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="path/to/image.jpg" class="portfolio-item gallery-item">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="" />
                </a>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Preview Images:

The example above has 6 portfolio preview images. In order to set an image, simply set the <img src="">to the correct path.

Setting the Lightbox Images:

In order to set the lightbox images, simply set the <img src="">to the correct path.

Plugin Dependencies:

Font Awesome
jquery.magnific-popup.js

Portfolio Option 3: Hover Grid with YouTube and Vimeo Videos

This option features a grid of portfolio images that have a hover effect. When clicked on, a YouTube or Vimeo video will appear in a lightbox.

HTML:

<section class="portfolio-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Portfolio</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 portfolio-col">
                <a href="#YOUTUBE-LINK" class="portfolio-item popup-youtube">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-play-circle-o fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#VIMEO-LINK" class="portfolio-item popup-vimeo">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-play-circle-o fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#YOUTUBE-LINK" class="portfolio-item popup-youtube">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-play-circle-o fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#VIMEO-LINK" class="portfolio-item popup-vimeo">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-play-circle-o fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#YOUTUBE-LINK" class="portfolio-item popup-youtube">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-play-circle-o fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-col">
                <a href="#VIMEO-LINK" class="portfolio-item popup-vimeo">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-play-circle-o fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-centered" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Preview Images:

The example above has 6 portfolio preview images. In order to set an image, simply set the <img src="">to the correct path.

Setting the Lightbox Video:

The video that pops up for each item can either be a YouTube video or Vimeo Video. Make sure that the <a>tag has the proper class assigned to it, either .popup-youtubeor .popup-vimeo. Then simply link to the video URL of the video you want to appear. View the demo for a working example.

Plugin Dependencies:

Font Awesome
jquery.magnific-popup.js

Portfolio Option 4: Hover Grid with Filtering Option (Filter Function Usable with Portfolio Options 1-3)

This option features a grid of portfolio images that have a hover effect. There is also a filtering function which will show/hide only filtered portfolio items. The filter function is usable with any of the Portfolio Options 1-3, but in this example it is shown using modal windows.

HTML:

<section class="portfolio-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Filter Portfolio</h2>
                <hr class="primary">
                <ul class="list-inline" id="filters">
                    <li>
                        <button data-filter="*" type="button" class="btn btn-link">All</button>
                    </li>
                    <li>
                        <button data-filter=".example-category-1" type="button" class="btn btn-link">Example Category 1</button>
                    </li>
                    <li>
                        <button data-filter=".example-category-2" type="button" class="btn btn-link">Example Category 2</button>
                    </li>
                    <li>
                        <button data-filter=".example-category-3" type="button" class="btn btn-link">Example Category 3</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row isotope">
            <div class="col-sm-4 portfolio-item example-category-1">
                <a href="#portfolio-modal-1" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/imgage.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-item example-category-2">
                <a href="#portfolio-modal-2" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/imgage.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-item example-category-3">
                <a href="#portfolio-modal-3" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/imgage.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-item example-category-1">
                <a href="#portfolio-modal-4" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/imgage.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-item example-category-2">
                <a href="#portfolio-modal-5" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/imgage.jpg" class="img-centered" alt="">
                </a>
            </div>
            <div class="col-sm-4 portfolio-item example-category-3">
                <a href="#portfolio-modal-6" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <h3>View Project</h3>
                        </div>
                    </div>
                    <img src="path/to/imgage.jpg" class="img-centered" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Preview Images:

The example above has 6 portfolio preview images. In order to set an image, simply set the <img src="">to the correct path.

Using the Isotope Plugin to Filter Items:

There are a few things you will have to do to set up the filter. In the example above, there is a list of items marked #filters. In that list, there are 3 example categories. In the columns below, each .portfolio-itemalso has an example category set to it. Rename your categories and then use the appropriate category on your desired .portfolio-itemand the plugin will do the rest! Note: The plugin loads AFTER the window loads so the sort function will not work until the rest of the window has loaded. This usually won't be a problem if your portfolio isn't the first thing on your page. The filter buttons are set by default to .btn-link, but any of the other button styles will work too! See more example pages for more ideas.

Plugin Dependencies:

Font Awesome
Isotope

Portfolio Option 5: Carousel Showcase

This option features a sliding carousel showcase where you can feature images and examples of your work.

HTML:

<section class="portfolio-2">
    <div class="col-lg-12 text-center">
        <h2>Portfolio</h2>
        <hr class="primary">
        <div id="portfolio-2-carousel">
            <div class="item">
                <img class="img-responsive" src="path/to/image.jpg" alt="">
            </div>
            <div class="item">
                <img class="img-responsive" src="path/to/image.jpg" alt="">
            </div>
            <div class="item">
                <img class="img-responsive" src="path/to/image.jpg" alt="">
            </div>
            <div class="item">
                <img class="img-responsive" src="path/to/image.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</section>

View Demo

Setting the Carousel Images:

To set the carousel images, simply set the <img src="">to the correct path of the image file. You can add as many items as you want, but the above example has 4 items. Each item will appear on it's own slide.

Setting the Lightbox Video:

Plugin Dependencies:

Owl Carousel

owl.carousel.js
owl.carousel.css
owl.theme.css
owl.transitions.css

Font Awesome

Pricing Option 1: Four Column Pricing Table

A four column pricing table with image backgrounds for the table column headers.

HTML:

<section class="pricing-1">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-12">
                <h2>Pricing</h2>
                <hr class="primary">
                <p>Intro text...</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pricing-col">
                <div class="pricing-table featured">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pricing-col">
                <div class="pricing-table featured">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Header Background Images:

To set the background images on the headers, change the image source in the inline CSS for each respective item. In other words, set the background-image: "url('path/to/image.jpg')"to the correct image.

Setting a Featured Item:

To make one of the columns a featured column, add a .featuredclass to the .pricing-tablediv. In the example above, the second and third column are featured columns.

Plugin Dependencies:

None

Pricing Option 2: Three Column Pricing Table

A three column pricing table with image backgrounds for the table column headers.

HTML:

<section class="pricing-1">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-12">
                <h2>Pricing</h2>
                <hr class="light">
                <p>Intro text...</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4 pricing-col">
                <div class="pricing-table featured">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading" style="background-image: url('path/to/image.jpg')">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Header Background Images:

Setting a Featured Item:

To make one of the columns a featured column, add a .featuredclass to the .pricing-tablediv. In the example above, the second column is a featured column.

Plugin Dependencies:

None

Pricing Option 3: Colored Pricing Table

A four column pricing table with colored sections using built in helper classes.

HTML:

<section class="pricing-1 bg-lighter">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-12">
                <h2>Pricing</h2>
                <hr class="primary">
                <p>Intro text...</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading bg-dark">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-dark">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-dark btn-outline">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading bg-dark">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-dark">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-dark btn-outline">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pricing-col">
                <div class="pricing-table featured">
                    <div class="pricing-heading bg-primary">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-primary">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pricing-col">
                <div class="pricing-table">
                    <div class="pricing-heading bg-dark">
                        <h2>Package 1</h2>
                    </div>
                    <div class="content">
                        <div class="price">
                            <span class="amount">$00</span>
                            <span class="period">per month</span>
                        </div>
                        <ul class="pricing-items list-unstyled text-center">
                            <li class="item"><span class="text-dark">Description</span> One</li>
                            <li class="item">Description Two</li>
                            <li class="item">Description Three</li>
                            <li class="pricing-button">
                                <a href="#" class="btn btn-dark btn-outline">Buy Now</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

Setting a Featured Item:

To make one of the columns a featured column, add a .featuredclass to the .pricing-tablediv. In the example above, the third column is a featured column.

Setting the Heading Colors:

To change the color of the headings, add a background helper class to the .pricing-headingdiv. In the example above, .bg-darkand .bg-primaryare being used.

Plugin Dependencies:

None

Blog Option 1: Item Grid with Parallax Image Background

A three item grid with photos and details on top of a parallax image background.

HTML:

<section class="blog-1 bg-parallax-dark" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 text-center">
                <h2>Blog</h2>
                <hr class="light">
            </div>
        </div>
        <div class="row blog-row">
            <div class="col-md-4 blog-col">
                <a href="#" class="blog-preview-img">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-responsive" alt="">
                </a>
                <div class="blog-preview-content">
                    <h3>
                        <a href="#">Blog Post Title</a>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                    <div class="continue"><a href="#">Continue Reading →</a>
                    </div>
                    <ul class="meta list-inline">
                        <li>January 01, 2000</li>
                        <li>10 Comments</li>
                        <li><i class="fa fa-heart text-primary"></i> 10</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 blog-col">
                <a href="#" class="blog-preview-img">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-responsive" alt="">
                </a>
                <div class="blog-preview-content">
                    <h3>
                        <a href="#">Blog Post Title</a>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                    <div class="continue"><a href="#">Continue Reading →</a>
                    </div>
                    <ul class="meta list-inline">
                        <li>January 01, 2000</li>
                        <li>10 Comments</li>
                        <li><i class="fa fa-heart text-primary"></i> 10</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 blog-col">
                <a href="#" class="blog-preview-img">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search fa-3x"></i>
                        </div>
                    </div>
                    <img src="path/to/image.jpg" class="img-responsive" alt="">
                </a>
                <div class="blog-preview-content">
                    <h3>
                        <a href="#">Blog Post Title</a>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                    <div class="continue"><a href="#">Continue Reading →</a>
                    </div>
                    <ul class="meta list-inline">
                        <li>January 01, 2000</li>
                        <li>10 Comments</li>
                        <li><i class="fa fa-heart text-primary"></i> 10</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Background Image:

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Changing the Text Color:

The example above uses the bg-parallax-darkhelper class. If your background image is lighter, replace bg-parallax-darkwith bg-parallax-light. You will also need to change the light horizontal rule to a colored horizontal rule (dark, primary, or other).

Disabling Parallax:

You can disable the parallax feature by removing data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50"from the <section>tag. After that, you may remove the background image if desired and set a background color instead.

Plugin Dependencies:

stellar.js
Font Awesome

Blog Option 2: Masonry Style Grid with Hover Content

A masonry style grid with content that is shown when hovered over.

HTML:

<section class="blog-2">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Blog</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                    <div class="col-lg-12 blog-col">
                        <a href="#" class="blog-item">
                            <div class="caption">
                                <div class="caption-content">
                                    <h3>Heading</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, sunt, corporis.</p>
                                    <ul class="meta list-inline">
                                        <li>January 01, 2000</li>
                                        <li>9 Comments</li>
                                        <li><i class="fa fa-heart"></i> 12</li>
                                    </ul>
                                </div>
                            </div>
                            <img src="path/to/image.jpg" class="img-centered" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

Image Instructions:

The images are set in the img src="". Simply put images in these areas to create your grid. This masonry style grid works very well if you have images that are different sizes. See the demo for a working example.

Plugin Dependencies:

Font Awesome

Contact Option 1: Simple Form with Light Background

A simping, UX friendly contact form with a light background color.

HTML:

<section class="contact-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Contact</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <form name="sentMessage" id="contactForm" novalidate>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Name</label>
                            <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Email Address</label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Message</label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-lg btn-primary">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

View Demo

Form Usage Instructions:

When you put this form onto your page, the form itself will be working with validation. To change the email address that the form sends to, go to /mail/contact_me.phpand replace the YOUR-EMAIL@YOUR-WEBSITE.com with the email address you want the form to send to. You can also change the name of the email subject, the message, and who you want the message to be from (ex. donotreply@website.com). When you've customized the email address to your own, the form will work once your site is online with a mail server.

Plugin Dependencies:

None

Contact Option 2: Simple Form with Dark Background

A simping, UX friendly contact form with a dark background color.

HTML:

<section class="contact-1 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Contact</h2>
                <hr class="light">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <form name="sentMessage" id="contactForm" novalidate>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Name</label>
                            <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Email Address</label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Message</label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-lg btn-primary">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

View Demo

Form Usage Instructions:

Plugin Dependencies:

None

Contact Option 3: Simple Form with Parallax Image Background

A simping, UX friendly contact form with a parallax image background.

HTML:

<section class="contact-1 bg-parallax-dark" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Contact</h2>
                <hr class="light">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <form name="sentMessage" id="contactForm" novalidate>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Name</label>
                            <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Email Address</label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Message</label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-lg btn-primary">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

View Demo

Form Usage Instructions:

Setting the Background Image:

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Changing the Text Color:

Disabling Parallax:

Plugin Dependencies:

stellar.js

Contact Option 4: Simple Form with Google Map Background

A simping, UX friendly contact form with a Google Map as the background.

HTML:

<section class="contact-2 bg-dark text-light">
    <div class="map-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Contact</h2>
                    <hr class="light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                <form name="sentMessage" id="contactForm" novalidate>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Name</label>
                            <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Email Address</label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Message</label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-lg btn-primary">Send</button>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
    <div id="map-canvas"></div>
</section>

View Demo

Form Usage Instructions:

Enabling the Map:

To enable the map, you will need to link to the Google Maps API. In order to use the map feature, you will need your own API key. Instructions on how to do this can be found here .

Setting the Map Coordinates:

In order to set the map coordinates, you will need to configure the spectrum.map.jsfile. Open the file and located the following line of code center: new google.maps.LatLng(53.385873, -1.471471),. You will need to change the center position of your map to your desired latitude and longitude. Here is a latitude/longitude finder that can help you with this. After you have your latitude and longitude set, simply save the file and check your page.

Plugin Dependencies:

spectrum.map.js
Google Maps API

Parallax Call to Action - Dark Image Background

A call to action with a parallax image background.

HTML:

<aside class="bg-parallax-dark" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-8 col-lg-offset-2">
                <h2 class="section-heading">Dark Call to Action</h2>
                <hr class="light">
                <p>This parallax call to action box features a dark background with light text. Parallax is disabled on mobile devices.</p>
                <a href="#" class="btn btn-outline btn-light btn-lg">Click Me!</a>
            </div>
        </div>
    </div>
</aside>

View Demo

Setting the Background Image:

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Note: Make sure the background image is dark in color. If you image is light, see the light example below.

Plugin Dependencies:

stellar.js

Parallax Call to Action - Light Image Background

A call to action with a parallax image background.

HTML:

<aside class="bg-parallax-light" style="background-image: url(path/to/image.jpg);" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-8 col-lg-offset-2">
                <h2 class="section-heading">Light Call to Action</h2>
                <hr class="primary">
                <p>This parallax call to action box features a light background with dark text. Parallax is disabled on mobile devices.</p>
                <a href="#" class="btn btn-outline btn-dark btn-lg">Click Me!</a>
            </div>
        </div>
    </div>
</aside>

View Demo

Setting the Background Image:

Note: You may need to adjust the data-stellar-vertical-offsetto position your background image.

Note: Make sure the background image is light in color. If you image is dark, see the dark example above.

Plugin Dependencies:

stellar.js

Client Showcase Section

A 5 item carousel to feature clients or other content.

HTML:

<section class="clients">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-12">
                <h2>Client Section</h2>
                <hr class="primary">
                <ul id="clients-carousel" class="text-center">
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                    <li class="item">
                        <img class="img-responsive" src="path/to/image.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

View Demo

Setting the Images:

Each image is set within the HTML. Simply set the img src=""to the image you want to feature in each item. The above example contains 10 items, but you may add or remove items as needed.

Plugin Dependencies:

Owl Carousel

owl.carousel.js
owl.carousel.css
owl.theme.css
owl.transitions.css

Screen Call to Action

A call to action featuring a screen that enters from the bottom and fills the section.

HTML:

<section class="screen-cta text-center">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>Screen Call to Action</h2>
                <hr class="primary">
                <div data-scrollreveal="enter from bottom and move 150px over 1s">
                    <img src="path/to/screen-image.png" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

View Demo

The Enter Effect Usage:

The screen entering from the bottom is done by using the included scrollReveal.js jQuery plugin. You'll notice that in the code, there is a div with the following data attribute data-scrollreveal="enter from bottom and move 150px over 1s". The image is housed within the div, which causes the image to slide into view from the bottom when you scroll to that area. For more details on using the scrollRevel plugin, please visit the scrollReveal.js documentation. It is recommended that you use this feature on other elements of the site as well, and it is used in the demo page models.

Plugin Dependencies:

scrollReveal.js

Unstyled Section Template

An unstyled section that is a foundation for making your own custom section.

HTML:

<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Heading</h2>
                <hr class="primary">
                <p>Content goes here...</p>
            </div>
        </div>
    </div>
</section>

Plugin Dependencies:

None

Footer Option 1: Above/Below Dark Standard Footer

A standard footer layout with four columns for content, social links, and a below section for copyright information.

HTML:

<footer class="footer-1">
    <div class="upper">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h2 class="script">Title</h2>
                    <address>
                        <strong>Twitter, Inc.</strong><br>795 Folsom Ave, Suite 600<br>San Francisco, CA 94107<br>
                        <abbr title="Phone">P:</abbr>(123) 456-7890
                    </address>
                </div>
                <div class="col-md-3">
                    <h4>Heading</h4>
                    <ul class="list-unstyled footer-links">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h4>Heading</h4>
                    <ul class="list-unstyled footer-links">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h4>Social</h4>
                    <ul class="list-inline">
                        <li>
                            <a href="#" class="btn btn-social-light btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn btn-social-light btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn btn-social-light btn-dribbble"><i class="fa fa-fw fa-dribbble"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn btn-social-light btn-google-plus"><i class="fa fa-fw fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="lower">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <span class="small">Copyright © 2014 - Your Name Here. All Rights Reserved.</span>
                </div>
            </div>
        </div>
    </div>
</footer>

View Demo

Usage:

Copy and paste the above snippet into your page if desired. Some websites look great without a footer, and some are better with one!

Plugin Dependencies:

None

Footer Option 2: Two Column Customizable

A customizable footer with two columns and social links..

HTML:

<footer class="footer-2 bg-primary">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h2 class="script">Thank you message!</h2>
                <p>Paragraph description.</p>
                <p class="small">Copyright © 2014 - Your Name Here. All Rights Reserved.</p>
            </div>
            <div class="col-md-3 col-md-offset-1">
                <h3 class="script">Find us!</h3>
                <ul class="list-inline">
                    <li>
                        <a href="#" class="btn btn-social-light btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-social-light btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-social-light btn-dribbble"><i class="fa fa-fw fa-dribbble"></i></a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-social-light btn-google-plus"><i class="fa fa-fw fa-google-plus"></i></a>
                    </li>
                </ul>
                <br>
                <address>
                    <strong>Twitter, Inc.</strong><br>795 Folsom Ave, Suite 600<br>San Francisco, CA 94107<br>
                    <abbr title="Phone">P:</abbr>(123) 456-7890
                </address>
            </div>
        </div>
    </div>
</footer>

View Demo

Background Color:

This footer option uses a background helper class as the background color. The example shown is using .bg-primary, but you can use any of the background helper classes listed in the docs above.

Plugin Dependencies:

None

The photography and video used in this template are for demo purposes only. If you want to use any of the images seens in this demo, be sure to check their usage guidelines before you use them for commercial or personal purposes.

Photo/Image Credits:

Portraits

Backgrounds

Services Icons

Elegant Themes

Device Mockups

Apple Flat Devices by Mirko Monti

Client Logos

Custom Built by Start Bootstrap Themes

Other Photos

All other photos are from unsplash.com

Video Credits:

YouTube Background Video and YouTube Portfolio Video: National Geographic (Creative Commons) - Video Link
Vimeo Portfolio Video: Yosemite HD II by Project Yosemite (Creative Commons) - Video Link
traffic.mp4 used in MP4 background video sections - (Open Source) - http://www.beachfrontbroll.com/ - Video Link

Spectrum Documentation

Overview

Using a Pre-Built Sample:

Setting Up a Custom Layout:

Included Plugins and Their Uses:

Typography

Heading 1 Sub Heading

Heading 2 Sub Heading

Heading 3 Sub Heading

Heading 4 Sub Heading

Heading 5 Sub Heading

Heading 6 Sub Heading

Default Body Copy

Sans Serif Body Copy

Text Color Helper Classes

Font Style Helper Classes

Utility Classes

Horizontal Rules

Background Colors

Background Helper Classes

Aside and Section Overlay

Aside Overlay Example:

Section Overlay Example:

Scroll Effects:

Retina Images

Buttons

Default Buttons

Raised Buttons

Outline Buttons

Rounded Default Buttons

Rounded Raised Buttons

Rounded Outline Buttons

Square Default Buttons

Square Raised Buttons

Square Outline Buttons

Dark Social Buttons

Light Social Buttons

App Store Buttons

Navigation

Option 1: Dark Background Collapsing Navigation

HTML:

Usage:

Setting the Logo Image:

Option 2: Light Background Collapsing Navigation

HTML:

Usage:

Setting the Logo Image:

Customizing the Logo

Headers

Option 1: Full Page Parallax Background Image

HTML:

Setting the Background Image:

Changing the Text Color:

Removing the Overlay:

Disabling Parallax:

Scroll Down Button:

Plugin Dependencies:

Option 2: Half Page Parallax Background Image

HTML:

Setting the Background Image:

Changing the Text Color:

Removing the Overlay:

Disabling Parallax:

Scroll Down Button:

Plugin Dependencies:

Option 3: Full Page Image Slider

HTML:

Setting the Slider Images:

Changing the Text Color:

Removing the Overlay:

Scroll Down Button:

Plugin Dependencies:

Option 4: Half Page Image Slider

HTML:

Setting the Slider Images:

Changing the Text Color:

Removing the Overlay:

Scroll Down Button:

Plugin Dependencies:

Option 5: Full Page mp4, webm, or ogg Video Background