Dec 5: [ADD] Initial Commit 'theme_xtream'

theme_xtream/__init__.py

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

theme_xtream/__manifest__.py

@@ -0,0 +1,73 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2022-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': '16.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'],
+    'data': [
+        'views/categories.xml',
+        'views/clear_cart.xml',
+        'views/contact_us.xml',
+        'views/footer.xml',
+        'views/header.xml',
+        'views/layout.xml',
+        'views/price_filter.xml',
+        'views/shop1.xml',
+        'views/snippets/amazing.xml',
+        'views/snippets/arrivals_demo.xml',
+        'views/snippets/new_arrivals.xml',
+        'views/snippets/discount.xml',
+        'views/snippets/main_banner.xml',
+        'views/snippets/main_product.xml',
+        'views/snippets/map.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/custom.js',
+          '/theme_xtream/static/src/js/new_arrivals.js',
+          '/theme_xtream/static/src/js/owl.carousel.js',
+          '/theme_xtream/static/src/js/owl.carousel.min.js',
+          '/theme_xtream/static/src/js/price_filter.js',
+          '/theme_xtream/static/src/js/clear_cart.js',
+      ]
+    },
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': True,
+    'auto_install': False,
+}

theme_xtream/controllers/__init__.py

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

theme_xtream/controllers/main.py

@@ -0,0 +1,53 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2022-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 werkzeug.exceptions import NotFound
+from odoo.addons.http_routing.models.ir_http import slug
+from odoo.addons.website.controllers.main import QueryURL
+from odoo.addons.website_sale.controllers.main import TableCompute, WebsiteSale
+from odoo import http, fields
+from odoo.http import request
+
+
+class ClearCart(http.Controller):
+
+    @http.route(['/shop/clear_cart'], type='json', auth="public", methods=['POST'], website=True)
+    def clear_cart(self):
+        order = request.website.sale_get_order(force_create=1)
+        order_line = request.env['sale.order.line'].sudo()
+        line_ids = order_line.search([('order_id', '=', order.id)])
+        for line in line_ids:
+            line_obj = order_line.browse([int(line)])
+            if line_obj:
+                line_obj.unlink()
+
+
+class WebsiteProduct(http.Controller):
+
+    @http.route('/get_arrival_product', auth="public", type='json', website=True)
+    def get_arrival_product(self):
+        product_ids = request.env['product.template'].sudo().search([('website_published', '=', True)],
+                                                                    order='create_date desc', limit=6)
+
+        values = {'product_ids': product_ids}
+        response = http.Response(template='theme_xtream.new_arrivals', qcontext=values)
+        return response.render()

theme_xtream/models/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2022-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/models/theme_xtream.py

@@ -0,0 +1,35 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2022-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 models
+
+
+class ThemeXtream(models.AbstractModel):
+    _inherit = 'theme.utils'
+
+    def _theme_xtream_post_copy(self, mod):
+        pass
+
+        # self.enable_view('website.template_header_slogan')
+        # self.disable_view('website.template_header_default')
+        # self.disable_view('website.template_header_slogan_oe_structure_header_slogan_1')
+

theme_xtream/static/description/index.html

@@ -0,0 +1,226 @@
+<!-- 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.png" 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, custom categories view, product view, contact us page...etc. it contains price
+                filter and
+                clear cart options by default.
+            </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.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">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.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">Contact Map</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.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">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/clear_cart.js

@@ -0,0 +1,16 @@
+odoo.define('theme_xtream.clear_cart', function (require) {
+	"use strict";
+
+	require('web.dom_ready');
+	var ajax = require('web.ajax');
+    $(document).ready(function(){
+        $("body").on('click','#clear_cart_button',function (ev){
+            ev.preventDefault();
+            ajax.jsonRpc("/shop/clear_cart", 'call', {}).then(function(data){
+                location.reload();
+                return;
+            });
+        return false;
+        });
+    });
+})

theme_xtream/static/src/js/custom.js

