[IMP] hr_recruitment: improve usability (back2basics)

TaskID: 2053569

closes odoo/odoo#35767

Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

10 files changed, 1292 insertions, 722 deletions

diff --git a/addons/hr/views/hr_job_views.xml b/addons/hr/views/hr_job_views.xml
index 3371f4ae5ab..5d89c225606 100644
--- a/addons/hr/views/hr_job_views.xml
+++ b/addons/hr/views/hr_job_views.xml
@@ -22,6 +22,8 @@
                             <group name="recruitment">
                                 <field name="company_id" options="{'no_create': True}" groups="base.group_multi_company"/>
                                 <field name="department_id"/>
+                            </group>
+                            <group>
                                 <field name="no_of_recruitment"/>
                             </group>
                         </group>
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index eb9328243a8..912a2e0f1bf 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -1,6 +1,27 @@
 .o_kanban_view.o_kanban_dashboard {
-    &.o_hr_recruitment_kanban.o_kanban_ungrouped .o_kanban_record {
-        width: 350px;
+    &.o_hr_recruitment_kanban.o_kanban_ungrouped {
+        .o_kanban_record {
+            width: 350px;
+            height: 180px;
+        }
+
+        .ribbon {
+            &::before, &::after {
+                display: none;
+            }
+
+            span {
+                padding: 10px;
+                z-index: unset;
+            }
+        }
+        .ribbon-top-right {
+            margin-top: -9px;
+        }
+    }
+
+    .o_kanban_record_subtitle {
+        height: 1em;
     }
 
     .o_recruitment_kanban_boxes {
@@ -9,7 +30,6 @@
 
         .o_recruitment_kanban_box {
             position: relative;
-            text-align: center;
             padding: 0 0 0 0;
             flex: 1 1 auto;
             display: flex;
@@ -20,9 +40,10 @@
                 justify-content: flex-start;
                 padding-left: 16px;
             }
-            &:last-child {
+            div:last-child {
                 justify-content: flex-end;
                 padding-right: 16px;
+                text-align: right;
             }
 
             .o_value {
@@ -56,5 +77,12 @@
     .o_kanban_state_with_padding {
         padding-left:7%;
         padding-bottom:5%;
+        width: 12px;
     }
 }
+
+.o_recruitment_list {
+    .o_list_button {
+        text-align: right;
+    }
+}
\ No newline at end of file
diff --git a/addons/hr_recruitment/views/hr_job_views.xml b/addons/hr_recruitment/views/hr_job_views.xml
index 588ff30892a..b0023e06adf 100644
--- a/addons/hr_recruitment/views/hr_job_views.xml
+++ b/addons/hr_recruitment/views/hr_job_views.xml
@@ -27,9 +27,14 @@
                 <templates>
                     <t t-name="kanban-box">
                         <div t-attf-class="#{!selection_mode ? kanban_color(record.color.raw_value) : ''}">
-                            <div t-attf-class="o_kanban_card_header">
+                            <div class="o_kanban_card_header">
                                 <div class="o_kanban_card_header_title">
-                                    <div class="o_primary col-12"><t t-esc="record.name.value"/></div>
+                                    <div class="o_primary col-12">
+                                        <span><t t-esc="record.name.value"/></span>
+                                    </div>
+                                    <div class="o_kanban_record_subtitle col-12 text-muted">
+                                        <field name="user_id" />
+                                    </div>
                                     <field name="is_favorite" widget="boolean_favorite" nolabel="1"/>
                                     <div t-if="record.alias_name.value and record.alias_domain.value and record.state.raw_value == 'recruit'" class="o_secondary o_job_alias">
                                         <small> <i class="fa fa-envelope-o" role="img" aria-label="Alias" title="Alias"></i> <field name="alias_id"/> </small>
@@ -43,15 +48,15 @@
                                 <t t-if="record.state.raw_value == 'recruit'">
                                     <div class="row">
                                         <div class="col-6">
-                                            <button class="btn btn-secondary" name="%(action_hr_job_applications)d" type="action">Applications</button>
+                                            <button class="btn btn-primary" name="%(action_hr_job_applications)d" type="action">
+                                                <field name="application_count"/> Applications
+                                            </button>
                                         </div>
                                         <div class="col-6">
                                             <field name="new_application_count"/> New Applications <br/>
-                                            <field name="no_of_hired_employee"/> Hired Employees
+                                            <field name="no_of_recruitment"/> To Recruit
                                         </div>
                                     </div>
-                                    <div name="kanban_boxes" class="row o_recruitment_kanban_boxes">
-                                    </div>
                                 </t>
                                 <t t-if="record.state.raw_value == 'open'">
                                     <div class="row">
@@ -60,6 +65,14 @@
                                         </div>
                                     </div>
                                 </t>
+                                <div name="kanban_boxes" class="row o_recruitment_kanban_boxes">
+                                    <div class="o_recruitment_kanban_box o_kanban_primary_bottom bottom_block" style="padding-left:8px;">
+                                        <div class="col-6"></div>
+                                        <div class="col-6">
+                                            <a type="action" name="%(action_hr_job_sources)d">Share Trackers</a>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                             <div class="o_kanban_card_manage_pane dropdown-menu" role="menu">
                                 <div class="o_kanban_card_manage_section">
@@ -89,6 +102,12 @@
             <xpath expr="//field[@name='name']" position="after">
                 <filter string="My Job Positions" name="my_positions" domain="[('user_id', '=', uid)]"/>
             </xpath>
+            <xpath expr="//group" position="after">
+                <searchpanel>
+                    <field name="company_id" groups="base.group_multi_company" icon="fa-building"/>
+                    <field name="user_id" icon="fa-users"/>
+                </searchpanel>
+            </xpath>
         </field>
     </record>
 
diff --git a/addons/hr_recruitment/views/hr_recruitment_views.xml b/addons/hr_recruitment/views/hr_recruitment_views.xml
index 4d69afc9a8a..1697e9f2490 100644
--- a/addons/hr_recruitment/views/hr_recruitment_views.xml
+++ b/addons/hr_recruitment/views/hr_recruitment_views.xml
@@ -88,12 +88,6 @@
                          help="Schedule interview with this applicant">
                         <field name="meeting_count" widget="statinfo" string="Meetings"/>
                     </button>
-                    <button name="action_get_attachment_tree_view"
-                        class="oe_stat_button"
-                        icon="fa-file-text-o"
-                        type="object">
-                        <field name="attachment_number" widget="statinfo" string="Documents"/>
-                    </button>
                     <button name="toggle_active" type="object"
                             class="oe_stat_button" icon="fa-archive"
                             attrs="{'invisible': [('active', '=', True)]}">
@@ -164,7 +158,7 @@
             <div class="oe_chatter">
                 <field name="message_follower_ids" widget="mail_followers"/>
                 <field name="activity_ids" widget="mail_activity"/>
-                <field name="message_ids" widget="mail_thread" options="{'post_refresh': 'recipients'}"/>
+                <field name="message_ids" widget="mail_thread" options="{'post_refresh': 'recipients', 'open_attachments': True}"/>
             </div>
           </form>
         </field>
@@ -471,8 +465,10 @@
                         <field name="alias_name" class="oe_inline"/>@<field name="alias_domain" class="oe_inline" readonly="1"/>
                     </div>
                 </div>
-                <field name="user_id"/>
             </xpath>
+            <field name="no_of_recruitment" position="after">
+                <field name="user_id"/>
+            </field>
             <div name="button_box" position="inside">
                 <button class="oe_stat_button"
                     icon="fa-pencil"
@@ -820,10 +816,10 @@ action = act
         <field name="name">hr.recruitment.source.tree</field>
         <field name="model">hr.recruitment.source</field>
         <field name="arch" type="xml">
-            <tree string="Sources of Applicants" editable="top">
+            <tree string="Sources of Applicants" editable="top" class="o_recruitment_list">
                 <field name="source_id"/>
+                <button name="create_alias" string="Generate email alias" type="object" icon="fa-repeat text-success" />
                 <field name="email"/>
-                <button name="create_alias" string="Create alias" type="object" icon="fa-repeat text-success" />
             </tree>
         </field>
     </record>
@@ -928,7 +924,7 @@ action = act
                    <filter string="Department" name="department" context="{'group_by':'department_id'}"/>
                    <filter string="Stage" name="stage" context="{'group_by':'stage_id'}" />
                    <separator/>
-                   <filter string="Creation Date" name="creation_week" context="{'group_by':'create_date:week'}" help="Creation Date"/>
+                   <filter string="Creation Date" name="creation_month" context="{'group_by':'create_date:month'}" help="Creation Date"/>
                 </group>
             </search>
         </field>
@@ -941,9 +937,9 @@ action = act
         <field name="search_view_id" ref="hr_applicant_view_search"/>
         <field name="view_ids" eval="[
             (5, 0, 0),
-            (0, 0, {'view_mode': 'pivot', 'view_id': ref('hr_applicant_view_pivot')}),
-            (0, 0, {'view_mode': 'graph', 'view_id': ref('hr_applicant_view_graph')})]"/>
-        <field name="context">{}</field>  <!-- force empty -->
+            (0, 0, {'view_mode': 'graph', 'view_id': ref('hr_applicant_view_graph')}),
+            (0, 0, {'view_mode': 'pivot', 'view_id': ref('hr_applicant_view_pivot')})]"/>
+        <field name="context">{'search_default_creation_month': 1, 'search_default_job': 2}</field>
     </record>
     <menuitem name="Reporting" id="report_hr_recruitment" parent="menu_hr_recruitment_root"
     sequence="99"/>
diff --git a/addons/hr_recruitment_survey/views/hr_job_views.xml b/addons/hr_recruitment_survey/views/hr_job_views.xml
index 6f4795f08ec..746b6c645a1 100644
--- a/addons/hr_recruitment_survey/views/hr_job_views.xml
+++ b/addons/hr_recruitment_survey/views/hr_job_views.xml
@@ -5,7 +5,7 @@
         <field name="model">hr.job</field>
         <field name="inherit_id" ref="hr_recruitment.hr_job_survey"/>
         <field name="arch" type="xml">
-            <xpath expr="//field[@name='address_id']" position="before">
+            <xpath expr="//field[@name='user_id']" position="before">
                 <label for="survey_id" groups="survey.group_survey_user"/>
                 <div groups="survey.group_survey_user" class="o_row">
                     <field name="survey_id"
diff --git a/addons/mail/static/src/js/chatter.js b/addons/mail/static/src/js/chatter.js
index 9f0299565d2..153bd5fa3a2 100644
--- a/addons/mail/static/src/js/chatter.js
+++ b/addons/mail/static/src/js/chatter.js
@@ -59,7 +59,6 @@ var Chatter = Widget.extend({
 
         this.attachments = {};
         this.fields = {};
-
         this._areAttachmentsLoaded = false;
         this._disableAttachmentBox = !!options.disable_attachment_box;
         this._dp = new concurrency.DropPrevious();
@@ -84,6 +83,7 @@ var Chatter = Widget.extend({
             this.hasLogButton = options.display_log_button || nodeOptions.display_log_button;
             this.postRefresh = nodeOptions.post_refresh || 'never';
             this.reloadOnUploadAttachment = this.postRefresh === 'always';
+            this.openAttachments = nodeOptions.open_attachments || false;
         }
     },
     /**
@@ -390,6 +390,9 @@ var Chatter = Widget.extend({
             // disable widgets in create mode, otherwise enable
             self._isCreateMode ? self._disableChatter() : self._enableChatter();
             $spinner.remove();
+            if (self.openAttachments) {
+                self._onClickAttachmentButton();
+            }
         };
 
         return def.then(function () {
diff --git a/addons/mail/views/mail_message_views.xml b/addons/mail/views/mail_message_views.xml
index 6d988973665..59857349544 100644
--- a/addons/mail/views/mail_message_views.xml
+++ b/addons/mail/views/mail_message_views.xml
@@ -145,7 +145,7 @@
                     <field name="name"/>
                     <templates>
                         <t t-name="kanban-box">
-                            <div class="oe_kanban_global_area o_kanban_attachment">
+                            <div class="oe_kanban_global_area oe_kanban_global_click o_kanban_attachment">
                                 <div class="row">
                                     <div class="offset-10">
                                         <div class="o_dropdown_kanban dropdown" groups="base.group_user">
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index 5569eaa6f00..f42628ca0d5 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -4,104 +4,175 @@
     <record id="hr.job_marketing" model="hr.job">
         <field name="is_published">True</field>
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                <p>You will be responsible for developing and improving product communication. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a techinical expert of the product.</p>
-                <p>We are looking for a passionated marketer manager to help us make products people love to use. We need someone who is ambitious, passionated, and ..... not afraid to start new things, a lot of new things and scale them.</p>
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Responsibilities</h2>
-                        <p style="margin: 0" class="text-muted">
-                            What you will do ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Hire a team of great marketing people</li>
-                        <li class="list-group-item">Increase the visibility of the product</li>
-                        <li class="list-group-item">Increase opportunities</li>
-                        <li class="list-group-item">Improve our communication to customers</li>
-                        <li class="list-group-item">Transform our product into a suite of well positioned business Apps</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>Work in a fun atmosphere</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Write attractive content</li>
-                        <li class="list-group-item">Define a clear communication strategy</li>
-                        <li class="list-group-item">Scale our events organization all around the world</li>
-                        <li class="list-group-item">Launch new marketing campaigns and offers</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You easily manage them</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You are creative</li>
-                        <li class="list-group-item">You have an affinity with the product</li>
-                        <li class="list-group-item">You are ready to work in a dynamic company</li>
-                        <li class="list-group-item">You are approachable, honest and fun team player</li>
-                        <li class="list-group-item">You have an affinity with the IT world</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
             </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
+    <div class="container">
+        <div class="row">
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -109,23 +180,25 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
             </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
+            </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
         </div>
     </div>
@@ -136,105 +209,175 @@
     <record id="hr.job_developer" model="hr.job">
         <field name="is_published">True</field>
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                You will be responsible for developing and improving applications. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a technical expert of the product.
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Responsibilities</h2>
-                        <p style="margin: 0" class="text-muted">
-                            What you will do ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You will work closely with all developers</li>
-                        <li class="list-group-item">You will report to the head of R&amp;D</li>
-                        <li class="list-group-item">You will initially be coached by senior developers</li>
-                        <li class="list-group-item">You will become a technical expert of the product.</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>Work in a fun atmosphere</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Master or engineer in computer science</li>
-                        <li class="list-group-item">Preferably 1 year of experience</li>
-                        <li class="list-group-item">Good knowledge of object oriented programming</li>
-                        <li class="list-group-item">Good knowledge of web design</li>
-                        <li class="list-group-item">Good knowledge of HTML and Javascript</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You autonomously and quickly learn</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Good knowledge of the programming language</li>
-                        <li class="list-group-item">Good knowledge of the latest web technologies</li>
-                        <li class="list-group-item">Good language skills in another language</li>
-                        <li class="list-group-item">Contributions to open source projects</li>
-                        <li class="list-group-item">Passion for the Internet and its culture</li>
-                        <li class="list-group-item">Quick and autonomous learner</li>
-                        <li class="list-group-item">Team spirit and good communication</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
             </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
+            </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
+    <div class="container">
+        <div class="row">
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -242,23 +385,25 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
             </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
+            </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
         </div>
     </div>
@@ -269,106 +414,175 @@
     <record id="hr.job_consultant" model="hr.job">
         <field name="is_published">True</field>
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                We are looking for a motivated and results-driven Functional Consultant! You will take part in the consulting services we provide to our partners and customers, on the functional side. Your job start from the quotation to the customer to the delivery to the customer. You listen the customer and try to give him the best service. You report to the head of consulting service and will be coached by a senior consultant.
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Responsibilities</h2>
-                        <p style="margin: 0" class="text-muted">
-                            What you will do ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Take part in the consulting services</li>
-                        <li class="list-group-item">Analyse needs, write specification documents and quotation</li>
-                        <li class="list-group-item">Quantify and negotiate the resources required</li>
-                        <li class="list-group-item">Follow and check the development part</li>
-                        <li class="list-group-item">Help with the configuration of the software</li>
-                        <li class="list-group-item">Deliver generic Odoo functional training sessions</li>
-                        <li class="list-group-item">Will report to the Head of Professional Services</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>Work in a fun atmosphere</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You have a Master degree in Business Management</li>
-                        <li class="list-group-item">You have 2 or 3 years of experience</li>
-                        <li class="list-group-item">You speak fluently French and English</li>
-                        <li class="list-group-item">You are an excellent communicator and negotiator</li>
-                        <li class="list-group-item">You have an affinity with the IT world</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You easily manage them</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You have good knowledge in accounting</li>
-                        <li class="list-group-item">You are available immediately</li>
-                        <li class="list-group-item">You speak a third language</li>
-                        <li class="list-group-item">You are a quick and autonomous learner</li>
-                        <li class="list-group-item">You are ready to travel in US</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
             </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
+            </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
+    <div class="container">
+        <div class="row">
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -376,128 +590,203 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
             </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
+        </div>
     </div>
-</div>
 </section>
         </field>
     </record>
 
     <record id="hr.job_ceo" model="hr.job">
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                <p>You will be responsible for developing and improving product communication. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a techinical expert of the product.</p>
-                <p class="text-muted">We are looking for a passionated executive manager to help us make products people love to use. We need someone who is ambitious, passionated, and ..... not afraid to start new things, a lot of new things and scale them.</p>
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Responsibilities</h2>
-                        <p style="margin: 0" class="text-muted">
-                            What you will do ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Hire a team of great executive people</li>
-                        <li class="list-group-item">Increase the visibility of the product</li>
-                        <li class="list-group-item">Increase opportunities</li>
-                        <li class="list-group-item">Improve our communication to customers</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>Work in a fun atmosphere</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Write attractive content and build up executive materials</li>
-                        <li class="list-group-item">Define a clear communication strategy</li>
-                        <li class="list-group-item">Scale our events organization all around the world</li>
-                        <li class="list-group-item">Launch new products, marketing campaigns and offers</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You easily manage them</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You are creative</li>
-                        <li class="list-group-item">You have an affinity with the product</li>
-                        <li class="list-group-item">You are ready to work in a dynamic company</li>
-                        <li class="list-group-item">You are approachable, honest and fun team player</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
             </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
+    <div class="container">
+        <div class="row">
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -505,23 +794,25 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
             </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
+            </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
         </div>
     </div>
@@ -531,101 +822,175 @@
 
     <record id="hr.job_cto" model="hr.job">
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                You will be responsible for developing and improving applications. You will work autonomously as well as                     coordinate and supervise small distributed development teams for specific projects. You will become a technical                 expert of the product.
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                        <div class="card-header text-center">
-                            <h2 style="margin: 0">Responsibilities</h2>
-                            <p style="margin: 0" class="text-muted">
-                                What you will do ...
-                            </p>
-                        </div>
-                        <!-- List group -->
-                        <ul class="list-group list-group-flush">
-                            <li class="list-group-item">You will work closely with all technical officer</li>
-                            <li class="list-group-item">You will report to the head of R&amp;D</li>
-                            <li class="list-group-item">You will initially be coached by senior technical officer</li>
-                            <li class="list-group-item">You will become a technical expert of the product.</li>
-                        </ul>
-                        <div class="card-footer text-center">
-                            <p class="text-muted">
-                                <i>Work in a fun atmosphere</i>
-                            </p>
-                        </div>
-                    </div>
-            </div>
-            <div class="col-lg-4 mt16">
-            <div class="card bg-info text-white">
-                <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Master or engineer in computer science</li>
-                        <li class="list-group-item">Preferably 1 year of experience</li>
-                        <li class="list-group-item">Good knowledge of object oriented programming</li>
-                        <li class="list-group-item">Good knowledge of web design</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You autonomously and quickly learn</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Good knowledge of the programming language</li>
-                        <li class="list-group-item">Good knowledge of the latest web technologies</li>
-                        <li class="list-group-item">Good language skills in another language</li>
-                        <li class="list-group-item">Contributions to open source projects</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
             </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic chief technical officer. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
+    <div class="container">
+        <div class="row">
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -633,23 +998,25 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
             </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
+            </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
         </div>
     </div>
@@ -659,101 +1026,175 @@
 
     <record id="hr.job_trainee" model="hr.job">
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                You will be responsible for developing and improving applications. You will work autonomously as well as                     coordinate and supervise small distributed development teams for specific projects. You will become a technical                 expert of the product.
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Responsibilities</h2>
-                        <p style="margin: 0" class="text-muted">
-                            What you will do ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You will work closely with all trainees</li>
-                        <li class="list-group-item">You will report to the head of R&amp;D</li>
-                        <li class="list-group-item">You will initially be coached by senior trainees</li>
-                        <li class="list-group-item">You will become a technical expert of the product.</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>Work in a fun atmosphere</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Master or engineer in computer science</li>
-                        <li class="list-group-item">Preferably 1 year of experience</li>
-                        <li class="list-group-item">Good knowledge of object oriented programming</li>
-                        <li class="list-group-item">Good knowledge of web design</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You autonomously and quickly learn</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Good knowledge of the programming language</li>
-                        <li class="list-group-item">Good knowledge of the latest web technologies</li>
-                        <li class="list-group-item">Good language skills in another language</li>
-                        <li class="list-group-item">Contributions to open source projects</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
             </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
+            </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
+            </div>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic trainees. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -761,23 +1202,25 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
             </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
         </div>
     </div>
@@ -787,102 +1230,175 @@
 
     <record id="hr.job_hrm" model="hr.job">
         <field name="website_description" type="html">
-<section class="mt16 mb16 oe_dark">
+<section class="mb32">
     <div class="container">
         <div class="row">
-            <div class="offset-lg-1 col-lg-10 mb16 mt16">
-                <p>You will be responsible for developing and improving product communication. You will work autonomously as well as coordinate and supervise small distributed development teams for specific projects. You will become a techinical expert of the product.</p>
-                <p class="text-muted">We are looking for a passionated Human Resources Manager to help us make products people love to use. We need someone who is ambitious, passionated, and ..... not afraid to start new things, a lot of new things and scale them.</p>
+            <div class="col-md-10">
+                <p class="lead mt0" style="text-align: justify; ">Join our experienced team of Python &amp; JavaScript
+                    Developers, and work on an amazing Open Source product! Develop things people care about.</p>
             </div>
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="o_tasks">
     <div class="container">
         <div class="row">
-            <div class="col-lg-4 mt16" style="width:30%;">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Responsibilities</h2>
-                        <p style="margin: 0" class="text-muted">
-                            What you will do ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Hire a team of great Human Resources people</li>
-                        <li class="list-group-item">Increase the visibility of the product</li>
-                        <li class="list-group-item">Increase opportunities</li>
-                        <li class="list-group-item">Improve our communication to customers</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>Work in a fun atmosphere</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Skills</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Must have ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">Write attractive content and build up Human Resources materials</li>
-                        <li class="list-group-item">Define a clear communication strategy</li>
-                        <li class="list-group-item">Scale our events organization all around the world</li>
-                        <li class="list-group-item">Launch new products, Human Resources campaigns and offers</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You easily manage them</i>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4 mt16">
-                <div class="card bg-info text-white">
-                    <!-- Default card contents -->
-                    <div class="card-header text-center">
-                        <h2 style="margin: 0">Nice to have</h2>
-                        <p style="margin: 0" class="text-muted">
-                            Close to the perfection ...
-                        </p>
-                    </div>
-                    <!-- List group -->
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item">You are creative</li>
-                        <li class="list-group-item">You have an affinity with the product</li>
-                        <li class="list-group-item">You are ready to work in a dynamic company</li>
-                        <li class="list-group-item">You are approachable, honest and fun team player</li>
-                    </ul>
-                    <div class="card-footer text-center">
-                        <p class="text-muted">
-                            <i>You are passionate</i>
-                        </p>
-                    </div>
-                </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Responsibilities</h5>
+                <p>Develop and improve Apps people care about</p>
+                <p>Coach small distributed dev teams</p>
+                <p>Be responsible of what you develop</p>
+                <p>Framework and/or front-end</p>
+            </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Must Have</h5>
+                <p>Several programming languages &amp; Expert in one specific language</p>
+                <p>Passion for development</p>
+                <p>Quick &amp; Autonomous learner</p>
+                <p>Read &amp; Written English</p>
+                <p><br/></p>
             </div>
+            <div class="col-sm-6 col-md-4">
+                <h5 class="fw_semibold text-uppercase">Nice to Have</h5>
+                <p>Contribution to Open Source Projects</p>
+                <p>Bachelor or Master Degree</p>
+                <p>Python, JavaScript</p>
+                <p>Linux, GitHub</p>
+            </div>
+
         </div>
     </div>
 </section>
-<section class="mt16 mb16">
+<section class="mb32 mt32">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>What we offer</h2>
-                <h3 class="text-muted">A good job in a young and dynamic team</h3>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4">What's great in the job?</h3>
+                <ul>
+                    <li>You develop an <b>Open Source</b> Software and interact with the community</li>
+                    <li>Great <b>team</b> of experienced people in a friendly, supporting and open culture</li>
+                    <li>
+                        <p>Large apps scope - <b>Diversity</b> in the job, you'll never get bored​</p>
+                    </li>
+                    <li>No customer deadlines - Time to focus on <b>quality</b>, refactoring and testing</li>
+                    <li>No solution architect, no business analysts, no Gantt chart</li>
+                    <li>
+                        <p>No specific start date, we recruit all year long​</p>
+                    </li>
+                </ul>
             </div>
-            <div class="col-lg-12">
-                <p>A full time job, with an attractive salary package in a small team of smart people. You will start contract with a full technical and functional training. If you are passionate, motivate and flexible apply for this job, you will certainly join the best company ever.</p>
-                <p>With our product, which is a suite of 3000 business apps. It is fully open source, full featured and it’s online offer is 3 times cheaper than traditional competitors. We have 2.000.000 users, and we're growing fast.</p>
-                <p>Because of our constant growth, we're now looking for people to reinforce our team of enthusiastic developers. So if working on an open source project in a friendly and cooperative atmosphere sounds like fun to you, read on...</p>
+            <div class="col-md-8">
+                <h3 class="mt0 text-violet-dark display-4"><br/>What do we offer?</h3>
+                <ul>
+                    <li><b>Flexible </b>working hours</li>
+                    <li>Real responsibilities and <b>autonomy</b></li>
+                    <li>Advanced <b>training</b>: Technical and functional training sessions (5 weeks)</li>
+                    <li>A pleasant and friendly working environment located in a renovated farm in the countryside
+                        between Louvain-la-Neuve and Namur</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="pt0 pb0">
+    <div class="container">
+        <h3 class="mt0 text-violet-dark">Working Environment</h3>
+    </div>
+</section>
+<section class="s_text_block pb32 pt0">
+    <div class="container">
+        <div class="row">
+            <div class="pt0 col-lg-11 pb0">
+                <p>Programming Languages: Python &amp; JavaScript<br/>Database: postgresql (with object relational
+                    mapping)<br/>Collaboration platform: GitHub<br/>Development model: open with external
+                    community<br/>Framework: Odoo (ORM, Workflows, Report Engine, BI)</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section
+    style="border-style: solid; border-color: rgb(227, 227, 227); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 2px 0px;">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Product Complexity:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Personal Evolution:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <h6 class="mb0">Autonomy:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Customer Relationship:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <h6 class="mb0">Quality of Product / Tools:</h6>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h6 class="mb0">Team Size:</h6>
+                <p class="text-uppercase">100 people</p>
+                <h6 class="mb0">Users of the Product:</h6>
+                <p class="text-uppercase">4,300,000</p>
+                <h6 class="mb0">Release Cycle:</h6>
+                <p class="text-uppercase">2 months</p>
+                <h6 class="mb0">Company Growth:</h6>
+                <p class="text-uppercase">60% Year over Year</p>
+                <h6 class="mb0">Company Maturity:</h6>
+                <p class="text-uppercase">Profitable</p>
+            </div>
+            <div class="col-sm-6 col-md-4 mt16 mb16">
+                <h3 class="fw_light mt0">Need More Info?</h3>
+                <ul>
+                    <li><a href="https://www.odoo.com/r/HRGuidebook">Recruitment Guidebook</a></li>
+                    <li><a
+                            href="https://www.linkedin.com/pulse/20140818150823-57131497-how-i-grew-from-1-to-250-employees-in-5-years?trk=prof-post">The
+                            founder’s story</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/the-odoo-culture">The Odoo culture</a></li>
+                    <li><a href="http://www.slideshare.net/openobject/be-a-team-leader-not-a-manager">Who is your
+                            manager?</a></li>
+                    <li><a href="https://odoo.com/fr_FR/blog/customer-reviews-6">What people say about us?</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="o_perk mt16 mb16">
+    <div class="container">
+        <div class="row">
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-map-marker"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Evolution</h4>
+                <p>12 days of pro training per year,<br/> including 6 of your choice, for personal development.</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-calendar"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Great Work Place</h4>
+                <p>BabyFoot &amp; Video Games <br/>at Lunch Time, <br/>Drinks at the Office, <br/>Several Team Buildings
+                </p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-futbol-o"></span>
+                <h4 class="mt8 mb0 text-violet-dark">Sport Activity</h4>
+                <p>Play any sport with colleagues and the bill is covered</p>
+            </div>
+            <div class="text-center col-md-3 mt16 mb16"><span class="fa fa-2x fa-coffee"></span>
+                <h4 class="mb0 mt8 text-violet-dark">Eat &amp; Drink</h4>
+                <p>Fruit Basket, coffee and soup provided all day</p>
             </div>
         </div>
     </div>
@@ -890,23 +1406,25 @@
 <section class="mt16 mb16">
     <div class="container">
         <div class="row">
-            <div class="col-lg-12 text-center">
-                <h2>Our staff at work</h2>
-                <h3 class="text-muted">Pictures of smart and enthusiastic people</h3>
-            </div>
-            <div class="col-lg-12 text-center">
-                <div class="col-lg-5 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" style="height:355px;" src="/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg"/>
-                </div>
-                <div class="col-lg-3 mt16">
-                    <img alt="" class="img img-fluid" src="/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg"/>
-                </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469355"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469360"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469369"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469367"/>
+            </div>
+            <div class="col-sm-6 col-md-3 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469356"/>
+            </div>
+            <div class="col-sm-12 col-md-6 mt16 mb16">
+                <img class="img img-fluid" src="//odoocdn.com/web/image/6469456"/>
             </div>
         </div>
     </div>
diff --git a/addons/website_hr_recruitment/views/hr_job_views.xml b/addons/website_hr_recruitment/views/hr_job_views.xml
index 1cf5ff07407..74bb17955d5 100644
--- a/addons/website_hr_recruitment/views/hr_job_views.xml
+++ b/addons/website_hr_recruitment/views/hr_job_views.xml
@@ -5,14 +5,18 @@
         <field name="model">hr.job</field>
         <field name="inherit_id" ref="hr_recruitment.view_hr_job_kanban"/>
         <field name="arch" type="xml">
-            <xpath expr="//div[@name='kanban_boxes']" position="inside">
-                <field name="website_url" invisible="1"/>
-                <div class="o_recruitment_kanban_box o_kanban_primary_bottom bottom_block" style="padding-left:8px; text-align:right">
-                    <span>
-                        <a t-attf-href="#{record.website_url.raw_value}">Website Description</a>
-                    </span>
+            <xpath expr="//div[hasclass('o_kanban_card_header')]" position="before">
+                <field name="website_published" invisible="1"/>
+                <div class="ribbon ribbon-top-right" attrs="{'invisible': [('website_published', '=', False)]}">
+                    <span class="bg-success">Published</span>
                 </div>
             </xpath>
+            <xpath expr="//div[@name='kanban_boxes']/div/div[1]" position="inside">
+                <field name="website_url" invisible="1"/>
+                <span>
+                    <a t-attf-href="#{record.website_url.raw_value}">Job Description</a>
+                </span>
+            </xpath>
         </field>
     </record>
 </odoo>
diff --git a/addons/website_hr_recruitment/views/hr_recruitment_views.xml b/addons/website_hr_recruitment/views/hr_recruitment_views.xml
index 03a4176db6b..6259512546f 100644
--- a/addons/website_hr_recruitment/views/hr_recruitment_views.xml
+++ b/addons/website_hr_recruitment/views/hr_recruitment_views.xml
@@ -5,7 +5,7 @@
         <field name="model">hr.recruitment.source</field>
         <field name="inherit_id" ref="hr_recruitment.hr_recruitment_source_tree"/>
         <field name="arch" type="xml">
-            <xpath expr="//button[@name='create_alias']" position="before">
+            <xpath expr="//field[@name='email']" position="after">
                 <field name="url" widget="url"/>
             </xpath>
         </field>