[ADD] Initial Commit 'code_backend_theme'

code_backend_theme/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from .hooks import test_pre_init_hook, test_post_init_hook

code_backend_theme/__manifest__.py

@@ -0,0 +1,53 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+{
+    "name": "Code Backend Theme V14",
+    "description": """Minimalist and elegant backend theme for Odoo 14, Backend Theme, Theme""",
+    "summary": "Code Backend Theme V14 is an attractive theme for backend",
+    "category": "Theme/Backend",
+    "version": "14.0.1.0.0",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    "depends": ['base', 'web'],
+    "data": [
+        'assets/assets.xml',
+        'views/icons.xml',
+    ],
+    "qweb": [
+        'static/src/xml/styles.xml',
+        'static/src/xml/top_bar.xml',
+        'static/src/xml/sidebar.xml',
+    ],
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'license': 'LGPL-3',
+    'pre_init_hook': 'test_pre_init_hook',
+    'post_init_hook': 'test_post_init_hook',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}

code_backend_theme/assets/assets.xml

@@ -0,0 +1,24 @@
+<odoo>
+    <data>
+        <template id="code_backend_theme_assets" name="Code Backend Theme Assets" inherit_id="web.assets_backend">
+            <xpath expr=".">
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/theme_accent.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/navigation_bar.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/datetimepicker.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/theme.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/sidebar.scss"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/fields/basic_fields.js"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/fields/graph.js"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/chrome/sidebar.js"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/chrome/sidebar_menu.js"/>
+                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+            </xpath>
+        </template>
+        <template id="code_backend_theme_assets_frontend" inherit_id="web.assets_frontend">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/login.scss"/>
+                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+            </xpath>
+        </template>
+    </data>
+</odoo>

code_backend_theme/hooks.py

@@ -0,0 +1,228 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+import base64
+
+from odoo import api, SUPERUSER_ID
+from odoo.modules import get_module_resource
+
+
+def test_pre_init_hook(cr):
+
+    env = api.Environment(cr, SUPERUSER_ID, {})
+    menu_item = env['ir.ui.menu'].search([('parent_id', '=', False)])
+
+    for menu in menu_item:
+        if menu.name == 'Contacts':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Contacts.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Link Tracker':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Link Tracker.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Dashboards':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Dashboards.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Sales':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Sales.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Invoicing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Invoicing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Inventory':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Inventory.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Purchase':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Purchase.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Calendar':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Calendar.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'CRM':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'CRM.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Note':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Note.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Website':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Website.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Point of Sale':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Point of Sale.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Manufacturing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Manufacturing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Repairs':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Repairs.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Email Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Email Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'SMS Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'SMS Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Project':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Project.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Surveys':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Surveys.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Employees':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Employees.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Recruitment':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Recruitment.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Attendances':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Attendances.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Time Off':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Time Off.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Expenses':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Expenses.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Maintenance':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Maintenance.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Live Chat':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Live Chat.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Lunch':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Lunch.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Fleet':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Fleet.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Timesheets':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Timesheets.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Events':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Events.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'eLearning':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'eLearning.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Members':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Members.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+
+
+def test_post_init_hook(cr, registry):
+
+    env = api.Environment(cr, SUPERUSER_ID, {})
+    menu_item = env['ir.ui.menu'].search([('parent_id', '=', False)])
+
+    for menu in menu_item:
+        if menu.name == 'Contacts':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Contacts.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Link Tracker':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Link Tracker.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Dashboards':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Dashboards.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Sales':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Sales.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Invoicing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Invoicing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Inventory':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Inventory.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Purchase':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Purchase.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Calendar':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Calendar.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'CRM':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'CRM.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Note':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Note.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Website':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Website.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Point of Sale':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Point of Sale.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Manufacturing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Manufacturing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Repairs':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Repairs.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Email Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Email Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'SMS Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'SMS Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Project':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Project.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Surveys':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Surveys.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Employees':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Employees.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Recruitment':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Recruitment.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Attendances':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Attendances.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Time Off':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Time Off.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Expenses':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Expenses.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Maintenance':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Maintenance.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Live Chat':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Live Chat.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Lunch':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Lunch.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Fleet':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Fleet.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Timesheets':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Timesheets.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Events':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Events.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'eLearning':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'eLearning.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Members':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Members.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})

code_backend_theme/static/description/index.html

