July 09: [ADD] Initial commit 'theme_xtream'

theme_xtream/README.rst

@@ -0,0 +1,48 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Theme Xtream Fashion
+===================
+* Design eCommerce Website with Theme Xtream Fashion
+
+Installation
+============
+- www.odoo.com/documentation/17.0/setup/install.html
+- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.gnu.org/licenses/lgpl-3.0-standalone.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developer: 	(V17) Sruthi M
+* Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

theme_xtream/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-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 . import controllers
+from . import models

theme_xtream/__manifest__.py

@@ -0,0 +1,69 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-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': 'Theme Xtream Fashion',
+    'description': 'Design eCommerce Website with Theme Xtream Fashion',
+    'summary': 'Theme Xtream Fashion',
+    'category': 'Theme/eCommerce',
+    'version': '17.0.1.0.0',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['base', 'website_sale_wishlist', 'website_mass_mailing'],
+    'data': [
+        'security/ir.model.access.csv',
+        'views/xtream_testimonials_views.xml',
+        'views/contact_us_templates.xml',
+        'views/footer_templates.xml',
+        'views/shop_templates.xml',
+        'views/header_templates.xml',
+        'views/snippets/snippets_templates.xml',
+        'views/snippets/amazing.xml',
+        'views/snippets/new_arrivals.xml',
+        'views/snippets/discount.xml',
+        'views/snippets/main_banner.xml',
+        'views/snippets/main_product.xml',
+        'views/snippets/testimonial.xml',
+    ],
+    'assets': {
+      'web.assets_frontend': [
+          '/theme_xtream/static/src/css/animate.min.css',
+          '/theme_xtream/static/src/css/owl.carousel.min.css',
+          '/theme_xtream/static/src/css/owl.theme.default.min.css',
+          '/theme_xtream/static/src/css/style.css',
+          '/theme_xtream/static/src/js/owl.carousel.js',
+          '/theme_xtream/static/src/js/owl.carousel.min.js',
+          '/theme_xtream/static/src/js/new_arrivals.js',
+          '/theme_xtream/static/src/js/testimonials.js',
+          '/theme_xtream/static/src/js/custom.js',
+      ]
+    },
+    'images': [
+        'static/description/banner.jpg',
+        'static/description/theme_screenshot.jpg',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}

theme_xtream/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-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 . import theme_xtream

theme_xtream/controllers/theme_xtream.py

@@ -0,0 +1,78 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-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 odoo import http
+from odoo.http import request
+
+
+class WebsiteProduct(http.Controller):
+    """ This controller method returns a JSON object that lists
+        products newly arrived products.
+        :return: a JSON object containing newly arrived products
+        :rtype: dict """
+    @http.route('/get_arrival_product', auth="public", type='json')
+    def get_arrival_product(self):
+        """
+        This return products based on last created and limits to 6
+        """
+        return http.Response(template='theme_xtream.new_arrivals_dynamic',
+                             qcontext={'product_ids': request.env[
+                                 'product.template'].sudo().search(
+                                 [('website_published', '=', True)],
+                                 order='create_date desc', limit=6)}).render()
+
+    @http.route('/get_testimonials', auth="public", type="json")
+    def get_testimonials(self):
+        """
+        This will return testimonials from backend.
+        """
+        return http.Response(template='theme_xtream.testimonial',
+                             qcontext={'testimonials': request.env[
+                                 'xtream.testimonials'].sudo(
+                             ).search([])}).render()
+
+    @http.route('/subscribe_newsletter', auth='public', type='json')
+    def subscribe_newsletter(self, **kw):
+        """
+        To save email to newsletter mail list
+        """
+        if request.env['mailing.contact'].sudo().search([
+            ("email", "=", kw.get("email")),
+            ("list_ids", "in", [
+                request.env.ref('mass_mailing.mailing_list_data').id])]):
+            return False
+        else:
+            if request.env.user._is_public():
+                visitor_sudo = request.env[
+                    'website.visitor'].sudo()._get_visitor_from_request()
+                if visitor_sudo:
+                    name = visitor_sudo.display_name
+                else:
+                    name = "Website Visitor"
+            else:
+                name = request.env.user.partner_id.name
+            request.env['mailing.contact'].sudo().create({
+                "name": name,
+                "email": kw.get('email'),
+                "list_ids": [request.env.ref(
+                    'mass_mailing.mailing_list_data').id]
+            })
+            return True

theme_xtream/doc/RELEASE_NOTES.md

@@ -0,0 +1,7 @@
+## Module <theme_xtream>
+
+#### 24.06.2024
+#### Version 17.0.1.0.0
+#### ADD
+
+- Initial commit for Theme Xtream Fashion

theme_xtream/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-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 . import xtream_testimonials

theme_xtream/models/xtream_testimonials.py

@@ -0,0 +1,38 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-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 odoo import fields, models
+
+
+class XtreamTestimonials(models.Model):
+    """
+    Model for testimonials
+    """
+    _name = 'xtream.testimonials'
+    _description = "Xtream Testimonials"
+
+    partner_id = fields.Many2one("res.partner", required=True,
+                                 help="Select the customer providing the"
+                                      "testimony",
+                                 domain="[('is_company', '=', False)]")
+    testimony = fields.Text(string="Testimony", required=True,
+                            help="Enter the testimonial provided by the"
+                                 "customer")

theme_xtream/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id/id,group_id/id,perm_read,perm_write,perm_create,perm_unlink
+access_xtream_testimonials,access.xtream.testimonials,model_xtream_testimonials,base.group_user,1,1,1,1

theme_xtream/static/description/index.html

@@ -0,0 +1,224 @@
+<!-- Hero Section -->
+<div class="container pt-4 mt-4 rounded" style="background-color: #f0f2f4; font-family: Montserrat, 'sans-serif';">
+    <div class="row">
+        <div class="col-lg-12 mb-4">
+            <img src="images/Cybrosys.png" alt="Cybrosys Logo" style="width: 120px; height: auto;">
+            <hr style="border-color: #e1e5e9;" />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 text-center">
+            <img src="images/hero.gif" width=60% height="auto" class="mb-4" alt="Theme Screenshot">
+        </div>
+        <div class="col-lg-12 text-center">
+            <h1 class="mt-4">Theme Xtream</h1>
+            <p class="lead mb-4" style="max-width: 700px; margin: 0 auto;">
+                Theme Xtream is a attractive and unique front-end theme mainly suitable for eCommerce website. Many
+                custom
+                designed snippets facilitates to add better user experience. Contains best deals with new arrival
+                products
+                slider, testimonial slider that are configured from the backend. This theme fully customized the
+                eCommerce
+                website, shop view, product view, contact us page...etc.
+            </p>
+        </div>
+    </div>
+
+    <!-- End of Hero Section -->
+
+    <!-- Alternate Section -->
+    <div class="row p-4">
+        <div class="col-lg-6 px-4" style="margin-top: 100px;">
+            <h2>Desktop View</h2>
+            <p class="lead">
+                It is easy to customize and use. Just drag and drop the building blocks to make attractive webpages.
+            </p>
+        </div>
+        <div class="col-lg-6 px-4">
+            <img style="border-radius: 0.5em;" src="images/laptop-screenshots.jpg" width="90%" height="auto"
+                class="mb-4 shadow-sm" alt="Theme Screenshot">
+        </div>
+    </div>
+    <div class="row p-4">
+        <div class="col-lg-6 px-4">
+            <img style="border-radius: 0.5em;" src="images/phone-screenshots.jpg" width="90%" height="auto"
+                class="mb-4 shadow-sm" alt="Theme Screenshot">
+        </div>
+        <div class="col-lg-6 px-4" style="margin-top: 100px;">
+            <h2>Mobile View</h2>
+            <p class="lead">
+                User friendly and modern looking theme makes your page more Stylish And Beautiful.
+            </p>
+        </div>
+    </div>
+    <!-- End of Alternate Section -->
+
+
+    <!-- Two Columns Section -->
+    <div class="row p-4">
+        <!-- Column 1 -->
+        <div class="col-lg-6">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/1.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Shop View</h2>
+                    <p class="lead text-center">
+                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
+                        webpages.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 1 -->
+
+        <!-- Column 2 -->
+        <div class="col-lg-6">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/2.jpg" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Cart View</h2>
+                    <p class="lead text-center">
+                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
+                        webpages.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 2 -->
+    </div>
+    <!-- End of Two Columns Section -->
+
+
+    <!-- One Column Section -->
+    <div class="row p-4">
+        <div class="col-lg-6">
+            <img style="border-radius: 0.5em;" src="images/3.jpg" width="90%" height="auto" class="mb-4 shadow-sm"
+                alt="Theme Screenshot">
+        </div>
+        <div class="col-lg-6" style="padding-top: 100px;">
+            <h2>Overview</h2>
+            <p class="lead">
+                It is easy to customize and use. Just drag and drop the building blocks to make attractive webpages.
+            </p>
+        </div>
+    </div>
+    <!-- End of Two Columns Section -->
+
+    <!-- Two Columns Section -->
+    <div class="row p-4">
+        <!-- Column 1 -->
+        <div class="col-lg-4">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/4.png" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">New Arrivals</h2>
+                    <p class="lead text-center">
+                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
+                        webpages.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 1 -->
+
+        <!-- Column 2 -->
+        <div class="col-lg-4">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/5.png" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Testimonial</h2>
+                    <p class="lead text-center">
+                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
+                        webpages.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 2 -->
+
+
+        <!-- Column 4 -->
+        <div class="col-lg-4">
+            <div class="row">
+                <div class="col-lg-12">
+                    <img style="border-radius: 0.5em;" src="images/6.png" width="100%" height="auto"
+                        class="mb-4 shadow-sm" alt="Theme Screenshot">
+                </div>
+                <div class="col-lg-12 mt-4">
+                    <h2 class="text-center">Checkout Address</h2>
+                    <p class="lead text-center">
+                        It is easy to customize and use. Just drag and drop the building blocks to make attractive
+                        webpages.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- End of Column 4 -->
+    </div>
+    <!-- End of Two Columns Section -->
+
+
+    <!-- Footer -->
+    <div class="row" style="margin-top: 4rem;">
+        <div class="col-lg-12 text-center">
+            <h2>Get Help</h2>
+            <hr style=" border: 2px solid #b22126; margin-top: 2px;" width="40px">
+            <p class="text-center" style="max-width: 650px; margin: 0 auto;">If you have anything to share with us based
+                on
+                your use of this module, please let us know. We are ready to offer our support.</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col px-4 pt-3 pb-2 shadow-sm"
+            style="background-color: #fff; max-width: 450px; border-radius: 0.5em; margin: 1em auto;">
+            <div class="row">
+                <div class="col-lg-8">
+                    <h6><a href="mailto:odoo@cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i
+                                class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a></h6>
+                </div>
+                <div class="col-lg-4 d-flex justify-content-end" style="position: relative;">
+                    <h6><a href="mailto:odoo@cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i class="fa fa-chevron-right"></i></a></h6>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col px-4 pt-3 pb-2 shadow-sm"
+            style="background-color: #fff; max-width: 450px; border-radius: 0.5em; margin: 1em auto;">
+            <div class="row">
+                <div class="col-lg-8">
+                    <h6><a href="https://www.cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i
+                                class="fa fa-globe mr-2"></i>www.cybrosys.com</a></h6>
+                </div>
+                <div class="col-lg-4 d-flex justify-content-end" style="position: relative;">
+                    <h6><a href="https://www.cybrosys.com" target="_blank"
+                            style="color: #050505; text-decoration: none;"><i class="fa fa-chevron-right"></i></a></h6>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 mt-4 mb-2 text-center">
+            <p style="font-weight: bold">A Quality Theme From</p>
+        </div>
+        <div class="col-lg-12 text-center">
+            <img src="images/cybro-logo-oca.png" width="80px" height="auto">
+        </div>
+    </div>
+    <!-- End of Footer -->
+</div>

theme_xtream/static/src/css/owl.carousel.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

theme_xtream/static/src/css/owl.theme.default.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

theme_xtream/static/src/js/custom.js