@@ -0,0 +1,124 @@
+    filterSelection("all")
+
+    function filterSelection(c) {
+        var x, i;
+        x = document.getElementsByClassName("column");
+        if (c == "all") c = "";
+        for (i = 0; i < x.length; i++) {
+            w3RemoveClass(x[i], "show");
+            if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+        }
+    }
+
+    function w3AddClass(element, name) {
+        var i, arr1, arr2;
+        arr1 = element.className.split(" ");
+        arr2 = name.split(" ");
+        for (i = 0; i < arr2.length; i++) {
+            if (arr1.indexOf(arr2[i]) == -1) { element.className += " " + arr2[i]; }
+        }
+    }
+
+    function w3RemoveClass(element, name) {
+        var i, arr1, arr2;
+        arr1 = element.className.split(" ");
+        arr2 = name.split(" ");
+        for (i = 0; i < arr2.length; i++) {
+            while (arr1.indexOf(arr2[i]) > -1) {
+                arr1.splice(arr1.indexOf(arr2[i]), 1);
+            }
+        }
+        element.className = arr1.join(" ");
+    }
+
+
+    jQuery(document).ready(function () {
+        // This button will increment the value
+        $('.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);
+            }
+        });
+    });
+
+    $(document).ready(function () {
+        $("#slider").owlCarousel(
+            {
+                // animateOut: 'slideOutDown',
+                // animateIn: 'flipInX',
+                items: 1,
+                loop: true,
+                // margin: 30,
+                // stagePadding: 30,
+                smartSpeed: 450,
+                autoplay: true,
+                autoPlaySpeed: 1000,
+                autoPlayTimeout: 1000,
+                autoplayHoverPause: true,
+                onInitialized: counter,
+                dots: true,
+            }
+        );
+    });
+
+    function counter() {
+        var buttons = $('.owl-dots button');
+        buttons.each(function (item) {
+//          $(item).find('span').index + 1;
+        });
+    }
+
+    $(document).ready(function () {
+        $("#slider2").owlCarousel(
+            {
+                // animateOut: 'slideOutDown',
+                // animateIn: 'flipInX',
+                items: 1,
+                loop: true,
+                // margin: 30,
+                // stagePadding: 30,
+                smartSpeed: 450,
+                autoplay: true,
+                autoPlaySpeed: 1000,
+                autoPlayTimeout: 1000,
+                autoplayHoverPause: true,
+                onInitialized: counter,
+                dots: true,
+            }
+        );
+    });
+
+    function counter() {
+        var buttons = $('.owl-dots button');
+        buttons.each(function (item) {
+            // $(item).find('span').text(index + 1);
+        });
+    }

theme_xtream/static/src/js/new_arrivals.js

@@ -0,0 +1,20 @@
+odoo.define('theme_xtream.new_arrivals', function(require){
+'use strict';
+
+var Animation = require('website.content.snippets.animation');
+
+var ajax = require('web.ajax');
+
+Animation.registry.arrival_product = Animation.Class.extend({
+    selector : '.arrivals',
+    start: function(){
+        var self = this;
+        ajax.jsonRpc('/get_arrival_product', 'call', {})
+        .then(function (data) {
+            if(data){
+                self.$target.empty().append(data);
+            }
+        });
+    }
+    });
+});

theme_xtream/static/src/js/price_filter.js

@@ -0,0 +1,25 @@
+odoo.define('theme_xtream.price_filter', function (require) {
+	"use strict";
+
+    $(document).on("click", "#products_grid_before .price_filter_button", function(event){
+        event.preventDefault();
+
+        var amounts = $("#amount").val().split("-");
+        var min = amounts[0];
+        var max = amounts[1];
+        var max_amount = 100000;
+
+        if ((min == max_amount) && (max == max_amount)) {
+          var minimum = $('#minimum').val(amounts[0]);
+          var maximum = $('#maximum').val(amounts[1]);
+        } else if (min == max_amount){
+          var minimum = $('#minimum').val(0);
+          var maximum = $('#maximum').val(max_amount);
+        } else {
+          var minimum = $('#minimum').val(amounts[0]);
+          var maximum = $('#maximum').val(amounts[1]);
+        }
+
+        $("#products_grid_before form.js_attributes").submit();
+    });
+})

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/assets.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data>
+<!--        <template id="theme_xtream_assets" inherit_id="website.assets_frontend">-->
+<!--            <xpath expr="//link[last()]" position="after">-->
+<!--                <link rel="stylesheet" type="text/css" href="/theme_xtream/static/src/css/animate.min.css"/>-->
+<!--                <link rel="stylesheet" type="text/css" href="/theme_xtream/static/src/css/owl.carousel.min.css"/>-->
+<!--                <link rel="stylesheet" type="text/css" href="/theme_xtream/static/src/css/owl.theme.default.min.css"/>-->
+<!--                <link rel="stylesheet" type="text/css" href="/theme_xtream/static/src/css/style.css"/>-->
+<!--            </xpath>-->
+<!--            <xpath expr="//script[last()]" position="after">-->
+<!--                <script type="text/javascript" src="/theme_xtream/static/src/js/custom.js"/>-->
+<!--                <script type="text/javascript" src="/theme_xtream/static/src/js/new_arrivals.js"/>-->
+<!--                <script type="text/javascript" src="/theme_xtream/static/src/js/owl.carousel.js"/>-->
+<!--                <script type="text/javascript" src="/theme_xtream/static/src/js/owl.carousel.min.js"/>-->
+<!--                <script type="text/javascript" src="/theme_xtream/static/src/js/price_filter.js"/>-->
+<!--            </xpath>-->
+            <xpath expr="." position="inside">
+                <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"/>
+            </xpath>
+<!--        </template>-->
+    </data>
+</odoo>

theme_xtream/views/categories.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data>
+        <template id="xtream_categories" name="Xtream Categories" inherit_id="website_sale.products_categories">
+            <xpath expr="//div[hasclass('collapse')]" position="replace">
+                <div class="sidebar">
+                    <div class="wrapper">
+                        <h5 class="Sidebar_head">
+                            Categories
+                        </h5>
+                        <div id="accordion">
+                            <div class="card">
+                                <div class="card-header" id="headingOne">
+                                    <h5 class="mb-0">
+                                        <button class="btn btn-link" data-bs-toggle="collapse"
+                                                data-bs-target="#collapseOne" aria-expanded="true"
+                                                aria-controls="collapseOne">
+                                            <div class="custom-control">
+                                                <label>Select Categories</label>
+                                            </div>
+                                        </button>
+                                    </h5>
+                                </div>
+                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                     data-parent="#accordion">
+                                    <div class="card-header">
+                                        <ul class="list-group list-group-flush">
+                                            <li class="nav-item">
+                                                <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'} o_not_editable">All Products</a>
+                                            </li>
+                                            <t t-foreach="categories" t-as="c">
+                                                <div class="custom-control">
+                                                    <t t-call="website_sale.categories_recursive"/>
+                                                </div>
+                                            </t>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+            <xpath expr="//button[@type='button']" position="replace"/>
+        </template>
+    </data>
+</odoo>

theme_xtream/views/clear_cart.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="website_sale_clear_cart" name="Clear Cart Options" inherit_id="website_sale.cart" customize_show="True">
+        <xpath expr="//a[@href='/shop']" position="after">
+            <t t-if="website_sale_order and website_sale_order.website_order_line">
+                <a href="" id="clear_cart_button" class="btn btn-secondary mb32">
+                    Clear Cart &#160; <span class="fa fa-trash-o"/> </a>
+            </t>
+            </xpath>
+    </template>
+    <template id="website_sale_clear_cart_popup" inherit_id="website_sale.cart_popover">
+        <xpath expr="//a[@href='/shop/cart']" position="before">
+            <t t-if="website_sale_order and website_sale_order.website_order_line">
+                <a href="" id="clear_cart_button" class="js_clear_cart btn btn-secondary">
+                    Clear Cart &#160; <span class="fa fa-trash-o"/> </a>
+            </t>
+        </xpath>
+    </template>
+<!--	<template id="cart_assets_frontend" inherit_id="web.assets_frontend">-->
+<!--		<xpath expr="." position="inside">-->
+<!--			<script type="text/javascript" src="/theme_xtream/static/src/js/clear_cart.js"/>-->
+<!--		</xpath>-->
+<!--	</template>-->
+</odoo>

theme_xtream/views/contact_us.xml

