| @ -0,0 +1,41 @@ | |||
| Theme Fuge | |||
| ========== | |||
| * Design Web Pages with Theme Fuge | |||
| 
 | |||
| Installation | |||
| ============ | |||
| 	- www.odoo.com/documentation/15.0/setup/install.html | |||
| 	- Install our custom addon | |||
| 
 | |||
| License | |||
| ------- | |||
| General Public License, Version 3 (LGPL v3). | |||
| (https://www.odoo.com/documentation/user/15.0/legal/licenses/licenses.html) | |||
| 
 | |||
| Company | |||
| ------- | |||
| * `Cybrosys Techno Solutions <https://cybrosys.com/>`__ | |||
| 
 | |||
| Credits | |||
| ------- | |||
| * Developer: | |||
| Alvin Francis @ cybrosys | |||
| 
 | |||
| Contacts | |||
| -------- | |||
| * Mail Contact : odoo@cybrosys.com | |||
| 
 | |||
| Bug Tracker | |||
| ----------- | |||
| Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. | |||
| 
 | |||
| Maintainer | |||
| ========== | |||
| This module is maintained by Cybrosys Technologies. | |||
| 
 | |||
| For support and more information, please visit https://www.cybrosys.com | |||
| 
 | |||
| Further information | |||
| =================== | |||
| HTML Description: `<static/description/index.html>`__ | |||
| 
 | |||
| @ -0,0 +1,4 @@ | |||
| # -*- coding: utf-8 -*- | |||
| from . import controllers | |||
| from . import models | |||
| 
 | |||
| @ -0,0 +1,71 @@ | |||
| # -*- coding: utf-8 -*- | |||
| ############################################################################# | |||
| # | |||
| #    Cybrosys Technologies Pvt. Ltd. | |||
| # | |||
| #    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) | |||
| #    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) | |||
| # | |||
| #    You can modify it under the terms of the GNU LESSER | |||
| #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3. | |||
| # | |||
| #    This program is distributed in the hope that it will be useful, | |||
| #    but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
| #    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | |||
| #    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. | |||
| # | |||
| #    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE | |||
| #    (LGPL v3) along with this program. | |||
| #    If not, see <http://www.gnu.org/licenses/>. | |||
| # | |||
| ############################################################################# | |||
| { | |||
|     'name': 'Theme Fuge', | |||
|     'description': 'Theme Fuge is an attractive and modern eCommerce Website theme', | |||
|     'summary': 'Design Web Pages with theme fuge', | |||
|     'category': 'Theme/eCommerce', | |||
|     'version': '15.0.1.0.0', | |||
|     'author': 'Cybrosys Techno Solutions', | |||
|     'company': 'Cybrosys Techno Solutions', | |||
|     'maintainer': 'Cybrosys Techno Solutions', | |||
|     'website': "https://www.cybrosys.com", | |||
|     'depends': ['website', 'website_sale_wishlist', 'website_blog'], | |||
|     'data': [ | |||
|         'views/views.xml', | |||
|         'views/shop_view.xml', | |||
|         'views/shop_sidebar_view.xml', | |||
|         'views/product_view.xml', | |||
|         'views/blog.xml', | |||
|         'views/popular_posts.xml', | |||
|         'views/blog_details.xml', | |||
|         'views/about.xml', | |||
|         'views/contact.xml', | |||
|         'views/header.xml', | |||
|         'views/footer.xml', | |||
|         'views/snippets/banner.xml', | |||
|         'views/snippets/shop_with_us.xml', | |||
|         'views/snippets/offer_men.xml', | |||
|         'views/snippets/offer_women.xml', | |||
|         'views/snippets/product_section.xml', | |||
|         'views/snippets/latest_blogs.xml', | |||
|         'views/snippets/customer_review.xml', | |||
|         'views/snippets/subscribe.xml', | |||
|     ], | |||
|     'images': [ | |||
|         'static/description/banner.png', | |||
|         'static/description/theme_screenshot.gif', | |||
|     ], | |||
|     'installable': True, | |||
|     'application': True, | |||
|     'auto_install': False, | |||
|     'assets': { | |||
|             'web.assets_frontend': [ | |||
|                 'theme_fuge/static/src/css/style.css', | |||
|                 'theme_fuge/static/src/css/owl.carousel.min.css', | |||
|                 'theme_fuge/static/src/css/owl.theme.default.min.css', | |||
|                 'theme_fuge/static/src/js/product.js', | |||
|                 'theme_fuge/static/src/js/scroll_navbar.js', | |||
|                 ], | |||
|             }, | |||
|     'license': 'LGPL-3', | |||
| } | |||
| @ -0,0 +1,25 @@ | |||
| # -*- coding: utf-8 -*- | |||
| ############################################################################# | |||
| # | |||
| #    Cybrosys Technologies Pvt. Ltd. | |||
| # | |||
| #    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) | |||
| #    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) | |||
| # | |||
| #    You can modify it under the terms of the GNU LESSER | |||
| #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3. | |||
| # | |||
| #    This program is distributed in the hope that it will be useful, | |||
| #    but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
| #    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | |||
| #    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. | |||
| # | |||
| #    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE | |||
| #    (LGPL v3) along with this program. | |||
| #    If not, see <http://www.gnu.org/licenses/>. | |||
| # | |||
| ############################################################################# | |||
| 
 | |||
| from . import main | |||
| from . import popular_post | |||
| 
 | |||
| @ -0,0 +1,59 @@ | |||
| # -*- coding: utf-8 -*- | |||
| ############################################################################# | |||
| # | |||
| #    Cybrosys Technologies Pvt. Ltd. | |||
| # | |||
| #    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) | |||
| #    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) | |||
| # | |||
| #    You can modify it under the terms of the GNU LESSER | |||
| #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3. | |||
| # | |||
| #    This program is distributed in the hope that it will be useful, | |||
| #    but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
| #    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | |||
| #    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. | |||
| # | |||
| #    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE | |||
| #    (LGPL v3) along with this program. | |||
| #    If not, see <http://www.gnu.org/licenses/>. | |||
| # | |||
| ############################################################################# | |||
| 
 | |||
| from odoo import http, fields | |||
| from odoo.http import request | |||
| 
 | |||
| 
 | |||
| class MainProduct(http.Controller): | |||
| 
 | |||
|     @http.route('/get_main_product', auth="public", type='json', | |||
|                 website=True) | |||
|     def get_main_product(self): | |||
|         main_products = request.env['product.template'].sudo().search( | |||
|             [('website_published', '=', True)], | |||
|             order='create_date asc', limit=8) | |||
| 
 | |||
|         values = { | |||
|             'main_products': main_products, | |||
|         } | |||
|         response = http.Response(template='theme_fuge.product_section', | |||
|                                  qcontext=values) | |||
|         return response.render() | |||
| 
 | |||
| 
 | |||
| class WebsiteBlog(http.Controller): | |||
| 
 | |||
|     @http.route('/get_blog_post', auth="public", type='json', | |||
|                 website=True) | |||
|     def get_blog_post(self): | |||
|         posts = request.env['blog.post'].sudo().search( | |||
|             [('website_published', '=', True), | |||
|              ('post_date', '<=', fields.Datetime.now())], | |||
|             order='published_date desc', limit=4) | |||
| 
 | |||
|         values = { | |||
|             'posts_recent': posts, | |||
|         } | |||
|         response = http.Response(template='theme_fuge.latest_blog', | |||
|                                  qcontext=values) | |||
|         return response.render() | |||
| @ -0,0 +1,68 @@ | |||
| # -*- coding: utf-8 -*- | |||
| ############################################################################# | |||
| # | |||
| #    Cybrosys Technologies Pvt. Ltd. | |||
| # | |||
| #    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) | |||
| #    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) | |||
| # | |||
| #    You can modify it under the terms of the GNU LESSER | |||
| #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3. | |||
| # | |||
| #    This program is distributed in the hope that it will be useful, | |||
| #    but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
| #    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | |||
| #    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. | |||
| # | |||
| #    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE | |||
| #    (LGPL v3) along with this program. | |||
| #    If not, see <http://www.gnu.org/licenses/>. | |||
| # | |||
| ############################################################################# | |||
| 
 | |||
| from odoo import http, fields | |||
| from odoo.http import request | |||
| from odoo.osv import expression | |||
| from odoo.addons.website_blog.controllers.main import WebsiteBlog | |||
| 
 | |||
| 
 | |||
| class WebsiteBlogInherit(WebsiteBlog): | |||
| 
 | |||
|     @http.route([ | |||
|         '/blog', | |||
|         '/blog/page/<int:page>', | |||
|         '/blog/tag/<string:tag>', | |||
|         '/blog/tag/<string:tag>/page/<int:page>', | |||
|         '''/blog/<model("blog.blog"):blog>''', | |||
|         '''/blog/<model("blog.blog"):blog>/page/<int:page>''', | |||
|         '''/blog/<model("blog.blog"):blog>/tag/<string:tag>''', | |||
|         '''/blog/<model("blog.blog"):blog>/tag/<string:tag>/page/<int:page>''', | |||
|     ], type='http', auth="public", website=True, sitemap=True) | |||
|     def blog(self, blog=None, tag=None, page=1, search=None, **opt): | |||
|         limit = 3 | |||
|         order = 'published_date desc' | |||
|         dom = expression.AND([ | |||
|             [('website_published', '=', True), ('post_date', '<=', fields.Datetime.now())], | |||
|             request.website.website_domain() | |||
|         ]) | |||
|         posts = request.env['blog.post'].search(dom, limit=limit, order=order) | |||
|         res = super(WebsiteBlogInherit, self).blog(blog=blog, tag=tag, page=1, search=search, **opt) | |||
|         res.qcontext.update({'posts_popular': posts}) | |||
|         return res | |||
| 
 | |||
|     @http.route(['''/blog/<model("blog.blog"):blog>/<model("blog.post", "[('blog_id','=',blog.id)]"):blog_post>''',], | |||
|                 type='http', auth="public", website=True, sitemap=True) | |||
|     def blog_post(self, blog, blog_post, tag_id=None, page=1, | |||
|                   enable_editor=None, **post): | |||
|         limit = 3 | |||
|         order = 'published_date desc' | |||
|         dom = expression.AND([ | |||
|             [('website_published', '=', True), | |||
|              ('post_date', '<=', fields.Datetime.now())], | |||
|             request.website.website_domain() | |||
|         ]) | |||
|         posts = request.env['blog.post'].search(dom, limit=limit, order=order) | |||
|         res = super(WebsiteBlogInherit, self).blog_post(blog, blog_post, tag_id=tag_id, page=1, | |||
|                   enable_editor=None, **post) | |||
|         res.qcontext.update({'posts_popular': posts}) | |||
|         return res | |||
| @ -0,0 +1,6 @@ | |||
| ## Module <theme_fuge> | |||
| 
 | |||
| #### 06.11.2021 | |||
| #### Version 15.0.1.0.0 | |||
| #### ADD | |||
| - Initial commit for Theme Fuge | |||
| @ -0,0 +1,24 @@ | |||
| # -*- coding: utf-8 -*- | |||
| ############################################################################# | |||
| # | |||
| #    Cybrosys Technologies Pvt. Ltd. | |||
| # | |||
| #    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) | |||
| #    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) | |||
| # | |||
| #    You can modify it under the terms of the GNU LESSER | |||
| #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3. | |||
| # | |||
| #    This program is distributed in the hope that it will be useful, | |||
| #    but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
| #    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | |||
| #    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. | |||
| # | |||
| #    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE | |||
| #    (LGPL v3) along with this program. | |||
| #    If not, see <http://www.gnu.org/licenses/>. | |||
| # | |||
| ############################################################################# | |||
| from . import theme_fuge | |||
| 
 | |||
| 
 | |||
| @ -0,0 +1,33 @@ | |||
| # -*- coding: utf-8 -*- | |||
| ############################################################################# | |||
| # | |||
| #    Cybrosys Technologies Pvt. Ltd. | |||
| # | |||
| #    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) | |||
| #    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) | |||
| # | |||
| #    You can modify it under the terms of the GNU LESSER | |||
| #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3. | |||
| # | |||
| #    This program is distributed in the hope that it will be useful, | |||
| #    but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
| #    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | |||
| #    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. | |||
| # | |||
| #    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE | |||
| #    (LGPL v3) along with this program. | |||
| #    If not, see <http://www.gnu.org/licenses/>. | |||
| # | |||
| ############################################################################# | |||
| from odoo import models | |||
| 
 | |||
| 
 | |||
| class FugeTheme(models.AbstractModel): | |||
|     _inherit = 'theme.utils' | |||
| 
 | |||
|     def _fuge_theme_post_copy(self, mod): | |||
|         self.enable_view('website_blog.opt_blog_sidebar_show') | |||
|         self.enable_view('website_blog.opt_blog_list_view') | |||
|         self.disable_view('website_blog.opt_posts_loop_show_author') | |||
|         self.disable_view('website_sale.add_grid_or_list_option') | |||
|         self.disable_view('website_sale.products_list_view') | |||
| After Width: | Height: | Size: 1.9 MiB | 
| After Width: | Height: | Size: 31 KiB | 
| After Width: | Height: | Size: 109 KiB | 
| After Width: | Height: | Size: 3.7 MiB | 
| After Width: | Height: | Size: 1.6 MiB | 
| After Width: | Height: | Size: 135 KiB | 
| After Width: | Height: | Size: 145 KiB | 
| After Width: | Height: | Size: 96 KiB | 
| After Width: | Height: | Size: 132 KiB | 
| After Width: | Height: | Size: 138 KiB | 
| After Width: | Height: | Size: 51 KiB | 
| After Width: | Height: | Size: 10 KiB | 
| After Width: | Height: | Size: 28 KiB | 
| After Width: | Height: | Size: 346 KiB | 
| After Width: | Height: | Size: 371 KiB | 
| After Width: | Height: | Size: 350 KiB | 
| After Width: | Height: | Size: 490 KiB | 
| After Width: | Height: | Size: 377 KiB | 
| After Width: | Height: | Size: 357 KiB | 
| After Width: | Height: | Size: 156 KiB | 
| After Width: | Height: | Size: 137 KiB | 
| @ -0,0 +1,323 @@ | |||
| <!-- Hero Section --> | |||
| <div class="container pt-4 mt-4 rounded" style="background-color: #fff; 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">Fugestore</h1> | |||
|             <p class="lead mb-4" style="max-width: 700px; margin: 0 auto;"> | |||
|                 Fugestore is a new kind of Theme. The theme is a very user-friendly and is suitable for your | |||
|                 eCommerce website with blog. | |||
|                 It is the most powerful, easy to use theme. Many custom designed snippets facilitates to add | |||
|                 better | |||
|                 user experience. | |||
|                 Contains Hot sales, New arrival and Deal of the week with Counter snippets that are configured | |||
|                 from | |||
|                 the backend. | |||
|                 It have instagram feed snippet and deal of the week snippet with counter. | |||
|                 It is a fully Responsive Theme with a premium design and attractive front-end theme. | |||
|                 it contains price filter and brand filter options by default and it easily configure from | |||
|                 backend. | |||
|                 This theme is a perfect choice for your online store you are looking for. This theme is fully | |||
|                 customized | |||
|                 the eCommerce website, shop view, custom categories view, product view, contact us page, cart, | |||
|                 blog, | |||
|                 blog preview...etc. | |||
|             </p> | |||
|         </div> | |||
|     </div> | |||
| 
 | |||
|     <!-- End of Hero Section --> | |||
| 
 | |||
|     <!-- Alternate Section --> | |||
|     <div class="row p-4"> | |||
|         <div class="col-lg-6 px-4" style="margin-top: 100px;"> | |||
|             <h2>Desktop View</h2> | |||
|             <p class="lead"> | |||
|                 It is easy to customize and use. Just drag and drop the building blocks to make attractive | |||
|                 webpages. | |||
|             </p> | |||
|         </div> | |||
|         <div class="col-lg-6 px-4"> | |||
|             <img style="border-radius: 0.5em;" src="images/laptop-screenshots.jpg" width="90%" height="auto" | |||
|                 class="mb-4 shadow-sm" alt="Theme Screenshot"> | |||
|         </div> | |||
|     </div> | |||
|     <div class="row p-4"> | |||
|         <div class="col-lg-6 px-4"> | |||
|             <img style="border-radius: 0.5em;" src="images/phone-screenshots.jpg" width="90%" height="auto" | |||
|                 class="mb-4 shadow-sm" alt="Theme Screenshot"> | |||
|         </div> | |||
|         <div class="col-lg-6 px-4" style="margin-top: 100px;"> | |||
|             <h2>Mobile View</h2> | |||
|             <p class="lead"> | |||
|                 User friendly and modern looking theme makes your page more Stylish And Beautiful. | |||
|             </p> | |||
|         </div> | |||
|     </div> | |||
|     <!-- End of Alternate Section --> | |||
| 
 | |||
|     <!-- Two Columns Section --> | |||
|     <div class="row p-4"> | |||
|         <!-- Column 1 --> | |||
|         <div class="col-lg-6"> | |||
|             <div class="row"> | |||
|                 <div class="col-lg-12"> | |||
|                     <img style="border-radius: 0.5em;" src="images/1.jpg" width="100%" height="auto" | |||
|                         class="mb-4 shadow-sm" alt="Theme Screenshot"> | |||
|                 </div> | |||
|                 <div class="col-lg-12 mt-4"> | |||
|                     <h2 class="text-center">Home Page</h2> | |||
|                     <p class="lead text-center"> | |||
|                         It is easy to customize and use. Just drag and drop the building blocks to make | |||
|                         attractive | |||
|                         webpages.Customizable building blocks in home page design helps you to edit them as per | |||
|                         needs. </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/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">Shop Page</h2> | |||
|                     <p class="lead text-center"> | |||
|                         The shop display you products in a stylish way. It displaying 3 products in a row and it | |||
|                         will attract your customers. | |||
|                         Also the Category side are customized in collapsible style. Display high quality images | |||
|                         for | |||
|                         your products | |||
|                     </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 an attractive and modern eCommerce Website theme. It make your eCommerce website is | |||
|                 attractive. | |||
|                 Just drag & drop the building blocks you need to easily build your layout. | |||
|                 Fugestore is a perfect choice for your online store you are looking for. | |||
|             </p> | |||
|         </div> | |||
|     </div> | |||
|     <!-- End of One Columns Section --> | |||
| 
 | |||
|     <!-- Three 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/12.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</h2> | |||
|                     <p class="lead text-center"> | |||
|                         The cart display your products in a stylish way. it will display the all needed details | |||
|                         of | |||
|                         the product | |||
|                     </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/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">Blog Preview</h2> | |||
|                     <p class="lead text-center"> | |||
|                         Fugestore have a fully customized blog preview with big cover image of the blog with | |||
|                         share | |||
|                         buttons. | |||
|                     </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/11.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">Product Preview</h2> | |||
|                     <p class="lead text-center"> | |||
|                         It have a fully customized Product preview with full details of the product with an | |||
|                         attractive design. | |||
|                     </p> | |||
|                 </div> | |||
|             </div> | |||
|         </div> | |||
|         <!-- End of Column 4 --> | |||
|     </div> | |||
|     <!-- End of Three Columns Section --> | |||
| 
 | |||
|     <!--<!– Video Section –>--> | |||
|     <!--<div class="row p-4">--> | |||
|     <!--    <div class="col-lg-12 d-flex flex-column justify-content-center">--> | |||
|     <!--        <h4 class="mt-4 text-center">Video</h4>--> | |||
|     <!--        <hr style="border-width: 3px; border-color: #0984e3; width: 100px;">--> | |||
|     <!--    </div>--> | |||
|     <!--    <div class="col-lg-12 d-flex justify-content-center mt-4">--> | |||
|     <!--        <div class="s_panel_video" data-video-id="peAp2Tx_XIs?rel=0" style="cursor:pointer;">--> | |||
|     <!--            <img class="img-fluid s_tooltip_tabs_tooltip_image s_figure_link pb0"--> | |||
|     <!--                 src="images/your-video-cover.jpg" alt="Cybrosys Cover Video" style="max-width:100%;">--> | |||
|     <!--        </div>--> | |||
|     <!--    </div>--> | |||
|     <!--</div>--> | |||
|     <!--<!– End of Video Section–>--> | |||
| 
 | |||
|     <!-- Demo Pages --> | |||
|     <section class="oe_container"> | |||
|         <div class="row" style="margin: 60px auto -30px;"> | |||
|             <div class="col-lg-12 text-center"> | |||
|                 <h4 class="mt-4">Demo Pages</h4> | |||
|                 <hr style="border-width: 3px; border-color: #0984e3; width: 100px;"> | |||
|             </div> | |||
|         </div> | |||
| 
 | |||
|         <div class="row" style="margin: 40px auto; border-radius: 15px; padding: 38px;"> | |||
|             <div class="col-sm-6 col-md-4 px-2"> | |||
|                 <div class="bg-white shadow overflow-hidden mb32" | |||
|                     style="border-radius: 15px; width: 300px; padding-bottom: 0; margin-right: 30px;"> | |||
|                     <img src="./images/demo-1.jpg" width="300px" height="auto"> | |||
|                     <h6 class="text-center my-3">Home</h6> | |||
|                     <hr style="border-width: 5px; border-color: #0984e3; width: 150px; margin-bottom: 0;"> | |||
|                 </div> | |||
|             </div> | |||
| 
 | |||
|             <div class="col-sm-6 col-md-4 px-2"> | |||
|                 <div class="bg-white shadow overflow-hidden mb32" | |||
|                     style="border-radius: 15px; width: 300px; padding-bottom: 0;"> | |||
|                     <img src="./images/demo-2.jpg" width="300px" height="auto"> | |||
|                     <h6 class="text-center my-3">Blog Preview</h6> | |||
|                     <hr style="border-width: 5px; border-color: #05c46b; width: 150px; margin-bottom: 0;"> | |||
|                 </div> | |||
|             </div> | |||
| 
 | |||
|             <div class="col-sm-6 col-md-4 px-2"> | |||
|                 <div class="bg-white shadow overflow-hidden mb32" | |||
|                     style="border-radius: 15px; width: 300px; padding-bottom: 0;"> | |||
|                     <img src="./images/demo-3.jpg" width="300px" height="auto"> | |||
|                     <h6 class="text-center my-3">Shop Page</h6> | |||
|                     <hr style="border-width: 5px; border-color: #f44f52; width: 150px; margin-bottom: 0;"> | |||
|                 </div> | |||
|             </div> | |||
|         </div> | |||
|         <div class="row d-flex justify-content-center" style="margin: 40px auto; border-radius: 15px; padding: 38px;"> | |||
|             <div class="col-sm-6 col-md-4 px-2"> | |||
|                 <div class="bg-white shadow overflow-hidden mb32" | |||
|                     style="border-radius: 15px; width: 300px; padding-bottom: 0;"> | |||
|                     <img src="./images/demo-4.jpg" width="300px" height="auto"> | |||
|                     <h6 class="text-center my-3">Blog Page</h6> | |||
|                     <hr style="border-width: 5px; border-color: #ffa801; width: 150px; margin-bottom: 0;"> | |||
|                 </div> | |||
|             </div> | |||
| 
 | |||
|             <div class="col-sm-6 col-md-4 px-2"> | |||
|                 <div class="bg-white shadow overflow-hidden mb32" | |||
|                     style="border-radius: 15px; width: 300px; padding-bottom: 0;"> | |||
|                     <img src="./images/demo-5.jpg" width="300px" height="auto"> | |||
|                     <h6 class="text-center my-3">About Page</h6> | |||
|                     <hr style="border-width: 5px; border-color: #3c40c6; width: 150px; margin-bottom: 0;"> | |||
|                 </div> | |||
|             </div> | |||
| 
 | |||
|         </div> | |||
|     </section> | |||
|     <!-- End of Demo Pages --> | |||
| 
 | |||
|     <!-- 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> | |||
| After Width: | Height: | Size: 228 KiB | 
| @ -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:flex}.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%} | |||
| @ -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} | |||
| After Width: | Height: | Size: 215 KiB | 
| After Width: | Height: | Size: 215 KiB | 
| After Width: | Height: | Size: 568 KiB | 
| After Width: | Height: | Size: 159 KiB | 
| After Width: | Height: | Size: 237 KiB | 
| After Width: | Height: | Size: 34 KiB | 
| After Width: | Height: | Size: 35 KiB | 
| After Width: | Height: | Size: 41 KiB | 
| After Width: | Height: | Size: 32 KiB | 
| After Width: | Height: | Size: 9.4 KiB | 
| After Width: | Height: | Size: 8.1 KiB | 
| After Width: | Height: | Size: 271 KiB | 
| After Width: | Height: | Size: 268 KiB | 
| After Width: | Height: | Size: 486 KiB | 
| After Width: | Height: | Size: 20 KiB | 
| After Width: | Height: | Size: 18 KiB | 
| After Width: | Height: | Size: 3.1 KiB | 
| After Width: | Height: | Size: 8.0 KiB | 
| After Width: | Height: | Size: 398 KiB | 
| After Width: | Height: | Size: 486 KiB | 
| After Width: | Height: | Size: 4.4 KiB | 
| After Width: | Height: | Size: 1.1 MiB | 
| After Width: | Height: | Size: 1.1 MiB | 
| After Width: | Height: | Size: 182 KiB | 
| After Width: | Height: | Size: 215 KiB | 
| After Width: | Height: | Size: 159 KiB | 
| After Width: | Height: | Size: 35 KiB | 
| After Width: | Height: | Size: 27 KiB | 
| After Width: | Height: | Size: 175 KiB | 
| After Width: | Height: | Size: 186 KiB | 
| After Width: | Height: | Size: 120 KiB | 
| After Width: | Height: | Size: 5.5 KiB | 
| After Width: | Height: | Size: 32 KiB | 
| After Width: | Height: | Size: 7.8 KiB | 
| After Width: | Height: | Size: 26 KiB | 
| After Width: | Height: | Size: 24 KiB | 
| After Width: | Height: | Size: 10 MiB | 
| After Width: | Height: | Size: 398 KiB | 
| After Width: | Height: | Size: 14 KiB | 
| After Width: | Height: | Size: 25 KiB | 
| After Width: | Height: | Size: 23 KiB | 
| After Width: | Height: | Size: 186 KiB | 
| @ -0,0 +1,32 @@ | |||
| odoo.define('theme_fuge.product', function(require){ | |||
|     'use strict'; | |||
| 
 | |||
|     var Animation = require('website.content.snippets.animation'); | |||
|     var ajax = require('web.ajax'); | |||
| 
 | |||
|       Animation.registry.get_blog_post = Animation.Class.extend({ | |||
|         selector : '.blog', | |||
|         start: function(){ | |||
|             var self = this; | |||
|             ajax.jsonRpc('/get_blog_post', 'call', {}) | |||
|             .then(function (data) { | |||
|                 if(data){ | |||
|                     self.$target.empty().append(data); | |||
|                 } | |||
|             }); | |||
|         } | |||
|     }); | |||
| 
 | |||
|      Animation.registry.get_main_product = Animation.Class.extend({ | |||
|         selector : '.product', | |||
|         start: function(){ | |||
|             var self = this; | |||
|             ajax.jsonRpc('/get_main_product', 'call', {}) | |||
|             .then(function (data) { | |||
|                 if(data){ | |||
|                     self.$target.empty().append(data); | |||
|                 } | |||
|             }); | |||
|         } | |||
|     }); | |||
| }); | |||
| @ -0,0 +1,5 @@ | |||
| 
 | |||