@@ -0,0 +1,87 @@
+/** @odoo-module */
+import PublicWidget from "@web/legacy/js/public/public_widget"
+import { _t } from "@web/core/l10n/translation";
+
+export const customXtream = PublicWidget.Widget.extend({
+    selector: "#wrapwrap",
+    events: {
+        'click .input-group-append': 'onClickSubscribe',
+    },
+    // Startup functions
+    start() {
+        this.rpc = this.bindService("rpc");
+        $('.qtyplus').click(function (e) {
+            // Stop acting like a button
+            e.preventDefault();
+            // Get the field name
+            fieldName = $(this).attr('field');
+            // Get its current value
+            var currentVal = parseInt($('input[name=' + fieldName + ']').val());
+            // If is not undefined
+            if (!isNaN(currentVal)) {
+                // Increment
+                $('input[name=' + fieldName + ']').val(currentVal + 1);
+            } else {
+                // Otherwise put a 0 there
+                $('input[name=' + fieldName + ']').val(0);
+            }
+        });
+        // This button will decrement the value till 0
+        $(".qtyminus").click(function (e) {
+            // Stop acting like a button
+            e.preventDefault();
+            // Get the field name
+            fieldName = $(this).attr('field');
+            // Get its current value
+            var currentVal = parseInt($('input[name=' + fieldName + ']').val());
+            // If it isn't undefined or its greater than 0
+            if (!isNaN(currentVal) && currentVal > 0) {
+                // Decrement one
+                $('input[name=' + fieldName + ']').val(currentVal - 1);
+            } else {
+                // Otherwise put a 0 there
+                $('input[name=' + fieldName + ']').val(0);
+            }
+        });
+    },
+    counter() {
+        var buttons = $('.owl-dots button');
+        buttons.each(function (item) {
+        });
+    },
+    async onClickSubscribe(ev) {
+        var $button = $(ev.currentTarget).find('span')
+        var $input = $(ev.currentTarget.parentElement).find('input')
+        if (this.emailCheck($input.val())) {
+            if ($button.text() === "SUBSCRIBE") {
+                await this.rpc('/subscribe_newsletter', {
+                    email: $input.val()
+                }).then(function (data) {
+                    if (data) {
+                        $(ev.currentTarget.parentElement.parentElement).find(
+                            '.warning').hide()
+                        $input.css('pointer-events', 'none')
+                        $button.css('background-color', 'green')
+                        $button.text("THANKS")
+                    } else {
+                        $(ev.currentTarget.parentElement.parentElement).find(
+                            '.warning').text("Already subscribed to the newsletter.")
+                        $(ev.currentTarget.parentElement.parentElement).find(
+                            '.warning').show()
+                    }
+                })
+            }
+        } else {
+            $(ev.currentTarget.parentElement.parentElement).find(
+                '.warning').text("Enter a valid email.")
+            $(ev.currentTarget.parentElement.parentElement).find(
+                '.warning').show()
+        }
+    },
+    emailCheck(str) {
+        const specialChars = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        return specialChars.test(str)
+    }
+})
+
+PublicWidget.registry.customXtream = customXtream

theme_xtream/static/src/js/new_arrivals.js

@@ -0,0 +1,22 @@
+/** @odoo-module **/
+import { jsonrpc } from "@web/core/network/rpc_service";
+import Animation from "@website/js/content/snippets.animation";
+/**
+ * Defines an animation class for the arrivals element in the HTML document.
+ * Sends an AJAX request to the /get_arrival_product URL using the ajax.jsonRpc
+ * method, and calls the 'call' method on the server-side. If the request is successful,
+ * @extends Animation.Class
+ */
+
+Animation.registry.arrival_product = Animation.Class.extend({
+    selector : '.arrivals',
+    start: function(){
+        var self = this;
+        return jsonrpc('/get_arrival_product', {
+        }).then(function (data) {
+            if(data){
+                self.$target.empty().append(data);
+            }
+        });
+    }
+});

theme_xtream/static/src/js/testimonials.js

@@ -0,0 +1,40 @@
+/** @odoo-module **/
+import { jsonrpc } from "@web/core/network/rpc_service";
+import Animation from "@website/js/content/snippets.animation";
+/**
+ * Defines an animation class for the arrivals element in the HTML document.
+ * Sends an AJAX request to the /get_testimonials URL using the ajax.jsonRpc
+ * method, and calls the 'call' method on the server-side. If the request is successful,
+ * @extends Animation.Class
+ */
+
+Animation.registry.testimonial_xtream = Animation.Class.extend({
+    selector : '.testimonial_xtream',
+    start: function(){
+        var self = this;
+        return jsonrpc('/get_testimonials', {
+        }).then(function (data) {
+            if(data){
+                self.$target.empty().append(data);
+            }
+            self.$target.find('#slider2').owlCarousel(
+                {
+                    items: 1,
+                    loop: true,
+                    smartSpeed: 450,
+                    autoplay: true,
+                    autoPlaySpeed: 1000,
+                    autoPlayTimeout: 1000,
+                    autoplayHoverPause: true,
+                    onInitialized: self.counter,
+                    dots: true,
+                }
+            );
+        });
+    },
+    counter() {
+        var buttons = $('.owl-dots button');
+        buttons.each(function (item) {
+        });
+    },
+});

theme_xtream/static/src/scss/_common.scss

@@ -0,0 +1,25 @@
+*:focus {
+    outline: 0 !important;
+    
+}
+
+*button:focus {
+    border: none;
+    outline: none;
+}
+
+*{
+    list-style-type:none;
+
+    font-family: $font-default;
+    font-size: 14px;
+    &:focus,&:active{
+        outline: none !important;
+    }
+}
+
+*:hover{
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+}
+

theme_xtream/static/src/scss/_normalize.scss

@@ -0,0 +1,352 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ===========================================
+  =============================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }
+
+  

theme_xtream/static/src/scss/_variables.scss

@@ -0,0 +1,60 @@
+//font
+$font-default:'Poppins', sans-serif;
+$font-offer: 'Roboto', sans-serif;
+ 
+
+//colors
+
+
+$color-brand: #031B09;
+$color-brand2: #5FED83;
+$color-black:#000000;
+$color-white:#fff;
+$color-font:#9f9f9f;
+$color-font2:#9f9f9f;
+$color-grey:#b8b8b8;
+$color-green:#28a745;
+$color-button:#0069d9;
+$color-footer:#121725;
+$color-grey:#6c6a74;
+$color-hover:#e9c939;
+$color-border:#dedede;
+$color-transp:#3a3a3ab3;
+$color-h-bg:#f4f2f8;
+
+$select-border-color: #ccc;
+$select-focus-color: green;
+
+
+
+
+
+
+
+
+
+// $color-brand: #1b1b1b;
+// $color-black:#000000;
+// $color-white:#fff;
+// $color-font:#797979;
+// $color-font2:#535353;
+// $color-green:#44a038;
+$color-bg:#f7f7f7;
+// $color-footer:#121725;
+// $color-grey:#6c6a74;
+// $color-hover:#e95a5a;
+// $color-border:#c3c1cc;
+
+//font-size
+
+
+$font-h1:36px;
+$font-h2: 18px;
+$font-h3:36px;
+$font-h4: 25px;
+$font-h5:36px;
+$font-h6: 18px;
+$font-size-banner:60px;
+$font-heading:46px;
+$font-sub-heading:28px;
+$font-text:14px;

theme_xtream/static/src/scss/components/_banner.scss

@@ -0,0 +1,498 @@
+.banner_main{
+
+    
+    // .single-item{
+     
+    // }
+    
+    .banner_bg{
+        background-image: linear-gradient(#11111191, #11111191),url(./../img/bg-img/bg-1.jpg);
+        justify-content: center;
+       height: 100vh;
+        background-size: cover;
+        width: 100%;
+        background-repeat: no-repeat;
+    
+
+        @media screen and(max-width:768px) {
+            height: 70vh;
+        }
+    
+
+        .card{
+            background: transparent;
+            padding-top: 175px;
+            padding-bottom: 100px;
+            border: none !important;
+
+
+            @media screen and(max-width:600px) {
+              padding-left: 40px;
+            }
+            
+
+            @media screen and(max-width:768px) {
+                padding-top:100px;
+            }
+            .card-title{
+                color:$color-white;
+                font-size:7vw;
+                font-weight: bold;
+                padding-bottom: 20px;
+              
+            }
+            .card-text{
+                color:$color-white;
+             font-weight: 700;
+                font-size:15px;
+              
+              
+            }
+        }
+    
+    }
+
+    .banner_bg2{
+        background-image: linear-gradient(#11111191, #11111191),url(./../img/bg-img/bg-2.jpg);
+        justify-content: center;
+      
+        height: 100vh;
+         background-size: cover;
+         width: 100%;
+         background-repeat: no-repeat;
+
+         @media screen and(max-width:768px) {
+            height: 70vh;
+           
+        }
+
+
+        
+
+         .card{
+            background: transparent;
+            padding-top: 175px;
+            padding-bottom: 100px;
+            border: none !important;
+
+            
+            @media screen and(max-width:600px) {
+                padding-left: 40px;
+              }
+            
+
+            @media screen and(max-width:768px) {
+                padding-top:100px;
+                padding-bottom: 0;
+            }
+            .card-title{
+                color:$color-white;
+                font-size:7vw;
+                font-weight: bold;
+                padding-bottom: 20px;
+              
+            }
+            .card-text{
+                color:$color-white;
+             font-weight: 700;
+                font-size:15px;
+              
+              
+            }
+        }
+    
+    }
+    
+    .banner_bg3{
+    
+        background-image: linear-gradient(#11111191, #11111191),url(./../img/bg-img/bg-4.jpg);
+        justify-content: center;
+      
+        height: 100vh;
+         background-size: cover;
+         width: 100%;
+         background-repeat: no-repeat;
+
+
+         @media screen and(max-width:768px) {
+            height: 70vh;
+        }
+
+         .card{
+            background: transparent;
+            padding-top: 175px;
+            padding-bottom: 100px;
+            border: none !important;
+            animation-name: fadeInOut;
+            animation-delay: 1s;
+            animation-duration: 3s;
+
+            
+            @media screen and(max-width:600px) {
+                padding-left: 40px;
+              }
+
+            @media screen and(max-width:768px) {
+                padding-top:50px;
+                padding-bottom: 100px;
+            }
+            .card-title{
+                color:$color-white;
+                font-size:5vw;
+                font-weight: bold;
+                padding-bottom: 20px;
+                text-transform: uppercase;
+              
+            }
+            .card-text{
+                color:$color-white;
+                padding-bottom: 30px;
+                font-size: 14px;
+              
+            }
+        }
+
+      .breadcrumb{
+          background: transparent;
+          padding-top: 110px;
+          padding-bottom: 110px;
+
+          .breadcrumb-item{
+              color: $color-hover;
+
+              &:first-child{
+                  &::before{
+                      display: none;
+                  }
+              }
+
+              &::before{
+                
+                    display: inline-block;
+                    padding-right: 1.5rem;
+                    color: #fff;
+                    content: "/";
+                
+              }
+          
+              a{
+                  color: $color-white;
+                  text-decoration: none;
+                  &:hover{
+                    color:$color-hover;
+                  }
+              }
+          }
+      }
+    
+    }
+
+    .banner_bg4{
+        background-image: url(./../images/banner/home.jpg);
+        justify-content: center;
+        max-width: 1400px;
+        margin: auto;
+   
+    background-size: cover;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+        margin-top: 134px;
+        
+
+      .breadcrumb{
+          background: transparent;
+          padding-top: 110px;
+          padding-bottom: 110px;
+
+          .breadcrumb-item{
+              color: $color-hover;
+
+              &:first-child{
+                  &::before{
+                      display: none;
+                  }
+              }
+
+              &::before{
+                
+                    display: inline-block;
+                    padding-right: 1.5rem;
+                    color: #fff;
+                    content: "/";
+                
+              }
+          
+              a{
+                  color: $color-white;
+                  text-decoration: none;
+                  &:hover{
+                    color:$color-hover;
+                  }
+              }
+          }
+      }
+    
+    }
+
+
+    
+.owl-carousel button.owl-dot span {
+    height: 10px;
+    width: 10px;
+    color: $color-white;
+    background-color: $color-white;
+    border-radius: 50%;
+    display: block;
+    font-weight: 700;
+    margin: 5px;
+}
+.owl-carousel button.owl-dot.active span{
+   background-color: $color-brand2;
+}
+
+
+.owl-carousel{
+
+    .owl-dots{
+            position: absolute;
+    bottom:250px;
+    left: 40px;
+    transform: rotate(89deg);
+    background-color: transparent;
+
+    @media screen and(max-width:1150px){
+            left: 0 !important;
+        
+    }
+    @media screen and(max-width:768px) {
+       
+    }
+    @media screen and(max-width:600px) {
+       
+     }
+}
+}
+
+}
+
+
+.slideInDown {
+    -webkit-animation-name: slideInDown;
+    animation-name: slideInDown;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    }
+    @-webkit-keyframes slideInDown {
+    0% {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+    visibility: visible;
+    }
+    100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    }
+    }
+    @keyframes slideInDown {
+    0% {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+    visibility: visible;
+    }
+    100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    }
+    } 
+
+
+
+    .tada {
+        -webkit-animation-name: tada;
+        animation-name: tada;
+        -webkit-animation-duration: 1s;
+        animation-duration: 1s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        }
+        @-webkit-keyframes tada {
+        0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+        }
+        10%, 20% {
+        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+        }
+        30%, 50%, 70%, 90% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+        }
+        40%, 60%, 80% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+        }
+        100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+        }
+        }
+        @keyframes tada {
+        0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+        }
+        10%, 20% {
+        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+        }
+        30%, 50%, 70%, 90% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+        }
+        40%, 60%, 80% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+        }
+        100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+        }
+        } 
+
+        .slideInUp {
+            -webkit-animation-name: slideInUp;
+            animation-name: slideInUp;
+            -webkit-animation-duration: 1s;
+            animation-duration: 1s;
+            -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+            }
+            @-webkit-keyframes slideInUp {
+            0% {
+            -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+            visibility: visible;
+            }
+            100% {
+            -webkit-transform: translateY(0);
+            transform: translateY(0);
+            }
+            }
+            @keyframes slideInUp {
+            0% {
+            -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+            visibility: visible;
+            }
+            100% {
+            -webkit-transform: translateY(0);
+            transform: translateY(0);
+            }
+            } 
+          
+         
+            .slideInLeft {
+                -webkit-animation-name: slideInLeft;
+                animation-name: slideInLeft;
+                -webkit-animation-duration: 1s;
+                animation-duration: 1s;
+                -webkit-animation-fill-mode: both;
+                animation-fill-mode: both;
+                }
+                @-webkit-keyframes slideInLeft {
+                0% {
+                -webkit-transform: translateX(-100%);
+                transform: translateX(-100%);
+                visibility: visible;
+                }
+                100% {
+                -webkit-transform: translateX(0);
+                transform: translateX(0);
+                }
+                }
+                @keyframes slideInLeft {
+                0% {
+                -webkit-transform: translateX(-100%);
+                transform: translateX(-100%);
+                visibility: visible;
+                }
+                100% {
+                -webkit-transform: translateX(0);
+                transform: translateX(0);
+                }
+                } 
+
+
+                .fadeInDownBig {
+                    -webkit-animation-name: fadeInDownBig;
+                    animation-name: fadeInDownBig;
+                    -webkit-animation-duration: 1s;
+                    animation-duration: 1s;
+                    -webkit-animation-fill-mode: both;
+                    animation-fill-mode: both;
+                    }
+                    @-webkit-keyframes fadeInDownBig {
+                    0% {
+                    opacity: 0;
+                    -webkit-transform: translate3d(0, -2000px, 0);
+                    transform: translate3d(0, -2000px, 0);
+                    }
+                    100% {
+                    opacity: 1;
+                    -webkit-transform: none;
+                    transform: none;
+                    }
+                    }
+                    @keyframes fadeInDownBig {
+                    0% {
+                    opacity: 0;
+                    -webkit-transform: translate3d(0, -2000px, 0);
+                    transform: translate3d(0, -2000px, 0);
+                    }
+                    100% {
+                    opacity: 1;
+                    -webkit-transform: none;
+                    transform: none;
+                    }
+                    } 
+                  
+                  
+                    
+
+                    .fadeInLeftBig {
+               -webkit-animation-name: fadeInLeftBig;
+               animation-name: fadeInLeftBig;
+               -webkit-animation-duration: 1s;
+               animation-duration: 1s;
+               -webkit-animation-fill-mode: both;
+               animation-fill-mode: both;
+               }
+               @-webkit-keyframes fadeInLeftBig {
+               0% {
+               opacity: 0;
+               -webkit-transform: translate3d(-2000px, 0, 0);
+               transform: translate3d(-2000px, 0, 0);
+               }
+               100% {
+               opacity: 1;
+               -webkit-transform: none;
+               transform: none;
+               }
+               }
+               @keyframes fadeInLeftBig {
+               0% {
+               opacity: 0;
+               -webkit-transform: translate3d(-2000px, 0, 0);
+               transform: translate3d(-2000px, 0, 0);
+               }
+               100% {
+               opacity: 1;
+               -webkit-transform: none;
+               transform: none;
+               }
+               } 
+             

theme_xtream/static/src/scss/components/_button.scss

@@ -0,0 +1,168 @@
+.btn {
+    border: none !important;
+    outline: 0 !important;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    box-shadow: none !important;
+    font-weight: 400;
+    &-primary {
+        background-color: transparent !important;
+        border-color: $color-white;
+        padding: 12px 36px;
+        color: #fff !important;
+        font-size: 16px;
+        font-weight: 600;
+        border-radius:0;
+        border:3px solid !important;
+        &:hover {
+         
+            border-color: $color-brand2 !important;
+            color: $color-white !important;
+            background: $color-brand2 !important;
+        }
+    }
+    &:focus,
+    &.focus {
+      outline: 0;
+      
+    }
+
+    &-cart {
+        background-color:$color-brand !important;
+        margin-right: 5px;
+        padding: 2px 9px;
+        color: #fff !important;
+        font-size: 13px;
+        border-radius: 0 !important;
+     border: none;
+        
+    }
+
+    &-checkout {
+        background-color:$color-brand2 !important;
+        padding: 2px 9px;
+        color: #fff !important;
+        font-size: 13px;
+        border-radius: 0 !important;
+         border: none;
+    }
+    &-details {
+        background-color:transparent!important;
+        padding: 2px 9px;
+        color: #fff !important;
+        font-size: 13px;
+        border-radius: 0 !important;
+        border: 1px solid !important;
+        border-color:$color-white !important;
+        border-radius: 50% !important;
+    }
+    &-checkout_m {
+        background-color:$color-brand2 !important;
+        text-decoration: none !important;
+        padding: 7px 12px;
+        color: #fff !important;
+        font-size: 13px;
+        border-radius: 0 !important;
+     border: none;
+      
+    }
+    &-cart_p {
+        background-color:$color-brand2 !important;
+        color: #fff !important;
+        font-size: 13px;
+        border-radius: 0 !important;
+         border: none;  
+padding: 13px 40px;
+margin-left: 33px;
+    }
+    &-shopping {
+        background-color:transparent !important;
+        color: $color-brand !important;
+        font-size: 20px;
+        @media screen and(max-width:768px) {
+            padding: 8px 15px;
+           
+            font-size: 2vw;
+        }
+        font-weight: 700;
+        border-radius: 0 !important;
+         border: 2px solid !important;
+         border-color: $color-brand !important; 
+padding: 13px 40px;
+margin-left: 33px;
+    }
+
+
+    &-clear {
+        background-color:transparent !important;
+        color: $color-font !important;
+      font-size: 20px;
+        @media screen and(max-width:768px) {
+            padding: 8px 15px;
+            margin-bottom: 10px;
+            font-size: 2vw;
+        }
+        font-weight: 700;
+        border-radius: 0 !important;
+        border: 2px solid !important;
+        border-color: $color-border !important; 
+        padding: 13px 40px;
+        margin-left: 33px;
+    }
+
+
+    &-update {
+        background-color:$color-h-bg !important;
+        color: $color-font !important;
+        font-size: 20px;
+        @media screen and(max-width:768px) {
+            padding: 8px 15px;
+        
+            font-size: 2vw;
+        }
+        font-weight: 700;
+        border-radius: 0 !important;
+        border: 2px solid !important;
+        border-color: $color-h-bg !important; 
+padding: 13px 40px;
+margin-left: 33px;
+    }
+
+    &-checkout_c{
+        text-transform: uppercase;
+        background-color:$color-brand2 !important;
+        text-decoration: none !important;
+        width: 100%;
+        height: 60px;
+        color: #fff !important;
+        font-size: 16px;
+        font-weight: 700;
+        border-radius: 0 !important;
+     border: none;
+     line-height: 50px;
+height: 60px;
+&:hover{
+    background-color: $color-brand !important;
+}
+    }
+
+
+    &-contact{
+        margin-top: 30px;
+        text-transform: uppercase;
+        background-color:$color-brand2 !important;
+        text-decoration: none !important;
+        width: 100%;
+        height: 60px;
+        color: #fff !important;
+        font-size: 16px;
+        font-weight: 700;
+        border-radius: 0 !important;
+     border: none;
+     line-height: 50px;
+height: 60px;
+&:hover{
+    background-color: $color-brand !important;
+}
+    }
+}

theme_xtream/static/src/scss/components/_components.scss

@@ -0,0 +1,3 @@
+@import './banner';
+@import './button';
+@import './product';

theme_xtream/static/src/scss/components/_product.scss

@@ -0,0 +1,304 @@
+.product{
+ margin-top: 90px;
+.main {
+  padding-top: 30px;
+  margin: auto;
+  h2{
+      text-align: center;
+      font-size: 60px;
+      font-weight: 700;
+      color: $color-brand;
+      text-transform: uppercase;
+      padding-bottom: 30px;
+      @media screen and(max-width:768px){
+        font-size: 30px;
+           }
+  }
+  .categories{
+    display: flex;
+    justify-content: center;
+    @media screen and(max-width:768px){
+    display: block;
+           }
+  }
+  }
+  h1 {
+    font-size: 50px;
+    word-break: break-all;
+  }
+  .row {
+    margin: 10px -16px;
+  }
+  /* Add padding BETWEEN each column */
+  .row,
+  .row > .column {
+    padding: 8px;
+  }
+  /* Create three equal columns that floats next to each other */
+  .column {
+    float: left;
+    width: 33.33%;
+    display: none; /* Hide all elements by default */
+  }
+  /* Clear floats after rows */ 
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  /* Content */
+  .content {
+   padding: 50px 0;
+   .img_zoom{
+    overflow: hidden;
+   }
+    .wrapper{
+        max-width: 330px;
+        position: relative;
+             &:hover{
+            .img_details{
+                position: absolute;
+                left: 44%;
+                display: block;
+bottom: 45%;
+                z-index: 3;
+                @media screen and(max-width:992px){
+                    left: 35%;
+bottom: 43%;
+                }
+                @media screen and(max-width:992px){
+                    left: 44%;
+bottom: 43%;
+                }
+                i{
+                    font-size: 25px;
+                   color: $color-white;
+                   padding: 4px 2px;
+
+                   @media screen and(max-width:992px){
+                  font-size: 12px;
+                }
+
+                }
+            }
+            &:after{
+        position: absolute;
+        content: " ";
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        background:#00000054 !important
+    }
+    }
+    &:before{
+        position: absolute;
+        content: " ";
+        display: block;
+        top: 50%;
+        left: 50%;
+    }
+        @media screen and(max-width:576px){
+            max-width: none;
+        }
+.img_details{
+    display: none;
+}
+        img{
+            width: 100%;
+        }
+    }
+    p{
+        color: $color-font;
+        font-size: 25px;
+        font-weight: lighter;
+        margin-top: 20px;
+        margin-bottom: 5px;
+    }
+    h6{
+        color: $color-brand;
+        line-height: 1.5;
+        font-weight: 400;
+        font-size: 15px;
+        letter-spacing: 1px;
+        margin-bottom: 40px;
+    }
+    a{
+        font-size: 13px;
+font-weight: 700;
+color: $color-brand2;
+text-decoration: none;
+&:hover{
+    color: $color-brand;
+}
+    }
+    #zoomIn{
+        transform: scale(1);
+        transition: .3s ease-in-out;
+        &:hover{
+            transform: scale(1.3);
+            border-radius: 6px 6px 0px 0px;
+    }
+    }
+  }
+  /* The "show" class is added to the filtered elements */
+  .show {
+    display: block;
+  }
+  /* Style the buttons */
+  .btn {
+    border: none;
+    outline: none;
+    padding: 12px 16px;
+    background-color: white;
+    cursor: pointer;
+    color: $color-font;
+    font-weight: 700;
+  }
+  .btn:hover {
+    background-color: #ddd;
+  }
+  .btn.active {
+    color: $color-brand;
+  }
+}
+.modal-content {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: 0;
+    outline: 0;
+    margin: auto;
+    @media screen and(max-width:768px) {
+margin: auto;
+max-width: 65%;  
+    }
+    @media screen and(max-width:576px) {
+        margin: auto;
+        max-width: 80%;  
+            }
+}
+.modal-dialog {
+    max-width: 660px;
+    margin: 1.75rem auto;
+    @media screen and(max-width:768px) {
+        margin: 50px 50px;
+    }
+}
+.modal{
+    .model-body{
+        padding: 20px 25px;
+    }
+   .wrapper{
+       max-width: 100% !important;
+       img{
+           width: 100%;
+       }
+   }
+   .model_details{
+       h4{
+           color: $color-brand;
+           font-size: 22px;
+           font-weight: 700;
+           padding-bottom: 10px;
+       }
+       .model_rate{
+           ul{
+               padding-left: 0;
+               display: flex;
+               span{
+                   color:#ffcd07;
+               }
+           }
+       }
+       .price{
+           color: $color-brand;
+           font-size: 20px;
+           font-weight: 700;
+           span{
+               margin-left: 5px;
+               font-weight: 700;
+               font-size: 16;
+               color: $color-grey;
+               text-decoration: line-through;
+           }
+       }
+       p{
+           color: $color-brand;
+           line-height: 24px;
+       }
+       a{
+           text-decoration: underline;
+       }
+       .product_count{
+           margin-top: 30px;
+           display: flex;
+           @media screen and(max-width:412px) {
+            display: grid !important;
+            grid-row-gap: 20px !important;
+           }
+        #myform {
+            margin-right:10px ;
+            text-align: center;
+            // padding: 5px;
+            // border: 1px solid #ccc;
+            display: flex;
+            // margin: 2%;
+            // border-radius: 9px;
+            width: 100px;
+        }
+        .qty {
+            width: 40px;
+            height: 25px;
+            text-align: center;
+            border: none;
+        }
+        input.qtyplus { width:25px; height:25px;
+        background-color: transparent;
+        border: none;
+        }
+        input.qtyminus { width:25px; height:25px; 
+            background-color: transparent;
+            border: none;
+        }
+        .icons{
+            margin-left: 15px;
+            span{
+                background: $color-brand2;
+                color: $color-white;
+                font-size: 16px;
+                padding: 9px 10px;
+                &:hover{
+                    background-color: $color-black;
+                }
+                &:last-child{
+                    background-color: #00bcd4 !important;
+                    margin-left: 15px;
+                }
+            }
+        }
+       }
+       .share{
+           font-size: 14px;
+           font-weight: 400;
+           padding-top: 20px;
+       }
+       .footer_icon{
+        padding-top: 5px;
+        a{
+            color: $color-font;
+            margin-right: 15px;
+            &:hover{
+               color:$color-black;
+            }
+        }
+             }
+   }
+}