@@ -0,0 +1,384 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <data>
+        <template id="xtream_contact_us" name="Xtream Contact Us" inherit_id="website.contactus">
+            <!--            <xpath expr="//div[hasclass('oe_structure')]" position="replace"/>-->
+            <!--            <xpath expr="//section[hasclass('s_text_block')]" position="replace"/>-->
+            <xpath expr="//div[@id='wrap']" position="replace">
+
+                <!--                <div id="wrapwrap" class="   ">-->
+
+                <!--                    <main>-->
+                <div id="wrap">
+                    <div class="container mt-4 mb-5">
+                        <div class="row">
+                            <div class="col-lg-7 col-xl-6 mr-lg-auto">
+                                <!--                                        <div class="oe_structure"></div>-->
+                                <!--                                        <span class="hidden"></span>-->
+                                <div id="contactus_section">
+                                    <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>
+                                                                        <p>
+                                                                            Say hello
+                                                                        </p>
+                                                                        <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">
+                                                                            <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>
+
+                            <section class="body_section">
+                                <div class="row">
+                                    <section class="contact">
+                                        <div class="contact_right">
+                                            <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>
+                <!--                    </main>-->
+                <!--                </div>-->
+            </xpath>
+
+
+        </template>
+    </data>
+</odoo>
+
+        <!--col-lg-4-->
+
+
+        <!--<div id="wrap">-->
+        <!--<div class="container mt-4 mb-5">-->
+        <!--    <div class="row">-->
+        <!--        <div class="col-lg-7 col-xl-6 mr-lg-auto">-->
+        <!--            <div class="oe_structure" data-oe-model="ir.ui.view" data-oe-id="489" data-oe-field="arch"-->
+        <!--                 data-oe-xpath="/t[1]/t[1]/div[1]/div[1]/div[1]/div[1]/div[1]">-->
+        <!--            </div>-->
+        <!--            <span class="hidden" data-for="contactus_form" data-oe-id="1136" data-oe-xpath="/data/xpath/span"-->
+        <!--                  data-oe-model="ir.ui.view" data-oe-field="arch"-->
+        <!--                  data-values="{'email_to': 'info@yourcompany.com'}"></span>-->
+        <!--            <div id="contactus_section">-->
+        <!--                <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">-->
+
+        <!--                </section>-->
+        <!--            </div>-->
+        <!--        </div>-->
+
+        <!--    </div>-->
+        <!--</div>-->
+        <!--<div class="oe_structure mt-2" data-oe-model="ir.ui.view" data-oe-id="489" data-oe-field="arch"-->
+        <!--     data-oe-xpath="/t[1]/t[1]/div[1]/div[2]"></div>-->
+        <!--</div>-->
+
+
+        <!--<div id="wrapwrap" class="   ">-->
+
+        <!--<main>-->
+
+
+        <!--    <div id="wrap">-->
+        <!--        <div class="container mt-4 mb-5">-->
+        <!--            <div class="row">-->
+        <!--                <div class="col-lg-7 col-xl-6 mr-lg-auto">-->
+        <!--                    <div class="oe_structure" data-oe-model="ir.ui.view" data-oe-id="489" data-oe-field="arch"-->
+        <!--                         data-oe-xpath="/t[1]/t[1]/div[1]/div[1]/div[1]/div[1]/div[1]">-->
+        <!--                    </div>-->
+        <!--                    <span class="hidden" data-for="contactus_form" data-oe-id="1136" data-oe-xpath="/data/xpath/span"-->
+        <!--                          data-oe-model="ir.ui.view" data-oe-field="arch"-->
+        <!--                          data-values="{'email_to': 'info@yourcompany.com'}"></span>-->
+        <!--                    <div id="contactus_section">-->
+        <!--                        <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">-->
+        <!--                            <div class="container">-->
+        <!--                                <section class="body_section">-->
+
+        <!--                                    <section class="contact">-->
+        <!--                                        <div class="container">-->
+        <!--                                            <div class="row">-->
+        <!--                                                <div class="col-lg-8 col-12">-->
+        <!--                                                    <div class="contact_left">-->
+
+        <!--                                                    </div>-->
+        <!--                                                </div>-->
+        <!--                                            </div>-->
+        <!--                                        </div>-->
+        <!--                                    </section>-->
+        <!--                                </section>-->
+        <!--                            </div>-->
+        <!--                        </section>-->
+        <!--                    </div>-->
+        <!--                </div>-->
+
+
+        <!--                <div class="c_info" data-oe-model="ir.ui.view" data-oe-id="1365"-->
+        <!--                     data-oe-field="arch"-->
+        <!--                     data-oe-xpath="/data/xpath[3]/section/div[1]/section[1]/div[1]/div[1]/div[1]">-->
+
+        <!--                </div>-->
+        <!--                <div class="c_info" data-oe-model="ir.ui.view" data-oe-id="1365"-->
+        <!--                     data-oe-field="arch"-->
+        <!--                     data-oe-xpath="/data/xpath[3]/section/div[1]/section[1]/div[1]/div[1]/div[2]">-->
+
+        <!--                </div>-->
+        <!--                <div class="c_info">-->
+        <!--                    <h3 data-oe-model="ir.ui.view" data-oe-id="1365" data-oe-field="arch"-->
+        <!--                        data-oe-xpath="/data/xpath[3]/section/div[1]/section[1]/div[1]/div[1]/div[3]/h3[1]">-->
+        <!--                        Information-->
+        <!--                    </h3>-->
+        <!--                    <div class="phone">-->
+
+        <!--                        <address itemscope="itemscope" itemtype="http://schema.org/Organization">-->
+
+        <!--                            <div data-oe-model="res.company" data-oe-id="1"-->
+        <!--                                 data-oe-field="partner_id" data-oe-type="contact"-->
+        <!--                                 data-oe-expression="res_company.partner_id" data-oe-many2one-id="1"-->
+        <!--                                 data-oe-many2one-model="res.partner"-->
+        <!--                                 data-oe-contact-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;name&quot;, &quot;address&quot;, &quot;phone&quot;, &quot;mobile&quot;, &quot;email&quot;], &quot;tagName&quot;: &quot;div&quot;, &quot;expression&quot;: &quot;res_company.partner_id&quot;, &quot;type&quot;: &quot;contact&quot;, &quot;inherit_branding&quot;: true, &quot;translate&quot;: false}"-->
+        <!--                                 data-oe-field-xpath="/t[1]/address[1]/div[1]">-->
+        <!--                                <address class="mb-0" itemscope="itemscope"-->
+        <!--                                         itemtype="http://schema.org/Organization">-->
+
+
+        <!--                                    <div>-->
+
+        <!--                                        <span itemprop="name">YourCompany</span>-->
+
+
+        <!--                                    </div>-->
+
+
+        <!--                                    <div itemprop="address" itemscope="itemscope"-->
+        <!--                                         itemtype="http://schema.org/PostalAddress">-->
+        <!--                                        <div class="d-flex align-items-baseline">-->
+        <!--                                            <i class="fa fa-map-marker fa-fw" role="img"-->
+        <!--                                               aria-label="Address" title="Address"></i>-->
+        <!--                                            <span class="w-100 o_force_ltr d-block"-->
+        <!--                                                  itemprop="streetAddress">250 Executive Park Blvd,-->
+        <!--                                                Suite 3400<br>San Francisco 94134<br>California CA-->
+        <!--                                                <br>India-->
+        <!--                                            </span>-->
+        <!--                                        </div>-->
+
+        <!--                                        <div>-->
+        <!--                                            <i class="fa fa-phone fa-fw" role="img"-->
+        <!--                                               aria-label="Phone" title="Phone"></i>-->
+        <!--                                            <span class="o_force_ltr" itemprop="telephone">+1 (650)-->
+        <!--                                                555-0111-->
+        <!--                                            </span>-->
+        <!--                                        </div>-->
+
+
+        <!--                                        <div>-->
+        <!--                                            <i class="fa fa-envelope fa-fw" role="img"-->
+        <!--                                               aria-label="Email" title="Email"></i>-->
+        <!--                                            <span itemprop="email">info@yourcompany.com</span>-->
+        <!--                                        </div>-->
+        <!--                                    </div>-->
+
+
+        <!--                                </address>-->
+        <!--                            </div>-->
+
+        <!--                            <span class="fa fa-map-marker fa-fw mt16" role="img"-->
+        <!--                                  aria-label="Address" title="Address" data-oe-model="ir.ui.view"-->
+        <!--                                  data-oe-id="612" data-oe-field="arch"-->
+        <!--                                  data-oe-xpath="/t[1]/address[1]/t[1]/span[1]"></span>-->
+        <!--                            <a target="_BLANK" data-oe-model="ir.ui.view" data-oe-id="612"-->
+        <!--                               data-oe-field="arch" data-oe-xpath="/t[1]/address[1]/t[1]/a[1]"-->
+        <!--                               href="https://maps.google.com/maps?q=250+Executive+Park+Blvd%2C+Suite+3400%2C+San+Francisco+94134%2C+India&amp;z=8">-->
+        <!--                                Google Maps-->
+        <!--                            </a>-->
+
+        <!--                        </address>-->
+
+        <!--                        <div class="alert alert-warning" data-oe-model="ir.ui.view" data-oe-id="613"-->
+        <!--                             data-oe-field="arch" data-oe-xpath="/data/xpath/t[2]/div[1]">-->
+        <!--                            <i class="fa fa-plus-circle"></i>-->
+        <!--                            The Google map option is enabled but <a-->
+        <!--                                href="/web#action=website.action_website_configuration">not properly-->
+        <!--                            configured</a>.-->
+        <!--                        </div>-->
+
+
+        <!--                    </div>-->
+        <!--                </div>-->
+        <!-- -->

