Thank you for having chosen OOPS!

1 week of hard work has been necessary to build this template for having a perfect layout on every screen, an advanced design and the last trends coupled with an accurate coding.
I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)

If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible, 7/7 and almost 24/24!
Time in my country :
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.

How To Install OOPS Via FTP :
Step 1 - Log into your hosting space via an FTP software (Filezilla for example).
Step 2 - Unzip your Download Pack file and use the extracted OOPS theme folder.
Step 3 - Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.

How to change the background color?
Open your style.css file, around the line 105, you will find this :

body.flat {
  background: #8471d7;
}

How to edit the background animation?
This is an awesome lightweight JavaScript library for creating particles. Full documentation can be found here : here
All settings are in the particles.js file. You can change colors, sizes, forms and so on... from the line 1543.

How to change the background picture?
Open your style.css file, around the line 560, you will find this :

.image {
  background: url("../img/image.jpg") center;
  ...
}

So, you can change the path or replace the placeholder image.jpg already available in the img folder.

Ken Burns (zoom - unzoom) effect is created by a simple CSS keyframe on line 580.

VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific slide options and settings are in the file js/vegas.js, see the code below.

$("body").vegas({
    slides: [
        { src: "img/home-slide-1.jpg" },
        { src: "img/home-slide-2.jpg" },
        { src: "img/home-slide-3.jpg" }
    ],

    // Delay beetween slides in milliseconds.
    delay: 5000,

    // Chose your transition effect (See the documentation provided in your download pack)
    transition: 'fade'

});

So, you can change the paths or replace the placeholders home-slide-N.jpg already available in the img folder.

This is a jQuery component that let you play a Youtube® movie as background of your HTML page.
Add easily your video with just your link in the HTML code, see the code below.
For more options, please visit this page.

<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/RdGVz104b3E',containment:'body',autoPlay:true, mute:false, startAt:0, stopAt:0, opacity:1}"></a>

The player doesn’t work as background for mobile devices due to the restriction policy adopted by all on managing multimedia files via javascript.
To solve this, instead of to have only the color of your body, I added a fullscreen slideshow with the pictures of your choice.
Set up this one at the very bottom of your HTML, see the code below.

$("body").vegas({
    slides: [
        { src: "img/home-slide-1.jpg" },
        { src: "img/home-slide-2.jpg" },
        { src: "img/home-slide-3.jpg" }
    ],

    // Delay beetween slides in milliseconds.
    delay: 5000,

    // Chose your transition effect (See the documentation provided in your download pack)
    transition: 'fade'

});

With this awesome plugin, your page will be very attractive.
You can edit the colors and the shape of the squares in the back.
Specific color options and settings are in the file js/mozaic.js, see the code below.

Dots colors

colors: [ 'rgba(49,56,141,alp)', 'rgba(254,8,97,alp)', 'rgba(253,255,86,alp)' ]

Stroke color

strokeColor: 'rgb(43,45,53)'

Background color

ctx.fillStyle = 'rgba(32,35,45,alp)'

Stunning bubble animation with different colors.
Specific color options and settings are in the file js/bubble.js, see the code below.

Back bubbles line 27

this.aBgBubbles.push(new Bubble('rgba(49,56,141,0.5)', 3.5)); // Color for the bubbles in the back

Front bubbles line 86

var _c = arguments.length <= 0 || arguments[0] === undefined ?  'rgba(254,8,97,0.8)' : arguments[0]; // Color for the bubbles on the front

Background picture is set in style.css line 1680

body.bubble {
  background: url("../img/background-bubble.jpg") center;
  background-size: cover;
}

Documentation

Just below the nav on your left, you will find 4 useful links to learn or improve your knowledges in SASS, Bootstrap & Bourbon