theme_xtream/static/src/scss/layout/_footer.scss

@@ -0,0 +1,155 @@
+.card-footer {
+    margin-top: 90px;
+    .footer_content {
+        padding: 50px 0;
+        .wrapper_head {
+            a {
+                text-decoration: none;
+            }
+            .made_by {
+                color: $color-font;
+                margin-top: 20px;
+                line-height: 2;
+                span {
+                    margin: 0 5px;
+                }
+                a {
+                    text-decoration: none;
+                    color: $color-black;
+                    &:hover {
+                        color: $color-brand;
+                    }
+                }
+                @media screen and(max-width:768px) {
+                    margin-bottom: 40px;
+                }
+            }
+        }
+        .heading {
+            color: $color-brand;
+            font-size: 30px;
+            font-weight: 700;
+            letter-spacing: 12px;
+            &::first-letter {
+                color: $color-brand2;
+            }
+            hr {
+                background: $color-font;
+                margin: 3px 7px;
+                padding-right: 5px;
+            }
+            p {
+                color: $color-font;
+                font-weight: normal;
+                text-align: center;
+                @media screen and(max-width:768px) {
+                    text-align: left;
+                }
+            }
+            @media screen and(max-width:768px) {
+                margin-bottom: 20px;
+            }
+        }
+        .footer_links {
+            @media screen and(max-width:992px) {
+                margin-top: 40px;
+            }
+            @media screen and(max-width:768px) {
+                margin-top: 0;
+            }
+            ul {
+                padding-left: 0;
+                li {
+                    padding: 5px 0;
+                    display: block;
+                    margin-bottom: 15px;
+                    // &:last-child {
+                    // }
+                    a {
+                        text-decoration: none;
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: $color-brand;
+                        text-transform: uppercase;
+                    }
+                }
+            }
+            .scale-up-ver-center {
+                &:hover {
+                    animation: scale-up-ver-center 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+                }
+            }
+            @keyframes scale-up-ver-center {
+                0% {
+                    transform: scaleY(0.4);
+                }
+                100% {
+                    transform: scaleY(1);
+                }
+            }
+        }
+        .subscribe {
+            @media screen and(max-width:992px) {
+                margin-top: 40px;
+            }
+            h4 {
+                font-size: 20px;
+                font-weight: 700;
+                color: $color-brand;
+                text-transform: uppercase;
+            }
+            .input-group {
+                width: 100%;
+                height: 50px;
+                border-radius: 0;
+                margin-top: 70px;
+                @media screen and(max-width:768px) {
+                    margin-top: 40px;
+                }
+                .form-control {
+                    border-radius: 0;
+                    height: 50px;
+                }
+                .input-group-text {
+                    border-radius: 0;
+                    background-color: $color-brand;
+                    padding: 0 20px;
+                    color: $color-white;
+                    border: 1px solid;
+                    font-weight: 700;
+                }
+            }
+        }
+        .footer_icon {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 30px;
+            @media screen and(max-width:768px) {
+                margin-top: 40px;
+            }
+            a {
+                color: $color-black;
+                margin-right: 15px;
+                @media screen and(max-width:768px) {
+                    margin-right: 5px;
+                }
+                &:hover {
+                    color: $color-font;
+                }
+                span {
+                    font-size: 35px;
+                    @media screen and(max-width:768px) {
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+    }
+}
+.form-control:focus {
+    color: #495057;
+    background-color: #fff;
+    border-color: $color-brand2;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
+}

theme_xtream/static/src/scss/layout/_layouts.scss

@@ -0,0 +1,3 @@
+@import './navigation';
+@import './footer';
+@import './sidebar';

theme_xtream/static/src/scss/layout/_navigation.scss

@@ -0,0 +1,336 @@
+.top_nav {
+    margin: 25px 0;
+    .wrapper {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 20px;
+        align-items: center;
+        @media screen and(max-width:572px) {
+            display: block;
+        }
+        .nav_center {
+            margin: auto;
+            @media screen and(max-width:992px) {
+                margin: 0;
+            }
+            a {
+                text-decoration: none;
+            }
+            .heading {
+                color: $color-brand;
+                font-size: 30px;
+                font-weight: 700;
+                @media screen and(max-width:572px) {
+                    text-align: center;
+                }
+                @media screen and(max-width:768px) {
+                    font-size: 3vw;
+                }
+                letter-spacing: 12px;
+                &::first-letter {
+                    color: $color-brand2;
+                }
+                hr {
+                    background: $color-font;
+                    margin: 3px 7px;
+                    padding-right: 5px;
+                }
+                p {
+                    color: $color-font;
+                    font-weight: normal;
+                    text-align: center;
+                    @media screen and(max-width:572px) {
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+        .nav_right {
+            display: flex;
+            align-items: center;
+            @media screen and(max-width:572px) {
+                justify-content: center;
+            }
+            .bag {
+                position: relative;
+                span {
+                    color: $color-white;
+                    background-color: $color-brand2;
+                    height: 20px;
+                    width: 20px;
+                    font-size: 13px;
+                    position: absolute;
+                    left: -8px;
+                    top: 12px;
+                    border-radius: 50%;
+                }
+            }
+            .dropdown {
+                i {
+                    font-size: 20px;
+                    padding-right: 7px;
+                }
+                .d_image {
+                    display: block;
+                    max-width: 40px;
+                    img {
+                        width: 100%;
+                    }
+                }
+                .dropdown-menu {
+                    padding: 30px 20px;
+                    .nav_product {
+                        color: $color-black;
+                        margin-top: 10px;
+                        span {
+                            color: $color-brand;
+                        }
+                    }
+                    .drop_buttons {
+                        margin-top: 10px;
+                        span {
+                            padding-left: 5px;
+                        }
+                    }
+                }
+            }
+            .side_b {
+                background-color: $color-brand;
+                color: $color-white;
+                border-radius: 50%;
+                padding-top: 5px;
+                font-size: 30px;
+                cursor: pointer;
+                height: 55px;
+                display: block;
+                width: 55px;
+                padding-left: 14px;
+                @media screen and(max-width:768px) {
+                    background-color: $color-brand;
+                    color: $color-white;
+                    border-radius: 50%;
+                    padding-top: 6px !important;
+                    font-size: 15px !important;
+                    cursor: pointer;
+                    height: 35px;
+                    display: block;
+                    width: 35px;
+                    padding-left: 11px !important;
+                }
+            }
+        }
+    }
+}
+.navigation {
+    padding: 35px 0 50px 0px;
+    .help-line {
+        background-color: $color-brand2;
+        width: auto;
+        height: 35px;
+        padding: 0 30px;
+        display: block;
+        line-height: 35px;
+        font-size: 14px;
+        font-weight: 600;
+        a {
+            color: $color-white;
+            text-decoration: none;
+        }
+        &:hover {
+            background-color: $color-brand;
+        }
+    }
+}
+.navbar-dark {
+    padding: 20px 0;
+    @media screen and(max-width:768px) {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-row-gap: 30px;
+    }
+    .navbar-toggler {
+        border: 2px solid;
+        border-color: $color-brand2;
+        background-color: $color-brand2;
+        border-radius: 0;
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+        }
+    }
+    .navbar-brand {
+        @media screen and(max-width:768px) {
+            margin: auto;
+        }
+        .footer_icon {
+            position: relative;
+            .link_top {
+                color: $color-white;
+                background: $color-brand2;
+                font-size: 11px;
+                padding: 5px 12px;
+                font-weight: 700;
+                position: absolute;
+                top: -43px;
+                left: 9px;
+                &:after {
+                    position: absolute;
+                    z-index: 2;
+                    content: "";
+                    width: 0;
+                    height: 0;
+                    border-style: solid;
+                    border-width: 0 9px 9px 9px;
+                    border-color: transparent transparent #7bf098 transparent;
+                    bottom: -2px;
+                    left: -6px;
+                    -webkit-transform: rotate(-45deg);
+                    transform: rotate(-45deg);
+                }
+            }
+        }
+        a {
+            color: $color-black;
+            margin-right: 15px;
+            &:hover {
+                color: $color-font;
+            }
+        }
+    }
+}
+.navbar-nav {
+    text-align: center;
+    position: relative;
+    .link_top {
+        color: $color-white;
+        background: $color-brand2;
+        font-size: 11px;
+        padding: 5px 15px;
+        font-weight: 700;
+        position: absolute;
+        top: -29px;
+        left: 221px;
+        &:after {
+            position: absolute;
+            z-index: 2;
+            content: "";
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 9px 9px 9px;
+            border-color: transparent transparent #7bf098 transparent;
+            bottom: -2px;
+            left: -6px;
+            -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+            // bottom: -1px;
+            // left: -6px;
+            // transform: rotate(-36deg);
+        }
+    }
+    .nav-item {
+        .dropdown-menu {
+            @media screen and(max-width:992px) {
+                text-align: center;
+            }
+            .dropdown-item {
+                padding: 10px 10px;
+                &:hover {
+                    color: $color-brand;
+                }
+            }
+        }
+        .nav-link {
+            color: $color-black;
+            padding-right: 15px;
+            padding-left: 15px;
+            position: relative;
+            z-index: 1;
+            font-size: 14px;
+            font-weight: 700;
+            text-transform: uppercase;
+            @media screen and(max-width:992px) {
+                padding: 10px 0;
+            }
+            
+        }
+    }
+}
+.navbar-nav .nav-item.active .nav-link {
+    color: $color-brand !important;
+}
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: $color-font !important;
+}
+/* ============ desktop view ============ */
+@media all and (min-width: 992px) {
+    .navbar .nav-item .dropdown-menu {
+        display: none;
+    }
+    .navbar .nav-item:hover .nav-link {
+        color: #181818;
+    }
+    .navbar .nav-item:hover .dropdown-menu {
+        display: block;
+        border: none;
+    }
+    .navbar .nav-item .dropdown-menu {
+        margin-top: 0;
+        padding: 20px 10px;
+    }
+}
+/* ============ desktop view .end// ============ */
+#arrow {
+    position: relative;
+    top: 0;
+    transition: top ease 0.5s;
+}
+#arrow:hover {
+    top: -5px;
+}
+.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:active {
+    background-color: $color-brand2;
+    color: $color-white;
+}
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    left: 0;
+    background-color: $color-white;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 25px;
+    color: $color-brand;
+    display: block;
+    transition: 0.3s;
+}
+.sidenav a:hover {
+    color: $color-brand2;
+}
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+#main {
+    transition: margin-left 0.5s;
+    padding: 16px;
+}
+@media screen and (max-height: 450px) {
+    .sidenav {
+        padding-top: 15px;
+    }
+    .sidenav a {
+        font-size: 18px;
+    }
+}

theme_xtream/static/src/scss/layout/_sidebar.scss

@@ -0,0 +1,204 @@
+.Shop_product .btn:hover {
+    background-color: transparent !important;
+}
+.sidebar {
+    padding-right: 30px;
+    .wrapper {
+        .Sidebar_head {
+            color: $color-brand;
+            font-size: 18px;
+            font-weight: 700;
+            margin-top: 30px;
+            margin-bottom: 40px;
+        }
+        .card {
+            border: none;
+            .card-header {
+                border-color: $color-border;
+                .custom-checkbox {
+                    .custom-control-label {
+                        font-weight: 400;
+                        color: $color-brand;
+                    }
+                    .custom-control-label::before {
+                        box-shadow: none !important;
+                        border-color: -$color-brand;
+                    }
+                    .custom-control-input:checked ~ .custom-control-label::before {
+                        color: #a5a3a3;
+                        border-color: $color-brand2;
+                        background-color: #ff1f49;
+                        box-shadow: none !important;
+                    }
+                    .custom-control-input:checked ~ .custom-control-label::after {
+                        background-image: none;
+                    }
+                }
+            }
+            .list-group-item {
+                .custom-checkbox {
+                    .custom-control-label {
+                        color: $color-grey;
+                    }
+                    .custom-control-label::before {
+                        box-shadow: none !important;
+                        border-color: $color-font !important;
+                    }
+                    .custom-control-input:checked ~ .custom-control-label::before {
+                        color: #a5a3a3;
+                        border-color: $color-font;
+                        background-color: #ff1f49;
+                        box-shadow: none !important;
+                    }
+                    .custom-control-input:checked ~ .custom-control-label::after {
+                        background-image: none;
+                    }
+                }
+            }
+        }
+        .sidebar__filter {
+            .price_wrapper {
+                display: flex;
+                p {
+                    align-items: center;
+                    margin: 0;
+                    display: flex;
+                    padding-right: 15px;
+                    font-weight: bold;
+                }
+            }
+        }
+        .color {
+            display: flex;
+            padding-left: 0px;
+            li {
+                a:hover {
+                    color: $color-brand2;
+                }
+                span {
+                    display: block;
+                    height: 27px;
+                    width: 27px;
+                    font-size: 20px;
+                    background-color: yellow;
+                    border: 1px solid;
+                    border-color: transparent;
+                    margin-right: 18px;
+                    &:hover {
+                        border: 3px solid !important;
+                        border-color: $color-brand2;
+                    }
+                }
+                P {
+                    color: $color-brand;
+                    padding-top: 10px;
+                    font-size: 13px;
+                }
+                &:nth-child(2) {
+                    span {
+                        background-color: rgba(255, 51, 0, 0.753) !important;
+                    }
+                }
+                &:nth-child(3) {
+                    span {
+                        background-color: rgba(2, 2, 2, 0.753) !important;
+                    }
+                }
+                &:nth-child(4) {
+                    span {
+                        background-color: rgba(34, 148, 255, 0.753) !important;
+                    }
+                }
+                &:nth-child(5) {
+                    span {
+                        background-color: rgba(0, 255, 128, 0.753) !important;
+                    }
+                }
+            }
+        }
+        .size {
+            display: flex;
+            padding-left: 0;
+            li {
+                a {
+                    text-decoration: none;
+                }
+                span {
+                    font-size: 14px;
+                    color: $color-brand;
+                    display: block;
+                    padding: 7px 6px;
+                    font-size: 13px;
+                    background-color: transparent;
+                    font-weight: 700;
+                    margin-right: 10px;
+                    &:hover {
+                        background-color: $color-brand2 !important;
+                        color: $color-white;
+                    }
+                }
+            }
+        }
+        .rec_wrapper {
+            display: flex;
+            margin-bottom: 25px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .rec_img {
+                max-width: 100px;
+                img {
+                    width: 100%;
+                }
+            }
+            .rec_details {
+                margin-left: 14px;
+                h6 {
+                    font-size: 17px;
+                    font-weight: bold;
+                    color: $color-brand;
+                }
+                p {
+                    font-size: 16px;
+                    color: $color-brand;
+                }
+            }
+        }
+    }
+    .sidebar__filter {
+        position: relative;
+        margin-bottom: 60px;
+        .section-title {
+            margin-bottom: 50px;
+            .borderd_header {
+                text-transform: uppercase;
+            }
+            h4 {
+                font-size: 18px;
+            }
+        }
+    }
+    #slider-range {
+        margin-bottom: 30px;
+        background-color: $color-grey;
+        border: none;
+        height: 8px;
+        .ui-state-default,
+        .ui-widget-content .ui-state-default {
+            background-color: #3a3a3a;
+            border: none;
+            height: 18px;
+            width: 18px;
+            top: -4.8px;
+            position: absolute;
+        }
+        &.ui-slider-horizontal .ui-slider-range {
+            top: 0;
+            background-color: $color-brand !important;
+            left: 0%;
+            width: 60%;
+            position: absolute;
+            height: 8px;
+        }
+    }
+}

theme_xtream/static/src/scss/pages/_cart.scss

@@ -0,0 +1,132 @@
+.cart {
+    margin-top: 90px;
+    .table_wrapper {
+        .table-responsive {
+            overflow-x: auto;
+        }
+        .table {
+            overflow-x: auto;
+            thead {
+                background-color: $color-h-bg;
+            }
+            tbody {
+                .cart_img {
+                    display: flex;
+                    align-items: center;
+                    .wrapper {
+                        max-width: 150px;
+                        img {
+                            width: 100%;
+                        }
+                    }
+                    h6 {
+                        color: $color-brand;
+                        font-size: 23px;
+                        padding-left: 20px;
+                        @media screen and(max-width:600px) {
+                            font-size: 14px;
+                            padding-left: 10px;
+                        }
+                    }
+                }
+                td {
+                    vertical-align: middle;
+                }
+                .cart_q {
+                    #myform {
+                        text-align: center;
+                        padding: 5px;
+                        border: 1px solid #ccc;
+                        display: flex;
+                        margin: 2%;
+                        width: 95px;
+                    }
+                    .qty {
+                        width: 40px;
+                        height: 25px;
+                        text-align: center;
+                        border: none;
+                    }
+                    input.qtyplus {
+                        width: 25px;
+                        height: 25px;
+                        background-color: transparent;
+                        border: none;
+                    }
+                    input.qtyminus {
+                        width: 25px;
+                        height: 25px;
+                        background-color: transparent;
+                        border: none;
+                    }
+                }
+            }
+        }
+    }
+    .c_buttons {
+        margin-top: 30px;
+    }
+    .cart_bottom {
+        margin-top: 70px;
+        .coupen {
+            padding-top: 30px;
+            .hb {
+                h5 {
+                    color: $color-brand;
+                    font-size: 23px;
+                    font-weight: 700;
+                }
+                p {
+                    color: $color-font;
+                }
+            }
+            .input-group {
+                width: 100%;
+                height: 50px;
+                border-radius: 0;
+                margin-top: 70px;
+                .form-control {
+                    border-radius: 0;
+                    height: 50px;
+                }
+                .input-group-text {
+                    border-radius: 0;
+                    background-color: $color-brand2;
+                    padding: 0 20px;
+                    color: $color-white;
+                    border: 1px solid;
+                    font-weight: 700;
+                }
+            }
+            .form-control:focus {
+                color: #495057;
+                background-color: #fff;
+                border-color: $color-brand2;
+                outline: 0;
+                box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
+            }
+            .radio_wrapper {
+                margin-top: 35px;
+            }
+            .custom-control {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 30px;
+                margin-right: 20px;
+                p {
+                    color: $color-black;
+                }
+            }
+            .cart-total-chart {
+                padding-left: 0;
+                margin-top: 35px;
+                li {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 30px;
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+}

theme_xtream/static/src/scss/pages/_categories.scss

@@ -0,0 +1,82 @@
+.choose {
+  margin: 90px 0;
+  .wrapper {
+    padding: 10px 0;
+  }
+  .choose_left {
+    color: $color-grey;
+    font-size: $font-text;
+  }
+  .choose_right {
+    @media screen and(max-width:768px) {
+      float: none;
+    }
+    float: right;
+    /* Custom dropdown */
+    .custom-dropdown {
+      width: 300px;
+      border: 1px solid;
+      border-color: $color-border;
+      border-radius: 5px;
+      position: relative;
+      display: inline-block;
+      vertical-align: middle;
+      font-size: $font-text;
+      -webkit-transition: 0.5s;
+      transition: 0.5s;
+    }
+    .custom-dropdown select {
+      width: 300px;
+      background-color: #ffffff;
+      color: $color-grey;
+      font-size: inherit;
+      padding: 0.7em;
+      padding-right: 2.5em;
+      margin: 0;
+      border: none !important;
+      text-indent: 0.01px;
+      text-overflow: "";
+      /*Hiding the select arrow for firefox*/
+      -moz-appearance: none;
+      /*Hiding the select arrow for chrome*/
+      -webkit-appearance: none;
+      /*Hiding the select arrow default implementation*/
+      appearance: none;
+    }
+    /*Hiding the select arrow for IE10*/
+    .custom-dropdown select::-ms-expand {
+      display: none;
+    }
+    .custom-dropdown::before,
+    .custom-dropdown::after {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+    }
+    .custom-dropdown::after {
+      /*  Custom dropdown arrow */
+      content: "\25BC";
+      height: 1em;
+      font-size: 0.625em;
+      line-height: 1;
+      right: 1.2em;
+      top: 50%;
+      margin-top: -0.5em;
+    }
+    .custom-dropdown::before {
+      /*  Custom dropdown arrow cover */
+      width: 2em;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border-radius: 0 3px 3px 0;
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+    .custom-dropdown::after {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .custom-dropdown select[disabled] {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+}

theme_xtream/static/src/scss/pages/_checkout.scss

@@ -0,0 +1,185 @@
+.checkout {
+    margin-top: 90px;
+    .checkout_left {
+        .billing {
+            h3 {
+                font-weight: 600;
+                color: $color-brand;
+                text-transform: uppercase;
+            }
+            p {
+                color: $color-grey;
+                margin-top: 15px;
+            }
+        }
+        .form-control {
+            display: block;
+            width: 100%;
+            height: calc(2em + 0.85rem + 3px);
+            padding: 0.375rem 0.75rem;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5;
+            color: #495057;
+            background-color: #e3e3e3;
+            background-clip: padding-box;
+            border: 1px solid;
+            border-color: transparent !important;
+            border-radius: 0;
+            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        }
+        .form-control:focus {
+            color: #495057;
+            background-color: #fff;
+            border-color: $color-brand2 !important;
+            outline: 0;
+            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
+        }
+        .custom-select {
+            display: inline-block;
+            width: 100%;
+            height: calc(2em + 0.85rem + 3px);
+            padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5;
+            color: #495057;
+            vertical-align: middle;
+            border: 1px solid $color-font;
+            border-radius: 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            box-shadow: none;
+        }
+        .card {
+            border: none;
+            .card-body {
+                .md-form {
+                    color: $color-grey;
+                    .lable {
+                        color: $color-black;
+                    }
+                }
+                .custom-control-input:checked ~ .custom-control-label::before {
+                    color: $color-hover;
+                    border-color: $color-hover;
+                    background-color: $color-hover;
+                    outline: none;
+                }
+                .form-check-input:checked ~ .form-check-label::before {
+                    color: $color-hover !important;
+                    border-color: $color-hover !important;
+                    background-color: $color-hover !important;
+                    content: "";
+                }
+                .input[type="checkbox"],
+                input[type="radio"] {
+                    &:before {
+                        position: absolute;
+                        top: 0.25rem;
+                        left: -1.5rem;
+                        display: block;
+                        width: 1rem;
+                        height: 1rem;
+                        pointer-events: none;
+                        background-color: rgb(138, 23, 23);
+                        border: #3e71a5 solid 1px;
+                    }
+                }
+            }
+        }
+    }
+    .checkout_right {
+        .order {
+            h3 {
+                font-weight: 600;
+                color: $color-brand;
+            }
+            .subhead {
+                color: $color-grey;
+                padding-top: 10px;
+            }
+            .wrapper {
+                padding-left: 30px;
+            }
+            ul {
+                padding-top: 20px;
+                padding-left: 0;
+                li {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 20px;
+                    padding-bottom: 15px;
+                    span {
+                        padding-right: 30px;
+                    }
+                    .nn {
+                        color: $color-black;
+                    }
+                }
+            }
+            .payment {
+                label {
+                    color: $color-black;
+                }
+                [type="radio"]:checked,
+                [type="radio"]:not(:checked) {
+                    position: absolute;
+                    left: -9999px;
+                }
+                [type="radio"]:checked + label,
+                [type="radio"]:not(:checked) + label {
+                    position: relative;
+                    padding-left: 28px;
+                    cursor: pointer;
+                    line-height: 20px;
+                    display: inline-block;
+                    color: #666;
+                }
+                [type="radio"]:checked + label:before,
+                [type="radio"]:not(:checked) + label:before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 18px;
+                    height: 18px;
+                    border: 1px solid;
+                    border-color: $color-border;
+                    border-radius: 100%;
+                    background: #fff;
+                }
+                [type="radio"]:checked + label:after,
+                [type="radio"]:not(:checked) + label:after {
+                    content: "";
+                    width: 11px;
+                    height: 12px;
+                    background: $color-hover;
+                    position: absolute;
+                    top: 3px;
+                    left: 3px;
+                    border-radius: 100%;
+                    -webkit-transition: all 0.2s ease;
+                    transition: all 0.2s ease;
+                }
+                [type="radio"]:not(:checked) + label:after {
+                    opacity: 0;
+                    -webkit-transform: scale(0);
+                    transform: scale(0);
+                }
+                [type="radio"]:checked + label:after {
+                    opacity: 1;
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+            }
+            .order_text {
+                font-style: italic;
+                color: $color-grey;
+                margin-top: 55px;
+                margin-bottom: 20px;
+            }
+        }
+    }
+}

theme_xtream/static/src/scss/pages/_contact.scss

@@ -0,0 +1,90 @@
+.contact {
+    margin-top: 90px;
+    margin-bottom: 90px;
+    .contact_left {
+        .name {
+            h3 {
+                font-weight: 700;
+                color: $color-brand;
+                text-transform: uppercase;
+            }
+            p {
+                color: $color-grey;
+            }
+            .contact-form {
+                margin-top: 70px;
+                .form-control {
+                    display: block;
+                    width: 100%;
+                    height: calc(2.5em + 0.75rem + 2px);
+                    padding: 0.375rem 0.75rem;
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5;
+                    color: #495057;
+                    background-color: #fff;
+                    background-clip: padding-box;
+                    border: 1px solid #ced4da;
+                    border-color: transparent;
+                    border-bottom-color: $color-border;
+                    border-radius: 0;
+                    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+                }
+                .form-control:focus {
+                    color: #495057;
+                    background-color: #fff;
+                    border-bottom-color: $color-brand2 !important;
+                    outline: 0;
+                    box-shadow: none;
+                }
+                .input-block {
+                    margin-bottom: 30px;
+                    label {
+                        color: $color-grey;
+                    }
+                }
+            }
+        }
+    }
+    .contact_right {
+        @media screen and(max-width:992px) {
+            margin-top: 50px;
+        }
+        .c_info {
+            margin-bottom: 60px;
+        }
+        h3 {
+            margin-bottom: 30px;
+            text-transform: uppercase;
+            font-weight: 700;
+            color: $color-brand;
+        }
+        .phone {
+            padding-top: 30px;
+            span {
+                padding-right: 20px;
+            }
+            a {
+                color: $color-grey;
+                text-decoration: none;
+                &:hover {
+                    color: $color-hover !important;
+                }
+            }
+        }
+    }
+}
+.map {
+    .mapouter {
+        position: relative;
+        text-align: right;
+        height: 500px;
+        widows: 100%;
+        .mapouter {
+            overflow: hidden;
+            background: none !important;
+            height: 100%;
+            width: 100%;
+        }
+    }
+}

theme_xtream/static/src/scss/pages/_pages.scss

@@ -0,0 +1,7 @@
+@import './home/home';
+@import './categories';
+@import './shop';
+@import './product-preview';
+@import './cart';
+@import './checkout';
+@import './contact';

theme_xtream/static/src/scss/pages/_product-preview.scss

@@ -0,0 +1,237 @@
+.product_preview {
+    margin-top: 90px;
+    .breadcrumb {
+        background: transparent;
+        margin-top: 40px;
+        padding-left: 0;
+        .breadcrumb-item {
+            a {
+                color: $color-brand;
+                text-decoration: none;
+            }
+        }
+    }
+    .back_to_page {
+        a {
+            font-size: 12px;
+            color: $color-brand;
+            text-decoration: none;
+        }
+        span {
+            margin-right: 5px;
+            font-size: 11px;
+        }
+    }
+    .product_p {
+        margin-top: 90px;
+        .wrapper {
+            position: relative;
+            .preview_details {
+                @media screen and(max-width:768px) {
+                    margin-top: 70px;
+                }
+                h5 {
+                    color: $color-black;
+                    font-size: 25px;
+                }
+                .price {
+                    font-size: 25px;
+                    font-weight: 700;
+                    margin-top: 10px;
+                    color: $color-brand;
+                }
+                .stock {
+                    font-size: 12px;
+                    line-height: 1.5;
+                    span {
+                        font-size: 12px;
+                        line-height: 1.5;
+                        color: $color-font;
+                    }
+                }
+                .rating {
+                    display: flex;
+                    padding-left: 0;
+                    padding-top: 10px;
+                    li {
+                        a {
+                            margin-right: 4px;
+                            color: #ff9800;
+                            span {
+                                font-size: 13px;
+                            }
+                        }
+                    }
+                }
+                .size_wrapper {
+                    h4 {
+                        color: $color-brand;
+                        font-size: 14px;
+                        font-weight: 700;
+                        padding-top: 15px;
+                    }
+                    .size {
+                        display: flex;
+                        padding-left: 0;
+                        a {
+                            text-decoration: none;
+                        }
+                        span {
+                            font-size: 14px;
+                            color: $color-black;
+                            display: block;
+                            padding: 8px 12px;
+                            font-size: 13px;
+                            background-color: transparent;
+                            font-weight: 700;
+                            margin-right: 12px;
+                            border: 2px solid;
+                            border-color: $color-brand;
+                            &:hover {
+                                background-color: $color-brand2 !important;
+                                color: $color-white;
+                                border-color: $color-brand2 !important ;
+                            }
+                        }
+                    }
+                }
+                .product_quantity {
+                    display: flex;
+                    margin-top: 45px;
+                    #myform {
+                        text-align: center;
+                        border: 2px solid #ccc;
+                        display: flex;
+                        border-radius: 0px;
+                        width: 100px;
+                        justify-content: space-around;
+                        align-items: center;
+                        .wrapper_q {
+                            display: block !important;
+                        }
+                    }
+                    .qty {
+                        width: 40px;
+                        height: 15px;
+                        text-align: center;
+                        border: none;
+                    }
+                    input.qtyplus {
+                        width: 25px;
+                        border: none;
+                        background-color: transparent;
+                        display: block !important;
+                    }
+                    input.qtyminus {
+                        width: 25px;
+                        border: none;
+                        background-color: transparent;
+                    }
+                }
+                .collpase_wrapper {
+                    margin-top: 50px;
+                    .accordion {
+                        &:nth-child(2) {
+                            .card {
+                                border-bottom-color: $color-brand2;
+                            }
+                        }
+                        .card {
+                            border-bottom-color: transparent;
+                            background-color: transparent;
+                            border-radius: 0;
+                            border-left-color: transparent;
+                            border-right-color: transparent;
+                            .card-header {
+                                background-color: transparent;
+                                padding: 25px 0;
+                                .btn-link,
+                                .collapsed {
+                                    color: $color-black;
+                                    font-size: 18px;
+                                    text-decoration: none;
+                                    font-weight: 700;
+                                    text-transform: uppercase;
+                                }
+                            }
+                            .collapse {
+                                .card-body {
+                                    color: $color-font;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .trending_body1 {
+        @media screen and(max-width:576px) {
+            //  max-width: 400px;
+        }
+        .outer {
+            margin: 0 auto;
+        }
+        #big .item {
+            width: 100%;
+            display: block;
+        }
+        #thumbs {
+            @media screen and(max-width:576px) {
+                display: none;
+            }
+        }
+        #thumbs .item {
+            background: #c9c9c9;
+            height: 70px;
+            line-height: 70px;
+            padding: 0px;
+            margin: 2px;
+            color: #fff;
+            border-radius: 3px;
+            text-align: center;
+            cursor: pointer;
+        }
+        #thumbs .item h1 {
+            font-size: 18px;
+        }
+        .owl-theme .owl-nav [class*="owl-"] {
+            -webkit-transition: all 0.3s ease;
+            transition: all 0.3s ease;
+        }
+        .owl-theme .owl-nav [class*="owl-"].disabled:hover {
+            background-color: #d6d6d6;
+        }
+        #big.owl-theme {
+            position: relative;
+        }
+        #big.owl-theme .owl-next,
+        #big.owl-theme .owl-prev {
+            background: transparent;
+            width: 22px;
+            line-height: 40px;
+            height: 40px;
+            margin-top: -20px;
+            position: absolute;
+            text-align: center;
+            top: 50%;
+        }
+        #big.owl-theme .owl-prev {
+            left: 10px;
+        }
+        #big.owl-theme .owl-next {
+            right: 10px;
+        }
+    }
+}
+.demo_h {
+    text-align: center;
+    font-size: 60px;
+    font-weight: 700;
+    color: $color-brand;
+    text-transform: uppercase;
+    padding-bottom: 30px;
+    @media screen and(max-width:768px) {
+        font-size: 30px;
+    }
+}

theme_xtream/static/src/scss/pages/_shop.scss

@@ -0,0 +1,333 @@
+.Shop_product {
+    margin-top: 90px;
+    .main {
+        padding-top: 30px;
+        margin: auto;
+        h2 {
+            text-align: center;
+            font-size: 60px;
+            font-weight: 700;
+            color: $color-brand;
+            text-transform: uppercase;
+            padding-bottom: 30px;
+            @media screen and(max-width:768px) {
+                font-size: 30px;
+            }
+        }
+        .categories {
+            display: flex;
+            justify-content: center;
+            @media screen and(max-width:768px) {
+                display: block;
+            }
+        }
+    }
+    h1 {
+        font-size: 50px;
+        word-break: break-all;
+    }
+    .row {
+        margin: 10px -16px;
+    }
+    /* Add padding BETWEEN each column */
+    .row,
+    .row > .column {
+        padding: 8px;
+    }
+    /* Create three equal columns that floats next to each other */
+    .column {
+        float: left;
+        width: 33.33%;
+        display: none; /* Hide all elements by default */
+    }
+    /* Clear floats after rows */
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    /* Content */
+    .content {
+        padding: 50px 0;
+        .img_zoom {
+            overflow: hidden;
+        }
+        .wrapper {
+            max-width: 330px;
+            position: relative;
+            &:hover {
+                .img_details {
+                    position: absolute;
+                    left: 44%;
+                    display: block;
+                    bottom: 45%;
+                    z-index: 3;
+                    @media screen and(max-width:992px) {
+                        left: 35%;
+                        bottom: 43%;
+                    }
+                    @media screen and(max-width:992px) {
+                        left: 44%;
+                        bottom: 43%;
+                    }
+                    i {
+                        font-size: 25px;
+                        color: $color-white;
+                        padding: 4px 2px;
+                        @media screen and(max-width:992px) {
+                            font-size: 12px;
+                        }
+                    }
+                }
+                &:after {
+                    position: absolute;
+                    content: " ";
+                    height: 100%;
+                    width: 100%;
+                    top: 0;
+                    left: 0;
+                    background: #00000054 !important;
+                }
+            }
+            &:before {
+                position: absolute;
+                content: " ";
+                display: block;
+                top: 50%;
+                left: 50%;
+            }
+            @media screen and(max-width:576px) {
+                max-width: none;
+            }
+            .img_details {
+                display: none;
+            }
+            img {
+                width: 100%;
+            }
+        }
+        p {
+            color: $color-font;
+            font-size: 25px;
+            font-weight: lighter;
+            margin-top: 20px;
+            margin-bottom: 5px;
+        }
+        h6 {
+            color: $color-brand;
+            line-height: 1.5;
+            font-weight: 400;
+            font-size: 15px;
+            letter-spacing: 1px;
+            margin-bottom: 40px;
+        }
+        a {
+            font-size: 13px;
+            font-weight: 700;
+            color: $color-brand2;
+            text-decoration: none;
+            &:hover {
+                color: $color-brand;
+            }
+        }
+        #zoomIn {
+            transform: scale(1);
+            transition: 0.3s ease-in-out;
+            &:hover {
+                transform: scale(1.3);
+                border-radius: 6px 6px 0px 0px;
+            }
+        }
+    }
+    /* The "show" class is added to the filtered elements */
+    .show {
+        display: block;
+    }
+    /* Style the buttons */
+    .btn {
+        border: none;
+        outline: none;
+        padding: 12px 16px;
+        background-color: white;
+        cursor: pointer;
+        color: $color-font;
+        font-weight: 700;
+    }
+    .btn:hover {
+        background-color: #ddd;
+    }
+    .btn.active {
+        color: $color-brand;
+    }
+    .modal-content {
+        position: relative;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        width: 100%;
+        pointer-events: auto;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 0;
+        outline: 0;
+        margin: auto;
+        @media screen and(max-width:768px) {
+            margin: auto;
+            max-width: 65%;
+        }
+        @media screen and(max-width:576px) {
+            margin: auto;
+            max-width: 80%;
+        }
+    }
+    .modal-dialog {
+        max-width: 660px;
+        margin: 1.75rem auto;
+        @media screen and(max-width:768px) {
+            margin: 50px 50px;
+        }
+    }
+    .modal {
+        .model-body {
+            padding: 20px 25px;
+        }
+        .wrapper {
+            max-width: 100% !important;
+            img {
+                width: 100%;
+            }
+        }
+        .model_details {
+            h4 {
+                color: $color-brand;
+                font-size: 22px;
+                font-weight: 700;
+                padding-bottom: 10px;
+            }
+            .model_rate {
+                ul {
+                    padding-left: 0;
+                    display: flex;
+                    span {
+                        color: #ffcd07;
+                    }
+                }
+            }
+            .price {
+                color: $color-brand;
+                font-size: 20px;
+                font-weight: 700;
+                span {
+                    margin-left: 5px;
+                    font-weight: 700;
+                    font-size: 16;
+                    color: $color-grey;
+                    text-decoration: line-through;
+                }
+            }
+            p {
+                color: $color-brand;
+                line-height: 24px;
+            }
+            a {
+                text-decoration: underline;
+            }
+            .product_count {
+                margin-top: 30px;
+                display: flex;
+                @media screen and(max-width:412px) {
+                    display: grid !important;
+                    grid-row-gap: 20px !important;
+                }
+                #myform {
+                    margin-right: 10px;
+                    text-align: center;
+                    // padding: 5px;
+                    // border: 1px solid #ccc;
+                    display: flex;
+                    // margin: 2%;
+                    // border-radius: 9px;
+                    width: 100px;
+                }
+                .qty {
+                    width: 40px;
+                    height: 25px;
+                    text-align: center;
+                    border: none;
+                }
+                input.qtyplus {
+                    width: 25px;
+                    height: 25px;
+                    background-color: transparent;
+                    border: none;
+                }
+                input.qtyminus {
+                    width: 25px;
+                    height: 25px;
+                    background-color: transparent;
+                    border: none;
+                }
+                .icons {
+                    margin-left: 15px;
+                    span {
+                        background: $color-brand2;
+                        color: $color-white;
+                        font-size: 16px;
+                        padding: 9px 10px;
+                        &:hover {
+                            background-color: $color-black;
+                        }
+                        &:last-child {
+                            background-color: #00bcd4 !important;
+                            margin-left: 15px;
+                        }
+                    }
+                }
+            }
+            .share {
+                font-size: 14px;
+                font-weight: 400;
+                padding-top: 20px;
+            }
+            .footer_icon {
+                padding-top: 5px;
+                a {
+                    color: $color-font;
+                    margin-right: 15px;
+                    &:hover {
+                        color: $color-black;
+                    }
+                }
+            }
+        }
+    }
+}
+.shop_pagination_area {
+    .pagination {
+        .page-item.active .page-link {
+            color: $color-brand2;
+            background-color: transparent;
+            border-color: $color-brand2;
+        }
+        .page-item {
+            .page-link {
+                color: $color-font;
+                color: $color-font;
+                border: 0;
+                font-size: 22px;
+                font-weight: 600;
+                border: 2px solid;
+                margin-left: 10px;
+                border-radius: 0;
+                border-color: $color-font;
+                box-shadow: none;
+                &:hover {
+                    color: $color-brand2;
+                    border-color: $color-brand2 !important;
+                }
+            }
+        }
+    }
+}

theme_xtream/static/src/scss/pages/home/_amazing.scss

@@ -0,0 +1,56 @@
+.amazing {
+    margin-top: 20px;
+    .amazing_bg {
+        background-image: url(./../img/bg-img/bg-5.jpg);
+        padding-top: 100px;
+        background-size: cover;
+        width: 100%;
+        background-position: center top;
+        background-size: cover;
+        @media screen and(max-width: 768px) {
+            padding-bottom: 50px;
+            padding-top: 50px;
+        }
+        .amazing_content {
+            margin: 100px 0;
+            margin-left: auto;
+            background-color: $color-transp;
+            padding: 50px 50px;
+            float: right;
+            color: $color-white;
+            @media screen and(max-width:768px) {
+                float: none;
+                margin: auto;
+            }
+        }
+        h2 {
+            font-size: 55px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            @media screen and(max-width:768px) {
+                font-size: 30px;
+            }
+        }
+        p {
+            padding-bottom: 10px;
+            font-size: 15px;
+            font-weight: 700;
+        }
+        .rate {
+            span {
+                color: $color-white;
+                font-size: 30px;
+                font-weight: 500;
+                text-decoration: line-through;
+                &:last-child {
+                    color: $color-brand2;
+                    font-size: 35px;
+                    margin-left: 10px;
+                    font-weight: 600;
+                    text-decoration: none;
+                }
+            }
+            margin-bottom: 20px;
+        }
+    }
+}

theme_xtream/static/src/scss/pages/home/_discount.scss

@@ -0,0 +1,61 @@
+.discount {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    @media screen and(max-width:992px) {
+        grid-template-columns: 1fr;
+    }
+    .dicount_content1 {
+        text-align: center;
+        color: $color-white;
+        background-color: $color-font;
+        padding: 40px 15px;
+        h4 {
+            font-size: 25px;
+            font-weight: 700;
+            @media screen and(max-width:992px) {
+                font-size: 22px;
+            }
+        }
+        a {
+            color: $color-white;
+            font-size: 14px;
+            text-decoration: none;
+            font-weight: 700;
+            &:hover {
+                color: $color-brand;
+            }
+        }
+    }
+    .dicount_content2 {
+        text-align: center;
+        color: $color-white;
+        background-color: $color-brand2;
+        padding: 40px 15px;
+        h4 {
+            font-size: 25px;
+            font-weight: 700;
+        }
+        p {
+            color: $color-white;
+            font-size: 14px;
+            text-decoration: none;
+            font-weight: 700;
+        }
+    }
+    .dicount_content3 {
+        text-align: center;
+        color: $color-white;
+        background-color: $color-brand;
+        padding: 40px 15px;
+        h4 {
+            font-size: 25px;
+            font-weight: 700;
+        }
+        p {
+            color: $color-white;
+            font-size: 14px;
+            text-decoration: none;
+            font-weight: 700;
+        }
+    }
+}

theme_xtream/static/src/scss/pages/home/_home.scss

@@ -0,0 +1,23 @@
+@import './main-product';
+@import './amazing';
+@import './testmonial';
+@import './discount';
+
+
+
+
+
+
+
+
+
+// .body_section{
+//     background-color: $color-white !important;
+
+//     position: relative;
+//     margin-bottom: 230px;
+// @media screen and(max-width:992px) {
+//     margin-bottom: 400px;
+// }
+    
+// }

theme_xtream/static/src/scss/pages/home/_main-product.scss

@@ -0,0 +1,98 @@
+.main_product {
+    .wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        @media screen and(max-width:768px) {
+            grid-template-columns: 1fr;
+        }
+        .main_left {
+            position: relative;
+            background-size: cover;
+            width: 100%;
+            background-repeat: no-repeat;
+            &:hover {
+                -webkit-transition: 0.5s;
+                transition: 0.5s;
+                &:after {
+                    position: absolute;
+                    content: " ";
+                    height: 100%;
+                    width: 100%;
+                    top: 0;
+                    left: 0;
+                    background: #7bf09885 !important;
+                }
+            }
+            .card {
+                background: transparent;
+                padding-top: 112px;
+                padding-bottom: 100px;
+                border: none !important;
+                margin-left: 65px;
+                z-index: 3;
+                @media screen and(max-width:768px) {
+                    padding-top: 100px;
+                }
+                .card-title {
+                    color: $color-white;
+                    font-size: 5vw;
+                    font-weight: bold;
+                    padding-bottom: 20px;
+                    text-transform: uppercase;
+                    @media screen and(max-width:768px) {
+                        font-size: 30px !important;
+                    }
+                }
+                .card-text {
+                    color: $color-white;
+                    font-weight: 700;
+                    font-size: 15px;
+                }
+            }
+        }
+        .main_right {
+            background-size: cover;
+            width: 100%;
+            background-repeat: no-repeat;
+            position: relative;
+            &:hover {
+                &:after {
+                    position: absolute;
+                    content: " ";
+                    height: 100%;
+                    width: 100%;
+                    top: 0;
+                    left: 0;
+                    background: #7bf09885 !important;
+                }
+            }
+            .card {
+                background: transparent;
+                padding-top: 112px;
+                padding-bottom: 100px;
+                border: none !important;
+                margin-left: 65px;
+                z-index: 3;
+                @media screen and(max-width:768px) {
+                    padding-top: 100px;
+                    padding-bottom: 100px;
+                }
+                .card-title {
+                    color: $color-white;
+                    font-size: 5vw;
+                    font-weight: bold;
+                    padding-bottom: 20px;
+                    text-transform: uppercase;
+                    @media screen and(max-width:768px) {
+                        font-size: 30px !important;
+                    }
+                }
+                .card-text {
+                    color: $color-white;
+                    font-weight: 700;
+                    font-size: 15px;
+                }
+            }
+        }
+    }
+}

theme_xtream/static/src/scss/pages/home/_testmonial.scss

@@ -0,0 +1,104 @@
+.testiomonial {
+    margin-top: 90px;
+    .wrapper {
+        position: relative;
+        h2 {
+            text-align: center;
+            font-size: 60px;
+            font-weight: 700;
+            color: $color-brand;
+            text-transform: uppercase;
+            padding-bottom: 30px;
+            @media screen and(max-width:768px) {
+                font-size: 30px;
+            }
+        }
+        .testimonial_content {
+            padding: 0px 111px;
+            padding-top: 30px;
+            @media screen and(max-width:992px) {
+                padding-left: 0;
+                padding-right: 0;
+            }
+            span {
+                color: $color-brand2;
+                font-size: 30px;
+                text-align: center;
+                justify-content: center;
+                display: flex;
+            }
+            .pp {
+                margin: 40px 0;
+                font-size: 17px;
+                line-height: 2;
+                font-weight: 700;
+                color: $color-font;
+                text-align: center;
+                padding: 0 100px;
+                @media screen and(max-width:768px) {
+                    padding: 0 50px;
+                }
+            }
+            .img_test {
+                padding-top: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .wrapper {
+                    max-width: 75px;
+                    img {
+                        width: 100%;
+                        border-radius: 50%;
+                    }
+                }
+                .name {
+                    margin-left: 20px;
+                    p {
+                        color: $color-brand;
+                        font-size: 18px;
+                        font-weight: 700;
+                        margin: 0;
+                    }
+                    span {
+                        color: $color-brand2;
+                        font-size: 16px;
+                        font-weight: 700;
+                    }
+                }
+            }
+        }
+    }
+    .owl-carousel button.owl-dot span {
+        height: 10px;
+        width: 10px;
+        border: 1px solid !important;
+        border-color: $color-font !important;
+        color: $color-white;
+        // background-color: $color-brand2 !important;
+        border-radius: 50%;
+        display: block;
+        font-weight: 700;
+        margin: 5px;
+    }
+    .owl-carousel button.owl-dot.active span {
+        background-color: $color-brand2 !important;
+    }
+    .owl-carousel {
+        .owl-dots {
+            position: absolute;
+            bottom: 165px;
+            left: 0px !important;
+            transform: rotate(90deg);
+            background-color: transparent;
+            @media screen and(max-width:1000px) {
+                left: 150px;
+            }
+            @media screen and(max-width:768px) {
+                left: 100px;
+            }
+            @media screen and(max-width:600px) {
+                left: 75px;
+            }
+        }
+    }
+}

theme_xtream/static/src/scss/style.scss

@@ -0,0 +1,15 @@
+//Google font
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;500;600;700;800;900;1000&family=Roboto&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');
+
+
+//Global
+
+@import './variables';
+@import './normalize';
+@import './common';
+@import './components/components';
+@import './layout/layouts';
+@import './pages/pages';

theme_xtream/views/contact_us_templates.xml

@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <!-- To inherit contact us page -->
+    <template id="xtream_contact_us" name="Xtream Contact Us" inherit_id="website.contactus">
+        <xpath expr="//div[hasclass('oe_structure')]" position="replace">
+            <div class="oe_structure"/>
+        </xpath>
+        <xpath expr="//div[hasclass('oe_structure')]" position="after">
+            <div id="wrap" class="oe_structure oe_empty">
+                <div class="container mt-4 mb-5">
+                    <div class="row">
+                        <div class="col" style="margin-right: 42%;">
+                            <div id="contactus_section" style="margin-top: 14px;">
+                                <section class="s_website_form">
+                                    <div class="container">
+                                        <section class="body_section">
+                                            <!-- Contact section starts here -->
+                                            <section class="contact">
+                                                <div class="container">
+                                                    <div class="row">
+                                                        <div class="col-lg-8 col-12">
+                                                            <div class="contact_left">
+                                                                <div class="name">
+                                                                    <h3>Get in touch</h3>
+                                                                    <form id="contactus_form"
+                                                                          t-ignore="true"
+                                                                          action="/website/form/"
+                                                                          method="post"
+                                                                          data-model_name="mail.mail"
+                                                                          enctype="multipart/form-data"
+                                                                          data-success_page="/contactus-thank-you"
+                                                                          class="contact-form"
+                                                                          style="width: 350%;">
+                                                                        <div class="row">
+                                                                            <div class="form-group row form-field o_website_form_custom o_website_form_required_custom">
+                                                                                <div class="col-sm-12">
+                                                                                    <div class="input-block">
+                                                                                        <label for="Name">
+                                                                                            Your
+                                                                                            Name
+                                                                                        </label>
+                                                                                        <input type="text"
+                                                                                               class="form-control o_website_form_input"
+                                                                                               name="Name"
+                                                                                               required=""/>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="form-group row form-field o_website_form_custom">
+                                                                                <div class="col-sm-12">
+                                                                                    <div class="input-block">
+                                                                                        <label for="Phone">
+                                                                                            Phone
+                                                                                            Number
+                                                                                        </label>
+                                                                                        <input type="tel"
+                                                                                               class="form-control o_website_form_input"
+                                                                                               name="Phone"/>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="form-group row form-field o_website_form_required_custom">
+                                                                                <div class="col-sm-12">
+                                                                                    <div class="input-block">
+                                                                                        <label for="email_from">
+                                                                                            Email
+                                                                                        </label>
+                                                                                        <input type="email"
+                                                                                               class="form-control o_website_form_input"
+                                                                                               name="email_from"
+                                                                                               required=""/>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="form-group row form-field o_website_form_custom">
+                                                                                <div class="col-sm-12">
+                                                                                    <div class="input-block">
+                                                                                        <label for="Partner Name">
+                                                                                            Your Company
+                                                                                        </label>
+                                                                                        <input type="text"
+                                                                                               class="form-control o_website_form_input"
+                                                                                               name="Partner Name"/>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="form-group row form-field o_website_form_required_custom">
+                                                                                <div class="col-sm-12">
+                                                                                    <div class="input-block">
+                                                                                        <label for="subject">
+                                                                                            Subject
+                                                                                        </label>
+                                                                                        <input type="text"
+                                                                                               class="form-control o_website_form_input"
+                                                                                               name="subject"
+                                                                                               required=""/>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="form-group row form-field o_website_form_custom o_website_form_required_custom">
+                                                                                <div class="col-sm-12">
+                                                                                    <div class="input-block textarea">
+                                                                                        <label for="Description">
+                                                                                            Your Question
+                                                                                        </label>
+                                                                                        <textarea rows="3"
+                                                                                                  type="text"
+                                                                                                  class="form-control o_website_form_input"
+                                                                                                  name="Description"
+                                                                                                  required=""/>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="form-group row form-field d-none">
+                                                                                <div class="col-lg-3 col-md-4">
+                                                                                    <label class="col-form-label"
+                                                                                           for="email_to">
+                                                                                        Email To
+                                                                                    </label>
+                                                                                </div>
+                                                                                <div class="col-lg-7 col-md-8">
+                                                                                    <input type="hidden"
+                                                                                           class="form-control o_website_form_input"
+                                                                                           name="email_to"
+                                                                                           t-att-value="res_company.email"/>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="col-sm-12">
+                                                                                <a href="#"
+                                                                                   class="btn btn-contact btn-lg o_website_form_send">
+                                                                                    Send message
+                                                                                </a>
+                                                                                <span id="o_website_form_result"/>
+                                                                            </div>
+                                                                        </div>
+                                                                    </form>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </section>
+                                        </section>
+                                    </div>
+                                </section>
+                            </div>
+                        </div>
+                        <div class="col">
+                        <section class="body_section">
+                            <div class="row">
+                                <section class="contact">
+                                    <div class="contact_right">
+                                        <br/>
+                                        <div class="wrapper">
+                                            <div class="c_info">
+                                                <h3>marketing</h3>
+                                                <div class="phone">
+                                                    <p>
+                                                        <span>Phone:</span>
+                                                        <a href="tel:+6494461709">+6494461709</a>
+                                                    </p>
+                                                    <p>
+                                                        <span>Mail:</span>
+                                                        <a href="mailto:info@xtream.com">
+                                                            info@xtream.com
+                                                        </a>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div class="c_info">
+                                                <h3>Shipping &amp; Returns</h3>
+                                                <div class="phone">
+                                                    <p>
+                                                        <span>Phone:</span>
+                                                        <a href="tel:+6494461709">+6494461709</a>
+                                                    </p>
+                                                    <p>
+                                                        <span>Mail:</span>
+                                                        <a href="mailto:info@xtream.com">
+                                                            info@xtream.com
+                                                        </a>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div class="c_info">
+                                                <h3>Information</h3>
+                                                <div class="phone">
+                                                    <address itemscope="itemscope"
+                                                             itemtype="http://schema.org/Organization">
+                                                        <!-- TODO widget contact must add itemprop attributes -->
+                                                        <div t-field="res_company.partner_id" t-options='{
+                                                        "widget": "contact",
+                                                        "fields": ["name", "address", "phone", "mobile", "email"]}'/>
+                                                        <t t-if="not res_company.google_map_img()">
+                                                            <span class="fa fa-map-marker fa-fw mt16" role="img"
+                                                                  aria-label="Address" title="Address"/>
+                                                            <a t-att-href="res_company.google_map_link()"
+                                                               target="_BLANK">Google Maps
+                                                            </a>
+                                                        </t>
+                                                    </address>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </section>
+                            </div>
+                        </section>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </xpath>
+    </template>
+</odoo>

theme_xtream/views/footer_templates.xml

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- To inherit footer -->
+    <template id="theme_xtream_footer" inherit_id="website.layout" name="Xtream Footer">
+        <xpath expr="//div[@id='footer']" position="replace">
+            <section class="body_section">
+                <section class="card-footer">
+                    <div class="footer_content">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-lg-3 col-12">
+                                    <div class="wrapper_head">
+                                        <a href="#">
+                                            <div class="heading">
+                                                XTREAM
+                                                <p>FASHION</p>
+                                            </div>
+                                        </a>
+                                        <div class="made_by">
+                                            Copyright ©2024 All rights reserved | This template is made
+                                            with <span class="fa fa-heart"/> by <a href="#" class="cybro">Cybrosys</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-2 col-md-2 col-12">
+                                    <div class="footer_links">
+                                        <ul>
+                                            <li class="scale-up-ver-center"><a href="#">About</a></li>
+                                            <li class="scale-up-ver-center"><a href="#">Blog</a></li>
+                                            <li class="scale-up-ver-center"><a href="#">Faq</a></li>
+                                            <li class="scale-up-ver-center"><a href="#">Returns</a></li>
+                                            <li class="scale-up-ver-center"><a href="/contactus">Contacts</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div class="col-lg-2 col-md-2 col-12">
+                                    <div class="footer_links">
+                                        <ul>
+                                            <li class="scale-up-ver-center"><a href="/my/home">My Account</a></li>
+                                            <li class="scale-up-ver-center"><a href="/shop/payment">Shipping</a></li>
+                                            <li class="scale-up-ver-center"><a href="#">Our Policies</a></li>
+                                            <li class="scale-up-ver-center"><a href="#">Afiliates</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div class="col-lg-5  col-12">
+                                    <div class="subscribe">
+                                        <h4>Subscribe to our newsletter</h4>
+                                        <div class="input-group md-form form-sm form-2 ">
+                                            <input class="form-control  red-border" type="text" placeholder="Your email here"
+                                                   aria-label="Your_email_here"/>
+                                            <div class="input-group-append" style="cursor: pointer;">
+                                                <span class="input-group-text" id="basic-text1">SUBSCRIBE</span>
+                                            </div>
+                                        </div>
+                                        <p class='warning' style='color: red; display: none;'/>
+                                    </div>
+                                    <div class="footer_icon">
+                                        <a href="#"><span class="fa fa-pinterest"/></a>
+                                        <a href="#"><span class="fa fa-linkedin"/></a>
+                                        <a href="#"><span class="fa fa-facebook"/></a>
+                                        <a href="#"><span class="fa fa-twitter"/></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </section>
+        </xpath>
+    </template>
+</odoo>

theme_xtream/views/header_templates.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- To inherit header -->
+    <template id="xtream_header0" inherit_id="website.template_header_default">
+        <xpath expr="//t[@t-call='website.placeholder_header_text_element']" position="replace">
+        </xpath>
+        <xpath expr="//t[@t-call='website.placeholder_header_call_to_action']" position="replace">
+            <div class="help-line text-center">
+                <a href="tel:+346573556778"><i class="fa fa-headphones">/</i> +34 657 3556 778</a>
+            </div>
+        </xpath>
+    </template>
+    <!-- To inherit cart -->
+    <template id="xtream_cart" inherit_id="website_sale.header_cart_link">
+        <xpath expr="//i[@t-if='_icon']" position="replace">
+            <i t-if="_icon" class="fa fa-shopping-bag"/>
+        </xpath>
+    </template>
+</odoo>

theme_xtream/views/layout_templates.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <template id="xtream_custom_layout" inherit_id="website.layout" name="Custom Layout">
+        <!-- Add an element after the top menu  -->
+        <xpath expr="//div[@id='wrapwrap']/main" position="after">
+            <html lang="en">
+                <head>
+                    <meta charset="UTF-8"/>
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+                    <title>Xtream</title>
+                    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&amp;display=swap" rel="stylesheet"/>
+                    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+                </head>
+                <body>
+                </body>
+            </html>
+        </xpath>
+    </template>
+</odoo>

theme_xtream/views/shop_templates.xml

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- To inherit products page -->
+    <template id="xtream_products" name="Xtream Products" inherit_id="website_sale.products">
+        <xpath expr="//div[hasclass('products_header')]/t[@t-call='website_sale.pricelist_list']" position="after">
+            <div class="products_pager ml-3 mb-2">
+                <t t-call="website.pager"/>
+            </div>
+        </xpath>
+    </template>
+    <!-- To inherit sort list -->
+    <template id="xtream_sort_oo" name="Xtream Sort List" inherit_id="website_sale.sort">
+        <xpath expr="//div[contains(@t-attf-class, 'o_sortby_dropdown')]" position="replace">
+            <div class="o_sortby_dropdown dropdown dropdown_sorty_by ml-3 pb-2">
+                <a role="button" href="#" class="dropdown-toggle btn btn-secondary align-baseline"
+                   data-bs-toggle="dropdown">
+                    <span class="d-none d-lg-inline">
+                        <t t-if='website_sale_sortable_current'>
+                            <t t-esc="website_sale_sortable_current[0][0]"/>
+                        </t>
+                    </span>
+                    <i class="fa fa-sort-amount-asc d-lg-none"/>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" role="menu">
+                    <t t-foreach="website_sale_sortable" t-as="sortby">
+                        <a role="menuitem" rel="noindex,nofollow" t-att-href="keep('/shop', order=sortby[0])"
+                           class="dropdown-item">
+                            <span t-out="sortby[1]"/>
+                        </a>
+                    </t>
+                </div>
+            </div>
+        </xpath>
+    </template>
+    <!-- To inherit add to cart -->
+    <template id="xtream_products_add_to_cart" name="Xtream Attributes"
+              inherit_id="website_sale.products_add_to_cart">
+        <xpath expr="//a[@t-if='product._website_show_quick_add()']" position="replace">
+            <a t-if="product._website_show_quick_add()"
+                   href="#" role="button" class="btn btn-primary a-submit" style="padding: 0.375rem 1rem;" aria-label="Shopping cart" title="Shopping cart">
+                    <span class="fa fa-shopping-cart"/>
+                </a>
+        </xpath>
+    </template>
+</odoo>

theme_xtream/views/snippets/amazing.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Template for banner snippet -->
+    <template id="s_amazing" name="Amazing Banner">
+        <section class="body_section">
+            <section class="amazing">
+                <section class="amazing_bg" style="background-image: url(/theme_xtream/static/src/img/bg-img/bg-5.jpg);">
+                    <div class="container">
+                        <div class="row">
+                            <div class="amazing_content">
+                                <h2>BLACK BOOTS</h2>
+                                <p>
+                                    * Free shipping until 25 Dec 2017
+                                </p>
+                                <div class="rate">
+                                    <span>$25.90</span>
+                                    <span>
+                                        $15.90
+                                    </span>
+                                </div>
+                                <a href="/shop" class="btn btn-primary" id="special">SHOP NOW</a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </section>
+        </section>
+    </template>
+</odoo>

theme_xtream/views/snippets/discount.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Template for discount snippet -->
+    <template id="s_discount" name="Discounts">
+        <section class="body_section">
+            <section class="discount">
+                <div class="dicount_content1">
+                    <h4>Free Shipping &amp; Returns</h4>
+                    <a href="/shop">Buy now</a>
+                </div>
+                <div class="dicount_content2">
+                    <h4>20% Discount for all dresses</h4>
+                    <p>USE CODE: Cybro</p>
+                </div>
+                <div class="dicount_content3">
+                    <h4>20% Discount for dresses</h4>
+                    <p>USE CODE: Cybro</p>
+                </div>
+            </section>
+        </section>
+    </template>
+</odoo>