theme_xtream/views/footer.xml

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data>
+        <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="index.html">
+                                                <div class="heading">
+                                                    XTREAM
+                                                    <p>FASHION</p>
+                                                </div>
+                                            </a>
+                                            <div class="made_by">
+                                                Copyright ©2021 All rights reserved | This template is made
+                                                <span class="fa fa-heart"/> with 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="#">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 Account</a></li>
+                                                <li class="scale-up-ver-center"><a href="#">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">
+                                                    <span class="input-group-text" id="basic-text1">SUBSCRIBE</span>
+                                                </div>
+                                            </div>
+                                        </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>
+    </data>
+</odoo>

theme_xtream/views/header.xml

@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data>
+        <template id="xtream_header0" inherit_id="website.template_header_default">
+            <xpath expr="//t[@t-call='website.navbar']" position="replace">
+                <section class="top_nav">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col">
+                                <div class="wrapper">
+                                    <div class="nav_center">
+                                        <a href="#">
+                                            <div class="heading">
+                                                <a href="/" t-attf-class="navbar-brand logo m-auto #{_link_class}">
+                                                    <span t-field="website.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name"/>
+                                                </a>
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="nav_right">
+                                        <ul class="nav navbar-nav o_header_centered_logo justify-content-end">
+                                            <!-- Sign In -->
+                                            <t t-call="portal.placeholder_user_sign_in">
+                                                <t t-set="_item_class" t-value="'nav-item ml-3'"/>
+                                                <t t-set="_link_class" t-value="'nav-link'"/>
+                                            </t>
+                                            <!-- User Dropdown -->
+                                            <t t-call="portal.user_dropdown">
+                                                <t t-set="_icon" t-value="true"/>
+                                                <t t-set="_item_class" t-value="'nav-item dropdown ml-3'"/>
+                                                <t t-set="_link_class" t-value="'nav-link'"/>
+                                            </t>
+                                        </ul>
+                                        <!--                                        <div id="main">-->
+                                        <!--                                            <span class="side_b" style="font-size:30px;cursor:pointer"-->
+                                        <!--                                                  onclick="openNav()">&#9776; </span>-->
+                                        <!--                                        </div>-->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section class="navigation">
+                    <div class="container">
+                        <nav class="navbar navbar-expand-lg navbar-dark">
+                            <div class="navbar-brand waves-effect">
+                                <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>
+                                    <span class="link_top">SHARE</span>
+                                </div>
+                            </div>
+                            <button class="navbar-toggler waves-effect" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#main_nav">
+                                <span class="navbar-toggler-icon"/>
+                            </button>
+                            <div class="collapse navbar-collapse" id="main_nav">
+                                <ul class="navbar-nav m-auto">
+                                    <t t-call="website.navbar_nav">
+                                        <t t-set="_nav_class" t-valuef="mx-auto"/>
+                                        <!-- Menu -->
+                                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                                            <t t-call="website.submenu">
+                                                <t t-set="item_class" t-valuef="nav-item"/>
+                                                <t t-set="link_class" t-valuef="nav-link"/>
+                                            </t>
+                                        </t>
+                                    </t>
+                                    <t t-call="website_sale.header_cart_link">
+                                    <t t-set="_icon" t-value="True"/>
+                                    <t t-set="_item_class" t-value="'nav-item mx-lg-3'"/>
+                                    <t t-set="_link_class" t-value="'nav-link'"/>
+                                </t>
+                                </ul>
+                            </div>
+
+                            <!-- navbar-collapse.// -->
+                            <div class="help-line text-center">
+                                <a href="tel:+346573556778"><i class="fa fa-headphones">/</i> +34 657 3556 778</a>
+                            </div>
+                        </nav>
+                    </div>
+                </section>
+                <!--                </t>-->
+            </xpath>
+        </template>
+
+        <!--        <template id="xtream_align_center" inherit_id="website.template_header_slogan">-->
+        <!--            <xpath expr="//t[@t-set='_nav_class']" position="replace">-->
+        <!--                <t t-set="_nav_class" t-value="'mx-auto'"/>-->
+        <!--            </xpath>-->
+        <!--            <xpath expr="//t[@t-call='website.placeholder_header_brand']" position="replace">-->
+        <!--                <div class="collapse navbar-collapse">-->
+        <!--                    <t t-call="website.placeholder_header_brand">-->
+        <!--                        <t t-set="_link_class" t-value="'m-0'"/>-->
+        <!--                    </t>-->
+        <!--                </div>-->
+        <!--            </xpath>-->
+        <!--            <xpath expr="//ul[hasclass('nav')]" position="replace">-->
+        <!--                <ul class="nav navbar-nav o_header_centered_logo justify-content-end">-->
+        <!--                    &lt;!&ndash; Sign In &ndash;&gt;-->
+        <!--                    <t t-call="portal.placeholder_user_sign_in">-->
+        <!--                        <t t-set="_item_class" t-value="'nav-item ml-3'"/>-->
+        <!--                        <t t-set="_link_class" t-value="'nav-link'"/>-->
+        <!--                    </t>-->
+        <!--                    &lt;!&ndash; User Dropdown &ndash;&gt;-->
+        <!--                    <t t-call="portal.user_dropdown">-->
+        <!--                        <t t-set="_icon" t-value="true"/>-->
+        <!--                        <t t-set="_item_class" t-value="'nav-item dropdown ml-3'"/>-->
+        <!--                        <t t-set="_link_class" t-value="'nav-link'"/>-->
+        <!--                    </t>-->
+        <!--                </ul>-->
+        <!--            </xpath>-->
+        <!--            <xpath expr="//t[@t-call='website.navbar_toggler']" position="before">-->
+        <!--                <div class="navbar-dark">-->
+        <!--                    <div class="navbar-brand waves-effect">-->
+        <!--                        <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>-->
+        <!--                            <span class="link_top">SHARE</span>-->
+        <!--                        </div>-->
+        <!--                    </div>-->
+        <!--                </div>-->
+        <!--            </xpath>-->
+        <!--            <xpath expr="//div[@id='top_menu_collapse']" position="after">-->
+        <!--                <div class="help-line text-center">-->
+        <!--                    <a href="tel:+346573556778"><i class="fa fa-headphones"/> +34 657 3556 778</a>-->
+        <!--                </div>-->
+        <!--            </xpath>-->
+        <!--        </template>-->
+
+                <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>
+
+        <!--        <template id="xtream_logo_center" inherit_id="website.option_header_brand_logo">-->
+        <!--            <xpath expr="//a[@href='/']" position="replace">-->
+        <!--                <a href="/" t-attf-class="navbar-brand logo m-auto #{_link_class}">-->
+        <!--                    <span t-field="website.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name"/>-->
+        <!--                </a>-->
+        <!--            </xpath>-->
+        <!--        </template>-->
+    </data>
+</odoo>

