AjmalCybro
2 years ago
119 changed files with 7854 additions and 0 deletions
@ -0,0 +1,47 @@ |
|||||
|
.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg |
||||
|
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html |
||||
|
:alt: License: LGPL-3 |
||||
|
Theme Fashion |
||||
|
============= |
||||
|
* Design Web Pages with theme fashion |
||||
|
|
||||
|
Installation |
||||
|
============ |
||||
|
- www.odoo.com/documentation/16.0/setup/install.html |
||||
|
- Install our custom addon |
||||
|
|
||||
|
License |
||||
|
------- |
||||
|
General Public License, Version 3 (LGPL v3). |
||||
|
(https://www.odoo.com/documentation/user/13.0/legal/licenses/licenses.html) |
||||
|
|
||||
|
Company |
||||
|
------- |
||||
|
* 'Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
||||
|
|
||||
|
Credits |
||||
|
------- |
||||
|
* Developer: |
||||
|
Bidhin @ cybrosys, |
||||
|
Rahna Kabeer @ cybrosys(v16) |
||||
|
|
||||
|
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 |
||||
|
========== |
||||
|
.. image:: https://cybrosys.com/images/logo.png |
||||
|
:target: https://cybrosys.com |
||||
|
This module is maintained by Cybrosys Technologies. |
||||
|
|
||||
|
For support and more information, please visit https://www.cybrosys.com |
||||
|
|
||||
|
Further information |
||||
|
=================== |
||||
|
HTML Description: `<static/description/index.html>`__ |
||||
|
|
||||
@ -0,0 +1,23 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU LESSER |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
||||
|
# (LGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
|
||||
|
from . import models |
||||
@ -0,0 +1,65 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2023-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 Fashion', |
||||
|
'description': 'Design Web Pages with theme Fashion', |
||||
|
'summary': 'Theme Fashion', |
||||
|
'category': 'Theme/eCommerce', |
||||
|
'version': '16.0.1.0.0', |
||||
|
'author': 'Cybrosys Techno Solutions', |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'website': "https://www.cybrosys.com", |
||||
|
'depends': ['website_sale_wishlist'], |
||||
|
'data': [ |
||||
|
'views/website_snipppet.xml', |
||||
|
'views/layout.xml', |
||||
|
'views/product/product.xml', |
||||
|
'views/product/blog.xml', |
||||
|
'views/preview/preview.xml', |
||||
|
'views/banner/banner.xml', |
||||
|
'views/slider/slider.xml', |
||||
|
'views/slider/sliders.xml', |
||||
|
'views/cart/cart.xml', |
||||
|
'views/contact/contact.xml', |
||||
|
'views/about/about.xml', |
||||
|
'views/template.xml', |
||||
|
'views/product_views.xml', |
||||
|
], |
||||
|
'images': [ |
||||
|
'static/description/banner.png', |
||||
|
'static/description/theme_screenshot.png', |
||||
|
], |
||||
|
'assets': { |
||||
|
'web.assets_frontend': [ |
||||
|
'theme_fashion/static/src/css/style.css', |
||||
|
'theme_fashion/static/src/js/custom.js', |
||||
|
'theme_fashion/static/src/js/jquery.flexisel.js', |
||||
|
'theme_fashion/static/src/js/owl.carousel.js', |
||||
|
'theme_fashion/static/src/css/stylenav.css', |
||||
|
], |
||||
|
}, |
||||
|
'license': 'LGPL-3', |
||||
|
'installable': True, |
||||
|
'application': False, |
||||
|
'auto_install': False, |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
## Module <theme_fashion> |
||||
|
|
||||
|
#### 23.02.2023 |
||||
|
#### Version 16.0.1.0.0 |
||||
|
#### ADD |
||||
|
- Initial commit for Theme Fashion |
||||
@ -0,0 +1,22 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2023-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_fashion |
||||
@ -0,0 +1,35 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2023-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/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
"""theme fashion header""" |
||||
|
from odoo import models |
||||
|
|
||||
|
|
||||
|
class ThemeFashion(models.AbstractModel): |
||||
|
"""Inherit the model theme.utils for adding new header file""" |
||||
|
_inherit = 'theme.utils' |
||||
|
|
||||
|
def _theme_fashion_post_copy(self, mod): |
||||
|
"""For viewing default header""" |
||||
|
|
||||
|
self.enable_view( |
||||
|
'theme_fashion.template_header_hamburger_oe_structure_header_fashions') |
||||
|
self.disable_view('website.template_header_default') |
||||
|
After Width: | Height: | Size: 298 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 405 KiB |
|
After Width: | Height: | Size: 470 KiB |
|
After Width: | Height: | Size: 624 KiB |
|
After Width: | Height: | Size: 269 KiB |
|
After Width: | Height: | Size: 454 KiB |
|
After Width: | Height: | Size: 430 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 432 KiB |
|
After Width: | Height: | Size: 480 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 489 KiB |
|
After Width: | Height: | Size: 601 KiB |
|
After Width: | Height: | Size: 729 KiB |
@ -0,0 +1,265 @@ |
|||||
|
<!-- Hero Section --> |
||||
|
<div class="container pt-4 mt-4 rounded" style="background-color: #f0f2f4; font-family: Montserrat, 'sans-serif';"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12 mb-4"> |
||||
|
<img src="images/Cybrosys.png" alt="Cybrosys Logo" style="width: 120px; height: auto;"> |
||||
|
<hr style="border-color: #e1e5e9;" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12 text-center"> |
||||
|
<img src="images/hero.png" width=60% height="auto" class="mb-4" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 text-center"> |
||||
|
<h1 class="mt-4">Theme Fashion</h1> |
||||
|
<p class="lead mb-4" style="max-width: 700px; margin: 0 auto;"> |
||||
|
Theme Fashion is a attractive and unique front-end theme mainly suitable for eCommerce website. Many |
||||
|
custom designed snippets facilitates to add better user experience. Contains best deals with new arrival |
||||
|
products slider, testimonial slider that are configured from the backend. This theme fully customized |
||||
|
the eCommerce website, shop view, custom categories view, product view, contact us page...etc. it |
||||
|
contains price filter and clear cart options by default. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- End of Hero Section --> |
||||
|
|
||||
|
<!-- Alternate Section --> |
||||
|
<div class="row p-4"> |
||||
|
<div class="col-lg-6 px-4" style="margin-top: 100px;"> |
||||
|
<h2>Desktop View</h2> |
||||
|
<p class="lead"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-lg-6 px-4"> |
||||
|
<img style="border-radius: 0.5em;" src="images/laptop-screenshots.jpg" width="90%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row p-4"> |
||||
|
<div class="col-lg-6 px-4"> |
||||
|
<img style="border-radius: 0.5em;" src="images/phone-screenshots.jpg" width="90%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-6 px-4" style="margin-top: 100px;"> |
||||
|
<h2>Mobile View</h2> |
||||
|
<p class="lead"> |
||||
|
User friendly and modern looking theme makes your page more Stylish And Beautiful. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Alternate Section --> |
||||
|
|
||||
|
|
||||
|
<!-- Two Columns Section --> |
||||
|
<div class="row p-4"> |
||||
|
<!-- Column 1 --> |
||||
|
<div class="col-lg-6"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/1.jpg" width="100%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 mt-4"> |
||||
|
<h2 class="text-center">Shop View </h2> |
||||
|
<p class="lead text-center"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive |
||||
|
webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 1 --> |
||||
|
|
||||
|
<!-- Column 2 --> |
||||
|
<div class="col-lg-6"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/2.jpg" width="100%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 mt-4"> |
||||
|
<h2 class="text-center">Cart View</h2> |
||||
|
<p class="lead text-center"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive |
||||
|
webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 2 --> |
||||
|
</div> |
||||
|
<!-- End of Two Columns Section --> |
||||
|
|
||||
|
|
||||
|
<!-- One Column Section --> |
||||
|
<div class="row p-4"> |
||||
|
<div class="col-lg-6"> |
||||
|
<img style="border-radius: 0.5em;" src="images/3.jpg" width="90%" height="auto" class="mb-4 shadow-sm" |
||||
|
alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-6" style="padding-top: 100px;"> |
||||
|
<h2>Overview</h2> |
||||
|
<p class="lead"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Two Columns Section --> |
||||
|
|
||||
|
<!-- Two Columns Section --> |
||||
|
<div class="row p-4"> |
||||
|
<!-- Column 1 --> |
||||
|
<div class="col-lg-4"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/4.jpg" width="100%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 mt-4"> |
||||
|
<h2 class="text-center">New Arrivals</h2> |
||||
|
<p class="lead text-center"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive |
||||
|
webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 1 --> |
||||
|
|
||||
|
<!-- Column 2 --> |
||||
|
<div class="col-lg-4"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/5.jpg" width="100%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 mt-4"> |
||||
|
<h2 class="text-center">Contact Map</h2> |
||||
|
<p class="lead text-center"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive |
||||
|
webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 2 --> |
||||
|
|
||||
|
|
||||
|
<!-- Column 4 --> |
||||
|
<div class="col-lg-4"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/6.jpg" width="100%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 mt-4"> |
||||
|
<h2 class="text-center">Checkout Address</h2> |
||||
|
<p class="lead text-center"> |
||||
|
It is easy to customize and use. Just drag and drop the building blocks to make attractive |
||||
|
webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 4 --> |
||||
|
</div> |
||||
|
<!-- End of Two Columns Section --> |
||||
|
|
||||
|
<!-- 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">Shop</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">Cart</h6> |
||||
|
<hr style="border-width: 5px; border-color: #f44f52; 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: 270 KiB |
@ -0,0 +1,119 @@ |
|||||
|
/* Slider */ |
||||
|
.slick-slider |
||||
|
{ |
||||
|
position: relative; |
||||
|
|
||||
|
display: block; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-user-select: none; |
||||
|
-moz-user-select: none; |
||||
|
-ms-user-select: none; |
||||
|
user-select: none; |
||||
|
|
||||
|
-webkit-touch-callout: none; |
||||
|
-khtml-user-select: none; |
||||
|
-ms-touch-action: pan-y; |
||||
|
touch-action: pan-y; |
||||
|
-webkit-tap-highlight-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.slick-list |
||||
|
{ |
||||
|
position: relative; |
||||
|
|
||||
|
display: block; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.slick-list:focus |
||||
|
{ |
||||
|
outline: none; |
||||
|
} |
||||
|
.slick-list.dragging |
||||
|
{ |
||||
|
cursor: pointer; |
||||
|
cursor: hand; |
||||
|
} |
||||
|
|
||||
|
.slick-slider .slick-track, |
||||
|
.slick-slider .slick-list |
||||
|
{ |
||||
|
-webkit-transform: translate3d(0, 0, 0); |
||||
|
-moz-transform: translate3d(0, 0, 0); |
||||
|
-ms-transform: translate3d(0, 0, 0); |
||||
|
-o-transform: translate3d(0, 0, 0); |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
|
||||
|
.slick-track |
||||
|
{ |
||||
|
position: relative; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
|
||||
|
display: block; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
.slick-track:before, |
||||
|
.slick-track:after |
||||
|
{ |
||||
|
display: table; |
||||
|
|
||||
|
content: ''; |
||||
|
} |
||||
|
.slick-track:after |
||||
|
{ |
||||
|
clear: both; |
||||
|
} |
||||
|
.slick-loading .slick-track |
||||
|
{ |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.slick-slide |
||||
|
{ |
||||
|
display: none; |
||||
|
float: left; |
||||
|
|
||||
|
height: 100%; |
||||
|
min-height: 1px; |
||||
|
} |
||||
|
[dir='rtl'] .slick-slide |
||||
|
{ |
||||
|
float: right; |
||||
|
} |
||||
|
.slick-slide img |
||||
|
{ |
||||
|
display: block; |
||||
|
} |
||||
|
.slick-slide.slick-loading img |
||||
|
{ |
||||
|
display: none; |
||||
|
} |
||||
|
.slick-slide.dragging img |
||||
|
{ |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.slick-initialized .slick-slide |
||||
|
{ |
||||
|
display: block; |
||||
|
} |
||||
|
.slick-loading .slick-slide |
||||
|
{ |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
.slick-vertical .slick-slide |
||||
|
{ |
||||
|
display: block; |
||||
|
|
||||
|
height: auto; |
||||
|
|
||||
|
border: 1px solid transparent; |
||||
|
} |
||||
|
.slick-arrow.slick-hidden { |
||||
|
display: none; |
||||
|
} |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,126 @@ |
|||||
|
|
||||
|
a |
||||
|
{ |
||||
|
text-decoration: none; |
||||
|
color: #232323; |
||||
|
|
||||
|
transition: color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
a:hover |
||||
|
{ |
||||
|
color: tomato; |
||||
|
} |
||||
|
|
||||
|
#menuToggle |
||||
|
{ |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: 50px; |
||||
|
right: 50px; |
||||
|
|
||||
|
z-index: 1; |
||||
|
|
||||
|
-webkit-user-select: none; |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
#menuToggle input |
||||
|
{ |
||||
|
display: block; |
||||
|
width: 40px; |
||||
|
height: 32px; |
||||
|
position: absolute; |
||||
|
top: -7px; |
||||
|
left: -5px; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
|
||||
|
opacity: 0; |
||||
|
z-index: 2; |
||||
|
|
||||
|
-webkit-touch-callout: none; |
||||
|
} |
||||
|
|
||||
|
#menuToggle span |
||||
|
{ |
||||
|
display: block; |
||||
|
width: 33px; |
||||
|
height: 4px; |
||||
|
margin-bottom: 5px; |
||||
|
position: relative; |
||||
|
|
||||
|
background: #cdcdcd; |
||||
|
border-radius: 3px; |
||||
|
|
||||
|
z-index: 1; |
||||
|
|
||||
|
transform-origin: 4px 0px; |
||||
|
|
||||
|
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), |
||||
|
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), |
||||
|
opacity 0.55s ease; |
||||
|
} |
||||
|
|
||||
|
#menuToggle span:first-child |
||||
|
{ |
||||
|
transform-origin: 0% 0%; |
||||
|
} |
||||
|
|
||||
|
#menuToggle span:nth-last-child(2) |
||||
|
{ |
||||
|
transform-origin: 0% 100%; |
||||
|
} |
||||
|
|
||||
|
#menuToggle input:checked ~ span |
||||
|
{ |
||||
|
opacity: 1; |
||||
|
transform: rotate(45deg) translate(-2px, -1px); |
||||
|
background: #232323; |
||||
|
} |
||||
|
|
||||
|
#menuToggle input:checked ~ span:nth-last-child(3) |
||||
|
{ |
||||
|
opacity: 0; |
||||
|
transform: rotate(0deg) scale(0.2, 0.2); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#menuToggle input:checked ~ span:nth-last-child(2) |
||||
|
{ |
||||
|
opacity: 1; |
||||
|
transform: rotate(-45deg) translate(0, -1px); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#menu |
||||
|
{ |
||||
|
position: absolute; |
||||
|
width: 300px; |
||||
|
margin: -100px 0 0 0; |
||||
|
padding: 50px; |
||||
|
padding-top: 125px; |
||||
|
right: -100px; |
||||
|
|
||||
|
background: #ededed; |
||||
|
list-style-type: none; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
/* to stop flickering of text in safari */ |
||||
|
|
||||
|
transform-origin: 0% 0%; |
||||
|
transform: translate(100%, 0); |
||||
|
|
||||
|
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); |
||||
|
} |
||||
|
|
||||
|
#menu li |
||||
|
{ |
||||
|
padding: 10px 0; |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
#menuToggle input:checked ~ ul |
||||
|
{ |
||||
|
transform: scale(1.0, 1.0); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
After Width: | Height: | Size: 842 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 400 KiB |
|
After Width: | Height: | Size: 411 KiB |
|
After Width: | Height: | Size: 283 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 714 B |
|
After Width: | Height: | Size: 738 B |
|
After Width: | Height: | Size: 616 B |
|
After Width: | Height: | Size: 741 B |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 961 B |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 948 B |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 965 B |
|
After Width: | Height: | Size: 4.8 MiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 809 B |
|
After Width: | Height: | Size: 809 B |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,25 @@ |
|||||
|
odoo.define('theme_fashion.custom', function (require) { |
||||
|
"use strict" |
||||
|
var publicWidget = require('web.public.widget'); |
||||
|
publicWidget.registry.Main_nav = publicWidget.Widget.extend({ |
||||
|
selector: '.main-nav', |
||||
|
events: { |
||||
|
'click #openbtn': 'openNav', |
||||
|
'click #closebtn': 'closeNav', |
||||
|
}, |
||||
|
|
||||
|
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */ |
||||
|
openNav: function () { |
||||
|
var self = this; |
||||
|
self.$el.find("#mySidebar").width("250px"); |
||||
|
}, |
||||
|
|
||||
|
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */ |
||||
|
closeNav: function () { |
||||
|
var self = this; |
||||
|
self.$el.find("#mySidebar").width("0"); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
return publicWidget.registry.Main_nav; |
||||
|
}); |
||||
@ -0,0 +1,284 @@ |
|||||
|
/* |
||||
|
* File: jquery.flexisel.js |
||||
|
* Version: 1.0.0 |
||||
|
* Description: Responsive carousel jQuery plugin |
||||
|
* Author: 9bit Studios |
||||
|
* Copyright 2012, 9bit Studios |
||||
|
* http://www.9bitstudios.com
|
||||
|
* Free to use and abuse under the MIT license. |
||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
*/ |
||||
|
|
||||
|
(function ($) { |
||||
|
|
||||
|
$.fn.flexisel = function (options) { |
||||
|
|
||||
|
var defaults = $.extend({ |
||||
|
visibleItems: 4, |
||||
|
animationSpeed: 200, |
||||
|
autoPlay: false, |
||||
|
autoPlaySpeed: 3000, |
||||
|
pauseOnHover: true, |
||||
|
setMaxWidthAndHeight: false, |
||||
|
enableResponsiveBreakpoints: false, |
||||
|
responsiveBreakpoints: { |
||||
|
portrait: { |
||||
|
changePoint:480, |
||||
|
visibleItems: 1 |
||||
|
}, |
||||
|
landscape: { |
||||
|
changePoint:640, |
||||
|
visibleItems: 2 |
||||
|
}, |
||||
|
tablet: { |
||||
|
changePoint:768, |
||||
|
visibleItems: 3 |
||||
|
} |
||||
|
} |
||||
|
}, options); |
||||
|
|
||||
|
/****************************** |
||||
|
Private Variables |
||||
|
*******************************/ |
||||
|
|
||||
|
var object = $(this); |
||||
|
var settings = $.extend(defaults, options); |
||||
|
var itemsWidth; // Declare the global width of each item in carousel
|
||||
|
var canNavigate = true; |
||||
|
var itemsVisible = settings.visibleItems; |
||||
|
|
||||
|
/****************************** |
||||
|
Public Methods |
||||
|
*******************************/ |
||||
|
|
||||
|
var methods = { |
||||
|
|
||||
|
init: function() { |
||||
|
|
||||
|
return this.each(function () { |
||||
|
methods.appendHTML(); |
||||
|
methods.setEventHandlers(); |
||||
|
methods.initializeItems(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/****************************** |
||||
|
Initialize Items |
||||
|
*******************************/ |
||||
|
|
||||
|
initializeItems: function() { |
||||
|
|
||||
|
var listParent = object.parent(); |
||||
|
var innerHeight = listParent.height(); |
||||
|
var childSet = object.children(); |
||||
|
|
||||
|
var innerWidth = listParent.width(); // Set widths
|
||||
|
itemsWidth = (innerWidth)/itemsVisible; |
||||
|
childSet.width(itemsWidth); |
||||
|
childSet.last().insertBefore(childSet.first()); |
||||
|
childSet.last().insertBefore(childSet.first()); |
||||
|
object.css({'left' : -itemsWidth}); |
||||
|
|
||||
|
object.fadeIn(); |
||||
|
$(window).trigger("resize"); // needed to position arrows correctly
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/****************************** |
||||
|
Append HTML |
||||
|
*******************************/ |
||||
|
|
||||
|
appendHTML: function() { |
||||
|
|
||||
|
object.addClass("nbs-flexisel-ul"); |
||||
|
object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); |
||||
|
object.find("li").addClass("nbs-flexisel-item"); |
||||
|
|
||||
|
if(settings.setMaxWidthAndHeight) { |
||||
|
var baseWidth = $(".nbs-flexisel-item > img").width(); |
||||
|
var baseHeight = $(".nbs-flexisel-item > img").height(); |
||||
|
$(".nbs-flexisel-item > img").css("max-width", baseWidth); |
||||
|
$(".nbs-flexisel-item > img").css("max-height", baseHeight); |
||||
|
} |
||||
|
|
||||
|
$("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object); |
||||
|
var cloneContent = object.children().clone(); |
||||
|
object.append(cloneContent); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/****************************** |
||||
|
Set Event Handlers |
||||
|
*******************************/ |
||||
|
setEventHandlers: function() { |
||||
|
|
||||
|
var listParent = object.parent(); |
||||
|
var childSet = object.children(); |
||||
|
var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); |
||||
|
var rightArrow = listParent.find($(".nbs-flexisel-nav-right")); |
||||
|
|
||||
|
$(window).on("resize", function(event){ |
||||
|
|
||||
|
methods.setResponsiveEvents(); |
||||
|
|
||||
|
var innerWidth = $(listParent).width(); |
||||
|
var innerHeight = $(listParent).height(); |
||||
|
|
||||
|
itemsWidth = (innerWidth)/itemsVisible; |
||||
|
|
||||
|
childSet.width(itemsWidth); |
||||
|
object.css({'left' : -itemsWidth}); |
||||
|
|
||||
|
var halfArrowHeight = (leftArrow.height())/2; |
||||
|
var arrowMargin = (innerHeight/2) - halfArrowHeight; |
||||
|
leftArrow.css("top", arrowMargin + "px"); |
||||
|
rightArrow.css("top", arrowMargin + "px"); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
$(leftArrow).on("click", function (event) { |
||||
|
methods.scrollLeft(); |
||||
|
}); |
||||
|
|
||||
|
$(rightArrow).on("click", function (event) { |
||||
|
methods.scrollRight(); |
||||
|
}); |
||||
|
|
||||
|
if(settings.pauseOnHover == true) { |
||||
|
$(".nbs-flexisel-item").on({ |
||||
|
mouseenter: function () { |
||||
|
canNavigate = false; |
||||
|
}, |
||||
|
mouseleave: function () { |
||||
|
canNavigate = true; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if(settings.autoPlay == true) { |
||||
|
|
||||
|
setInterval(function () { |
||||
|
if(canNavigate == true) |
||||
|
methods.scrollRight(); |
||||
|
}, settings.autoPlaySpeed); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/****************************** |
||||
|
Set Responsive Events |
||||
|
*******************************/ |
||||
|
|
||||
|
setResponsiveEvents: function() { |
||||
|
var contentWidth = $('html').width(); |
||||
|
|
||||
|
if(settings.enableResponsiveBreakpoints == true) { |
||||
|
if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) { |
||||
|
itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems; |
||||
|
} |
||||
|
else if(contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) { |
||||
|
itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems; |
||||
|
} |
||||
|
else if(contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) { |
||||
|
itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems; |
||||
|
} |
||||
|
else { |
||||
|
itemsVisible = settings.visibleItems; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/****************************** |
||||
|
Scroll Left |
||||
|
*******************************/ |
||||
|
|
||||
|
scrollLeft:function() { |
||||
|
|
||||
|
if(canNavigate == true) { |
||||
|
canNavigate = false; |
||||
|
|
||||
|
var listParent = object.parent(); |
||||
|
var innerWidth = listParent.width(); |
||||
|
|
||||
|
itemsWidth = (innerWidth)/itemsVisible; |
||||
|
|
||||
|
var childSet = object.children(); |
||||
|
|
||||
|
object.animate({ |
||||
|
'left' : "+=" + itemsWidth |
||||
|
}, |
||||
|
{ |
||||
|
queue:false, |
||||
|
duration:settings.animationSpeed, |
||||
|
easing: "linear", |
||||
|
complete: function() { |
||||
|
childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)
|
||||
|
methods.adjustScroll(); |
||||
|
canNavigate = true; |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/****************************** |
||||
|
Scroll Right |
||||
|
*******************************/ |
||||
|
|
||||
|
scrollRight:function() { |
||||
|
|
||||
|
if(canNavigate == true) { |
||||
|
canNavigate = false; |
||||
|
|
||||
|
var listParent = object.parent(); |
||||
|
var innerWidth = listParent.width(); |
||||
|
|
||||
|
itemsWidth = (innerWidth)/itemsVisible; |
||||
|
|
||||
|
var childSet = object.children(); |
||||
|
|
||||
|
object.animate({ |
||||
|
'left' : "-=" + itemsWidth |
||||
|
}, |
||||
|
{ |
||||
|
queue:false, |
||||
|
duration:settings.animationSpeed, |
||||
|
easing: "linear", |
||||
|
complete: function() { |
||||
|
childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)
|
||||
|
methods.adjustScroll(); |
||||
|
canNavigate = true; |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/****************************** |
||||
|
Adjust Scroll |
||||
|
*******************************/ |
||||
|
|
||||
|
adjustScroll: function() { |
||||
|
|
||||
|
var listParent = object.parent(); |
||||
|
var childSet = object.children(); |
||||
|
|
||||
|
var innerWidth = listParent.width(); |
||||
|
itemsWidth = (innerWidth)/itemsVisible; |
||||
|
childSet.width(itemsWidth); |
||||
|
object.css({'left' : -itemsWidth}); |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2');
|
||||
|
return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); |
||||
|
} else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 });
|
||||
|
return methods.init.apply(this); |
||||
|
} else { |
||||
|
$.error( 'Method "' + method + '" does not exist in flexisel plugin!'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
})(jQuery); |
||||
@ -0,0 +1 @@ |
|||||
|
*{font-family: $font-deafault;} |
||||
@ -0,0 +1,351 @@ |
|||||
|
/*! 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,23 @@ |
|||||
|
//Font |
||||
|
$font-deafault:'Montserrat', sans-serif; |
||||
|
|
||||
|
//Colors |
||||
|
$color-theme:#21272B; |
||||
|
$color-secondary:#875a7b; |
||||
|
$color-footer:#55595a; |
||||
|
$color-red:#fe0000; |
||||
|
$color-black:#0000; |
||||
|
$color-white:#ffff; |
||||
|
$color-red-btn:#6d1616af; |
||||
|
|
||||
|
|
||||
|
//Font_size |
||||
|
|
||||
|
$font-size-h1: 36px; |
||||
|
$font-size-h4:18px; |
||||
|
$font-size-subheading:25px; |
||||
|
$font-size-text: 14px; |
||||
|
$font-size-s:15px; |
||||
|
$font-size-banner:53px; |
||||
|
$font-size-form:12px; |
||||
|
$font-bold:18px; |
||||
@ -0,0 +1,36 @@ |
|||||
|
.banner-sub-about{ |
||||
|
|
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
|
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center -76px; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 80px; |
||||
|
} |
||||
|
|
||||
|
.banner-sub-contact{ |
||||
|
|
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
background-image: url(../../images/banner/contact_banner/800.jpg); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center -76px; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 80px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.banner-sub-cart{ |
||||
|
|
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
background-image: url(../../images/banner/cart/19708.jpg); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center -76px; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 80px; |
||||
|
} |
||||
@ -0,0 +1,156 @@ |
|||||
|
.banner{ |
||||
|
|
||||
|
margin-top: 50px; |
||||
|
margin-bottom: 50px; |
||||
|
// height: 100vh; |
||||
|
.right_banner_coloumn{ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.banner_left{ |
||||
|
padding: 0; |
||||
|
background-color: $color-theme; |
||||
|
|
||||
|
padding-left: 100px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.card{ |
||||
|
background-color: $color-theme; |
||||
|
border-radius: 0; |
||||
|
padding: 50px; |
||||
|
|
||||
|
@media screen and (max-width:946px) { |
||||
|
|
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.card-header{ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.card-title{ |
||||
|
color: $color-white; |
||||
|
text-align-last: left; |
||||
|
margin-bottom: 20px |
||||
|
} |
||||
|
.card-body{ |
||||
|
color: $color-white; |
||||
|
text-align-last: left; |
||||
|
padding-bottom: 1px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.hr{ |
||||
|
background-color:$color-white; |
||||
|
width: 71%; |
||||
|
height: 3px; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.hr2{ |
||||
|
background-color:$color-white; |
||||
|
width: 100%; |
||||
|
height: 1px; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.social_media{ |
||||
|
|
||||
|
ul{display: flex; |
||||
|
padding-left: 15px; |
||||
|
li{ |
||||
|
width: 28px; |
||||
|
margin: 5px; |
||||
|
list-style-type: none; |
||||
|
|
||||
|
background-color: $color-theme; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
padding: 2px; |
||||
|
&:hover{ |
||||
|
border-radius: 9px; |
||||
|
background-color: $color-red; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.banner_right{ |
||||
|
margin-top: 60px; |
||||
|
|
||||
|
width:100%; |
||||
|
max-width: 660px; |
||||
|
padding-left: 0px; |
||||
|
// padding-bottom: 16px; |
||||
|
// padding-right: 16px; |
||||
|
// padding-top: 0px; |
||||
|
// border-top-width: 6px; |
||||
|
// border-left-width: 7px; |
||||
|
// position: absolute; |
||||
|
|
||||
|
@media screen and (max-width:991px) { |
||||
|
|
||||
|
max-width: 100%; |
||||
|
|
||||
|
} |
||||
|
@media screen and (max-width:768px) { |
||||
|
|
||||
|
max-width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
.hh{ |
||||
|
&:after { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
margin-top: 5px; |
||||
|
padding-top: 20px; /* This creates some space between the element and the border. */ |
||||
|
|
||||
|
width: 200px; |
||||
|
height: 2px; |
||||
|
background-color: $color-red; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.nn{ |
||||
|
&:after { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
margin-top: 5px; |
||||
|
padding-top: 20px; /* This creates some space between the element and the border. */ |
||||
|
|
||||
|
width: 200px; |
||||
|
height: 2px; |
||||
|
background-color: $color-red; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.banner_img{ |
||||
|
|
||||
|
height: 290px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
@ -0,0 +1,137 @@ |
|||||
|
.btn { |
||||
|
border: none !important; |
||||
|
outline: none !important; |
||||
|
&-search { |
||||
|
background-color: none !important; |
||||
|
border-color: black; |
||||
|
padding: 9px 10px; |
||||
|
&:hover { |
||||
|
background-color: darken($color-red, 5%) !important; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
&-primary{ |
||||
|
color:black; |
||||
|
background-color:$color-white; |
||||
|
font-weight: 600; |
||||
|
border-radius: 20px; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
background-color: #a1a3a6;} |
||||
|
} |
||||
|
&-light { |
||||
|
margin-left: 20px; |
||||
|
color: #fff; |
||||
|
padding: 9px 25px !important; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
background-color: red !important; |
||||
|
border-color: $color-red; |
||||
|
padding: 9px 35px; |
||||
|
&:hover { |
||||
|
background-color: darken(red, 5%) !important; |
||||
|
color: #fff; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-checkout { |
||||
|
|
||||
|
color: #fff; |
||||
|
padding: 15px 3px !important; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
background-color: red !important; |
||||
|
border-color: $color-red; |
||||
|
padding: 9px 35px; |
||||
|
&:hover { |
||||
|
background-color: darken(red, 5%) !important; |
||||
|
color: #fff; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-link{ |
||||
|
color: $color-white; |
||||
|
text-decoration: none !important; |
||||
|
color: #fff; |
||||
|
border: none !important; |
||||
|
outline: none !important; |
||||
|
&:hover { |
||||
|
text-decoration: none !important; |
||||
|
color: #fff; |
||||
|
border: none !important; |
||||
|
outline: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-preview { |
||||
|
margin-left: 20px; |
||||
|
color:$color-red; |
||||
|
padding: 9px 25px !important; |
||||
|
border-color: $color-red !important; |
||||
|
border: 1px solid !important; |
||||
|
cursor: pointer; |
||||
|
background-color:transparent !important; |
||||
|
|
||||
|
padding: 9px 35px; |
||||
|
&:hover { |
||||
|
background-color: darken(red, 5%) !important; |
||||
|
color: #fff; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-new { |
||||
|
color:#fff; |
||||
|
float: right; |
||||
|
background-color: $color-red !important; |
||||
|
border-color: $color-red; |
||||
|
padding: 9px 35px; |
||||
|
margin-top: 20px; |
||||
|
&:hover { |
||||
|
background-color: darken($color-red, 5%) !important; |
||||
|
border: none; |
||||
|
color:#fff; |
||||
|
} |
||||
|
} |
||||
|
&-message { |
||||
|
color: $color-white; |
||||
|
font-weight: 700; |
||||
|
background-color: $color-theme !important; |
||||
|
border-color: $color-theme; |
||||
|
padding:8px 26px; |
||||
|
border-radius: 0; |
||||
|
&:hover { |
||||
|
background-color: darken($color-theme, 5%) !important; |
||||
|
border: none !important; |
||||
|
} |
||||
|
} |
||||
|
&-send { |
||||
|
background-color:#fff !important; |
||||
|
border-color: #fff; |
||||
|
padding: 8px 13px; |
||||
|
margin-top: 15px; |
||||
|
&:hover { |
||||
|
background-color: darken(#fff, 5%) !important; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
&-more { |
||||
|
color: $color-red; |
||||
|
background-color:#fff !important; |
||||
|
border-color: #fff; |
||||
|
padding: 9px 35px; |
||||
|
border-color:red; |
||||
|
border: 1px solid !important; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken($color-red, 5%) !important; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
@import './button'; |
||||
|
@import './banner'; |
||||
|
@import './banner-sub-pages' |
||||
@ -0,0 +1,10 @@ |
|||||
|
.banner-sub-pages .banner-name { |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
.banner-sub-pages .banner-name .banner-heading { |
||||
|
text-align: center; |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 100px; |
||||
|
} |
||||
|
/*# sourceMappingURL=about.css.map */ |
||||
@ -0,0 +1,9 @@ |
|||||
|
{ |
||||
|
"version": 3, |
||||
|
"mappings": "AAAA,AACI,iBADa,CACb,YAAY,CAAA;EACR,MAAM,EAAE,IAAI;CAOf;;AATL,AAGG,iBAHc,CACb,YAAY,CAEb,eAAe,CAAA;EACR,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,KAAK;EAClB,cAAc,EAAE,KAAK;CAExB", |
||||
|
"sources": [ |
||||
|
"../pages/about.scss" |
||||
|
], |
||||
|
"names": [], |
||||
|
"file": "about.css" |
||||
|
} |
||||
@ -0,0 +1,165 @@ |
|||||
|
.card-footer { |
||||
|
margin-top: 10px; |
||||
|
padding-top: 55px; |
||||
|
background-color: $color-footer; |
||||
|
.footer_left{ |
||||
|
|
||||
|
} |
||||
|
.footer_right{ |
||||
|
padding-left: 0px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.footer-left-words { |
||||
|
color: $color-white; |
||||
|
margin-top: 50px; |
||||
|
margin-bottom: 20px; |
||||
|
border-left: 6px solid red; |
||||
|
height: 46px; |
||||
|
&:hover { |
||||
|
color: $color-red; |
||||
|
} |
||||
|
} |
||||
|
.footer_right{ |
||||
|
.footer-right-words { |
||||
|
color: $color-white; |
||||
|
margin-top: 50px; |
||||
|
.footer_heading { |
||||
|
border-left: 6px solid red; |
||||
|
font-size: 25px; |
||||
|
|
||||
|
padding-left: 8px; |
||||
|
height: 46px; |
||||
|
} |
||||
|
.footer_items { |
||||
|
text-align: left; |
||||
|
padding-left: 15px; |
||||
|
} |
||||
|
.footer_items a { |
||||
|
color: $color-white; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
color: $color-red; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.footer_items li { |
||||
|
margin-bottom: 8px; |
||||
|
list-style: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.copy_right{ |
||||
|
|
||||
|
margin-top: 30px; |
||||
|
.copy_s{ |
||||
|
|
||||
|
display: flex; |
||||
|
} |
||||
|
.copy_r{ |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.social_media{ |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
ul{display: flex; |
||||
|
padding-left: 0; |
||||
|
li{ |
||||
|
width: 28px; |
||||
|
margin: 5px; |
||||
|
list-style-type: none; |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
padding: 2px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.site_name{ |
||||
|
margin-left: 30px; |
||||
|
margin-top: 11px; |
||||
|
a { |
||||
|
color: $color-white; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
color: $color-red; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.footer_line{ |
||||
|
|
||||
|
&:after { |
||||
|
content: " "; |
||||
|
display: block; |
||||
|
width: 676px; |
||||
|
height: 2px; |
||||
|
background-color: $color-white; |
||||
|
margin-top:31px; |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:1199px) { |
||||
|
|
||||
|
width: 540px; |
||||
|
|
||||
|
} |
||||
|
@media screen and (max-width:992px) { |
||||
|
|
||||
|
width: 395px; |
||||
|
|
||||
|
} |
||||
|
@media screen and (max-width:768px) { |
||||
|
|
||||
|
width: 180px; |
||||
|
margin-left: 50px; |
||||
|
|
||||
|
} |
||||
|
@media screen and (max-width:535px) { |
||||
|
|
||||
|
visibility: hidden; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
margin-left: 50px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.message_bar { |
||||
|
|
||||
|
|
||||
|
input[type="text"].message_box { |
||||
|
padding: 10px 4px; |
||||
|
width: 74%; |
||||
|
@media screen and (max-width:768px) { |
||||
|
|
||||
|
width: 73% |
||||
|
|
||||
|
|
||||
|
} |
||||
|
@media screen and (max-width:571px) { |
||||
|
|
||||
|
width:50% |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,127 @@ |
|||||
|
header { |
||||
|
|
||||
|
margin-top: 50px; |
||||
|
margin-left: 40px; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
.bg-light |
||||
|
{ |
||||
|
background-color: #ffffff00 !important; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.nav-link { |
||||
|
|
||||
|
padding-left: 10px !important; |
||||
|
font-weight: 500; } |
||||
|
|
||||
|
|
||||
|
.navbar { |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
@media screen and (max-width:1261px) |
||||
|
{ |
||||
|
|
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; // allow us to do the line break for collapsing content |
||||
|
align-items: center; |
||||
|
justify-content: center; // space out brand from logo |
||||
|
flex-direction: row; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
@media screen and (max-width:992px) { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.header-top-left{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
a{ |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
margin: 5px; |
||||
|
color: black; |
||||
|
&:hover{ |
||||
|
color:$color-red; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.header-top-left img{ |
||||
|
max-width: 20px; |
||||
|
width: 100px; |
||||
|
margin: 3px; |
||||
|
a{ |
||||
|
color: $color-black; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.header-top-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
img{ |
||||
|
max-width: 20px; |
||||
|
width: 100px; |
||||
|
margin: 3px; |
||||
|
} |
||||
|
.form-control{ |
||||
|
border-top-left-radius: 21px; |
||||
|
border-bottom-left-radius: 21px; |
||||
|
border: 2px solid; |
||||
|
|
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
@media screen and (max-width:556px) { |
||||
|
|
||||
|
width: 120px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.searchb{ |
||||
|
background-color:black; |
||||
|
padding: 5px; |
||||
|
border: 1px solid black; |
||||
|
border-top-right-radius: 21px; |
||||
|
border-bottom-right-radius: 21px; |
||||
|
margin-left: 5px; |
||||
|
|
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.navbar-nav{ |
||||
|
flex-direction: row !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,6 @@ |
|||||
|
@import './header'; |
||||
|
@import './footer'; |
||||
|
@import './navigation'; |
||||
|
@import './grid'; |
||||
|
@import './product'; |
||||
|
@import './sidebar'; |
||||
@ -0,0 +1,101 @@ |
|||||
|
.navigation{ |
||||
|
|
||||
|
display: flex; |
||||
|
#menuToggle span{ |
||||
|
background-color:$color-theme; |
||||
|
|
||||
|
} |
||||
|
#menu{ |
||||
|
// width: 203vh; |
||||
|
background: #8b5656; |
||||
|
right: 0px; |
||||
|
// left: -1435px; |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
padding-top: 55px; |
||||
|
|
||||
|
// justify-content: center; |
||||
|
|
||||
|
li{ |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.header-top-left{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
a{ |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
margin: 5px; |
||||
|
color: black; |
||||
|
&:hover{ |
||||
|
color:$color-red; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.header-top-left img{ |
||||
|
max-width: 20px; |
||||
|
width: 100px; |
||||
|
margin: 5px; |
||||
|
a{ |
||||
|
color: $color-black; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.header-top-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
img{ |
||||
|
max-width: 20px; |
||||
|
width: 100px; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
.form-control{ |
||||
|
border-top-left-radius: 21px; |
||||
|
border-bottom-left-radius: 21px; |
||||
|
border: 2px solid; |
||||
|
|
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
// @media screen and (max-width:556px) { |
||||
|
|
||||
|
// width: 120px; |
||||
|
|
||||
|
|
||||
|
// } |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.searchb{ |
||||
|
background-color:black; |
||||
|
padding: 5px; |
||||
|
border: 1px solid black; |
||||
|
border-top-right-radius: 21px; |
||||
|
border-bottom-right-radius: 21px; |
||||
|
margin-left: 5px; |
||||
|
|
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,120 @@ |
|||||
|
.wrapper_heading{ |
||||
|
margin-bottom: 60px; |
||||
|
margin-top: 80px; |
||||
|
|
||||
|
.m-Product-heading{ |
||||
|
text-align: center; |
||||
|
font-weight: 600; |
||||
|
font-size: 60px; |
||||
|
// border: 1px solid; |
||||
|
// border-bottom-color:$color-footer; |
||||
|
// border-width: 3px; |
||||
|
// border-left-color: white; |
||||
|
// border-top-color:white; |
||||
|
// border-right-color: white; |
||||
|
padding-bottom: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
hr.new4 { |
||||
|
border: 1px solid; |
||||
|
width: 73%; |
||||
|
} |
||||
|
.sub_product{ |
||||
|
text-align: center; |
||||
|
color: $color-footer; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.product { |
||||
|
margin-bottom: 80px; |
||||
|
cursor: pointer; |
||||
|
&__image { |
||||
|
margin-bottom: 20px; |
||||
|
width: 100%; |
||||
|
height: 360px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
|
||||
|
border-radius: 6px; |
||||
|
border-color: #fff; |
||||
|
|
||||
|
&:before{ |
||||
|
background-image: radial-gradient(transparent, rgba(0,0,0,0)); |
||||
|
content: ''; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
opacity: 0; |
||||
|
transition: opacity .2s ease-in-out; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
&:hover .product__image { |
||||
|
&:before{ |
||||
|
background-image: radial-gradient(transparent, rgba(0,0,0,.3)); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
&-detials { |
||||
|
padding-bottom: 10px; |
||||
|
padding-top: 10px; |
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
display: flex; |
||||
|
border-radius: 6px; |
||||
|
border-color: #fff; |
||||
|
} |
||||
|
.product__wraper{ |
||||
|
display: flex; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
&__title { |
||||
|
font: $font-size-text; |
||||
|
color: black; |
||||
|
margin-right: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
border-radius: 6px; |
||||
|
border-color: #fff; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
&__rating { |
||||
|
|
||||
|
|
||||
|
margin-right: 10px; |
||||
|
|
||||
|
img{ |
||||
|
width: 100%; |
||||
|
max-width: 20px; |
||||
|
margin:10px |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
&__price { |
||||
|
font-weight: 600; |
||||
|
color:black; |
||||
|
margin-right: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
.sidebar { |
||||
|
height: 100%; /* 100% Full-height */ |
||||
|
width: 0; /* 0 width - change this with JavaScript */ |
||||
|
position: fixed; /* Stay in place */ |
||||
|
z-index: 1; /* Stay on top */ |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
background-color: #21272B; |
||||
|
overflow-x: hidden; /* Disable horizontal scroll */ |
||||
|
padding-top: 60px; /* Place content 60px from the top */ |
||||
|
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ |
||||
|
} |
||||
|
|
||||
|
/* The sidebar links */ |
||||
|
.sidebar a { |
||||
|
padding: 8px 8px 8px 32px; |
||||
|
text-decoration: none; |
||||
|
font-size: 25px; |
||||
|
color: #818181; |
||||
|
display: block; |
||||
|
transition: 0.3s; |
||||
|
} |
||||
|
|
||||
|
/* When you mouse over the navigation links, change their color */ |
||||
|
.sidebar a:hover { |
||||
|
color: #f1f1f1; |
||||
|
} |
||||
|
|
||||
|
/* Position and style the close button (top right corner) */ |
||||
|
.sidebar .closebtn { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 25px; |
||||
|
font-size: 36px; |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
|
||||
|
/* The button used to open the sidebar */ |
||||
|
.openbtn { |
||||
|
font-size: 30px; |
||||
|
cursor: pointer; |
||||
|
background-color: #ffffff00; |
||||
|
color:$color-theme; |
||||
|
padding: 10px 15px; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.openbtn:hover { |
||||
|
background-color:#96909049 |
||||
|
} |
||||
|
|
||||
|
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ |
||||
|
#main { |
||||
|
transition: margin-right .5s; /* If you want a transition effect */ |
||||
|
} |
||||
|
|
||||
|
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ |
||||
|
@media screen and (max-height: 450px) { |
||||
|
.sidebar {padding-top: 15px;} |
||||
|
.sidebar a {font-size: 18px;} |
||||
|
} |
||||
@ -0,0 +1,98 @@ |
|||||
|
.banner-sub-about { |
||||
|
background-image: url(../../images/banner/banner.jpg); |
||||
|
.banner-name { |
||||
|
margin: auto; |
||||
|
.banner-heading { |
||||
|
text-align: center; |
||||
|
padding-top: 156px; |
||||
|
padding-bottom: 156px; |
||||
|
font-size: 50px; |
||||
|
letter-spacing: 2px; |
||||
|
color: $color-white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.about_content { |
||||
|
|
||||
|
margin-bottom: 50px; |
||||
|
.about-left{ |
||||
|
|
||||
|
} |
||||
|
.about_subhead{ |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
.about_img { |
||||
|
|
||||
|
padding-right: 50px; |
||||
|
border-radius: 2px; |
||||
|
width: 100%; |
||||
|
|
||||
|
@media screen and(max-width:992px){ |
||||
|
padding-right:0; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 80%; |
||||
|
border-radius: 13px; |
||||
|
|
||||
|
@media screen and(max-width:992px){ |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
@media screen and(max-width:768px){ |
||||
|
|
||||
|
margin-bottom: 30px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pince{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20px; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
.pince-left{ |
||||
|
margin-right: 10px; |
||||
|
border: 1px solid; |
||||
|
padding: 6px; |
||||
|
padding-right: 12px; |
||||
|
padding-left: 15px; |
||||
|
padding-top: 13px; |
||||
|
border-color: $color-theme; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.about-bottom{ |
||||
|
background-attachment: fixed; |
||||
|
background-image: linear-gradient( |
||||
|
rgba(17, 17, 17, 0.60), |
||||
|
rgba(17, 17, 17, 0.60), |
||||
|
), url(../../images/banner/banner.jpg); |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
text-align: end; |
||||
|
background-repeat: no-repeat; |
||||
|
// background-position: center -76px; |
||||
|
margin-top: 80px; |
||||
|
margin-bottom: 80px; |
||||
|
height: 300px; |
||||
|
padding-top: 50px; |
||||
|
padding-bottom: 50px; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: end; |
||||
|
|
||||
|
.abt-btm-words{ |
||||
|
color: white; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,214 @@ |
|||||
|
.banner-sub-cart { |
||||
|
|
||||
|
.banner-name { |
||||
|
margin: auto; |
||||
|
.banner-heading { |
||||
|
text-align: center; |
||||
|
padding-top: 156px; |
||||
|
padding-bottom: 156px; |
||||
|
font-size: 50px; |
||||
|
letter-spacing: 2px; |
||||
|
color: $color-white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.cart{ |
||||
|
margin-bottom: 50px; |
||||
|
margin-top: 50px; |
||||
|
|
||||
|
.cart_heading{ |
||||
|
text-align:center; |
||||
|
} |
||||
|
|
||||
|
.shopping-cart { |
||||
|
width: 800px; |
||||
|
|
||||
|
margin: 80px auto; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10); |
||||
|
border-radius: 6px; |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
// .title { |
||||
|
// height: 60px; |
||||
|
// border-bottom: 1px solid #E1E8EE; |
||||
|
// padding: 20px 30px; |
||||
|
// color: #5E6977; |
||||
|
// font-size: 18px; |
||||
|
// font-weight: 400; |
||||
|
// } |
||||
|
|
||||
|
.item { |
||||
|
padding: 20px 30px; |
||||
|
|
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.item:nth-child(3) { |
||||
|
border-top: 1px solid #E1E8EE; |
||||
|
border-bottom: 1px solid #E1E8EE; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.buttons { |
||||
|
position: relative; |
||||
|
padding-top: 30px; |
||||
|
margin-right: 60px; |
||||
|
} |
||||
|
.delete-btn, |
||||
|
.like-btn { |
||||
|
display: inline-block; |
||||
|
Cursor: pointer; |
||||
|
} |
||||
|
.delete-btn { |
||||
|
width: 18px; |
||||
|
|
||||
|
img{ |
||||
|
width: 100%; |
||||
|
width: 24px; |
||||
|
height: 17px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.like-btn { |
||||
|
width: 18px; |
||||
|
|
||||
|
img{ |
||||
|
width: 100%; |
||||
|
width: 24px; |
||||
|
height: 17px; |
||||
|
margin-left: 9px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-active { |
||||
|
animation-name: animate; |
||||
|
animation-duration: .8s; |
||||
|
animation-iteration-count: 1; |
||||
|
animation-timing-function: steps(28); |
||||
|
animation-fill-mode: forwards; |
||||
|
} |
||||
|
|
||||
|
@keyframes animate { |
||||
|
0% { background-position: left; } |
||||
|
50% { background-position: right; } |
||||
|
100% { background-position: right; } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.image { |
||||
|
width: 14%; |
||||
|
margin-right: 50px; |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.description { |
||||
|
padding-top: 10px; |
||||
|
margin-right: 60px; |
||||
|
width: 115px; |
||||
|
} |
||||
|
|
||||
|
.description span { |
||||
|
display: block; |
||||
|
font-size: 14px; |
||||
|
color: #43484D; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
.description span:first-child { |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.description span:last-child { |
||||
|
font-weight: 300; |
||||
|
margin-top: 8px; |
||||
|
color: #86939E; |
||||
|
} |
||||
|
|
||||
|
.quantity { |
||||
|
padding-top: 20px; |
||||
|
margin-right: 60px; |
||||
|
} |
||||
|
.quantity input { |
||||
|
border: none; |
||||
|
text-align: center; |
||||
|
width: 32px; |
||||
|
font-size: 16px; |
||||
|
color: #43484D; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
|
||||
|
button[class*=btn] { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
background-color: #E1E8EE; |
||||
|
border-radius: 6px; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.minus-btn img { |
||||
|
margin-bottom: 3px; |
||||
|
} |
||||
|
.plus-btn img { |
||||
|
margin-top: 2px; |
||||
|
} |
||||
|
|
||||
|
button:focus, |
||||
|
input:focus { |
||||
|
outline:0; |
||||
|
} |
||||
|
|
||||
|
.total-price { |
||||
|
width: 83px; |
||||
|
padding-top: 27px; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
color: #43484D; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@media (max-width: 800px) { |
||||
|
.shopping-cart { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.item { |
||||
|
height: auto; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.image img { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.image, |
||||
|
.quantity, |
||||
|
.description { |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
margin: 6px 0; |
||||
|
} |
||||
|
.buttons { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.checkout_wrapper{ |
||||
|
justify-content: center; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,135 @@ |
|||||
|
.banner-sub-contact { |
||||
|
|
||||
|
.banner-name { |
||||
|
margin: auto; |
||||
|
.banner-heading { |
||||
|
text-align: center; |
||||
|
padding-top: 156px; |
||||
|
padding-bottom: 156px; |
||||
|
font-size: 50px; |
||||
|
letter-spacing: 2px; |
||||
|
color: $color-white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contact{ |
||||
|
|
||||
|
|
||||
|
|
||||
|
.address { |
||||
|
margin: 25px 0; |
||||
|
h4{ |
||||
|
margin-bottom: 25px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
h5{ |
||||
|
line-height: 30px; |
||||
|
color: #6B6B6B; |
||||
|
font-size: 16px; |
||||
|
letter-spacing: 0px; |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
a{ |
||||
|
color: #6B6B6B; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover{ |
||||
|
color: darken(#6B6B6B, 5%) !important; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width:992) { |
||||
|
|
||||
|
|
||||
|
h5{ |
||||
|
line-height: 0; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.form{ |
||||
|
&-group{ |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
textarea{ |
||||
|
width: 96%; |
||||
|
border: 1px solid #000; |
||||
|
resize: none; |
||||
|
padding: 10px; |
||||
|
height: 180px; |
||||
|
outline: none; |
||||
|
margin-top: 15px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
|
||||
|
input[type="submit"] { |
||||
|
background: #fe0000; |
||||
|
padding: 14px 15px; |
||||
|
outline: none; |
||||
|
margin-top: 15px; |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
|
||||
|
&:hover{ |
||||
|
background-color: darken(red, 5%) !important; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contact_text { |
||||
|
width: 47%; |
||||
|
padding: 10px; |
||||
|
background: transparent; |
||||
|
border: 1px solid #000; |
||||
|
margin-bottom: 20px; |
||||
|
margin-top: 20px; |
||||
|
margin-right: 14px; |
||||
|
color: #000; |
||||
|
outline: none; |
||||
|
|
||||
|
|
||||
|
@media screen and (max-width:992px) { |
||||
|
|
||||
|
margin-right: 0; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.map{ |
||||
|
|
||||
|
|
||||
|
margin-top: 50px; |
||||
|
.map-responsive{ |
||||
|
overflow:hidden; |
||||
|
padding-bottom:34.25%; |
||||
|
position:relative; |
||||
|
height:0; |
||||
|
} |
||||
|
.map-responsive iframe{ |
||||
|
left:0; |
||||
|
top:0; |
||||
|
height:100%; |
||||
|
width:100%; |
||||
|
position:absolute; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
@import './home/our-ptoduct'; |
||||
|
@import './home/main-product'; |
||||
|
@import './home/slider'; |
||||
|
@import './home/blog'; |
||||
@ -0,0 +1,6 @@ |
|||||
|
@import './home'; |
||||
|
@import './about'; |
||||
|
@import './product'; |
||||
|
@import './preview'; |
||||
|
@import './contact'; |
||||
|
@import './cart'; |
||||
@ -0,0 +1,96 @@ |
|||||
|
|
||||
|
|
||||
|
.preview{ |
||||
|
margin-top: 50px; |
||||
|
margin-bottom: 30px; |
||||
|
|
||||
|
.breadcrumb-option{margin-bottom: 40px;} |
||||
|
|
||||
|
.preview_image{ |
||||
|
|
||||
|
|
||||
|
img{ |
||||
|
width: 100%; |
||||
|
max-height: 577px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.preview_details{ |
||||
|
|
||||
|
.preview-heading{ |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 1px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.preview_type{ |
||||
|
color:$color-footer; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.star_review{ |
||||
|
display: flex; |
||||
|
list-style: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.count_review { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.single-price{ |
||||
|
|
||||
|
ul{ |
||||
|
display: flex; |
||||
|
list-style: none; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-left: 0px; |
||||
|
font-size: 15px; |
||||
|
|
||||
|
li:nth-child(1){ |
||||
|
font-size: 41px; |
||||
|
font-weight: 300; |
||||
|
color:$color-red; |
||||
|
} |
||||
|
li:nth-child(3){ |
||||
|
font-size: 20px; |
||||
|
color:$color-red; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.wrapper{ |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
max-width: 20px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.product__details__tab{ |
||||
|
|
||||
|
padding-top: 70px; |
||||
|
margin-bottom: 50px; |
||||
|
|
||||
|
.card{ |
||||
|
margin-bottom: 3px; |
||||
|
border: none; |
||||
|
|
||||
|
} |
||||
|
.card-header{ |
||||
|
background-color: $color-footer; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
@ -0,0 +1,107 @@ |
|||||
|
.banner-sub-about { |
||||
|
} |
||||
|
|
||||
|
// .product_contents{ |
||||
|
// margin-bottom: 40px; |
||||
|
// } |
||||
|
.n-product { |
||||
|
margin-bottom: 80px; |
||||
|
} |
||||
|
|
||||
|
.filter_sidebar { |
||||
|
margin-bottom: 50px; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.kk { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-evenly; |
||||
|
|
||||
|
.filter_heading { |
||||
|
font-size: 15px; |
||||
|
font-size: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
position: relative; |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
} |
||||
|
.h-line { |
||||
|
&:after { |
||||
|
display: block; |
||||
|
content: ""; |
||||
|
background: #ee0808; |
||||
|
width: 10%; |
||||
|
height: 2px; |
||||
|
position: absolute; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.filter_sidebar_sub { |
||||
|
font-size: 14px; |
||||
|
line-height: 2.429; |
||||
|
border: 1px solid #e1e1e1; |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 30px; |
||||
|
padding: 3em 2.5em 2em; |
||||
|
padding-left: 2.5em; |
||||
|
padding-left: 0.5em; |
||||
|
.list { |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
.ecommerce_dres-type { |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.filter_sidebar-main { |
||||
|
|
||||
|
|
||||
|
|
||||
|
.dresses_img_hover { |
||||
|
position: relative; |
||||
|
|
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.dresses_img_hover_pos { |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
left: 60px; |
||||
|
|
||||
|
h4{ |
||||
|
color: #fff; |
||||
|
font-size: 25px; |
||||
|
|
||||
|
span{ |
||||
|
display: block; |
||||
|
font-weight: 700; |
||||
|
margin: 10px 0; |
||||
|
font-size: 45px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:576px) { |
||||
|
|
||||
|
margin-right: 100px; |
||||
|
margin-left: 100px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.more_button{ |
||||
|
margin: auto; |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,131 @@ |
|||||
|
.blog{ |
||||
|
margin-top: 10px; |
||||
|
padding-top:1px; |
||||
|
background-color: $color-theme; |
||||
|
.wrapper_heading{ |
||||
|
margin-bottom: 60px; |
||||
|
|
||||
|
.m-Product-heading{ |
||||
|
text-align: center; |
||||
|
font-weight: 600; |
||||
|
font-size: 60px; |
||||
|
color: $color-white; |
||||
|
padding-bottom: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
hr.new4 { |
||||
|
border: 1px solid; |
||||
|
width: 73%; |
||||
|
|
||||
|
color: $color-white; |
||||
|
} |
||||
|
.sub_product{ |
||||
|
text-align: center; |
||||
|
color: $color-white; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.m-product{ |
||||
|
|
||||
|
|
||||
|
.product { |
||||
|
margin-bottom: 80px; |
||||
|
cursor: pointer; |
||||
|
&__image { |
||||
|
margin-bottom: 20px; |
||||
|
width: 100%; |
||||
|
height: 360px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
-webkit-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
-moz-box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
box-shadow: 12px 4px 8px 2px rgba(0,0,0,0.34); |
||||
|
|
||||
|
border-radius: 6px; |
||||
|
border-color: #fff; |
||||
|
|
||||
|
&:before{ |
||||
|
background-image: radial-gradient(transparent, rgba(0,0,0,0)); |
||||
|
content: ''; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
opacity: 0; |
||||
|
transition: opacity .2s ease-in-out; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
&:hover .product__image { |
||||
|
&:before{ |
||||
|
background-image: radial-gradient(transparent, rgba(0,0,0,.3)); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&-words{ |
||||
|
color:$color-white; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
// &-detials2 { |
||||
|
// padding-bottom: 10px; |
||||
|
// padding-top: 10px; |
||||
|
// columns: white; |
||||
|
// display: flex; |
||||
|
// border-radius: 6px; |
||||
|
// border-color: #fff; |
||||
|
// } |
||||
|
// .product__wraper{ |
||||
|
// display: flex; |
||||
|
// margin: auto; |
||||
|
// } |
||||
|
|
||||
|
// &__title { |
||||
|
// font: $font-size-text; |
||||
|
// color: black; |
||||
|
// margin-right: 20px; |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
|
||||
|
|
||||
|
// border-radius: 6px; |
||||
|
// border-color: #fff; |
||||
|
|
||||
|
|
||||
|
// } |
||||
|
// &__rating { |
||||
|
|
||||
|
|
||||
|
// margin-right: 10px; |
||||
|
|
||||
|
// img{ |
||||
|
// width: 100%; |
||||
|
// max-width: 20px; |
||||
|
// margin:10px |
||||
|
|
||||
|
// } |
||||
|
// } |
||||
|
// &__price { |
||||
|
// font-weight: 600; |
||||
|
// color:black; |
||||
|
// margin-right: 20px; |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
.product_more{ |
||||
|
margin-top: 135px; |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue