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