theme_xtream/views/layout.xml

@@ -0,0 +1,66 @@
+<?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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
+                          integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/>
+                    <link rel="stylesheet" href="js/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css"/>
+                    <link rel="stylesheet" href="js/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css"/>
+                    <!--<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>-->
+                    <!--<link rel="stylesheet" href="bootstrap-4.0.0/dist/css/bootstrap.min.css"/>-->
+                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+                          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
+                    <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"/>
+                    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+                            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+                            crossorigin="anonymous"/>
+                    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+                            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+                            crossorigin="anonymous"/>
+                    <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"-->
+                    <!--        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"-->
+                    <!--        crossorigin="anonymous"/>-->
+                </head>
+                <body>
+                </body>
+                <!-- Optional JavaScript -->
+                <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+                        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+                        crossorigin="anonymous"/>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+                        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+                        crossorigin="anonymous"/>
+                <script src="https://code.jquery.com/jquery-1.12.4.js"/>
+                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"/>
+                <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+                        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+                        crossorigin="anonymous"/>
+                <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"-->
+                <!--        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"-->
+                <!--        crossorigin="anonymous"/>-->
+                <script>
+                    $(function () {
+                        $("#slider-range").slider({
+                            range: true,
+                            min: 0,
+                            max: 100000,
+                            values: [0, 100000],
+                            slide: function (event, ui) {
+                                $("#amount").val(ui.values[0] + "-" + ui.values[1]);
+                            }
+                        });
+                        $("#amount").val($("#slider-range").slider("values", 0) + $("#slider-range").slider("values", 1));
+                    });
+                </script>
+            </html>
+        </xpath>
+    </template>
+</odoo>