@@ -0,0 +1,959 @@
+<!-- HERO -->
+<div class="container">
+    <div class="row" style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
+        <div class="col-lg-12 d-flex flex-column align-items-center">
+            <h1 class="text-center text-uppercase"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bolder !important; font-size: 2.5rem !important; color: #212121;">
+                Code Backend Theme
+            </h1>
+            <p class="my-1 text-center text-uppercase"
+                style="letter-spacing: 4px !important; color: #74788D !important;">Minimalist and Elegant Backend
+                Theme for Odoo 14</p>
+        </div>
+        <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin: 2rem 0;">
+            <img src="./assets/hero.png" width="100%" height="auto" class="img-responsive">
+        </div>
+    </div>
+</div>
+<!-- END OF HERO -->
+
+<!-- OVERVIEW -->
+<div class="container">
+    <div class="row" style="padding: 0rem 2.5rem !important; background-color: #fff !important;">
+        <div class="col-lg-12 d-flex flex-column justify-content-center">
+            <p class="my-1 text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
+                The Code Backend Theme V14 Gives You The Fully Modified View with a Full Screen Display.
+                This is a Minimalist and Elegant Backend Theme for Odoo 14.
+                This Theme Will Change Your Old Experience to a New Experience With Odoo.
+                It is a Perfect Choice for Your Odoo Backend and an Attractive Theme for Your Odoo 14.
+                It will Give You a Clean Layout with the New Color Combination and a Modified Font. It Have a
+                Sidebar with
+                New App Icons and Company Logo. This Will Change Your Old Kanban, List and Form Views to A Fully
+                Modified Views.
+            </p>
+        </div>
+        <div class="col-lg-12 mt-4">
+            <div class="alert alert-warning text-center" role="alert">
+                <i class="fa fa-exclamation-triangle mr-2" aria-hidden="true"></i>Please make sure that you install all
+                your apps prior to the installation of this theme.
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END OF OVERVIEW-->
+
+<!-- FEATURE -->
+<div class="container" style="margin-top: 3rem;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+            <h2
+                style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Features</h2>
+        </div>
+    </div>
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">Kanban Group View</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    The Code Backend Theme V14 Gives You The Fully Modified Kanban View and Kanban Group View.
+                    The Section Wise Separated Stages are have a Good Looking Experience And a Extra Ordinary Design
+                    for Your Content Tiles is Looking Great.
+                    It will Give You a Clean Layout with the New Color Combination and a Modified Font.
+                </h6>
+                <div class="row mt-4">
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modified Font</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Full Screen View</p>
+                        </span>
+                    </div>
+
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Stages are Seperated in View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Clean Layout</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Buttons with New Colors</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_group.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- FEATURE -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">List View</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    The All new Code Backend Theme V14 Gives You The Fully Modified List View and This Table Design
+                    is Also Have Awesome Design and it Gives You More Beauty for Your Odoo Backend.
+                    It will Give You a Clean Layout with the New Color Combination and a Modified Font.
+                </h6>
+                <div class="row mt-4">
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modified Table Style</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Scroll Bar</p>
+                        </span>
+                    </div>
+
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Status Tag</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Scrollbar</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Buttons with New Colors</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/list_sales.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- FEATURE -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">Form View</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    Code Backend Theme Gives You The Fully Modified Form View with a Full Screen Experience. It will
+                    Give You a Clean Layout with the New Color Combination
+                    and a Modified Font.
+                </h6>
+                <div class="row mt-4">
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modified Form Style</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Full Screen Form View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Looks for Tabs</p>
+                        </span>
+                    </div>
+
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Style for Required Field</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Chatter Style Under Form View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Looks for Status Button</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/form.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- TWO COLUMN BLOCK -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row" style="margin: 2rem; ; min-width: 100% !important;">
+
+            <div class="col-lg-8" style="padding: 1rem 1rem 1rem 0rem !important;">
+                <div class=" shadow"
+                    style="background-color: #fff !important; border-top:  3px solid #556EE6 !important;  padding: 2.5rem 0rem 0rem 0rem !important;">
+                    <h3 class="mx-4 mt-3" style="font-weight: 700 !important;">Overview</h3>
+                    <h6 class="mx-4"
+                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                        Code Backend Theme V14 is an Attractive Theme for Your Odoo 14. This Theme Will Change Your
+                        All Experience With Odoo.
+                        The Minimalist and Elegant Backend Theme for Odoo 14. This Theme is a Perfect Choice for
+                        Your Odoo Backend."
+                    </h6>
+                    <div class="mx-4 my-4">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modifed Structure for All Type Views</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Style for Active Menus, Radio Buttons and Checkboxes</p>
+                        </span>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Look for All Applications</p>
+                        </span>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>A Clean layout and New Font Style</p>
+                        </span>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Sidebar with New Menu Icons</p>
+                        </span>
+
+                    </div>
+                    <img src="./assets/all_screens.png" class="img-responsive" width="100% !important"
+                        height="auto !important">
+                </div>
+            </div>
+
+            <div class="col-lg-4" style="padding: 1rem 0rem 1rem 1rem!important;">
+                <div class="shadow"
+                    style="background-color: #fff !important; border-top:  3px solid #556EE6 !important; padding: 2.5rem 0rem 0rem 1.5rem !important; position: relative; overflow: hidden !important;">
+                    <div class="text-center"
+                        style="background-color: #556EE6 !important; color: #fff !important; font-size: 10px !important; font-weight: 500 !important; width: 100px !important; padding: 3px 0px 3px 20px !important; white-space: nowrap !important; position: absolute !important; transform: rotate(40deg) !important; top: 0px !important; right: -20px !important; ">
+                        New</div>
+                    <h3 class="mt-3" style="font-weight: 700 !important;">All-New Menu Design</h3>
+                    <h6
+                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important; padding-bottom: 6.7rem !important;">
+                        The All-New Menu Design is Main Attractive Section for the Code Backend Theme. The Sidebar
+                        have New Minimalist
+                        Icons for Applications in Odoo. Also the Sidebar Have Closing and Opening Option.
+                        Customisable Logo Attached in Sidebar
+                        That is Automatically Fetch Your Company Logo.
+                    </h6>
+                    <img src="./assets/menu_focus.png" class="img-responsive" width="100% !important"
+                        height="auto !important">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <!-- END OF TWO COLUMN BLOCK -->
+
+
+    <!-- FEATURE -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">Easily Access Sidebar Menu</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    Reveal the sidebar menu with just a click. Sidebar menu features all the relevant links to navigate
+                    through the application.
+                    Hiding the sidebar leaves more space on the main area offering a distraction-free view that lets you
+                    focus on what matters the most.
+                </h6>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/sidebar-gif.gif" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- SCREENSHOTS -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Screenshots</h2>
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">1</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Login Page</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/login.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">2</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Group By View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/group.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">3</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Settings Page</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/settings.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">4</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Discuss Page</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/discuss.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">5</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Product Kanban View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_product.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">6</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Purchase List View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/list_purchase.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">7</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Product View with Smart Buttons</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/form_product.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">8</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Modified Alert Notification are Placed on Right Bottom of Display</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/alert.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">9</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Wizards and User Error Popups</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/modal.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">10</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">New Looks for The Tabs</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/tab.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">11</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Recruitment Kanban View With Ribbons</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_recruits.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">12</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Sales Kanban View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_sale.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">13</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Modified Kanban View for Employees With New Designed Category Section</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_empl.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">14</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Newly Customised Chatter and Popup Chatter</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/chatters.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">15</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">New Looks for Wizards and Buttons with New Colors</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/apps_uninstall.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">16</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Sidebar with List View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/sidebar_list.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">17</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Sidebar with Settings Page View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/sidebar_settings.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">18</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Attendance Pages</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kiosk.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">19</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Invoice Pages</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/invoice.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">20</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Graphs with Sidebar</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/graph.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+    </div>
+
+    <!-- END OF SCREENSHOTS -->
+
+    <!-- OUR SERVICES -->
+    <section class="container" style="margin-top: 6rem !important;">
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Our Services</h2>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Customization</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Implementation</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Support</h6>
+            </div>
+
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Hire
+                    Odoo
+                    Developer</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Integration</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Migration</h6>
+            </div>
+
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Consultancy</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Implementation</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Licensing Consultancy</h6>
+            </div>
+        </div>
+    </section>
+    <!-- END OF END OF OUR SERVICES -->
+
+    <!-- OUR INDUSTRIES -->
+    <section class="container" style="margin-top: 6rem !important; background-color: #fff !important;">
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Our Industries</h2>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Trading
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Easily
+                        procure
+                        and
+                        sell your products</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        POS
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Easy
+                        configuration
+                        and convivial experience</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px"
+                        width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Education
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">A
+                        platform for
+                        educational management</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                        width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Manufacturing
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Plan,
+                        track and
+                        schedule your operations</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        E-commerce &amp; Website
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Mobile
+                        friendly,
+                        awe-inspiring product pages</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Service Management
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Keep
+                        track of
+                        services and invoice</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px"
+                        width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Restaurant
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Run
+                        your bar or
+                        restaurant methodically</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Hotel Management
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">An
+                        all-inclusive
+                        hotel management application</p>
+                </div>
+            </div>
+
+        </div>
+    </section>
+
+    <!-- END OF END OF OUR INDUSTRIES -->
+
+    <!-- FOOTER -->
+    <!-- Footer Section -->
+    <section class="container" style="margin: 5rem auto 2rem; background-color: #fff !important;">
+        <div class="row" style="max-width:1540px;">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Need Help?</h2>
+            </div>
+        </div>
+
+        <!-- Contact Cards -->
+        <div class="row d-flex justify-content-center align-items-center"
+            style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+            <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+                <div class="row mt-4">
+                    <div class="col-lg-4">
+                        <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                            style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+                    </div>
+                    <div class="col-lg-4">
+                        <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+                            class="btn btn-block mb-2 deep_hover"
+                            style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+                                class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
+                    </div>
+                    <div class="col-lg-4">
+                        <a href="mailto:info@cybrosys.com" target="_blank" class="btn btn-block deep_hover"
+                            style="text-decoration: none; background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                class="fa fa-envelope mr-2"></i>info@cybrosys.com</a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <!-- End of Contact Cards -->
+    </section>
+    <!-- Footer -->
+    <section class="oe_container" style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
+        <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+            <!-- Logo -->
+            <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+                <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+            </div>
+            <!-- End of Logo -->
+        </div>
+    </section>
+    <!-- END OF FOOTER -->