| $("#wrapwrap").on('scroll', function(){ | |||
|     $('.navbar').css({"position":"static","top":"auto"}); | |||
|    console.log('Event Fired'); | |||
| }); | |||
| @ -0,0 +1,350 @@ | |||
| /*! 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; | |||
|   } | |||
|    | |||
| @ -0,0 +1,27 @@ | |||
| //font | |||
| $font-default:'Roboto', sans-serif; | |||
| $font-offer: 'Kaushan Script', cursive; | |||
| 
 | |||
| 
 | |||
| //colors | |||
| $color-white: #ffffff; | |||
| $color-orange: #3fc0b6; | |||
| $color-black: #000000; | |||
| $color-button: #00000056; | |||
| $color-grey: #6b778d; | |||
| $color-bg:#f4f4f4; | |||
| $color-footer:#a09292; | |||
| $color-carousel:#232020; | |||
| $color-border:#cfcdcd; | |||
| 
 | |||
| 
 | |||
| //fon-size | |||
| $font-size-h1: 36px; | |||
| $font-size-h6:14px; | |||
| $font-size-subheading:25px; | |||
| $font-size-text: 14px; | |||
| $font-size-s:15px; | |||
| $font-size-demo:40px; | |||
| $font-size-form:12px; | |||
| $font-sub-head:16px; | |||
| $font-sub-blog:20px; | |||
| @ -0,0 +1,232 @@ | |||
| .btn { | |||
|     border: none !important; | |||
|     outline: none !important; | |||
|     &-primary { | |||
|         background-color: #6f6f6f57  !important; | |||
|         border-color: #6f6f6f57  !important; | |||
|         padding: 9px 15px; | |||
|         border-radius: 30px; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-banner1 { | |||
|         background-color: #ffffff !important; | |||
|         border-color: #ffffff !important; | |||
|         padding: 10px 17px; | |||
|         border-radius: 30px; | |||
|         color: black; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-contact { | |||
|         background-color: $color-orange !important; | |||
|         border-color: $color-orange !important; | |||
|         padding: 11px 60px; | |||
|         border-radius: 5px; | |||
|         color: white; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color:#ecb500 !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
|     &-banner2 { | |||
|         background-color: #ffffff !important; | |||
|         border-color: #ffffff !important; | |||
|         padding: 9px 33px; | |||
|         border-radius: 30px; | |||
|         color: black; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
|     &-men { | |||
|         background-color: #000000 !important; | |||
|         border-color: #000000 !important; | |||
|         padding: 10px 17px; | |||
|         border-radius: 30px; | |||
|         color: #ffffff; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-play { | |||
|         background-color: #00000070 !important; | |||
|         border-color: #00000070 !important; | |||
|         padding: 16px 16px; | |||
|         border-radius: 39px; | |||
|         color: #ffffff; | |||
|         font-weight: 600; | |||
|         width: 60px; | |||
|         position: absolute; | |||
|         top: 207px; | |||
|         left: 431px; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|              | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-sub { | |||
|         background-color: $color-orange !important; | |||
|         border-color: $color-orange !important; | |||
|         padding: 14px 30px; | |||
|         border-top-right-radius: 25px; | |||
|         border-bottom-right-radius: 25px; | |||
| 
 | |||
|         border-top-left-radius: 0; | |||
|                     border-bottom-left-radius: 0; | |||
|         color: #ffffff; | |||
|         font-weight: 600; | |||
|         width: 80%; | |||
| 
 | |||
|         &:hover { | |||
|             background-color: $color-black !important; | |||
|             border: none !important;  | |||
|             color: $color-white; | |||
|         } | |||
|         @media screen  and(max-width:991px){ | |||
| 
 | |||
|             width: 100% !important; | |||
|              | |||
|         } | |||
|         @media screen  and(max-width:767px){ | |||
| 
 | |||
|             width: 80% !important; | |||
|              | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-search { | |||
|         background-color: $color-black !important; | |||
|         border-color: $color-black !important; | |||
|         padding: 14px 30px; | |||
|         border-top-right-radius: 5px; | |||
|         border-bottom-right-radius: 5px; | |||
| 
 | |||
|         border-top-left-radius: 0; | |||
|                     border-bottom-left-radius: 0; | |||
|         color: #ffffff; | |||
|         font-weight: 600; | |||
|         width: 80%; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: $color-white; | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-buy { | |||
|         background-color: $color-orange !important; | |||
|         border-color: #000000 !important; | |||
|         padding:10px 52px; | |||
|         font-weight: 600; | |||
|         border-radius: 30px; | |||
|         color: white; | |||
|          | |||
|         &:hover { | |||
|             background-color: #000000 !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
| 
 | |||
|         @media screen and(max-width:991px) { | |||
|             width: 100%; | |||
|         } | |||
|     } | |||
|     &-cart_p { | |||
|          | |||
|         background-color: #000000 !important; | |||
|         border-color: #000000 !important; | |||
|         padding:10px 52px; | |||
|         border-radius: 30px; | |||
|         font-weight: 600; | |||
|         color: white; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
| 
 | |||
|         @media screen and(max-width:991px) { | |||
|             width: 100%; | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-tag { | |||
|         background-color:transparent !important; | |||
|         border-color: $color-orange !important; | |||
|         padding: 2px 5px; | |||
|         border: 1px solid !important; | |||
|         | |||
|         color: #000000; | |||
|         font-weight: 600; | |||
|         margin-bottom: 7px; | |||
|         margin-right: 5px; | |||
|         &:hover { | |||
|             background-color: $color-orange !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
| 
 | |||
|     &-fb { | |||
|         background-color:#0084ff !important; | |||
|         border-color: #0084ff !important; | |||
|         padding: 11px 30px; | |||
|         border-radius: 5px; | |||
|         color: white; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color:#0099ff !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
|     &-twitter { | |||
|         background-color:#319db8 !important; | |||
|         border-color: #319db8 !important; | |||
|         padding: 11px 30px; | |||
|         border-radius: 5px; | |||
|         color: white; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color:rgb(13, 103, 163) !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
|     &-google { | |||
|         background-color:#ff3434 !important; | |||
|         border-color: #ff3434 !important; | |||
|         padding: 11px 30px; | |||
|         border-radius: 5px; | |||
|         color: white; | |||
|         font-weight: 600; | |||
|         &:hover { | |||
|             background-color:#f54343 !important; | |||
|             border: none !important;  | |||
|             color: #ffffff !important; | |||
|         } | |||
|     } | |||
| 
 | |||
| 
 | |||
| } | |||
| @ -0,0 +1,2 @@ | |||
| @import './buttons'; | |||
| @import './product'; | |||
| @ -0,0 +1,123 @@ | |||
| .product{ | |||
|     margin-top: 90px; | |||
| 
 | |||
|     h1{ | |||
|          | |||
|         font-weight: 700; | |||
|         margin-bottom: 10px; | |||
|         span{ | |||
|             color: $color-orange; | |||
|         } | |||
|     } | |||
|     p{ | |||
|         color: $color-grey; | |||
|         font-size: $font-sub-head; | |||
|     } | |||
| 
 | |||
|     .product_sectoin{ | |||
|         padding-top:70px ; | |||
|     } | |||
| 
 | |||
|     .img_wrapper{ | |||
|         position: relative; | |||
| 
 | |||
| img{ | |||
|     width: 100%; | |||
| border-radius: 7px; | |||
| } | |||
|        | |||
| 
 | |||
|       .product_details{ | |||
| 
 | |||
| 
 | |||
|         a{ | |||
|             text-decoration: none !important; | |||
|         } | |||
|         h4{ | |||
|             text-decoration: none !important; | |||
|             font-weight: 600; | |||
|             color: $color-black !important; | |||
|             &:hover{ | |||
|                 color: $color-orange !important; | |||
|             } | |||
|         } | |||
| .old_rate{ | |||
|     color: $color-grey !important; | |||
|     margin-right: 10px; | |||
|     font-weight: normal; | |||
| } | |||
|         span{ | |||
|   font-weight: 600; | |||
|             color: $color-black; | |||
|         } | |||
|       } | |||
|    | |||
|         img{ | |||
|             width: 100%; | |||
|             border-radius: 7px; | |||
|         } | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .img_wrapper:hover .button { | |||
|         position: absolute; | |||
|         display: block; | |||
|         text-decoration: none !important; | |||
|         top: 280px; | |||
|         width: 100%; | |||
|         padding: 9px 77px; | |||
|         font-size: 20px; | |||
|         text-align: center; | |||
|         color: #ffffff; | |||
|         background-color: #ff7315; | |||
|         &:hover{ | |||
|             background-color: #000000; | |||
|         } | |||
|         @media screen and(max-width:1199px) { | |||
| 
 | |||
|             top: 230px; | |||
|         width: 100%; | |||
|         padding: 9px 50px; | |||
|         font-size: 16px; | |||
|         text-align: center; | |||
|              | |||
|         } | |||
|         @media screen and(max-width:991px) { | |||
| 
 | |||
|             top: 377px; | |||
|         width: 100%; | |||
|         padding: 11px 50px; | |||
|         font-size: 18px; | |||
|         text-align: center; | |||
|              | |||
|         } | |||
|         @media screen and(max-width:767px) { | |||
| 
 | |||
|             top: 260px; | |||
|         padding: 11px 50px; | |||
|         font-size: 18px; | |||
|         text-align: center; | |||
|              | |||
|         } | |||
|     } | |||
|      | |||
|      | |||
|      | |||
|     .button{ | |||
|         display:none; | |||
|     } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| } | |||
| 
 | |||
| 
 | |||
| @-webkit-keyframes flash { | |||
|     0% { opacity: .3; } | |||
|     100% { opacity: 1; } | |||
|    } | |||
|    @keyframes flash { | |||
|     0% { opacity: .3; } | |||
|     100% { opacity: 1; } | |||
|    } | |||
| @ -0,0 +1,197 @@ | |||
| .footer{ | |||
|     background-color:$color-carousel; | |||
|     padding-top: 90px; | |||
|     padding-bottom: 90px; | |||
| 
 | |||
|     .footer_top{ | |||
| 
 | |||
|         border: 1px solid; | |||
|         border-color: transparent; | |||
|         border-bottom-color: $color-footer !important; | |||
|         padding-bottom: 43px; | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .footer_left{ | |||
|         text-align: left; | |||
|         margin-top: 20px; | |||
| 
 | |||
|         .footer_logo{ | |||
|             text-transform: uppercase; | |||
|             font-size: 33px; | |||
|             font-weight: 600; | |||
| 
 | |||
|             a{ | |||
|                 color: $color-white; | |||
|                 text-decoration: none; | |||
|             } | |||
| 
 | |||
|             color: $color-white; | |||
|             span{ | |||
|                 color: $color-orange; | |||
|             } | |||
|         } | |||
| 
 | |||
|         .footer_desc{ | |||
|             color: $color-footer; | |||
|             margin-top: 30px; | |||
|             font-size: 14px; | |||
|         } | |||
| 
 | |||
|         .footer_icons{ | |||
| 
 | |||
|             ul{ | |||
|                 display: flex; | |||
|                 list-style: none; | |||
|                 padding-left: 0; | |||
|                 margin-top: 40px; | |||
|                  | |||
|                 li{ | |||
|                     color: $color-white; | |||
|                      | |||
|                     font-size: 18px; | |||
|                     width: 40px; | |||
|                     height: 40px; | |||
|                     border-radius: 50%; | |||
|                     margin-right: 20px; | |||
|                     background-color: #363434; | |||
|                     text-align: center; | |||
|                     padding-top: 11px; | |||
| 
 | |||
|                     &:hover{ | |||
|                         background-color: $color-orange; | |||
|                     } | |||
|                 } | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .footer_right{ | |||
|         margin-top: 20px; | |||
| 
 | |||
|         .footer_discount{ | |||
|             color: $color-white; | |||
|             font-size: 33px; | |||
|             font-weight: 700; | |||
|         } | |||
| 
 | |||
|         .footer_right_bottom{ | |||
| 
 | |||
|             margin-top: 40px; | |||
|                 padding-top: 20px; | |||
| 
 | |||
| 
 | |||
|             .ul_wrapper{ | |||
|                 display: flex; | |||
|        justify-content: space-between; | |||
|                | |||
|                } | |||
| 
 | |||
|                 ul{ | |||
|                     padding-left: 0; | |||
|                     | |||
|                     padding-top: 10px; | |||
| 
 | |||
|                     a{ | |||
|                         text-decoration: none; | |||
|                     } | |||
|                     | |||
|                     li{ | |||
|                         font-size: 14px; | |||
|                         list-style: none; | |||
|                         padding-bottom: 10px; | |||
|                         | |||
|                         color: $color-footer; | |||
|                         &:hover{ | |||
|                             color: $color-orange; | |||
|                             | |||
|                         } | |||
|                     } | |||
| 
 | |||
| 
 | |||
|                 } | |||
|             } | |||
| 
 | |||
| 
 | |||
|             .f_r_h{ | |||
|                 color: $color-white; | |||
|                 font-weight: 600; | |||
|             } | |||
| 
 | |||
|             .address{ | |||
|                 color: $color-footer; | |||
|                 padding-top: 10px; | |||
|                 padding-bottom: 60px; | |||
|                 font-size: 14px; | |||
|             } | |||
| 
 | |||
| 
 | |||
| 
 | |||
|             .payment{ | |||
| 
 | |||
|                 ul{ | |||
|                     display: flex; | |||
|                     list-style: none; | |||
|                     padding-left: 0; | |||
|                     margin-top: 20px; | |||
|                      | |||
|                     li{ | |||
|                          | |||
|                         font-size: 34px; | |||
| margin: 0 14px 0px 0; | |||
|     color: #acb2b7; | |||
|     &:hover{ | |||
|         color: #636363; | |||
|     } | |||
|                     } | |||
|                 } | |||
|             } | |||
| 
 | |||
|         } | |||
| 
 | |||
| 
 | |||
|         .footer_bottom{ | |||
| 
 | |||
|             padding-top: 50px; | |||
|             .bottom_left{ | |||
|                 span{ | |||
| 
 | |||
|                     margin: 0 14px 0px 0; | |||
|                 font-size: 16px; | |||
|                 a{ | |||
|                     color: $color-footer; | |||
|                     text-decoration: none; | |||
| 
 | |||
|                     &:hover{ | |||
|                         color: $color-orange; | |||
|                     } | |||
|                 } | |||
|                 } | |||
|                  | |||
|                 | |||
|             } | |||
| 
 | |||
|             .bottom_right{ | |||
|                 color: $color-footer; | |||
|                 font-size: 16px; | |||
|                 text-align: left !important; | |||
|                 a{ | |||
|                     color: $color-footer; | |||
|                     text-decoration: none; | |||
| 
 | |||
|                     &:hover{ | |||
|                         color: $color-orange; | |||
|                     } | |||
|                 } | |||
|             } | |||
| 
 | |||
| 
 | |||
|             .f_b_r{ | |||
|                 display: flex; | |||
| justify-content: end; | |||
| 
 | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
| @ -0,0 +1,226 @@ | |||
| .banner{ | |||
|     position: relative; | |||
| .carousel-control-next-icon, .carousel-control-prev-icon{ | |||
|     | |||
| } | |||
| .carousel-indicators li{display: none;} | |||
| .carousel-control-prev { | |||
|     left: -33px; | |||
| 
 | |||
|     @media screen and (max-width:1080px){ | |||
|         left:3px | |||
|     } | |||
| } | |||
|     .bg-right{ | |||
|         background-image: linear-gradient(#11111191, #11111191),url(./../images/banner/banner1.jpg); | |||
| 
 | |||
|         height: 100vh; | |||
| 
 | |||
|         background-size: cover; | |||
|             width: 100%; | |||
|                 background-repeat: no-repeat; | |||
|         background-position: center; | |||
|       padding-bottom: 200px; | |||
|        | |||
|     } | |||
|     .bg-right2{ | |||
|         background-image: linear-gradient(#11111191, #11111191),url(./../images/banner/banner3.jpg); | |||
| 
 | |||
|         height: 100vh; | |||
| 
 | |||
|         background-size: cover; | |||
|             width: 100%; | |||
|                 background-repeat: no-repeat; | |||
|         background-position: center; | |||
|       padding-bottom: 200px; | |||
|        | |||
|     } | |||
|     .bg-right3{ | |||
|         background-image: linear-gradient(#11111191, #11111191),url(./../images/banner/banner4.jpg); | |||
| 
 | |||
|         height: 100vh; | |||
| 
 | |||
|         background-size: cover; | |||
|             width: 100%; | |||
|                 background-repeat: no-repeat; | |||
|         background-position: center; | |||
|       padding-bottom: 200px; | |||
|        | |||
|     } | |||
|     .bg-left{ | |||
| height: 100vh; | |||
|         padding-bottom: 200px; | |||
|         background-image: linear-gradient(#11111191, #11111191),url(./../images/banner/left3.jpg); | |||
|         background-size: cover; | |||
|             width: 100%; | |||
|                 background-repeat: no-repeat; | |||
|         background-position: center; | |||
| 
 | |||
|         @media screen and(max-width:767px){ | |||
|      | |||
|             height: 50vh; | |||
| 
 | |||
|             padding-bottom: 20px; | |||
|         } | |||
|     } | |||
| .left_card{ | |||
|     margin-top: 200px; | |||
|     background: transparent; | |||
|     border: none; | |||
|     margin-left: 50px; | |||
| 
 | |||
|     .card-title{ | |||
|         color: #fff; | |||
|     font-size: 50px; | |||
|     text-align: left; | |||
|     font-weight: 900; | |||
|     @media screen and(max-width:839px){ | |||
|      | |||
|         font-size:40px; | |||
|          | |||
|     } | |||
|     @media screen and(max-width:790px){ | |||
|      | |||
|         font-size:35px; | |||
|          | |||
|     } | |||
| 
 | |||
|     @media screen and(max-width:768px){ | |||
|      | |||
|         font-size:50px; | |||
|          | |||
|     } | |||
|     | |||
| 
 | |||
|     | |||
|     } | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| .right_card{ | |||
|     margin-top: 200px; | |||
|     background: transparent; | |||
|     border: none; | |||
|     margin-left: 0; | |||
|     @media screen and(max-width:767px){ | |||
|      | |||
|         margin-top: 75px; | |||
|          | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .card-title{color: #ffffff; | |||
|         font-size: 50px; | |||
|         text-align: left; | |||
|         font-weight: 900; | |||
| 
 | |||
|         @media screen and(max-width:1250px){ | |||
| 
 | |||
|             font-size:35px; | |||
|              | |||
|         } | |||
| 
 | |||
|         @media screen and(max-width:768px){ | |||
|      | |||
|             font-size:55px; | |||
|              | |||
|         } | |||
|         } | |||
| 
 | |||
|      | |||
| } | |||
| 
 | |||
| 
 | |||
| } | |||
| 
 | |||
| .top_wrapper{ | |||
|     position: absolute; | |||
|     display: flex; | |||
|     z-index: 1; | |||
|     justify-content: space-between; | |||
|     width: 100%; | |||
|     padding: 0px 46px; | |||
| 
 | |||
|     @media screen and(max-width:800px){ | |||
|         padding-right: 14px; | |||
|     | |||
|                 | |||
|        } | |||
| 
 | |||
| 
 | |||
|     .top-right{ | |||
|         margin-left: 19px; | |||
|         padding-top: 20px; | |||
|         align-items: baseline; | |||
| 
 | |||
|         @media screen and(max-width:800px){ | |||
|             padding-right: 14px; | |||
|            display: none !important; | |||
|                     | |||
|            } | |||
|         h6{ | |||
|             color:$color-white ; | |||
|             font-weight: 700; | |||
|             font-size: $font-size-h6; | |||
|                  | |||
|                } | |||
|              | |||
|                      | |||
|                     p{ | |||
|                         margin-left: 6px; | |||
|                         color:$color-white ; | |||
|                         font-weight: 600; | |||
|                         | |||
|                                 } | |||
|                                 .more{ | |||
|                                     color:$color-orange; | |||
|                                     margin-left: 5px; | |||
|                                 } | |||
|                             } | |||
| 
 | |||
| 
 | |||
| 
 | |||
|     .top-left{ | |||
|         padding-top: 20px; | |||
|         align-items: baseline; | |||
|          | |||
|         margin-right: 20px; | |||
| 
 | |||
|         @media screen and(max-width:800px){ | |||
|             width: 100%; | |||
|             margin-right: 0; | |||
|             justify-content: space-between !important; | |||
|                      | |||
|             } | |||
| span{ | |||
|     margin-right: 20px; | |||
|     color: #fff; | |||
|     width: 36px; | |||
|     height: 36px; | |||
|     background: rgba(255, 255, 255, 0.141); | |||
|     border-radius: 50%; | |||
|     display: inline-block; | |||
|     text-align: center; | |||
|     line-height: 36px; | |||
| 
 | |||
|     &:hover{ | |||
|         background-color: $color-orange; | |||
|     } | |||
| } | |||
|     } | |||
| 
 | |||
|     .cart{  | |||
|         color: $color-white; | |||
|         background: rgba(255, 255, 255, 0.141); | |||
|     } | |||
| 
 | |||
|     .cart-svg{ | |||
|         width: 20px; | |||
|         list-style: none; | |||
|         margin-right: 0 !important; | |||
|         margin-left: 5px; | |||
|     } | |||
| 
 | |||
|      | |||
| } | |||
| @ -0,0 +1,5 @@ | |||
| @import './header'; | |||
| @import './navigation'; | |||
| @import './footer'; | |||
| @import './sidebar'; | |||
| @import './sidebar2'; | |||
| @ -0,0 +1,111 @@ | |||
| .header_wrapper{ | |||
|     .navbar{ | |||
|         z-index: 1030; | |||
|         position: absolute; | |||
|         top: 70px; | |||
|         width: 100%; | |||
|         background-color: rgb(114, 89, 89); | |||
| 
 | |||
|         @media screen  and(max-width:991px){ | |||
| 
 | |||
|             padding: 0px 34px; | |||
| 
 | |||
|         } | |||
|      | |||
|     .navbar-brand{ | |||
|         color: #fff; | |||
| font-size: 30px; | |||
| padding: 0; | |||
| font-weight: 900; | |||
| text-transform: uppercase; | |||
| 
 | |||
| .lohny{color: $color-orange; | |||
| &:hover{ | |||
|     color: $color-white; | |||
| }} | |||
|     } | |||
|     | |||
| } .search-right{ | |||
|     margin-left: 100px; | |||
| font-size: 20px; | |||
| @media screen and(max-width:767px){ | |||
|     margin-left: 0px; | |||
|       } | |||
| 
 | |||
| a{color: #fff !important; | |||
|     text-decoration: none !important; | |||
|     | |||
| 
 | |||
| } | |||
|         .search-text{ | |||
|             color: #fff !important; | |||
|            | |||
|         } | |||
|     } | |||
| 
 | |||
|     .navbar-nav{ | |||
| 
 | |||
|         | |||
|          | |||
|         .active{ | |||
|             color: $color-orange !important; | |||
|         } | |||
|         li{ | |||
|             text-transform: uppercase; | |||
|             font-size: 16px; | |||
|           margin:  0 15px 0 0; | |||
|             .nav-link{color: #fff !important; | |||
|             &:hover{ | |||
|                 color: $color-orange !important; | |||
|             } | |||
|             } | |||
|         } | |||
|        | |||
|     } | |||
|     .navbar-light .navbar-toggler{ | |||
| 
 | |||
|         color: #fff; | |||
|         border-color: #fff; | |||
|         background-color: white; | |||
| 
 | |||
| 
 | |||
|         padding-top: 1px; | |||
| padding-right: 1px; | |||
| padding-bottom: 0px; | |||
| padding-left: 1px; | |||
| 
 | |||
| 
 | |||
|         &:before{ | |||
|             visibility: hidden; | |||
|         } | |||
|         .navbar-toggler-icon{ | |||
|             color: $color-orange; | |||
|             padding-top: 4px; | |||
| 
 | |||
|         } | |||
|     } | |||
| 
 | |||
|     .navbar-collapse{ | |||
| 
 | |||
|         ul{ | |||
|             background-color: transparent !important; | |||
|             border: none !important; | |||
| @media screen and (max-width:992px) { | |||
| 
 | |||
|     background: #232020f2 !important; | |||
|     padding: 10px !important; | |||
|     border-radius: 6px; | |||
|     position: relative; | |||
|     border: 1px #232020 solid; | |||
|     max-height: calc(100vh - 120px); | |||
|     overflow: auto; | |||
|     margin-top: 6px; | |||
| } | |||
| 
 | |||
| 
 | |||
|     } | |||
| } | |||
| 
 | |||
| .navbar-light .navbar-toggler-icon { | |||
|     background-image:none !important; | |||
| } | |||
| @ -0,0 +1,502 @@ | |||
| .filter_sidebar { | |||
|   text-align: left; | |||
|   background-color: $color-bg; | |||
|   padding-top: 40px; | |||
|   padding-left: 30px; | |||
|   .filter_heading { | |||
|     font-size: 24px; | |||
|     color: $color-black; | |||
|     margin-bottom: 30px; | |||
|     font-weight: 700; | |||
|     span { | |||
|       color: $color-orange; | |||
|     } | |||
|   } | |||
|   .filter_sidebar_sub { | |||
|     .signin-form { | |||
|       margin-bottom: 20px; | |||
|     } | |||
|     .forms-gds { | |||
|       display: grid; | |||
|       grid-template-columns: 2fr 1fr; | |||
|       .form-input { | |||
|         input { | |||
|           width: 100%; | |||
|           background-color: #ffffff; | |||
|           border-top-left-radius: 5px; | |||
|           border-bottom-left-radius: 5px; | |||
|           border: none; | |||
|           padding: 15px 30px; | |||
|           color: #2f2f2f; | |||
|         } | |||
|       } | |||
|     } | |||
|     ul { | |||
|       padding-left: 0px; | |||
|       list-style: none; | |||
|       li { | |||
|         line-height: 30px; | |||
|         a { | |||
|           color: #828282; | |||
|           text-decoration: none; | |||
|           &:hover { | |||
|             color: $color-orange; | |||
|           } | |||
|         } | |||
|       } | |||
|       .hh { | |||
|         display: flex; | |||
|         justify-content: space-between; | |||
|         border: 1px solid; | |||
|         border-color: transparent; | |||
|         border-bottom-color: $color-grey !important ; | |||
|         width: 85%; | |||
|         padding-bottom: 13px; | |||
|         margin-bottom: 10px; | |||
|         font-size: 14px; | |||
|         color: $color-grey; | |||
|       } | |||
|     } | |||
|     .nu { | |||
|       color: #ffffff; | |||
|       height: 29px; | |||
|       width: 39px; | |||
|       background-color: #000000; | |||
|       border-radius: 11px; | |||
|       display: inline-block; | |||
|       padding: 0px 13px; | |||
|       font-size: 12px; | |||
|     } | |||
|     .check { | |||
|       .container { | |||
|         display: block; | |||
|         position: relative; | |||
|         padding-left: 35px; | |||
|         margin-bottom: 16px; | |||
|         cursor: pointer; | |||
|         font-size: 14px; | |||
|         color: $color-grey; | |||
|         -webkit-user-select: none; | |||
|         -moz-user-select: none; | |||
|         -ms-user-select: none; | |||
|         user-select: none; | |||
|       } | |||
|       .container input { | |||
|         position: absolute; | |||
|         opacity: 0; | |||
|         cursor: pointer; | |||
|         height: 0; | |||
|         width: 0; | |||
|       } | |||
|       .checkmark { | |||
|         position: absolute; | |||
|         top: 0; | |||
|         left: 0; | |||
|         height: 20px; | |||
|         width: 20px; | |||
|         border: 2px solid; | |||
|         border-color: $color-grey; | |||
|         background-color: $color-white; | |||
|       } | |||
|       .container:hover input ~ .checkmark { | |||
|         background-color: $color-black; | |||
|       } | |||
|       .container input:checked ~ .checkmark { | |||
|         background-color: $color-orange; | |||
|       } | |||
|       .checkmark:after { | |||
|         content: ""; | |||
|         position: absolute; | |||
|         display: none; | |||
|       } | |||
|       .container input:checked ~ .checkmark:after { | |||
|         display: block; | |||
|       } | |||
|       .container .checkmark:after { | |||
|         left: 6px; | |||
|         top: 3px; | |||
|         width: 5px; | |||
|         height: 10px; | |||
|         border: solid white; | |||
|         border-width: 0 3px 3px 0; | |||
|         -webkit-transform: rotate(45deg); | |||
|         -ms-transform: rotate(45deg); | |||
|         transform: rotate(45deg); | |||
|       } | |||
|     } | |||
|     .top { | |||
|       font-weight: 800; | |||
|     } | |||
|   } | |||
|   .white { | |||
|     background-color: #fff !important; | |||
|     margin-right: 5px; | |||
|     border: 1px solid; | |||
|     border-color: black; | |||
|     &:hover { | |||
|       color: $color-white; | |||
|       background-color: darken(rgb(194, 194, 194), 5%) !important; | |||
|       border: none; | |||
|     } | |||
|   } | |||
|   .black { | |||
|     background-color: $color-black !important; | |||
|     margin-right: 5px; | |||
|     border: 1px solid; | |||
|     border-color: black; | |||
|     &:hover { | |||
|       color: $color-white; | |||
|       background-color: darken(rgb(51, 49, 49), 5%) !important; | |||
|       border: none; | |||
|     } | |||
|   } | |||
|   .grey { | |||
|     background-color: $color-grey !important; | |||
|     margin-right: 5px; | |||
|     border: 1px solid; | |||
|     border-color: black; | |||
|     &:hover { | |||
|       background-color: darken(rgb(63, 62, 62), 5%) !important; | |||
|       border: none; | |||
|     } | |||
|   } | |||
|   .blue { | |||
|     background-color: #4c00ff !important; | |||
|     margin-right: 5px; | |||
|     border: 1px solid; | |||
|     border-color: black; | |||
|     &:hover { | |||
|       background-color: darken(#4c00ff, 5%) !important; | |||
|       border: none; | |||
|     } | |||
|   } | |||
|   .green { | |||
|     background-color: #00ff62 !important; | |||
|     border: 1px solid; | |||
|     border-color: black; | |||
|     &:hover { | |||
|       background-color: darken(#00ff62, 5%) !important; | |||
|       border: none; | |||
|     } | |||
|   } | |||
|   .red { | |||
|     background-color: red !important; | |||
|     border: 1px solid; | |||
|     border-color: black; | |||
|     &:hover { | |||
|       background-color: darken(red, 5%) !important; | |||
|       border: none; | |||
|     } | |||
|   } | |||
| } | |||
| .ddd { | |||
|   li { | |||
|     margin-bottom: 15px; | |||
|     span { | |||
|       font-size: 12px; | |||
|       margin-right: 5px; | |||
|     } | |||
|   } | |||
| } | |||
| .recent { | |||
|   margin-top: 10px; | |||
|   .rec_img { | |||
|     width: 150px; | |||
|     margin-bottom: 20px; | |||
|     img { | |||
|       border-radius: 4px; | |||
|       width: 100%; | |||
|     } | |||
|     .product_details { | |||
|       margin-left: 20px; | |||
|       a { | |||
|         color: $color-black; | |||
|       } | |||
|     } | |||
|   } | |||
| } | |||
| .filter_sidebar_main { | |||
|   margin-bottom: 30px; | |||
| } | |||
| .range-field { | |||
|   width: 100%; | |||
|   // @media screen and (max-width:768px){ | |||
|   // width: 30%; | |||
| } | |||
| .ui-menu .ui-menu-icon { | |||
|   position: static; | |||
|   float: right; | |||
| } | |||
| .ui-progressbar { | |||
|   height: 2em; | |||
|   text-align: left; | |||
|   overflow: hidden; | |||
| } | |||
| .ui-progressbar .ui-progressbar-value { | |||
|   margin: -1px; | |||
|   height: 100%; | |||
| } | |||
| .ui-resizable { | |||
|   position: relative; | |||
| } | |||
| .ui-resizable-handle { | |||
|   position: absolute; | |||
|   font-size: 0.1px; | |||
|   display: block; | |||
| } | |||
| .ui-resizable-disabled .ui-resizable-handle, | |||
| .ui-resizable-autohide .ui-resizable-handle { | |||
|   display: none; | |||
| } | |||
| .ui-resizable-n { | |||
|   cursor: n-resize; | |||
|   height: 7px; | |||
|   width: 100%; | |||
|   top: -5px; | |||
|   left: 0; | |||
| } | |||
| .ui-resizable-s { | |||
|   cursor: s-resize; | |||
|   height: 7px; | |||
|   width: 100%; | |||
|   bottom: -5px; | |||
|   left: 0; | |||
| } | |||
| .ui-resizable-e { | |||
|   cursor: e-resize; | |||
|   width: 7px; | |||
|   right: -5px; | |||
|   top: 0; | |||
|   height: 100%; | |||
| } | |||
| .ui-resizable-w { | |||
|   cursor: w-resize; | |||
|   width: 7px; | |||
|   left: -5px; | |||
|   top: 0; | |||
|   height: 100%; | |||
| } | |||
| .ui-resizable-se { | |||
|   cursor: se-resize; | |||
|   width: 12px; | |||
|   height: 12px; | |||
|   right: 1px; | |||
|   bottom: 1px; | |||
| } | |||
| .ui-resizable-sw { | |||
|   cursor: sw-resize; | |||
|   width: 9px; | |||
|   height: 9px; | |||
|   left: -5px; | |||
|   bottom: -5px; | |||
| } | |||
| .ui-resizable-nw { | |||
|   cursor: nw-resize; | |||
|   width: 9px; | |||
|   height: 9px; | |||
|   left: -5px; | |||
|   top: -5px; | |||
| } | |||
| .ui-resizable-ne { | |||
|   cursor: ne-resize; | |||
|   width: 9px; | |||
|   height: 9px; | |||
|   right: -5px; | |||
|   top: -5px; | |||
| } | |||
| .ui-selectable-helper { | |||
|   position: absolute; | |||
|   z-index: 100; | |||
|   border: 1px dotted black; | |||
| } | |||
| .ui-slider { | |||
|   position: relative; | |||
|   text-align: left; | |||
| } | |||
| .ui-slider .ui-slider-handle { | |||
|   position: absolute; | |||
|   z-index: 2; | |||
|   width: 1.2em; | |||
|   height: 1.2em; | |||
|   cursor: default; | |||
| } | |||
| .ui-slider .ui-slider-range { | |||
|   position: absolute; | |||
|   z-index: 1; | |||
|   font-size: 0.7em; | |||
|   display: block; | |||
|   border: 0; | |||
|   background-position: 0 0; | |||
| } | |||
| .ui-slider-horizontal { | |||
|   height: 6px; | |||
| } | |||
| .ui-slider-horizontal .ui-slider-handle { | |||
|   top: -5px; | |||
|   margin-left: 0; | |||
| } | |||
| .ui-slider-horizontal .ui-slider-range { | |||
|   top: 0; | |||
|   height: 100%; | |||
| } | |||
| .ui-slider-horizontal .ui-slider-range-min { | |||
|   left: 0; | |||
| } | |||
| .ui-slider-horizontal .ui-slider-range-max { | |||
|   right: 0; | |||
| } | |||
| .ui-slider-vertical { | |||
|   width: 0.3em; | |||
|   height: 100px; | |||
| } | |||
| .ui-slider-vertical .ui-slider-handle { | |||
|   left: -0.3em; | |||
|   margin-left: 0; | |||
|   margin-bottom: -0.6em; | |||
| } | |||
| .ui-slider-vertical .ui-slider-range { | |||
|   left: 0; | |||
|   width: 100%; | |||
| } | |||
| .ui-slider-vertical .ui-slider-range-min { | |||
|   bottom: 0; | |||
| } | |||
| .ui-slider-vertical .ui-slider-range-max { | |||
|   top: 0; | |||
| } | |||
| .ui-spinner { | |||
|   position: relative; | |||
|   display: inline-block; | |||
|   overflow: hidden; | |||
|   padding: 0; | |||
|   vertical-align: middle; | |||
| } | |||
| .ui-spinner-input { | |||
|   border: none; | |||
|   background: none; | |||
|   padding: 0; | |||
|   margin: 0.2em 0; | |||
|   vertical-align: middle; | |||
|   margin-left: 0.4em; | |||
|   margin-right: 22px; | |||
| } | |||
| .ui-spinner-button { | |||
|   width: 16px; | |||
|   height: 50%; | |||
|   font-size: 0.5em; | |||
|   padding: 0; | |||
|   margin: 0; | |||
|   text-align: center; | |||
|   position: absolute; | |||
|   cursor: default; | |||
|   display: block; | |||
|   overflow: hidden; | |||
|   right: 0; | |||
| } | |||
| .ui-spinner a.ui-spinner-button { | |||
|   border-top: none; | |||
|   border-bottom: none; | |||
|   border-right: none; | |||
| } | |||
| /* more specificity required here to overide default borders */ | |||
| .ui-spinner .ui-icon { | |||
|   position: absolute; | |||
|   margin-top: -8px; | |||
|   top: 50%; | |||
|   left: 0; | |||
| } | |||
| /* vertical centre icon */ | |||
| .ui-spinner-up { | |||
|   top: 0; | |||
| } | |||
| .ui-spinner-down { | |||
|   bottom: 0; | |||
| } | |||
| /* Fades and background-images don't work well together in IE6, drop the image */ | |||
| /* Component containers | |||
|           ----------------------------------*/ | |||
| .ui-widget { | |||
|   font-family: Verdana, Arial, sans-serif; | |||
|   font-size: 1.1em; | |||
| } | |||
| .ui-widget .ui-widget { | |||
|   font-size: 1em; | |||
| } | |||
| .ui-widget input, | |||
| .ui-widget select, | |||
| .ui-widget textarea, | |||
| .ui-widget button { | |||
|   font-family: Verdana, Arial, sans-serif; | |||
|   font-size: 1em; | |||
| } | |||
| .ui-widget-content { | |||
|   background: #e0ddda; | |||
|   color: #222222; | |||
|   margin-top: 3em; | |||
| } | |||
| .ui-widget-content a { | |||
|   color: #222222; | |||
| } | |||
| .ui-widget-header { | |||
|   background: #2b2d2d; | |||
|   color: #222222; | |||
|   font-weight: bold; | |||
| } | |||
| .ui-widget-header a { | |||
|   color: #222222; | |||
| } | |||
| /* Interaction states | |||
|           ----------------------------------*/ | |||
| .ui-state-default, | |||
| .ui-widget-content .ui-state-default, | |||
| .ui-widget-header .ui-state-default { | |||
|   border: 0px solid #ff7315; | |||
|   /*{borderColorDefault}*/ | |||
|   background: #ff7315; | |||
|   font-weight: normal; | |||
|   color: #444; | |||
|   outline: none; | |||
|   width: 15px; | |||
|   height: 15px; | |||
|   cursor: pointer; | |||
|   border-radius: 100%; | |||
| } | |||
| .ui-state-default a, | |||
| .ui-state-default a:link, | |||
| .ui-state-default a:visited { | |||
|   color: #555555; | |||
|   text-decoration: none; | |||
| } | |||
| ul.dropdown-vjm-transitu6, | |||
| ul.dropdown-vjm-transitu5 { | |||
|   margin: 0; | |||
|   position: relative; | |||
| } | |||
| ul.dropdown-vjm-transitu6 li { | |||
|   list-style: none; | |||
| } | |||
| ul.dropdown-vjm-transitu6 li p { | |||
|   width: 100%; | |||
| } | |||
| span.amount { | |||
|   color: #ffffff; | |||
|   font-size: 16px; | |||
| } | |||
| input#amount, | |||
| input#amount1 { | |||
|   font-size: 15px; | |||
|   outline: none; | |||
|   background: none; | |||
|   word-spacing: 1em; | |||
|   color: #5a5a5a !important; | |||
|   position: absolute; | |||
|   left: 0%; | |||
|   top: -27px; | |||
|   margin-top: -10px; | |||
| } | |||
| .range, | |||
| .w3-brand-select, | |||
| .w3ls-featured-ads { | |||
|   padding: 20px 20px; | |||
|   border: 1px solid #e4e4e4; | |||
| } | |||
| @ -0,0 +1,325 @@ | |||
| .filter_sidebar2{ | |||
|     text-align: left; | |||
|     background-color: $color-bg; | |||
| 
 | |||
|     padding-top: 40px; | |||
|     padding-left: 30px; | |||
|      | |||
|     .filter_heading{ | |||
|         font-size: 24px; | |||
|         color: $color-black; | |||
|     margin-bottom: 30px; | |||
|         font-weight: 700; | |||
|         span{ | |||
|             color: $color-orange; | |||
|         } | |||
|        | |||
|     } | |||
|      | |||
|     .filter_sidebar_sub{ | |||
|          | |||
|      | |||
|      | |||
| .signin-form{ | |||
|     margin-bottom: 20px; | |||
| } | |||
|         .forms-gds{ | |||
|             display: grid; | |||
|             grid-template-columns: 2fr 1fr; | |||
| 
 | |||
| 
 | |||
|             .form-input{ | |||
|                 input{ | |||
|                     width: 100%; | |||
|                     background-color: #ffffff; | |||
|                     border-top-left-radius: 5px; | |||
|                     border-bottom-left-radius: 5px; | |||
|                     border: none; | |||
|                     padding: 15px 30px; | |||
|                     color:#2f2f2f; | |||
|                 } | |||
|             } | |||
|         } | |||
| 
 | |||
|         ul{ | |||
|             padding-left: 0px; | |||
|     list-style: none; | |||
|             li{ | |||
|                 line-height: 30px; | |||
|                 a{ | |||
|                     color:#828282; | |||
|                     text-decoration: none; | |||
|                     &:hover{ | |||
|                         color: $color-orange; | |||
|                     } | |||
| 
 | |||
|                     | |||
|                 } | |||
|      | |||
|                  | |||
|                 | |||
|             } | |||
| 
 | |||
|             .hh{ | |||
|                 display: flex; | |||
|                 justify-content: space-between; | |||
|                 border: 1px solid ; | |||
|                 border-color: transparent; | |||
|                 border-bottom-color: $color-grey !important ; | |||
|                 width: 85%; | |||
|                 padding-bottom: 13px; | |||
|                 margin-bottom: 10px; | |||
|                 font-size: 14px; | |||
|                 color: $color-grey; | |||
|             } | |||
|         } | |||
| 
 | |||
| 
 | |||
|         .nu{ | |||
|             color: #ffffff; | |||
|             height: 29px; | |||
|             width: 39px; | |||
|             background-color: #000000; | |||
|             border-radius: 11px; | |||
|             display: inline-block; | |||
|             padding: 0px 13px; | |||
|             font-size: 12px; | |||
|         } | |||
| 
 | |||
|      | |||
|      | |||
|         .check{ | |||
|           .container { | |||
|             display: block; | |||
|             position: relative; | |||
|             padding-left: 35px; | |||
|             margin-bottom: 16px; | |||
|             cursor: pointer; | |||
|             font-size: 14px; | |||
|             color: $color-grey; | |||
|             -webkit-user-select: none; | |||
|             -moz-user-select: none; | |||
|             -ms-user-select: none; | |||
|             user-select: none; | |||
|           } | |||
| 
 | |||
| .container input { | |||
|   position: absolute; | |||
|   opacity: 0; | |||
|   cursor: pointer; | |||
|   height: 0; | |||
|   width: 0; | |||
| } | |||
| 
 | |||
| 
 | |||
| .checkmark { | |||
|   position: absolute; | |||
|   top: 0; | |||
|   left: 0; | |||
|   height: 20px; | |||
|   width: 20px; | |||
|   border: 2px solid; | |||
|   border-color: $color-grey; | |||
|   background-color: $color-white | |||
| } | |||
| 
 | |||
| 
 | |||
| .container:hover input ~ .checkmark { | |||
|   background-color:$color-black; | |||
| } | |||
| 
 | |||
| .container input:checked ~ .checkmark { | |||
|   background-color: $color-orange; | |||
| } | |||
| 
 | |||
| .checkmark:after { | |||
|   content: ""; | |||
|   position: absolute; | |||
|   display: none; | |||
| } | |||
| 
 | |||
| 
 | |||
| .container input:checked ~ .checkmark:after { | |||
|   display: block; | |||
| } | |||
| 
 | |||
| .container .checkmark:after { | |||
|   left: 6px; | |||
|   top: 3px; | |||
|   width: 5px; | |||
|   height: 10px; | |||
|   border: solid white; | |||
|   border-width: 0 3px 3px 0; | |||
|   -webkit-transform: rotate(45deg); | |||
|   -ms-transform: rotate(45deg); | |||
|   transform: rotate(45deg); | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
|           } | |||
|          | |||
|         .top{ | |||
|             font-weight: 800; | |||
|         } | |||
| 
 | |||
| 
 | |||
|         .populor{ | |||
|   | |||
|             li{ | |||
| display: flex; | |||
| align-items: center; | |||
|                 .wrapper{ | |||
|                     width: 80px; | |||
|                 } | |||
| 
 | |||
|                  | |||
|                 img{ | |||
|                     width: 100%; | |||
|                     border-radius: 5px; | |||
|                 } | |||
| 
 | |||
| .wrapper2{ | |||
|     padding-left: 10px; | |||
|     p{ | |||
|         color: $color-grey; | |||
|         margin-bottom: 0; | |||
|         font-size: 14px; | |||
|     } | |||
|     span{ | |||
|      | |||
|         font-size: 16px; | |||
|         font-weight: 600; | |||
|         a{ | |||
|             color: $color-black; | |||
|             &:hover{ | |||
|                 color: $color-orange; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
|                 | |||
| 
 | |||
| 
 | |||
|             } | |||
|         } | |||
|          | |||
| 
 | |||
| 
 | |||
|         .tags{ | |||
|             padding-right: 20px; | |||
|         } | |||
| 
 | |||
| 
 | |||
|         .bottom_img{ | |||
|         padding-right: 20px; | |||
|             position: relative; | |||
|             padding-bottom: 30px; | |||
|         | |||
|             img{ | |||
|                 width: 100%; | |||
|                 border-radius: 5px; | |||
|             } | |||
| 
 | |||
|             .offer{ | |||
|                 position: absolute; | |||
|                 bottom: 100px; | |||
|               | |||
|                 h3{ | |||
|                     color: $color-white; | |||
|                     font-weight: 600; | |||
|                     padding-left: 20px; | |||
|                 } | |||
|                 p{ | |||
|                     color: $color-white; | |||
|                     padding-left: 20px; | |||
|                 } | |||
|             } | |||
|         } | |||
|     } | |||
|      | |||
|      | |||
|      | |||
|      | |||
|      | |||
|      | |||
|     } | |||
|      | |||
| .ddd{ | |||
|   li{ | |||
|     margin-bottom: 15px; | |||
|     span{ | |||
|       font-size: 12px; | |||
|       margin-right: 5px; | |||
|     } | |||
|   } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| .recent{ | |||
|   margin-top: 10px; | |||
|   .rec_img{ | |||
|     width: 150px; | |||
|     margin-left: 15px; | |||
| 
 | |||
|     margin-bottom: 20px; | |||
|     img{ | |||
|       border-radius: 4px; | |||
|       width: 100%; | |||
|     } | |||
| 
 | |||
|     .product_details{ | |||
|       margin-left: 20px; | |||
|       a{ | |||
|         color: $color-black; | |||
|       } | |||
|     } | |||
|   } | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
|     .filter_sidebar_main{ | |||
|       margin-bottom: 30px; | |||
|     } | |||
|     .range-field{ | |||
|         width: 100%; | |||
|         // @media screen and (max-width:768px){ | |||
|      | |||
|         // width: 30%; | |||
|              | |||
|         } | |||
|      | |||
| 
 | |||
| 
 | |||
| 
 | |||
|        | |||
|            | |||
|           span.amount { | |||
|             color: #ffffff; | |||
|             font-size: 16px; | |||
|           } | |||
|            | |||
|           input#amount, | |||
|           input#amount1 { | |||
|             font-size: 15px; | |||
|             outline: none; | |||
|             background: none; | |||
|             word-spacing: 1em; | |||
|             color: #5a5a5a !important; | |||
|             position: absolute; | |||
|             left: 0%; | |||
|             top: -27px; | |||
|             margin-top: -10px; | |||
|           } | |||
|            | |||
|           .range, | |||
|           .w3-brand-select, | |||
|           .w3ls-featured-ads { | |||
|             padding: 20px 20px; | |||
|             border: 1px solid #e4e4e4; | |||
|           } | |||
| @ -0,0 +1,368 @@ | |||
| .banner_about { | |||
|     background-image: linear-gradient(rgba(17, 17, 17, 0.44), rgba(17, 17, 17, 0.24)), | |||
|         url(./../images/about-banner/bg1.jpg); | |||
| 
 | |||
|     height: 50vh; | |||
| 
 | |||
|     background-size: cover; | |||
|     width: 100%; | |||
|     background-repeat: no-repeat; | |||
|     background-position: center; | |||
|     padding-bottom: 200px; | |||
| 
 | |||
|     .top-right { | |||
|         color: $color-white; | |||
|         padding-top: 25px; | |||
|         h6 { | |||
|             font-weight: 700; | |||
|             margin-right: 10px; | |||
|         } | |||
|         .top { | |||
|             font-size: 16px; | |||
|         } | |||
| 
 | |||
|         .more { | |||
|             color: $color-orange; | |||
|         } | |||
|     } | |||
| 
 | |||
|     .top-left { | |||
|         padding-top: 20px; | |||
|         align-items: baseline; | |||
|         justify-content: end; | |||
|         margin-right: 20px; | |||
| 
 | |||
|         span { | |||
|             margin-right: 20px; | |||
|             color: #fff; | |||
|             width: 36px; | |||
|             height: 36px; | |||
|             background: rgba(255, 255, 255, 0.141); | |||
|             border-radius: 50%; | |||
|             display: inline-block; | |||
|             text-align: center; | |||
|             line-height: 36px; | |||
| 
 | |||
|             &:hover { | |||
|                 background-color: $color-orange; | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
|     .cart { | |||
|         color: $color-white; | |||
|         background-color: #00000056; | |||
|     } | |||
| 
 | |||
|     .cart-svg { | |||
|         width: 20px; | |||
|         list-style: none; | |||
|         margin-right: 0 !important; | |||
|         margin-left: 5px; | |||
|     } | |||
| 
 | |||
|     .banner-heading { | |||
|         color: $color-white; | |||
|         margin-top: 50px; | |||
|         padding-top: 3em; | |||
|         h1 { | |||
|             font-size: 42px; | |||
|             padding-top: 50px; | |||
|             font-weight: 700; | |||
|             margin-bottom: 0; | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .breadcrumb { | |||
|     text-align: center; | |||
|     background-color: transparent; | |||
|     justify-content: center; | |||
| 
 | |||
|     a { | |||
|         color: white; | |||
|         text-decoration: none; | |||
|     } | |||
| 
 | |||
|     span { | |||
|         margin: 0 10px 0 10px; | |||
|     } | |||
| } | |||
| 
 | |||
| .about_detail { | |||
|     .card { | |||
|         background: transparent; | |||
|         border: none; | |||
| 
 | |||
|         padding-top: 40px; | |||
|         .card-body { | |||
|             padding: 0; | |||
|             margin-top: 60px; | |||
|         } | |||
| 
 | |||
|         .card-title { | |||
|             font-size: $font-size-h1; | |||
|             text-transform: uppercase; | |||
|             font-weight: 700; | |||
|             span { | |||
|                 color: $color-orange; | |||
|                 margin-top: 0; | |||
|             } | |||
|         } | |||
|         p { | |||
|             color: $color-grey; | |||
|             margin-top: 30px; | |||
|         } | |||
|     } | |||
| 
 | |||
|     .btn { | |||
|         margin-top: 20px; | |||
|     } | |||
| } | |||
| 
 | |||
| .what-we-offer { | |||
|     padding-top: 90px; | |||
|     padding-bottom: 90px; | |||
|     background-color: $color-bg; | |||
| 
 | |||
|     .what_wrapper { | |||
|         margin-top: 20px; | |||
|         margin-bottom: 20px; | |||
|     } | |||
| 
 | |||
|     .offer_wrapper1 { | |||
|         width: 100%; | |||
|         img { | |||
|             width: 100%; | |||
|             border-radius: 5px; | |||
|         } | |||
|     } | |||
| 
 | |||
|     .offer_content { | |||
|         margin-top: 40px; | |||
| 
 | |||
|         padding-top: 20px; | |||
|         .offer_content_top { | |||
|             .card-title { | |||
|                 font-size: 36px; | |||
|                 text-transform: uppercase; | |||
|                 font-weight: 700; | |||
|                 span { | |||
|                     color: $color-orange; | |||
|                 } | |||
|             } | |||
|             p { | |||
|                 margin-top: 25px; | |||
|                 color: $color-grey; | |||
|             } | |||
|         } | |||
| 
 | |||
|         .offer_content_bottom { | |||
|             margin-top: 30px; | |||
| 
 | |||
|             .offer_links { | |||
|                 .card-title { | |||
|                     font-weight: 600; | |||
|                     font-size: 20px; | |||
| 
 | |||
|                     a { | |||
|                         color: $color-black; | |||
|                         text-decoration: none; | |||
|                         &:hover { | |||
|                             color: $color-orange; | |||
|                         } | |||
|                     } | |||
|                 } | |||
|                 p { | |||
|                     color: $color-grey; | |||
|                 } | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .offering { | |||
|     padding-top: 50px; | |||
|     padding-bottom: 100px; | |||
| 
 | |||
|     h1 { | |||
|         font-weight: 700; | |||
|         padding-bottom: 20px; | |||
|         span { | |||
|             color: $color-orange; | |||
|         } | |||
|     } | |||
|     p { | |||
|         color: $color-orange; | |||
|         font-size: $font-sub-head; | |||
|     } | |||
| 
 | |||
|     .review { | |||
|         margin-top: 30px; | |||
|         color: $color-grey; | |||
|         background-color: $color-bg; | |||
| 
 | |||
|         border-radius: 5px; | |||
|         position: relative; | |||
|         text-align: center; | |||
| 
 | |||
|         &:hover { | |||
|             background-color: #f8e2d3; | |||
|         } | |||
| 
 | |||
|         .card-title { | |||
|             font-weight: 600; | |||
|             font-size: 18px; | |||
| 
 | |||
|             a { | |||
|                 color: $color-black; | |||
|                 text-decoration: none; | |||
|                 &:hover { | |||
|                     color: $color-orange; | |||
|                 } | |||
|             } | |||
|         } | |||
| 
 | |||
|         .quote { | |||
|             color: $color-orange; | |||
|             padding-top: 30px; | |||
|             font-size: 35px; | |||
|             margin-bottom: 0; | |||
|         } | |||
| 
 | |||
|         p { | |||
|             color: $color-grey; | |||
|             margin: 5px 15px; | |||
|             padding-bottom: 30px; | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .customer { | |||
|     padding-top: 40px; | |||
|     display: flex; | |||
|     justify-content: center; | |||
|     img { | |||
|         max-width: 70px; | |||
|         border-radius: 50%; | |||
|         border: 3px solid #b8b9bd; | |||
|     } | |||
| } | |||
| 
 | |||
| .team { | |||
|     padding-top: 90px; | |||
|     padding-bottom: 90px; | |||
|     background-color: $color-bg; | |||
|     @media screen and(max-width:991px) { | |||
|         padding-bottom: 70px; | |||
|     } | |||
| 
 | |||
|     h1 { | |||
|         font-weight: 700; | |||
|         span { | |||
|             color: $color-orange; | |||
|         } | |||
|     } | |||
| 
 | |||
|     .team_content { | |||
|         padding-top: 30px; | |||
|         .team_img { | |||
|             position: relative; | |||
|             @media screen and(max-width:991px) { | |||
|                 padding-bottom: 25px; | |||
|             } | |||
| 
 | |||
|             img { | |||
|                 width: 100%; | |||
|                 height: 400px; | |||
|                 border-radius: 5%; | |||
|                 @media screen and(max-width:767px) { | |||
|                 height: 320px; | |||
|                 } | |||
|             } | |||
| 
 | |||
|             .team_details { | |||
|                 position: absolute; | |||
|                 background-color: #ffffff; | |||
|                 border-radius: 4px; | |||
|                 padding: 18px 52px 0px 52px; | |||
|                 bottom: 40px; | |||
|                 left:46px; | |||
| 
 | |||
|                  | |||
|                 @media screen and(max-width:1200px) { | |||
|                     position: absolute; | |||
|                     background-color: #ffffff; | |||
|                     border-radius: 4px; | |||
|                     padding: 18px 30px 0px 30px; | |||
|                     bottom: 46px; | |||
|                     left: 36px; | |||
|                  | |||
|                     } | |||
| 
 | |||
|                 @media screen and(max-width:767px) { | |||
|                  | |||
|                     padding: 11px 15px 2px 15px; | |||
|                     bottom: 40px; | |||
|                     left: 26px; | |||
|                     } | |||
| 
 | |||
|                     | |||
|                         @media screen and(max-width:574px) { | |||
|                          | |||
|                            | |||
|                             padding: 16px 83px 0px 84px; | |||
|     bottom: 40px; | |||
|     left: 69px; | |||
|                             } | |||
| 
 | |||
|                 .name { | |||
|                     text-align: center; | |||
|                 } | |||
|                 h4 { | |||
|                     font-weight: 600; | |||
|                     margin-bottom: 1px; | |||
| 
 | |||
|                     a { | |||
|                         text-decoration: none; | |||
|                         color: $color-black; | |||
| 
 | |||
|                         &:hover { | |||
|                             color: $color-orange; | |||
|                         } | |||
|                     } | |||
|                 } | |||
|                 p { | |||
|                     color: $color-grey; | |||
|                     margin-bottom: 0; | |||
|                 } | |||
|             } | |||
| 
 | |||
|             .footer_icons { | |||
|                 ul { | |||
|                     display: flex; | |||
|                     list-style: none; | |||
|                     padding-left: 0; | |||
|                     margin-bottom: 0; | |||
| 
 | |||
|                     li { | |||
|                         color: $color-black; | |||
| 
 | |||
|                         font-size: 14px; | |||
|                         width: 40px; | |||
|                         height: 40px; | |||
| 
 | |||
|                         padding-top: 0; | |||
| 
 | |||
|                         text-align: center; | |||
|                         padding-top: 11px; | |||
| 
 | |||
|                         &:hover { | |||
|                             color: $color-orange; | |||
|                         } | |||
|                     } | |||
|                 } | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| @ -0,0 +1,107 @@ | |||
| .blog_main{ | |||
|     .pagination{ | |||
| 
 | |||
|         display: flex; | |||
| justify-content: end; | |||
| margin: 0 auto;} | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| .blog{ | |||
|     margin-top: 0px; | |||
|     margin-bottom: 0; | |||
| 
 | |||
|     @media screen and(max-width:767px) { | |||
|         margin-bottom: 50px; | |||
|     } | |||
|     .blog_wrapper{ | |||
|         .blog_img{ | |||
|              | |||
|             img{ | |||
|                 width: 100%; | |||
|                 border-radius: 5px; | |||
|             } | |||
|         } | |||
| 
 | |||
|         .blog_info{ | |||
|             padding-top: 10px; | |||
|             p{ | |||
|                 font-size: 14px; | |||
|                 margin-bottom: 0; | |||
|             | |||
|                 a{color: $color-grey; | |||
|                     text-decoration: none; | |||
|                  | |||
|                     &:hover{ | |||
|                         color: $color-orange; | |||
| 
 | |||
|                     } | |||
| 
 | |||
|                 } | |||
|             } | |||
|         } | |||
| 
 | |||
|         .blog_heading{ | |||
|              | |||
|             font-size: 24px; | |||
|             font-weight: 600; | |||
|             padding-bottom: 0; | |||
|             a{color: $color-black; | |||
|                 text-decoration: none; | |||
|              | |||
|                 &:hover{ | |||
|                     color: $color-orange; | |||
| 
 | |||
|                 } | |||
| 
 | |||
|             } | |||
|         } | |||
|         p{ | |||
|             color: $color-grey; | |||
|             padding-bottom: 12px; | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .blog_main{ | |||
|     padding-top: 90px; | |||
|     padding-bottom: 90px; | |||
| 
 | |||
|     .pagination{ | |||
| 
 | |||
| 
 | |||
| margin-top: 50px; | |||
| 
 | |||
|         ul{ | |||
|             padding-left: 0; | |||
|             list-style: none; | |||
|             display: flex; | |||
|             li{ | |||
| 
 | |||
| 
 | |||
| 
 | |||
|                     | |||
|                 margin-left: 10px; | |||
|                 margin-right: 10px; | |||
|                 | |||
|                | |||
| 
 | |||
| 
 | |||
|                 a{color: $color-orange; | |||
|                     padding: 8px 17px;      | |||
|                     border-radius: 4px; | |||
|                         border: 1px solid ; | |||
|                         background-color: transparent !important; | |||
|                         text-decoration: none; | |||
|                     &:hover{ | |||
|                         background-color: $color-orange; | |||
|                         color: #000000; | |||
|                     } | |||
|                } | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
| } | |||
| 
 | |||
| @ -0,0 +1,209 @@ | |||
| .blogg { | |||
|     margin-top: 90px; | |||
|     margin-bottom: 90px; | |||
| 
 | |||
|     .blog_details { | |||
|         max-width: 720px; | |||
|         margin: 0 auto; | |||
| 
 | |||
|         .blog_wrapper { | |||
|             .blog_img { | |||
|                 img { | |||
|                     width: 100%; | |||
|                     border-radius: 5px; | |||
|                 } | |||
|             } | |||
| 
 | |||
|             .blog_info { | |||
|                 padding-top: 10px; | |||
|                 p { | |||
|                     font-size: 14px; | |||
|                     margin-bottom: 0; | |||
| 
 | |||
|                     a { | |||
|                         color: $color-grey; | |||
|                         text-decoration: none; | |||
| 
 | |||
|                         &:hover { | |||
|                             color: $color-orange; | |||
|                         } | |||
|                     } | |||
|                 } | |||
|             } | |||
| 
 | |||
|             .blog_heading { | |||
|                 font-size: 24px; | |||
|                 font-weight: 600; | |||
|                 padding-bottom: 0; | |||
|                 a { | |||
|                     color: $color-black; | |||
|                     text-decoration: none; | |||
| 
 | |||
|                     &:hover { | |||
|                         color: $color-orange; | |||
|                     } | |||
|                 } | |||
|             } | |||
|             p { | |||
|                 color: $color-grey; | |||
|                 padding-bottom: 12px; | |||
|             } | |||
|         } | |||
| 
 | |||
|         .blog_details_part2 { | |||
|             margin-top: 50px; | |||
|             .blog_words { | |||
|                 p { | |||
|                     color: $color-grey; | |||
|                 } | |||
| 
 | |||
|                 p::first-letter { | |||
|                     color: $color-black; | |||
|                     float: left; | |||
|                     font-size: 5em; | |||
| 
 | |||
|                     p { | |||
|                         color: $color-black; | |||
|                     } | |||
| 
 | |||
|                     p::first-letter { | |||
|                         color: $color-black; | |||
|                         float: left; | |||
|                         font-size: 4em; | |||
|                         margin-right: 2px; | |||
|                         font-weight: 900; | |||
|                     } | |||
|                 } | |||
|             } | |||
| 
 | |||
|             .img2 { | |||
|                 img { | |||
|                     width: 100%; | |||
|                     border-radius: 5px; | |||
|                 } | |||
| 
 | |||
|                 img:hover { | |||
|                     opacity: 0.7; | |||
|                 } | |||
|             } | |||
|         } | |||
| 
 | |||
|         .para_3 { | |||
|             padding-top: 40px; | |||
|             margin-top: 10px; | |||
|             color: $color-grey; | |||
|             span { | |||
|                 color: $color-black; | |||
|             } | |||
|         } | |||
|         .blog_details_part3 { | |||
|             padding-top: 40px; | |||
|             margin-top: 10px; | |||
|             .wrapper { | |||
|                 .comment { | |||
|                     display: flex; | |||
|                     border: 1px solid; | |||
|                     border-radius: 5px; | |||
|                     border-color: #d2cfcf; | |||
|                     padding: 25px 25px; | |||
|                     .c_img { | |||
|                         max-width: 100%; | |||
|                         img { | |||
|                             width: 100%; | |||
|                             border-radius: 5px; | |||
|                         } | |||
|                     } | |||
|                     .c_info { | |||
|                         padding-left: 20px; | |||
| 
 | |||
|                         @media screen and(max-width:576px) { | |||
|                             margin-top: 30px; | |||
|                         } | |||
| 
 | |||
|                         h5 { | |||
|                             color: $color-black; | |||
|                             font-weight: 600; | |||
|                         } | |||
|                         p { | |||
|                             color: $color-grey; | |||
|                         } | |||
| 
 | |||
|                         .footer_icons { | |||
|                             ul { | |||
|                                 display: flex; | |||
|                                 list-style: none; | |||
|                                 padding-left: 0; | |||
|                                 margin-top: 10px; | |||
| 
 | |||
|                                 li { | |||
|                                     color: $color-black; | |||
| 
 | |||
|                                     font-size: 18px; | |||
|                                     width: 40px; | |||
|                                     height: 40px; | |||
|                                     border-radius: 50%; | |||
|                                     margin-right: 10px; | |||
| 
 | |||
|                                     text-align: center; | |||
|                                     padding-top: 11px; | |||
| 
 | |||
|                                     &:hover { | |||
|                                         background-color: $color-orange; | |||
|                                     } | |||
|                                 } | |||
|                             } | |||
|                         } | |||
|                     } | |||
|                 } | |||
|             } | |||
|         } | |||
| 
 | |||
|         .leave-comment-form { | |||
|             padding-top: 50px; | |||
|             .form_title { | |||
|                 color: $color-black; | |||
|                 font-weight: 700; | |||
|                 font-size: 40px; | |||
|                 text-transform: uppercase; | |||
| 
 | |||
|                 padding-bottom: 20px; | |||
|                 span { | |||
|                     color: $color-orange; | |||
|                 } | |||
|             } | |||
|             p { | |||
|                 color: $color-grey; | |||
|             } | |||
| 
 | |||
|             .input-grids { | |||
|                 .form-control { | |||
|                 } | |||
|             } | |||
| 
 | |||
|             .form-group input[type="email"] { | |||
|                 color: #000000; | |||
| 
 | |||
|                 border: 2px solid #000000; | |||
|                 padding: 20px 20px; | |||
|             } | |||
| 
 | |||
|             input[type="text"]:focus { | |||
|                 border-color: $color-orange !important; | |||
|                 background-color: #ffdbcd; /* oranges! yey */ | |||
|             } | |||
| 
 | |||
|             .form-group input[type="text"] { | |||
|                 color: #000000; | |||
| 
 | |||
|                 border: 2px solid #000000; | |||
|                 padding: 20px 20px; | |||
|             } | |||
|             .form-group textarea[type="text"] { | |||
|                 color: #000000; | |||
| 
 | |||
|                 border: 2px solid #000000; | |||
|                 padding: 26px 20px; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| @ -0,0 +1,140 @@ | |||
| .contact{ | |||
|     padding-top: 90px; | |||
|     padding-bottom: 90px; | |||
|     background-color: $color-bg; | |||
| 
 | |||
|     .contact_left{ | |||
| 
 | |||
| p{margin-bottom: 5px;} | |||
| 
 | |||
|     .get_touch{ | |||
| padding-bottom: 25px; | |||
|         .wrapper{ | |||
|         h3{ | |||
|             color: $color-black; | |||
|             font-weight: 700; | |||
|             font-size: $font-size-demo; | |||
|             span{ | |||
|                 color: $color-orange; | |||
|             } | |||
|         } | |||
|         p{color: $color-grey;} | |||
|     } | |||
| 
 | |||
|     .num_email{ | |||
|         padding-top: 25px; | |||
|         font-family: fantasy; | |||
|         font-size: 16px; | |||
|          | |||
|         span{ | |||
|             color: $color-orange; | |||
|         } | |||
|         a{color: $color-black; | |||
|          | |||
|         &:hover{ | |||
|             color: $color-orange; | |||
|         } | |||
|         } | |||
|         .address{ | |||
|             color: $color-grey; | |||
|             margin-top: 25px; | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .hours{ | |||
|     .wrapper{ | |||
|         h3{ | |||
|             color: $color-black; | |||
|             font-weight: 700; | |||
|             font-size: $font-size-demo; | |||
|             span{ | |||
|                 color: $color-orange; | |||
|             } | |||
|         } | |||
|         p{color: $color-grey;} | |||
|     } | |||
| } | |||
| .service{ | |||
|     h6{ | |||
|         font-weight: 600; | |||
|         padding-top: 25px; | |||
|         font-size: 26px; | |||
|     } | |||
|     p{ | |||
|         color: $color-grey; | |||
|      | |||
|     } | |||
| } | |||
| 
 | |||
| } | |||
| 
 | |||
| 
 | |||
| .contact_right{ | |||
|     border-color: #e7e7e7  !important; | |||
|     border: 11px solid; | |||
|     .map { | |||
|     width: 100%; | |||
|    height: 500px; | |||
|       } | |||
| 
 | |||
| } | |||
| } | |||
| 
 | |||
| .contact_form{ | |||
| 
 | |||
|   padding-top: 100px; | |||
|         padding-bottom: 100px; | |||
|         background-image: linear-gradient(rgba(17, 17, 17, 0.44), rgba(17, 17, 17, 0.64)), url(./../images/banner/banner4.jpg); | |||
|         background-size: cover; | |||
|             width: 100%; | |||
|                 background-repeat: no-repeat; | |||
|         background-position: center; | |||
|         background-attachment: fixed; | |||
|     color: white; | |||
| 
 | |||
|     .c_form{ | |||
| 
 | |||
|       h2{ | |||
|           font-weight: 700; | |||
|           font-size: 40px; | |||
|           padding-bottom: 30px; | |||
|       } | |||
|         .form-control{display: block; | |||
|             width: 100%; | |||
|             height: calc(1.5em + .75rem + 2px); | |||
|             padding: 1.75rem .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-radius: .25rem; | |||
|             transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;} | |||
|     } | |||
| 
 | |||
|     .form-control2{display: block; | |||
|         width: 100%; | |||
|         height: calc(2em + .75rem + 2px); | |||
|         padding: 2.75rem .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-radius: .25rem; | |||
|         transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; | |||
|     textarea{ | |||
|         overflow: hidden; | |||
|     } | |||
| 
 | |||
|     } | |||
| 
 | |||
|     textarea{ | |||
|         overflow: hidden; | |||
|     } | |||
| } | |||
| @ -0,0 +1,7 @@ | |||
| @import './home/home'; | |||
| @import './about'; | |||
| @import './shop'; | |||
| @import './preview'; | |||
| @import './contact'; | |||
| @import './blog'; | |||
| @import './blog_details'; | |||
| @ -0,0 +1,412 @@ | |||
| .preview{ | |||
| 
 | |||
| margin-top: 90px; | |||
| margin-bottom: 90px; | |||
| 
 | |||
|     .product_preview{ | |||
| 
 | |||
|         .wrapper{ | |||
|             width: 100%; | |||
|             img{ | |||
|                 width: 100%; | |||
|                 max-height: 600px; | |||
|                 border-radius: 5px; | |||
|                 | |||
|             } | |||
|         } | |||
| 
 | |||
|         | |||
|     } | |||
| 
 | |||
| .pre_under{ | |||
| 
 | |||
| @media screen and(max-width:991px) { | |||
| 
 | |||
|      ul{ | |||
|         padding-left: 0; | |||
|         margin-top: 10px; | |||
|         display: flex; | |||
|         list-style: none; | |||
| 
 | |||
|         li{ | |||
|             margin-right: 15px; | |||
|             width: 100%!important; | |||
|          | |||
| 
 | |||
|             &:last-child{ | |||
|                 margin-right: 0;  | |||
|             } | |||
|             img{ | |||
|                 width: 100%; | |||
|                 border-radius: 3px; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
|     ul{ | |||
|         padding-left: 0; | |||
|         margin-top: 10px; | |||
|         display: flex; | |||
|         list-style: none; | |||
| 
 | |||
|         li{ | |||
|             margin-right: 15px; | |||
|             width: 100%; | |||
|            | |||
| 
 | |||
|             &:last-child{ | |||
|                 margin-right: 0;  | |||
|             } | |||
|             img{ | |||
|                 width: 100%; | |||
|                 border-radius: 3px; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .button_wrapper{ | |||
|     margin-top: 35px; | |||
|     display: flex; | |||
|     justify-content: space-between; | |||
| } | |||
| 
 | |||
| .pre_head{ | |||
|     h3{ | |||
|         color: $color-black; | |||
|         text-transform: uppercase; | |||
|         font-weight: 700; | |||
| 
 | |||
|         @media screen and(max-width:991px) { | |||
|            margin-top: 45px; | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .star{ | |||
|     display: flex; | |||
| align-items: baseline; | |||
|     ul{ | |||
|     padding-left: 16px; | |||
| margin-top: 20px; | |||
|         list-style: none; | |||
|         font-size: 14px; | |||
|         margin-right: 20px; | |||
|         li{ | |||
| 
 | |||
|             &:hover{ | |||
|                 color: $color-orange; | |||
|             } | |||
|             a{ | |||
|                 margin-right: 5px; | |||
|                 color: $color-black; | |||
| 
 | |||
|                 &:hover{ | |||
|                     color: $color-orange; | |||
|                 } | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
|     .price{ | |||
| 
 | |||
|         p{ | |||
| 
 | |||
|             font-size: 20px; | |||
|              | |||
|         span{ | |||
|             color: $color-orange; | |||
| font-size: 22px; | |||
| font-weight: 700; | |||
| margin-right: 20px; | |||
|         } | |||
|         .old_rate{ | |||
|             font-size: 18px; | |||
|             font-weight: 600; | |||
|             color: $color-grey; | |||
| 
 | |||
|         } | |||
|     } | |||
| } | |||
| } | |||
| 
 | |||
| 
 | |||
| .bank_offer{ | |||
|     ul{ | |||
|         margin-top: 14px; | |||
|         padding-left: 4px; | |||
|         list-style: none; | |||
|         li{ | |||
|             color: $color-grey; | |||
|             font-size: 16px; | |||
|             span{ | |||
|                 font-weight: 600; | |||
|                 font-size: 18px; | |||
|                 color:darken(($color-grey), 5%) !important; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .description{ | |||
| padding-top: 8px; | |||
| 
 | |||
|     h3{ | |||
|         color: $color-black; | |||
|         font-weight: 700; | |||
|         text-transform: uppercase; | |||
|     } | |||
|     p{ | |||
|         color: $color-grey; | |||
|     } | |||
| } | |||
| 
 | |||
| .HS{ | |||
|     display: flex; | |||
|     padding-top: 8px; | |||
|     justify-content: space-between; | |||
|     margin-bottom: 20px; | |||
|     h3{ | |||
|         color: $color-black; | |||
|         font-weight: 700; | |||
|         padding-bottom: 10px; | |||
|         text-transform: uppercase; | |||
|     } | |||
| 
 | |||
|     .Highlights{ | |||
|     ul{color: $color-grey; | |||
|         padding-left: 14px; | |||
|         li{ | |||
| margin-bottom: 10px; | |||
|         } | |||
|     } | |||
| } | |||
| .service{ | |||
|     ul{color: $color-grey; | |||
|         | |||
|         li{ | |||
|             margin-bottom: 10px; | |||
|         } | |||
|     } | |||
| } | |||
| } | |||
| 
 | |||
| 
 | |||
| .location{ | |||
|     h6{ | |||
|         color: $color-black; | |||
|         font-weight: 600; | |||
|        | |||
|         text-transform: uppercase; | |||
| 
 | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .signin-form{ | |||
|         margin-top: 0; | |||
|     } | |||
|     .forms-gds{ | |||
|         display: grid; | |||
|         grid-template-columns: 2fr 1fr; | |||
| 
 | |||
| 
 | |||
|         .form-input{ | |||
|             input{ | |||
|                  | |||
|                 width: 100%; | |||
|                 background-color: $color-bg; | |||
|                 border-top-left-radius: 25px; | |||
|                 border-bottom-left-radius: 25px; | |||
|                 border: none; | |||
|                 padding: 15px 30px; | |||
|                 color:#2f2f2f; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| } | |||
| 
 | |||
| .men_women{ | |||
|     background-color: $color-bg; | |||
|     padding-top: 90px; | |||
|     padding-bottom: 90px; | |||
|     margin-bottom: 70px; | |||
| 
 | |||
|     .men{ | |||
|          | |||
| 
 | |||
|         @media screen and(max-width:767px) { | |||
| 
 | |||
|             padding-bottom: 20px; | |||
|            | |||
|         } | |||
|         position: relative; | |||
|         img{ | |||
|             width: 100%; | |||
|             border-radius: 5px; | |||
|         } | |||
| 
 | |||
| 
 | |||
|         .inside{ | |||
| 
 | |||
|             bottom: 35px; | |||
|             left: 45px; | |||
|             border-radius: 7px; | |||
|             position: absolute; | |||
|             background-color: #0000008a; | |||
|             padding: 26px 52px; | |||
| 
 | |||
|             @media screen and(max-width:1199px) { | |||
|                 bottom: 22px; | |||
|                 left: 52px; | |||
|                 border-radius: 7px; | |||
|                 position: absolute; | |||
|                 background-color:  | |||
|             #0000008a; | |||
|             padding: 29px 74px; | |||
|             } | |||
|             @media screen and(max-width:991px) { | |||
|                 bottom: 18px; | |||
|                 left: 45px; | |||
|                 border-radius: 7px; | |||
|                 position: absolute; | |||
|                 background-color: #0000008a; | |||
|                 padding: 10px 42px; | |||
|             } | |||
| 
 | |||
|             @media screen and(max-width:767px) { | |||
|                 bottom: 64px; | |||
|                 left: 66px; | |||
|                 border-radius: 7px; | |||
|                 position: absolute; | |||
|                 background-color: #0000008a; | |||
|                 padding: 10px 42px; | |||
|             } | |||
|             @media screen and(max-width:500px) { | |||
|                 bottom: 52px; | |||
|                 left: 61px; | |||
|                 border-radius: 7px; | |||
|                 position: absolute; | |||
|                 background-color: #0000008a; | |||
|                 padding: 10px 42px; | |||
|             } | |||
| 
 | |||
|             p{ | |||
|                 color: $color-white; | |||
|                 font-size: 35px; | |||
|                 font-weight: 700; | |||
|                 @media screen and(max-width:1199px) { | |||
|                    font-size: 25px; | |||
|                 } | |||
|                 @media screen and(max-width:991px) { | |||
|                     font-size: 16px; | |||
|                     font-weight: 600; | |||
|                  } | |||
| 
 | |||
|                  @media screen and(max-width:767px) { | |||
|                     font-size: 35px; | |||
|                     font-weight: 700; | |||
|                  } | |||
|                  @media screen and(max-width:500px) { | |||
|                     font-size: 20px; | |||
|                     font-weight: 600; | |||
|                 } | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| .Featured{ | |||
|     margin-top: 90px;  | |||
| 
 | |||
|     h1{ | |||
|          | |||
|         font-weight: 700; | |||
|         margin-bottom: 10px; | |||
|         span{ | |||
|             color: $color-orange; | |||
|         } | |||
|     } | |||
|     p{ | |||
|         color: $color-grey; | |||
|         font-size: $font-sub-head; | |||
|     } | |||
| 
 | |||
|     .product_section{ | |||
|         padding-top:40px ; | |||
|     } | |||
| 
 | |||
|     .img_wrapper{ | |||
|              | |||
| position: relative; | |||
|       img{ | |||
|           width: 100%; | |||
|              | |||
| 
 | |||
|           &:hover { | |||
|             opacity: 1; | |||
|             -webkit-animation: flash 1.5s; | |||
|             animation: flash 1.5s; | |||
|            } | |||
| 
 | |||
|       } | |||
| 
 | |||
|        | |||
| 
 | |||
|       .product_details{ | |||
| 
 | |||
| 
 | |||
|         a{ | |||
|             text-decoration: none !important; | |||
|         } | |||
|         h4{ | |||
|             text-decoration: none !important; | |||
|             font-weight: 600; | |||
|             color: $color-black !important; | |||
|             &:hover{ | |||
|                 color: $color-orange !important; | |||
|             } | |||
|         } | |||
| .old_rate{ | |||
|     color: $color-grey !important; | |||
|     margin-right: 10px; | |||
|     font-weight: normal; | |||
| } | |||
|         span{ | |||
|   font-weight: 600; | |||
|             color: $color-black; | |||
|         } | |||
|       } | |||
|    | |||
|         img{ | |||
|             width: 100%; | |||
|             border-radius: 7px; | |||
|         } | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .img_wrapper:hover .button { | |||
|         position: absolute; | |||
|         display: block; | |||
|         text-decoration: none !important; | |||
|         top: 275px; | |||
|         padding: 9px 75px; | |||
|         font-size: 20px; | |||
|         text-align: center; | |||
|         color: #ffffff; | |||
|         background-color: #ff7315; | |||
|     } | |||
|      | |||
|      | |||
|      | |||
|     .button{ | |||
|         display:none; | |||
|     } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| } | |||
| 
 | |||
| 
 | |||
| @ -0,0 +1,223 @@ | |||
| .shop{ | |||
| padding-bottom: 40px; | |||
| 
 | |||
| 
 | |||
|     .pagination{ | |||
| 
 | |||
|         display: flex; | |||
| justify-content: end; | |||
| margin: 0 auto; | |||
| 
 | |||
|         ul{ | |||
|             list-style: none; | |||
|             display: flex; | |||
|             padding-left: 0; | |||
|             li{ | |||
|                 margin-left: 10px; | |||
|                 margin-right: 10px; | |||
|                 | |||
|                 a{color: $color-orange; | |||
|                     padding: 8px 17px;      | |||
|                     border-radius: 4px; | |||
|                         border: 1px solid ; | |||
|                         background-color: transparent !important; | |||
|                         text-decoration: none; | |||
|                     &:hover{ | |||
|                         background-color: $color-orange; | |||
|                         color: #000000; | |||
|                     } | |||
|                } | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| .p_top{ | |||
|     h4{ | |||
|         font-size: 24px; | |||
|         color: $color-grey; | |||
|     font-weight: 600; | |||
|     @media screen and(max-width:991px) { | |||
|         font-size: 18px;   | |||
|     } | |||
|     @media screen and(max-width:767px) { | |||
|         font-size: 14px;   | |||
|     } | |||
| } | |||
|    | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
| 
 | |||
|     .product{ | |||
|         margin-top: 90px; | |||
|      | |||
|         h1{ | |||
|              | |||
|             font-weight: 700; | |||
|             margin-bottom: 10px; | |||
|             span{ | |||
|                 color: $color-orange; | |||
|             } | |||
|         } | |||
|         p{ | |||
|             color: $color-grey; | |||
|             font-size: $font-sub-head; | |||
|         } | |||
|      | |||
|         .product_sectoin{ | |||
|             padding-top:70px ; | |||
| 
 | |||
|             @media screen and(max-width:991px) { | |||
|                 padding-top:40px ; | |||
| 
 | |||
|             } | |||
|         } | |||
|      | |||
|         .img_wrapper{ | |||
|          max-width: 200px; | |||
|     position: relative; | |||
|           img{ | |||
|               width: 100%; | |||
|      | |||
|      | |||
|               &:hover { | |||
|                 opacity: 1; | |||
|                 -webkit-animation: flash 1.5s; | |||
|                 animation: flash 1.5s; | |||
|                } | |||
|      | |||
|           } | |||
|      | |||
|            | |||
|      | |||
|           .product_details{ | |||
|      | |||
|      | |||
|             a{ | |||
|                 text-decoration: none !important; | |||
|             } | |||
|             h4{ | |||
|                 font-size: 16px; | |||
|                 text-decoration: none !important; | |||
|                 font-weight: 600; | |||
|                 color: $color-black !important; | |||
|                 &:hover{ | |||
|                     color: $color-orange !important; | |||
|                 } | |||
|             } | |||
|     .old_rate{ | |||
|         color: $color-grey !important; | |||
|         margin-right: 10px; | |||
|         font-weight: normal; | |||
|     } | |||
|             span{ | |||
|       font-weight: 600; | |||
|                 color: $color-black; | |||
|             } | |||
|           } | |||
|        | |||
|             img{ | |||
|                 width: 100%; | |||
|                 border-radius: 7px; | |||
|             } | |||
|         } | |||
|      | |||
|      | |||
|         .img_wrapper:hover .button { | |||
|             position: absolute; | |||
|             display: block; | |||
|             text-decoration: none !important; | |||
|             top: 216px; | |||
|             padding: 12px 30px; | |||
|             width: 100%; | |||
|             font-size: 13px; | |||
|             text-align: center; | |||
|             color: #ffffff; | |||
|             background-color: #ff7315; | |||
|             font-weight: 700; | |||
| 
 | |||
|             @media screen and(max-width:1199px) { | |||
| 
 | |||
|                 top: 188px; | |||
|             width: 100%; | |||
|             padding: 9px 30px; | |||
|             font-size: 13px; | |||
|             text-align: center; | |||
|                  | |||
|             } | |||
|             @media screen and(max-width:991px) { | |||
|      | |||
|                 top: 175px; | |||
|                 width: 100%; | |||
|                 padding: 9px 30px; | |||
|                 font-size: 13px; | |||
|                 text-align: center; | |||
|                  | |||
|             } | |||
|             @media screen and(max-width:767px) { | |||
|      | |||
|                 top: 221px; | |||
|                 width: 100%; | |||
|                 padding: 9px 30px; | |||
|                 font-size: 13px; | |||
|                 text-align: center; | |||
|                  | |||
|             } | |||
|             @media screen and(max-width:462px) { | |||
|      | |||
|                 top: 201px; | |||
|                 width: 100%; | |||
|                 padding: 9px 30px; | |||
|                 font-size: 13px; | |||
|                 text-align: center; | |||
|                  | |||
|             } | |||
|             @media screen and(max-width:370px) { | |||
|      | |||
|                 top: 190px; | |||
|                 width: 100%; | |||
|                 padding: 9px 30px; | |||
|                 font-size: 13px; | |||
|                 text-align: center; | |||
|                  | |||
|             } | |||
|         } | |||
|          | |||
|          | |||
|          | |||
|         .button{ | |||
|              | |||
|         } | |||
|      | |||
|      | |||
|      | |||
|      | |||
|     } | |||
|      | |||
|      | |||
|     @-webkit-keyframes flash { | |||
|         0% { opacity: .3; } | |||
|         100% { opacity: 1; } | |||
|        } | |||
|        @keyframes flash { | |||
|         0% { opacity: .3; } | |||
|         100% { opacity: 1; } | |||
|        } | |||
| } | |||
| @ -0,0 +1,80 @@ | |||
| .blog{ | |||
|     margin-top: 90px; | |||
|     margin-bottom: 90px; | |||
|     h1{ | |||
|          | |||
|         font-weight: 700; | |||
|         margin-bottom: 10px; | |||
|         span{ | |||
|             color: $color-orange; | |||
|         } | |||
|     } | |||
|     p{ | |||
|         color: $color-grey; | |||
|         font-size: $font-sub-head; | |||
|     } | |||
| 
 | |||
| 
 | |||
|     .blog_contents{ | |||
|         padding-top: 40px; | |||
|     } | |||
| .card{ | |||
|     background: transparent; | |||
|     background-color:#f4f4f4; | |||
|     border: none; | |||
| overflow: hidden; | |||
| 
 | |||
| #zoomIn{ | |||
| 
 | |||
|     transform: scale(1); | |||
|     transition: .3s ease-in-out; | |||
|     border-radius: 6px 6px 0px 0px; | |||
|     -webkit-border-radius: 6px 6px 0px 0px; | |||
|     -o-border-radius: 6px 6px 0px 0px; | |||
|     -moz-border-radius: 6px 6px 0px 0px; | |||
| 
 | |||
|     &:hover{ | |||
|          | |||
|         transform: scale(1.3); | |||
|         border-radius: 6px 6px 0px 0px; | |||
|         -webkit-border-radius: 6px 6px 0px 0px; | |||
|         -o-border-radius: 6px 6px 0px 0px; | |||
|         -moz-border-radius: 6px 6px 0px 0px; | |||
| 
 | |||
| } | |||
| } | |||
| 
 | |||
| 
 | |||
|     ul{  | |||
|         margin-top: 30px; | |||
|         list-style: none; | |||
|         li{ | |||
|             margin-right: 10px; | |||
|             background: transparent; | |||
|             border: none; | |||
| 
 | |||
|             &:last-child{ | |||
|               color:$color-grey;   | |||
|               border-left: 1px solid; | |||
|               border-color: $color-grey; | |||
|               padding-left: 10px; | |||
|             } | |||
|         } | |||
|     } | |||
| 
 | |||
|     .card-body{ | |||
|         padding-top: 0; | |||
|         a{ | |||
|              | |||
|             color: $color-black; | |||
|             font-weight: 600; | |||
|         font-size: $font-sub-blog; | |||
|             &:hover{ | |||
|                 color: $color-orange; | |||
|             } | |||
|         } | |||
|     } | |||
| } | |||
| 
 | |||
| 
 | |||
| } | |||
| @ -0,0 +1,132 @@ | |||
| .customer_review{ | |||
| margin-top: 30px; | |||
| 
 | |||
| padding-top: 50px; | |||
| padding-bottom:100px; | |||
| background-color:$color-bg; | |||
| 
 | |||
| 
 | |||
| h1{ | |||
|          | |||
|     font-weight: 700; | |||
|     margin-bottom: 10px; | |||
|     span{ | |||
|         color: $color-orange; | |||
|     } | |||
| } | |||
| p{ | |||
|     color: $color-grey; | |||
|     font-size: $font-sub-head; | |||
| } | |||
| 
 | |||
| 
 | |||
| 
 | |||
| .carousel-inner{ | |||
| 
 | |||
| 
 | |||
| padding-top: 50px; | |||
| padding-bottom:40px; | |||
| 
 | |||
| .review{ | |||
|     color: $color-white; | |||
|     background-color: $color-carousel; | |||
|     padding: 30px 50px; | |||
|     border-radius: 5px; | |||
|     position: relative; | |||
|     text-align: center; | |||
| } | |||
| 
 | |||
| .traingle{ | |||
|      | |||
|     | |||
| 
 | |||
|     &:after{ | |||
|         content:""; | |||
|         width: 0; | |||
| 	height: 0; | |||
| 	border-left: 10px solid transparent; | |||
| 	border-right: 10px solid transparent; | |||
| 	border-top: 15px solid $color-carousel; | |||
|     position: absolute; | |||
|     left: 132px; | |||
|     top: 280px; | |||
| 
 | |||
|     @media screen and(max-width:1199px) { | |||
| 
 | |||
|         left: 110px; | |||
|     top: 353px; | |||
|          | |||
|     } | |||
| 
 | |||
|     @media screen and(max-width:991px) { | |||
| 
 | |||
|         left: 170px; | |||
|     top: 232px; | |||
|          | |||
|     } | |||
|     @media screen and(max-width:767px) { | |||
| 
 | |||
|         left: 260px; | |||
|     top: 185px; | |||
|          | |||
|     } | |||
|     } | |||
| } | |||
| 
 | |||
| } | |||
| 
 | |||
| .carousel-control-next-icon, .carousel-control-prev-icon{ | |||
|     display: none; | |||
| } | |||
| 
 | |||
| 
 | |||
| .carousel-indicators { | |||
|     bottom: -59px; | |||
| } | |||
| 
 | |||
| 
 | |||
| .carousel-indicators li { | |||
|     box-sizing: content-box; | |||
|     -ms-flex: 0 1 auto; | |||
|     flex: 0 1 auto; | |||
|     width: 13px; | |||
|     height: 13px; | |||
|     border-radius: 50%; | |||
|     margin-right: 4px; | |||
|     margin-left: 5px; | |||
|     text-indent: -999px; | |||
|     cursor: pointer; | |||
|     background-color: #aeb3b1; | |||
|     background-clip: padding-box; | |||
|     border-top: 10px solid transparent; | |||
|     border-bottom: 10px solid transparent; | |||
|     opacity: .5; | |||
|     transition: opacity .6s ease; | |||
| } | |||
| 
 | |||
| 
 | |||
| .customer{ | |||
|     padding-top: 40px; | |||
|     display: flex; | |||
|     justify-content: center; | |||
|     img{ | |||
|         max-width: 70px; | |||
|         border-radius: 50%; | |||
|         border: 3px solid #b8b9bd; | |||
|     } | |||
| 
 | |||
|     @media screen and(max-width:991px) { | |||
| 
 | |||
|         padding-bottom: 30px; | |||
|          | |||
|     }; | |||
| } | |||
| 
 | |||
| 
 | |||
| .quote{ | |||
|     color: $color-orange; | |||
| 
 | |||
|     font-size: 25px; | |||
| } | |||
| 
 | |||
| } | |||