theme_xtream/views/price_filter.xml

@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data>
+        <template id="price_attributes" name="Xtream Product Attributes" inherit_id="website_sale.products_attributes"
+                  customize_show="True" priority="20">
+            <xpath expr="//div[@id='wsale_products_attributes_collapse']" position="replace">
+                <div id="wsale_products_attributes_collapse"
+                     class="position-relative" style="margin-left: 4px;">
+                    <a t-if="attrib_values"
+                       t-att-href="keep('/shop'+ ('/category/'+slug(category)) if category else None, attrib=0)"
+                       t-attf-class="btn btn-{{navClass}} d-flex py-1 mb-2">
+                        <small class="mx-auto">
+                            <b>Clear Filters</b>
+                        </small>
+                        <i class="oi oi-close"/>
+                    </a>
+                    <div class="sidebar">
+                        <div class="wrapper">
+                            <div class="box">
+                                <div class="accordion" id="accordionExample">
+                                    <div class="card">
+                                        <div class="collapse d-lg-block" id="wsale_products_attributes_collapse">
+                                            <form class="js_attributes mb-2" method="get">
+                                                <input t-if="category" type="hidden" name="category"
+                                                       t-att-value="category.id"/>
+                                                <input type="hidden" name="search" t-att-value="search"/>
+                                                <ul class="nav nav-pills flex-column">
+                                                    <t t-foreach="attributes" t-as="a">
+                                                        <li t-if="a.value_ids and len(a.value_ids) > 1"
+                                                            class="nav-item">
+                                                            <div class="card-header" id="headingSix">
+                                                                <h2 class="mb-0">
+                                                                    <button class="btn btn-secondary collapsed"
+                                                                            type="button"
+                                                                            data-bs-toggle="collapse"
+                                                                            data-bs-target="#collapseSix"
+                                                                            aria-expanded="false"
+                                                                            aria-controls="collapseSix">
+                                                                        <strong t-field="a.name"/>
+                                                                        <i class="fas fa-angle-down"/>
+                                                                    </button>
+                                                                </h2>
+                                                            </div>
+                                                            <t t-if="a.display_type == 'select'">
+                                                                <div id="collapseSix" class="collapse"
+                                                                     aria-labelledby="headingSix"
+                                                                     data-parent="#accordionExample">
+                                                                    <div class="card-body">
+                                                                        <div class="wrapp2">
+                                                                            <div class="list-group">
+                                                                                <select class="form-control"
+                                                                                        name="attrib">
+                                                                                    <option value=""/>
+                                                                                    <!--  -->
+                                                                                    <t t-foreach="a.value_ids" t-as="v">
+                                                                                        <option t-att-value="'%s-%s' % (a.id,v.id)"
+                                                                                                t-esc="v.name"
+                                                                                                t-att-selected="v.id in attrib_set"/>
+                                                                                    </t>
+                                                                                    <!--  -->
+                                                                                </select>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </t>
+                                                            <t t-if="a.display_type == 'radio'">
+                                                                <ul class="nav nav-pills flex-column">
+                                                                    <div id="collapseSix" class="collapse"
+                                                                         aria-labelledby="headingSix"
+                                                                         data-parent="#accordionExample">
+                                                                        <div class="card-body">
+                                                                            <div class="wrapp2">
+                                                                                <div class="list-group">
+                                                                                    <t t-foreach="a.value_ids" t-as="v">
+                                                                                        <li class="nav-item">
+                                                                                            <label style="padding: 0.25rem 0rem; margin: 0"
+                                                                                                   t-attf-class="nav-link#{' active' if v.id in attrib_set else ''}">
+                                                                                                <input type="checkbox"
+                                                                                                       name="attrib"
+                                                                                                       t-att-value="'%s-%s' % (a.id,v.id)"
+                                                                                                       t-att-checked="'checked' if v.id in attrib_set else None"/>
+                                                                                                <span style="font-weight: normal"
+                                                                                                      t-field="v.name"/>
+                                                                                            </label>
+                                                                                        </li>
+                                                                                    </t>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </ul>
+                                                            </t>
+                                                            <t t-if="a.display_type == 'color'">
+                                                                <div id="collapseSix" class="collapse"
+                                                                     aria-labelledby="headingSix"
+                                                                     data-parent="#accordionExample">
+                                                                    <div class="card-body">
+                                                                        <div class="wrapp2">
+                                                                            <div class="list-group">
+                                                                                <t t-foreach="a.value_ids" t-as="v">
+                                                                                    <label t-attf-style="background-color:#{v.html_color or v.name}"
+                                                                                           t-attf-class="css_attribute_color #{'active' if v.id in attrib_set else ''}">
+                                                                                        <input type="checkbox"
+                                                                                               name="attrib"
+                                                                                               t-att-value="'%s-%s' % (a.id,v.id)"
+                                                                                               t-att-checked="'checked' if v.id in attrib_set else None"
+                                                                                               t-att-title="v.name"/>
+                                                                                    </label>
+                                                                                </t>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </t>
+                                                        </li>
+                                                    </t>
+                                                </ul>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <t t-if="opt_wsale_filter_price and opt_wsale_attributes"
+                       t-call="website_sale.filter_products_price"/>
+                </div>
+
+            </xpath>
+        </template>
+        <template id="price_filter_product" name="Xtream Price Filter" inherit_id="website_sale.filter_products_price" active="False" priority="20">
+            <xpath expr="//div[@id='o_wsale_price_range_option']" position="replace">
+                <div id="o_wsale_price_range_option"
+                     t-attf-class="position-relative {{_classes}} {{isDisabled and 'opacity-75 pe-none user-select-none'}}">
+                    <label t-attf-class="m-0 h6 o_products_attributes_title {{_classes_title}}">
+                        <b>Filter by Price</b>
+                    </label>
+                    <input type="range" multiple="multiple" id="slider-data-range"
+                           t-attf-class="price-range range-with-input {{_classes_input}}"
+                           t-att-data-currency="pricelist.currency_id.symbol"
+                           t-att-data-currency-position="pricelist.currency_id.position"
+                           t-att-step="pricelist.currency_id.rounding" t-att-min="'%f' % (available_min_price)"
+                           t-att-max="'%f' % (available_max_price)" t-att-value="'%f,%f' % (min_price, max_price)"/>
+                </div>
+
+            </xpath>
+        </template>
+    </data>
+</odoo>

