29 files changed, 320 insertions, 246 deletions

diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index 34e51b4509d..b607c1058bd 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -311,73 +311,56 @@ odoo.define('web_editor.snippets.options', function (require) {
      * The background option is designed to change the background image of a snippet.
      */
     registry.background = SnippetOption.extend({
-        start: function ($change_target) {
-            this.$target = $change_target || this.$target;
-            this._super.apply(this, arguments);
-            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
-            if (this.$target.hasClass('oe_custom_bg')) {
-                this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
-            }
-        },
         background: function (type, value, $li) {
             if (value && value.length) {
-                this.$target.attr("style", 'background-image: url(' + value + '); ' + (this.$target.attr("style") || '').replace(/background-image:[^;]+/, '') );
+                this.$target.css("background-image", "url(" + value + ")");
                 this.$target.addClass("oe_img_bg");
             } else {
                 this.$target.css("background-image", "");
                 this.$target.removeClass("oe_img_bg oe_custom_bg");
             }
         },
-        select_class : function (type, value, $li) {
+        select_class: function (type, value, $li) {
             this.background(type, '', $li);
             this._super.apply(this, arguments);
         },
         choose_image: function (type, value, $li) {
-            if(type !== "click") return;
+            if(type !== "click") {
+                return;
+            }
 
-            var self = this;
-            var $image = $('<img class="hidden"/>');
-            $image.attr("src", value);
-            $image.appendTo(self.$target);
+            // Put fake image in the DOM, edit it and use it as background-image
+            var $image = $("<img/>", {"class": "hidden", "src": value}).appendTo(this.$target);
 
             var _editor = new widget.MediaDialog(null, {}, null, $image[0]).open();
             _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
 
-            _editor.on('saved', self, function () {
+            _editor.on('saved', this, function () {
                 var value = $image.attr("src");
-                $image.remove();
-                self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value);
-                self.background(type, value,$li);
-                self.$target.addClass('oe_custom_bg');
-                self.$target.trigger("snippet-option-change", [self]);
-                self.set_active();
+                this.background(type, value, $li);
+                this.$target.addClass("oe_custom_bg");
+                this.set_active();
+                this.$target.trigger("snippet-option-change", [this]);
             });
-            _editor.on('cancel', self, function () {
+            _editor.on('closed', this, function () {
                 $image.remove();
             });
         },
         set_active: function () {
-            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
             this._super.apply(this, arguments);
 
+            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
             if (this.$target.hasClass('oe_custom_bg')) {
                 this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
             }
 
-            this.$el.find('li[data-background]:not([data-background=""])')
+            this.$el.find('li[data-background]')
                 .removeClass("active")
-                .each(function () {
-                    var background = $(this).data("background") || $(this).attr("data-background");
-                    if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
-                        $(this).addClass("active");
-                    }
-                });
-
-            if (!this.$el.find('li[data-background].active').size()) {
-                this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active");
-            } else {
-                this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active");
-            }
+                .filter(function () {
+                    var bgOption = $(this).data("background");
+                    return (bgOption === "" && src === "" || bgOption !== "" && src.indexOf(bgOption) >= 0);
+                })
+                .addClass("active");
         }
     });
 
@@ -387,13 +370,16 @@ odoo.define('web_editor.snippets.options', function (require) {
     registry.background_position = SnippetOption.extend({
         start: function () {
             this._super.apply(this, arguments);
-
+            this.on_focus();
             var self = this;
-            var $btn = this.$overlay.find('.oe_options');
-            $btn.on('show.bs.dropdown', function () {
-                $btn.find('.background_position_li').toggleClass('hidden', self.$target.css('background-image') === 'none');
+            this.$target.on("snippet-option-change", function () {
+                self.on_focus();
             });
         },
+        on_focus: function () {
+            this._super.apply(this, arguments);
+            this.$el.toggleClass('hidden', this.$target.css('background-image') === 'none');
+        },
         background_position: function (type, value, $li) {
             if (type != 'click') { return; }
             var self = this;
diff --git a/addons/website/data/data.xml b/addons/website/data/data.xml
index dd9f3b5fc84..8f6fc1855cf 100644
--- a/addons/website/data/data.xml
+++ b/addons/website/data/data.xml
@@ -103,6 +103,7 @@
 
         <!-- base64-encoded on ir.attachment, to allow to load image with the xmlid -->
         <record id="website.business_conference" model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">business_conference</field>
             <field name="datas_fname">business_conference.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -111,6 +112,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">business_stats</field>
             <field name="datas_fname">business_stats.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -119,6 +121,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">gears</field>
             <field name="datas_fname">gears.png</field>
             <field name="res_model">ir.ui.view</field>
@@ -127,6 +130,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">helpdesk</field>
             <field name="datas_fname">helpdesk.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -135,6 +139,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">imac</field>
             <field name="datas_fname">imac.png</field>
             <field name="res_model">ir.ui.view</field>
@@ -143,6 +148,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">lazagne</field>
             <field name="datas_fname">lazagne.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -151,6 +157,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">manufacturing</field>
             <field name="datas_fname">manufacturing.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -159,6 +166,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">ipad</field>
             <field name="datas_fname">ipad.png</field>
             <field name="res_model">ir.ui.view</field>
@@ -167,6 +175,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">world</field>
             <field name="datas_fname">world.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -175,6 +184,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">vegetables</field>
             <field name="datas_fname">vegetables.png</field>
             <field name="res_model">ir.ui.view</field>
@@ -183,6 +193,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">ship_sea</field>
             <field name="datas_fname">ship_sea.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -191,6 +202,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">flight</field>
             <field name="datas_fname">flight.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -199,6 +211,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">engineer</field>
             <field name="datas_fname">engineer.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -207,6 +220,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">school_kids</field>
             <field name="datas_fname">school_kids.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -215,6 +229,7 @@
         </record>
 
         <record model="ir.attachment">
+            <field name="public" eval="True"/>
             <field name="name">business_hands</field>
             <field name="datas_fname">business_hands.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -222,5 +237,140 @@
             <field name="url">/website/static/src/img/library/business_hands.jpg</field>
         </record>
 
+        <!-- Website Builder Images -->
+        <record id="website.s_background_image_01" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 01</field>
+            <field name="datas_fname">s_background_image_01.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/aqua.jpg</field>
+        </record>
+        <record id="website.s_background_image_02" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 02</field>
+            <field name="datas_fname">s_background_image_02.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/baby_blue.jpg</field>
+        </record>
+        <record id="website.s_background_image_03" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 03</field>
+            <field name="datas_fname">s_background_image_03.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/black.jpg</field>
+        </record>
+        <record id="website.s_background_image_04" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 04</field>
+            <field name="datas_fname">s_background_image_04.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/business_guy.jpg</field>
+        </record>
+        <record id="website.s_background_image_05" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 05</field>
+            <field name="datas_fname">s_background_image_05.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/color_splash.jpg</field>
+        </record>
+        <record id="website.s_background_image_06" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 06</field>
+            <field name="datas_fname">s_background_image_06.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/flower_field.jpg</field>
+        </record>
+        <record id="website.s_background_image_07" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 07</field>
+            <field name="datas_fname">s_background_image_07.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/flower.jpg</field>
+        </record>
+        <record id="website.s_background_image_08" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 08</field>
+            <field name="datas_fname">s_background_image_08.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/greenfields.jpg</field>
+        </record>
+        <record id="website.s_background_image_09" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 09</field>
+            <field name="datas_fname">s_background_image_09.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/landscape.jpg</field>
+        </record>
+        <record id="website.s_background_image_10" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 10</field>
+            <field name="datas_fname">s_background_image_10.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/mango.jpg</field>
+        </record>
+        <record id="website.s_background_image_11" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 11</field>
+            <field name="datas_fname">s_background_image_11.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/mountains.jpg</field>
+        </record>
+        <record id="website.s_background_image_12" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 12</field>
+            <field name="datas_fname">s_background_image_12.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/orange_red.jpg</field>
+        </record>
+        <record id="website.s_background_image_13" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 13</field>
+            <field name="datas_fname">s_background_image_13.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/parallax_flowers.jpg</field>
+        </record>
+        <record id="website.s_background_image_14" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 14</field>
+            <field name="datas_fname">s_background_image_14.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/parallax_girl.jpg</field>
+        </record>
+        <record id="website.s_background_image_15" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 15</field>
+            <field name="datas_fname">s_background_image_15.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/parallax_quote.png</field>
+        </record>
+        <record id="website.s_background_image_16" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 16</field>
+            <field name="datas_fname">s_background_image_16.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/velour.jpg</field>
+        </record>
+        <record id="website.s_background_image_17" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 17</field>
+            <field name="datas_fname">s_background_image_17.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/wood.jpg</field>
+        </record>
+        <record id="website.s_background_image_18" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Website Background Image 18</field>
+            <field name="datas_fname">s_background_image_18.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/backgrounds/yellow_green.jpg</field>
+        </record>
+
+        <record id="website.s_cover_default_image" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Cover Snippet - Default Image</field>
+            <field name="datas_fname">s_cover_default_image.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/web/image/website.s_background_image_01</field>
+        </record>
     </data>
 </openerp>
diff --git a/addons/website/data/demo.xml b/addons/website/data/demo.xml
index adf1735dcd9..fb536cb818c 100644
--- a/addons/website/data/demo.xml
+++ b/addons/website/data/demo.xml
@@ -157,7 +157,7 @@ response = request.render("website.template_partner_comment", values)
                           <li class="active" data-slide-to="0" data-target="#myCarousel0"/>
                         </ol>
                         <div class="carousel-inner">
-                          <div class="item image_text oe_img_bg active" style="background-image: url(http://0.0.0.0:8069/website/static/src/img/banner/mountains.jpg);">
+                          <div class="item image_text oe_img_bg active" style="background-image: url(http://0.0.0.0:8069/web/image/website.s_background_image_11);">
                             <div class="container">
                               <div class="row content">
                                 <div class="carousel-content col-md-6 col-sm-12">
diff --git a/addons/website/static/src/img/aqua.jpg b/addons/website/static/src/img/aqua.jpg
deleted file mode 100644
index 47ce77005d4..00000000000
--- a/addons/website/static/src/img/aqua.jpg
+++ /dev/null
diff --git a/addons/website/static/src/img/banner/aqua.jpg b/addons/website/static/src/img/backgrounds/aqua.jpg
index 23f4bb820db..23f4bb820db 100644
--- a/addons/website/static/src/img/banner/aqua.jpg
+++ b/addons/website/static/src/img/backgrounds/aqua.jpg
diff --git a/addons/website/static/src/img/banner/baby_blue.jpg b/addons/website/static/src/img/backgrounds/baby_blue.jpg
index d13c6683c1d..d13c6683c1d 100644
--- a/addons/website/static/src/img/banner/baby_blue.jpg
+++ b/addons/website/static/src/img/backgrounds/baby_blue.jpg
diff --git a/addons/website/static/src/img/banner/black.jpg b/addons/website/static/src/img/backgrounds/black.jpg
index 800d529d032..800d529d032 100644
--- a/addons/website/static/src/img/banner/black.jpg
+++ b/addons/website/static/src/img/backgrounds/black.jpg
diff --git a/addons/website/static/src/img/banner/business_guy.jpg b/addons/website/static/src/img/backgrounds/business_guy.jpg
index 04551e6ae01..04551e6ae01 100644
--- a/addons/website/static/src/img/banner/business_guy.jpg
+++ b/addons/website/static/src/img/backgrounds/business_guy.jpg
diff --git a/addons/website/static/src/img/banner/color_splash.jpg b/addons/website/static/src/img/backgrounds/color_splash.jpg
index a16cf2367ca..a16cf2367ca 100644
--- a/addons/website/static/src/img/banner/color_splash.jpg
+++ b/addons/website/static/src/img/backgrounds/color_splash.jpg
diff --git a/addons/website/static/src/img/banner/flower.jpg b/addons/website/static/src/img/backgrounds/flower.jpg
index ed33976aa38..ed33976aa38 100644
--- a/addons/website/static/src/img/banner/flower.jpg
+++ b/addons/website/static/src/img/backgrounds/flower.jpg
diff --git a/addons/website/static/src/img/banner/flower_field.jpg b/addons/website/static/src/img/backgrounds/flower_field.jpg
index 23bf90844b7..23bf90844b7 100644
--- a/addons/website/static/src/img/banner/flower_field.jpg
+++ b/addons/website/static/src/img/backgrounds/flower_field.jpg
diff --git a/addons/website/static/src/img/banner/greenfields.jpg b/addons/website/static/src/img/backgrounds/greenfields.jpg
index 205406d24d4..205406d24d4 100644
--- a/addons/website/static/src/img/banner/greenfields.jpg
+++ b/addons/website/static/src/img/backgrounds/greenfields.jpg
diff --git a/addons/website/static/src/img/banner/landscape.jpg b/addons/website/static/src/img/backgrounds/landscape.jpg
index 08a7f233cdd..08a7f233cdd 100644
--- a/addons/website/static/src/img/banner/landscape.jpg
+++ b/addons/website/static/src/img/backgrounds/landscape.jpg
diff --git a/addons/website/static/src/img/banner/mango.jpg b/addons/website/static/src/img/backgrounds/mango.jpg
index 7582d4f548e..7582d4f548e 100644
--- a/addons/website/static/src/img/banner/mango.jpg
+++ b/addons/website/static/src/img/backgrounds/mango.jpg
diff --git a/addons/website/static/src/img/banner/mountains.jpg b/addons/website/static/src/img/backgrounds/mountains.jpg
index 7ea1ea48000..7ea1ea48000 100644
--- a/addons/website/static/src/img/banner/mountains.jpg
+++ b/addons/website/static/src/img/backgrounds/mountains.jpg
diff --git a/addons/website/static/src/img/banner/orange_red.jpg b/addons/website/static/src/img/backgrounds/orange_red.jpg
index 3f7b2ebeaa9..3f7b2ebeaa9 100644
--- a/addons/website/static/src/img/banner/orange_red.jpg
+++ b/addons/website/static/src/img/backgrounds/orange_red.jpg
diff --git a/addons/website/static/src/img/parallax/parallax_bg.jpg b/addons/website/static/src/img/backgrounds/parallax_flowers.jpg
index b4d56d7f23a..b4d56d7f23a 100644
--- a/addons/website/static/src/img/parallax/parallax_bg.jpg
+++ b/addons/website/static/src/img/backgrounds/parallax_flowers.jpg
diff --git a/addons/website/static/src/img/parallax/parallax_photo1.jpg b/addons/website/static/src/img/backgrounds/parallax_girl.jpg
index c82dfcb9406..c82dfcb9406 100644
--- a/addons/website/static/src/img/parallax/parallax_photo1.jpg
+++ b/addons/website/static/src/img/backgrounds/parallax_girl.jpg
diff --git a/addons/website/static/src/img/parallax/quote.png b/addons/website/static/src/img/backgrounds/parallax_quote.png
index 842d820eb50..842d820eb50 100644
--- a/addons/website/static/src/img/parallax/quote.png
+++ b/addons/website/static/src/img/backgrounds/parallax_quote.png
diff --git a/addons/website/static/src/img/banner/velour.jpg b/addons/website/static/src/img/backgrounds/velour.jpg
index 8a6b034b815..8a6b034b815 100644
--- a/addons/website/static/src/img/banner/velour.jpg
+++ b/addons/website/static/src/img/backgrounds/velour.jpg
diff --git a/addons/website/static/src/img/banner/wood.jpg b/addons/website/static/src/img/backgrounds/wood.jpg
index 4554794ff19..4554794ff19 100644
--- a/addons/website/static/src/img/banner/wood.jpg
+++ b/addons/website/static/src/img/backgrounds/wood.jpg
diff --git a/addons/website/static/src/img/banner/yellow_green.jpg b/addons/website/static/src/img/backgrounds/yellow_green.jpg
index 4d98768e8b0..4d98768e8b0 100644
--- a/addons/website/static/src/img/banner/yellow_green.jpg
+++ b/addons/website/static/src/img/backgrounds/yellow_green.jpg
diff --git a/addons/website/static/src/img/content_here.png b/addons/website/static/src/img/content_here.png
deleted file mode 100644
index 3f35d88d5ce..00000000000
--- a/addons/website/static/src/img/content_here.png
+++ /dev/null
diff --git a/addons/website/static/src/img/banner/banner_picture.png b/addons/website/static/src/img/library/banner_picture.png
index 85d6db907e1..85d6db907e1 100644
--- a/addons/website/static/src/img/banner/banner_picture.png
+++ b/addons/website/static/src/img/library/banner_picture.png
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 8afcab6b506..6bf0e805fec 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -147,7 +147,10 @@ options.registry.carousel = options.registry.slider.extend({
         this.$target.on('slid.bs.carousel', function () {
             if(self.editor && self.editor.styles.background) {
                 self.editor.styles.background.$target = self.$target.find(".item.active");
+                self.editor.styles.background_position.$target = self.editor.styles.background.$target;
                 self.editor.styles.background.set_active();
+                self.editor.styles.background_position.set_active();
+                self.editor.styles.background.$target.trigger("snippet-option-change", [self.editor.styles.background]);
             }
             self.$target.carousel("pause");
         });
diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
index f9fa1b6cbf2..173bd9335fd 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.snippets.less
@@ -9,6 +9,17 @@
     }
 }
 
+// "Cover" snippet
+@s_text_block_image_fw-padding: 0 30px;
+.s_text_block_image_fw {
+    .container {
+        padding: @s_text_block_image_fw-padding;
+        > .row > div {
+            padding: 30px;
+        }
+    }
+}
+
 // Table Snippet
 .table_desc {
     margin: 0 0 20px 0;
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index cc854129b18..5f37e9c0406 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1,24 +1,36 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+<template id="s_cover" name="Cover">
+    <section class="s_text_block_image_fw oe_img_bg oe_custom_bg" style="background-image: url(/web/image/website.s_cover_default_image);">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 mt64 mb64 bg-white">
+                    <h2>Headline</h2>
+                    <h4 class="text-primary">With a great subtitle</h4>
+                    <p>Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
 <template id="s_banner" name="Banner">
-    <div id="myCarousel" class="carousel slide s_banner oe_custom_bg" data-interval="10000" style="height: 320px;">
+    <div id="myCarousel" class="carousel slide s_banner" data-interval="10000" style="height: 320px;">
         <!-- Indicators -->
         <ol class="carousel-indicators hidden">
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
         </ol>
         <div class="carousel-inner">
-            <div class="item oe_img_bg oe_custom_bg active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
+            <div class="item oe_img_bg oe_custom_bg active" style="background-image: url(/web/image/website.s_background_image_05);">
                 <div class="container">
                     <div class="row content">
                         <div class="carousel-content col-md-6 mt64">
-                                <h2>Your Banner Title</h2>
-                                <h3>Click to customize this text</h3>
-                                <p>
-                                    <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
-                                </p>
+                            <h2>Your Banner Title</h2>
+                            <h3>Click to customize this text</h3>
+                            <p><a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a></p>
                         </div>
                         <div class="carousel-img col-md-6 hidden-sm hidden-xs">
-                            <img class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
+                            <img class="img-responsive" src="/website/static/src/img/library/banner_picture.png" alt="Banner Odoo Image"/>
                         </div>
                     </div>
                 </div>
@@ -94,13 +106,9 @@
 <template id="s_text_block" name="Text Block">
     <section class="s_text_block">
         <div class="container">
+            <h2 class="text-center">A Great Headline</h2>
+            <h3 class="text-center text-muted">A good subtitle</h3>
             <div class="row">
-                <div class="col-md-12 text-center mt16 mb32">
-                    <h2>
-                        A Great Headline
-                    </h2>
-                    <h3 class="text-muted">A good subtitle</h3>
-                </div>
                 <div class="col-md-12 mb16 mt16">
                     <p>
                         A great way to catch your reader's attention is to tell a story.
@@ -127,12 +135,8 @@
 <template id="s_title" name="Title">
     <section class="s_title">
         <div class="container">
-            <div class="row">
-                <div class="col-md-12">
-                    <h1 class="text-center">Your Website Title</h1>
-                    <h3 class="text-muted text-center">And a great subtitle too</h3>
-                </div>
-            </div>
+            <h1 class="text-center">Your Website Title</h1>
+            <h3 class="text-center text-muted">And a great subtitle too</h3>
         </div>
     </section>
 </template>
@@ -164,10 +168,8 @@
 <template id="s_big_picture" name="Big Picture">
     <section class="s_big_picture bg-primary">
         <div class="container">
+            <h2 class="text-center">A Punchy Headline</h2>
             <div class="row">
-                <div class="col-md-12 text-center mt32 mb32">
-                    <h2>A Punchy Headline</h2>
-                </div>
                 <div class="col-md-12">
                   <img class="img img-responsive" src="/website/static/src/img/big_picture.png" style="margin: 0 auto;"  alt="Odoo CMS - a big picture"/>
                 </div>
@@ -294,101 +296,79 @@
 <template id="s_comparisons" name="Comparisons">
     <section class="s_comparisons">
         <div class="container">
-          <div class="row">
-            <div class="col-md-12 text-center mt16 mb32">
-                <h2>Our Offers</h2>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-4 col-xs-12">
-                <div class="panel panel-info">
-
-                  <div class="panel-heading text-center">
-                      <h3 style="margin: 0">Beginner</h3>
-                      <p style="margin: 0" class="text-muted">
-                          Starter package
-                      </p>
-                  </div>
-                  <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                    <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
-                    <div>user / month (billed annually)</div>
-                  </div>
-
-
-                  <ul class="list-group">
-                    <li class="list-group-item active">Basic sales &amp; marketing for up to 2 users</li>
-                    <li class="list-group-item">Account &amp; Sales management</li>
-                    <li class="list-group-item">No customization</li>
-                    <li class="list-group-item">No support</li>
-                  </ul>
-                  <div class="panel-footer text-center">
-                      <p class="text-muted">
-                          <i>Instant setup, satisfied or reimbursed.</i>
-                      </p>
-                      <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
-                  </div>
+            <h2 class="text-center">Our Offers</h2>
+            <div class="row">
+                <div class="col-md-4 col-xs-12">
+                    <div class="panel panel-info">
+                        <div class="panel-heading text-center">
+                            <h3 style="margin: 0">Beginner</h3>
+                            <p style="margin: 0" class="text-muted">
+                                Starter package
+                            </p>
+                        </div>
+                        <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
+                            <div>user / month (billed annually)</div>
+                        </div>
+                        <ul class="list-group">
+                            <li class="list-group-item active">Basic sales &amp; marketing for up to 2 users</li>
+                            <li class="list-group-item">Account &amp; Sales management</li>
+                            <li class="list-group-item">No customization</li>
+                            <li class="list-group-item">No support</li>
+                        </ul>
+                        <div class="panel-footer text-center">
+                            <p class="text-muted">
+                                <i>Instant setup, satisfied or reimbursed.</i>
+                            </p>
+                            <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="col-md-4 col-xs-12">
-                <div class="panel panel-primary">
-
-                  <div class="panel-heading text-center">
-                      <h3 style="margin: 0">Professional</h3>
-                      <p style="margin: 0">
-                          Enterprise package
-                      </p>
-                  </div>
-                  <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                    <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
-                    <div>user / month (billed annually)</div>
-                  </div>
-
-
-                  <ul class="list-group">
-                    <li class="list-group-item active">Complete CRM for any size team</li>
-                    <li class="list-group-item">Get access to all modules</li>
-                    <li class="list-group-item">Limited customization</li>
-                    <li class="list-group-item">Email support</li>
-                  </ul>
-                  <div class="panel-footer text-center">
-                      <p class="text-muted">
-                          <i>Instant setup, satisfied or reimbursed.</i>
-                      </p>
-                      <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
-                  </div>
+                <div class="col-md-4 col-xs-12">
+                    <div class="panel panel-primary">
+                        <div class="panel-heading text-center">
+                            <h3 style="margin: 0">Professional</h3>
+                            <p style="margin: 0">Enterprise package</p>
+                        </div>
+                        <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
+                            <div>user / month (billed annually)</div>
+                        </div>
+                        <ul class="list-group">
+                            <li class="list-group-item active">Complete CRM for any size team</li>
+                            <li class="list-group-item">Get access to all modules</li>
+                            <li class="list-group-item">Limited customization</li>
+                            <li class="list-group-item">Email support</li>
+                        </ul>
+                        <div class="panel-footer text-center">
+                            <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="col-md-4 col-xs-12">
-                <div class="panel panel-info">
-
-                  <div class="panel-heading text-center">
-                      <h3 style="margin: 0">Expert</h3>
-                      <p style="margin: 0" class="text-muted">
-                          Ultimate package
-                      </p>
-                  </div>
-                  <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                    <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
-                    <div>user / month (billed annually)</div>
-                  </div>
-
-
-                  <ul class="list-group">
-                    <li class="list-group-item active">Unlimited CRM power and support</li>
-                    <li class="list-group-item">Get access to all modules and features</li>
-                    <li class="list-group-item">Unlimited customization</li>
-                    <li class="list-group-item">24x7 toll-free support</li>
-                  </ul>
-                  <div class="panel-footer text-center">
-                      <p class="text-muted">
-                          <i>Instant setup, satisfied or reimbursed.</i>
-                      </p>
-                      <a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
-                  </div>
+                <div class="col-md-4 col-xs-12">
+                    <div class="panel panel-info">
+                        <div class="panel-heading text-center">
+                            <h3 style="margin: 0">Expert</h3>
+                            <p style="margin: 0" class="text-muted">Ultimate package</p>
+                        </div>
+                        <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
+                            <div>user / month (billed annually)</div>
+                        </div>
+                        <ul class="list-group">
+                            <li class="list-group-item active">Unlimited CRM power and support</li>
+                            <li class="list-group-item">Get access to all modules and features</li>
+                            <li class="list-group-item">Unlimited customization</li>
+                            <li class="list-group-item">24x7 toll-free support</li>
+                        </ul>
+                        <div class="panel-footer text-center">
+                            <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
+                        </div>
+                    </div>
                 </div>
-
             </div>
-          </div>
         </div>
     </section>
 </template>
@@ -415,7 +395,7 @@
     </section>
 </template>
 
-<template id="s_faq_collapse" name="FAQ Roller">
+<template id="s_faq_collapse" name="Accordion">
     <section class="s_faq_collapse">
         <div class="container">
             <h2 class="page-header">Point of Sale Questions <small>v7</small></h2>
@@ -480,16 +460,9 @@
 <template id="s_references" name="References">
     <section class="s_references">
         <div class="container">
-            <div class="row">
-                <div class="col-md-12">
-                    <h1 class="text-center">
-                        Our References
-                    </h1>
-                    <h3 class="text-muted text-center">
-                        More than 500 happy customers.
-                    </h3>
-                </div>
-            </div>
+            <h1 class="text-center">Our References</h1>
+            <h3 class="text-center text-muted">More than 500 happy customers.</h3>
+
             <div class="row">
                 <div class="col-md-4 col-xs-12 col-md-offset-1 mt16 mb32">
                     <blockquote>
@@ -534,55 +507,6 @@
     </section>
 </template>
 
-<template id="s_quotes_slider" name="Quotes Slider">
-    <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider" data-interval="10000">
-        <!-- Indicators -->
-        <ol class="carousel-indicators mb0">
-            <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
-            <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
-        </ol>
-        <div class="carousel-inner">
-
-            <div class="item text_only active">
-                <div class="container">
-                    <div class="content">
-
-                        <div class="row">
-                            <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                    <p>
-                                        Write a quote here from one of your customers. Quotes are a
-                                        great way to build confidence in your products or services.
-                                    </p>
-                                    <small>Author of this quote</small>
-                            </blockquote>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-
-            <div class="item text_only">
-                <div class="container">
-                    <div class="content">
-
-                        <div class="row">
-                            <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                    <p>
-                                        Odoo provides essential platform for our project management.
-                                        Things are better organized and more visible with it.
-                                    </p>
-                                    <small>John Doe, CEO</small>
-                            </blockquote>
-                        </div>
-
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</template>
-
 <template id="s_feature_grid" name="Feature Grid">
     <section class="s_feature_grid">
         <div class="container">
@@ -636,7 +560,7 @@
 
 <template id="s_parallax" name="Parallax">
     <section class="parallax s_parallax"
-            style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
+            style="background-image: url(/web/image/website.s_background_image_11)"
             data-scroll-background-ratio="0.3">
             <div><div class="oe_structure"/></div>
     </section>
@@ -644,7 +568,7 @@
 
 <template id="s_parallax_slider" name="Parallax Slider">
     <section class="parallax s_parallax_slider"
-             style="background-image: url('/website/static/src/img/parallax/quote.png')"
+             style="background-image: url(/web/image/website.s_background_image_15);"
             data-scroll-background-ratio="0.3">
         <div><div><div class="oe_structure">
                 <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
@@ -732,7 +656,7 @@
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
-                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
+                    <t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
                     <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
                     <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
                     <t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
@@ -740,6 +664,7 @@
                     <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
                     <t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
                     <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
+                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
                 </div>
             </div>
 
@@ -766,7 +691,6 @@
                     <t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
                     <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
                     <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
-                    <t t-snippet="website.s_quotes_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
                     <t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
                 </div>
             </div>
@@ -809,23 +733,24 @@
             <ul class="dropdown-menu">
                 <li data-background=""><a>None</a></li>
                 <li class="divider"></li>
-                <li data-background="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
-                <li data-background="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
-                <li data-background="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
-                <li data-background="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
-                <li data-background="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
-                <li data-background="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
-                <li data-background="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
-                <li data-background="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
-                <li data-background="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
-                <li data-background="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
-                <li data-background="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
-                <li data-background="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
-                <li data-background="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
-                <li data-background="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
-                <li data-background="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
-                <li data-background="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
-                <li data-background="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
+                <li data-background="/web/image/website.s_background_image_01"><a>Aqua</a></li>
+                <li data-background="/web/image/website.s_background_image_02"><a>Baby Blue</a></li>
+                <li data-background="/web/image/website.s_background_image_03"><a>Black</a></li>
+                <li data-background="/web/image/website.s_background_image_04"><a>Business Guy</a></li>
+                <li data-background="/web/image/website.s_background_image_05"><a>Color Splash</a></li>
+                <li data-background="/web/image/website.s_background_image_06"><a>Flowers Field</a></li>
+                <li data-background="/web/image/website.s_background_image_07"><a>Purple</a></li>
+                <li data-background="/web/image/website.s_background_image_08"><a>Greenfields</a></li>
+                <li data-background="/web/image/website.s_background_image_09"><a>Landscape</a></li>
+                <li data-background="/web/image/website.s_background_image_10"><a>Mango</a></li>
+                <li data-background="/web/image/website.s_background_image_11"><a>Mountains</a></li>
+                <li data-background="/web/image/website.s_background_image_12"><a>Orange Red</a></li>
+                <li data-background="/web/image/website.s_background_image_13"><a>Sunflower</a></li>
+                <li data-background="/web/image/website.s_background_image_14"><a>Girl</a></li>
+                <li data-background="/web/image/website.s_background_image_15"><a>Quote</a></li>
+                <li data-background="/web/image/website.s_background_image_16"><a>Velour</a></li>
+                <li data-background="/web/image/website.s_background_image_17"><a>Wood</a></li>
+                <li data-background="/web/image/website.s_background_image_18"><a>Yellow Green</a></li>
                 <li class="divider"></li>
                 <li data-choose_image="choose_image"><a><b>Choose an image...</b></a></li>
             </ul>
diff --git a/addons/website_event/data/website_event_demo.xml b/addons/website_event/data/website_event_demo.xml
index a435bdfeca4..fcb013f84d2 100644
--- a/addons/website_event/data/website_event_demo.xml
+++ b/addons/website_event/data/website_event_demo.xml
@@ -11,11 +11,11 @@
             <field name="description"><![CDATA[
 <div class="carousel slide oe_small mb16" data-interval="10000" id="myCarousel3">
     <div class="carousel-inner">
-        <div class="item oe_img_bg active" style="background-image: url(/website/static/src/img/banner/orange_red.jpg);">
+        <div class="item oe_img_bg active" style="background-image: url(/web/image/website.s_background_image_12);">
             <div class="container">
                 <div class="row content">
                     <div class="carousel-img hidden-sm hidden-xs mb48 col-md-5 col-md-offset-1 mt16">
-                        <img alt="Banner Odoo Image" class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" style=""/>
+                        <img alt="Banner Odoo Image" class="img-responsive" src="/website/static/src/img/library/banner_picture.png" style=""/>
                     </div>
                     <div class="carousel-content col-sm-12 col-md-5 mt32" style="text-align: center; color: white;">
                         <h2>3 Intensive Days</h2>
@@ -177,11 +177,11 @@
             <field name="description"><![CDATA[
 <div class="carousel slide oe_small mb16" data-interval="10000" id="myCarousel3">
     <div class="carousel-inner">
-        <div class="item oe_img_bg active" style="background-image: url(/website/static/src/img/banner/orange_red.jpg);">
+        <div class="item oe_img_bg active" style="background-image: url(/web/image/website.s_background_image_12);">
             <div class="container">
                 <div class="row content">
                     <div class="carousel-img hidden-sm hidden-xs mb48 col-md-5 col-md-offset-1 mt16">
-                        <img alt="Banner Odoo Image" class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" style=""/>
+                        <img alt="Banner Odoo Image" class="img-responsive" src="/website/static/src/img/library/banner_picture.png" style=""/>
                     </div>
                     <div class="carousel-content col-sm-12 col-md-5 mt32" style="text-align: center; color: white;">
                         <h2>5 Intensive Days</h2>
@@ -355,11 +355,11 @@
             <field name="description"><![CDATA[
 <div class="carousel slide oe_small mb16" data-interval="10000" id="myCarousel3">
     <div class="carousel-inner">
-        <div class="item oe_img_bg active" style="background-image: url(/website/static/src/img/banner/orange_red.jpg);">
+        <div class="item oe_img_bg active" style="background-image: url(/web/image/website.s_background_image_12);">
             <div class="container">
                 <div class="row content">
                     <div class="carousel-img hidden-sm hidden-xs mb48 col-md-5 col-md-offset-1 mt16">
-                        <img alt="Banner Odoo Image" class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" style=""/>
+                        <img alt="Banner Odoo Image" class="img-responsive" src="/website/static/src/img/library/banner_picture.png" style=""/>
                     </div>
                     <div class="carousel-content col-sm-12 col-md-5 mt32" style="text-align: center; color: white;">
                         <h2>5 Intensive Days</h2>
diff --git a/addons/website_hr_recruitment/views/templates.xml b/addons/website_hr_recruitment/views/templates.xml
index 03ff3713bd2..5adf0751c79 100644
--- a/addons/website_hr_recruitment/views/templates.xml
+++ b/addons/website_hr_recruitment/views/templates.xml
@@ -49,9 +49,8 @@
                               <h4 class="css_editable_display">No job offer found</h4>
                               <h4 class="css_editable_hidden">There isn't job offer published now, click <a t-attf-href="/page/website.contactus">here</a> to contact us</h4>
                               <t groups="base.group_website_publisher">
-                                <t  groups="base.group_hr_manager">
+                                <t groups="base.group_hr_manager">
                                   <p>Click on "Content" to define a new job offer or "Help" for more informations.</p>
-                                  <img src="/website/static/src/img/content_here.png"/>
                                 </t>
                               </t>
                             </div>
@@ -140,7 +139,7 @@
 <template id="apply">
     <t t-call="website.layout">
         <t t-set="additional_title">Apply Job</t>
-    
+
         <div id="wrap"  class="container">
             <h1 class="text-center">
                 Job Application Form