theme_xtream/views/product_view.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data>
+        <template id="xtream_product_view" name="Xtream Product View" inherit_id="website_sale.product">
+            <xpath expr="//p[@t-field='product.description_sale']" position="replace">
+                <div class="collpase_wrapper">
+                    <div class="accordion" id="accordionExample">
+                        <div class="card">
+                            <div class="card-header" id="headingOne">
+                                <h2 class="mb-0">
+                                    <button class="btn btn-link" type="button"
+                                            data-bs-toggle="collapse" data-bs-target="#collapseOne"
+                                            aria-expanded="true" aria-controls="collapseOne">
+                                        INFORMATION
+                                    </button>
+                                </h2>
+                            </div>
+                            <div id="collapseOne" class="collapse show"
+                                 aria-labelledby="headingOne"
+                                 data-parent="#accordionExample">
+                                <div class="card-body">
+                                    <p t-field="product.description_sale" class="text-muted mt-3" placeholder="A short description that will also appear on documents." />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+            <xpath expr="//hr[@t-if='product.description_sale']" position="replace">
+            </xpath>
+            <xpath expr="//t[@t-call='website_sale.product_price']" position="replace">
+            </xpath>
+            <xpath expr="//div[hasclass('js_product')]" position="before">
+                <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price_xtream mt16">
+                    <p class="oe_price_h4 css_editable_mode_hidden">
+                        <span t-attf-class="text-danger oe_default_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}" style="text-decoration: line-through; white-space: nowrap;"
+                              t-esc="combination_info['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                        />
+                        <b class="oe_price" style="white-space: nowrap;" t-esc="combination_info['price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
+                        <span itemprop="price" style="display:none;" t-esc="combination_info['price']"/>
+                        <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name"/>
+                    </p>
+                    <p class="css_non_editable_mode_hidden decimal_precision" t-att-data-precision="str(website.currency_id.decimal_places)">
+                        <span t-field="product.list_price"
+                              t-options='{"widget":"monetary", "display_currency":product.currency_id,}'/>
+                    </p>
+                </div>
+            </xpath>
+        </template>
+    </data>
+</odoo>