@ -0,0 +1,46 @@ |
|||||
|
.. 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 Watchhut |
||||
|
============== |
||||
|
* Design Web Pages with Watchhut |
||||
|
|
||||
|
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/16.0/legal/licenses/licenses.html) |
||||
|
|
||||
|
Company |
||||
|
------- |
||||
|
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
||||
|
|
||||
|
Credits |
||||
|
------- |
||||
|
* Developer: |
||||
|
(v16) Rahul Rajeev @ cybrosys |
||||
|
|
||||
|
Contacts |
||||
|
-------- |
||||
|
* Mail Contact : odoo@cybrosys.com |
||||
|
|
||||
|
Bug Tracker |
||||
|
----------- |
||||
|
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. |
||||
|
|
||||
|
Maintainer |
||||
|
========== |
||||
|
.. 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,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 models |
@ -0,0 +1,66 @@ |
|||||
|
# -*- 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 WatchHut', |
||||
|
'version': '16.0.1.0.0', |
||||
|
'category': 'Theme/eCommerce', |
||||
|
'summary': 'Theme WatchHut is an attractive and modern eCommerce Website' |
||||
|
' theme', |
||||
|
'description': 'Theme WatchHut is an attractive and modern eCommerce ' |
||||
|
'Website theme.The theme is a very user-friendly and is ' |
||||
|
'suitable for your eCommerce website.It is the most powerful' |
||||
|
', easy to use theme', |
||||
|
'author': 'Cybrosys Techno Solutions', |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'website': "https://www.cybrosys.com", |
||||
|
'images': [ |
||||
|
'static/description/banner.png', |
||||
|
'static/description/theme_screenshot.png', |
||||
|
], |
||||
|
'license': 'LGPL-3', |
||||
|
'installable': True, |
||||
|
'auto_install': False, |
||||
|
'application': False, |
||||
|
'depends': ['website_sale'], |
||||
|
'data': [ |
||||
|
'views/about_page.xml', |
||||
|
'views/contact_us.xml', |
||||
|
'views/footer.xml', |
||||
|
'views/header.xml', |
||||
|
'views/product_view.xml', |
||||
|
'views/shop.xml', |
||||
|
'views/snippets/gallery.xml', |
||||
|
'views/snippets/heading.xml', |
||||
|
'views/snippets/shop_button.xml', |
||||
|
], |
||||
|
'assets': { |
||||
|
'web.assets_frontend': [ |
||||
|
'/theme_watchhut/static/src/css/style.css', |
||||
|
'/theme_watchhut/static/src/css/font-awesome.min.css', |
||||
|
'/theme_watchhut/static/src/js/custom.js', |
||||
|
'/theme_watchhut/static/src/js/custom_shop.js', |
||||
|
'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap', |
||||
|
'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap', |
||||
|
] |
||||
|
}, |
||||
|
} |
@ -0,0 +1,6 @@ |
|||||
|
## Module <theme_watchhut> |
||||
|
|
||||
|
#### 07.07.2023 |
||||
|
#### Version 16.0.1.0.0 |
||||
|
#### ADD |
||||
|
- Initial commit for Theme Watchhut |
@ -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_watchhut |
@ -0,0 +1,33 @@ |
|||||
|
# -*- 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 odoo import models |
||||
|
|
||||
|
|
||||
|
class ThemeWatchHut(models.AbstractModel): |
||||
|
"""Inheriting model Theme Utils Model""" |
||||
|
_inherit = 'theme.utils' |
||||
|
|
||||
|
def _theme_watchhut_post_copy(self, mod): |
||||
|
"""Used to enable and disable certain views""" |
||||
|
self.enable_view('website.template_header_default') |
||||
|
self.enable_view('website.template_header_default_align_right') |
||||
|
self.disable_view('website.header_call_to_action') |
After Width: | Height: | Size: 372 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 347 KiB |
After Width: | Height: | Size: 259 KiB |
After Width: | Height: | Size: 428 KiB |
After Width: | Height: | Size: 141 KiB |
After Width: | Height: | Size: 337 KiB |
After Width: | Height: | Size: 206 KiB |
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 279 KiB |
After Width: | Height: | Size: 314 KiB |
After Width: | Height: | Size: 149 KiB |
After Width: | Height: | Size: 383 KiB |
After Width: | Height: | Size: 455 KiB |
After Width: | Height: | Size: 456 KiB |
@ -0,0 +1,316 @@ |
|||||
|
<div class="oe_styling_v8"> |
||||
|
<!-- Hero Section --> |
||||
|
<div class="container pt-4 mt-4 rounded" |
||||
|
style="background-color: #fff; font-family: Montserrat, 'sans-serif';"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12 mb-4"> |
||||
|
<img src="images/Cybrosys.png" alt="Cybrosys Logo" |
||||
|
style="width: 120px; height: auto;"> |
||||
|
<hr style="border-color: #e1e5e9;"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12 text-center"> |
||||
|
<img src="images/hero.png" width=60% height="auto" class="mb-4" |
||||
|
alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 text-center"> |
||||
|
<h1 class="mt-4">Theme WatchHut</h1> |
||||
|
<p class="lead mb-4" style="max-width: 700px; margin: 0 auto;"> |
||||
|
Theme WatchHut is a new kind of Theme. The theme is a very |
||||
|
user-friendly and is suitable for your |
||||
|
eCommerce website. |
||||
|
It is the most powerful, easy to use theme. |
||||
|
It is a fully Responsive Theme with a premium design and |
||||
|
attractive front-end theme. |
||||
|
This theme is a perfect choice for your online store you are |
||||
|
looking for. |
||||
|
The custom designed gallery snippet and shop view |
||||
|
facilitates to add better user experience. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- End of Hero Section --> |
||||
|
|
||||
|
<!-- Alternate Section --> |
||||
|
<div class="row p-4"> |
||||
|
<div class="col-lg-6 px-4" style="margin-top: 100px;"> |
||||
|
<h2>Desktop View</h2> |
||||
|
<p class="lead"> |
||||
|
It is easy to customize and use. Just drag and drop the |
||||
|
building blocks to make attractive |
||||
|
webpages. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-lg-6 px-4"> |
||||
|
<img style="border-radius: 0.5em;" |
||||
|
src="images/laptop-screenshots.jpg" width="90%" |
||||
|
height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row p-4"> |
||||
|
<div class="col-lg-6 px-4"> |
||||
|
<img style="border-radius: 0.5em;" |
||||
|
src="images/phone-screenshots.jpg" width="90%" |
||||
|
height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-6 px-4" style="margin-top: 100px;"> |
||||
|
<h2>Mobile View</h2> |
||||
|
<p class="lead"> |
||||
|
User friendly and modern looking theme makes your page more |
||||
|
Stylish And Beautiful. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Alternate Section --> |
||||
|
|
||||
|
<!-- Two Columns Section --> |
||||
|
<div class="row p-4"> |
||||
|
<!-- Column 1 --> |
||||
|
<div class="col-lg-6"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/1.jpg" |
||||
|
width="100%" height="auto" |
||||
|
class="mb-4 shadow-sm" alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-12 mt-4"> |
||||
|
<h2 class="text-center">Home Page</h2> |
||||
|
<p class="lead text-center"> |
||||
|
It is easy to customize and use. Just drag and drop |
||||
|
the building blocks to make |
||||
|
attractive |
||||
|
webpages.Customizable building blocks in home page |
||||
|
design helps you to edit them as per |
||||
|
needs. </p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 1 --> |
||||
|
|
||||
|
<!-- Column 2 --> |
||||
|
<div class="col-lg-6"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12"> |
||||
|
<img style="border-radius: 0.5em;" src="images/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">Product View</h2> |
||||
|
<p class="lead text-center"> |
||||
|
A premium look design for the product preview |
||||
|
section.Fully customized view and |
||||
|
Scrollable multiple images are help to show more |
||||
|
about the product |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of Column 2 --> |
||||
|
</div> |
||||
|
<!-- End of Two Columns Section --> |
||||
|
|
||||
|
|
||||
|
<!-- One Column Section --> |
||||
|
<div class="row p-4"> |
||||
|
<div class="col-lg-6"> |
||||
|
<img style="border-radius: 0.5em;" src="images/3.jpg" |
||||
|
width="90%" height="auto" class="mb-4 shadow-sm" |
||||
|
alt="Theme Screenshot"> |
||||
|
</div> |
||||
|
<div class="col-lg-6" style="padding-top: 100px;"> |
||||
|
<h2>Overview</h2> |
||||
|
<p class="lead"> |
||||
|
It is an attractive and modern eCommerce Website theme. It |
||||
|
makes your eCommerce website is |
||||
|
attractive. |
||||
|
Just drag & drop the building blocks you need to easily |
||||
|
build your layout. |
||||
|
Theme Watchhut is a perfect choice for your online store you |
||||
|
are looking for. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End of One Columns 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">Contact us</h2> |
||||
|
<p class="lead text-center"> |
||||
|
In the customized Contact us page the company |
||||
|
details will show, and it will help to your |
||||
|
customer to reach you in simple way. |
||||
|
</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">Shop</h2> |
||||
|
<p class="lead text-center"> |
||||
|
The shop display your products in a stylish way. |
||||
|
It's |
||||
|
displaying 3 products in a row, and it |
||||
|
will attract your customers. Display high quality |
||||
|
images for your products |
||||
|
</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">Blog Preview</h6> |
||||
|
<hr style="border-width: 5px; border-color: #05c46b; width: 150px; margin-bottom: 0;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-sm-6 col-md-4 px-2"> |
||||
|
<div class="bg-white shadow overflow-hidden mb32" |
||||
|
style="border-radius: 15px; width: 300px; padding-bottom: 0;"> |
||||
|
<img src="./images/demo-3.jpg" width="300px" |
||||
|
height="auto"> |
||||
|
<h6 class="text-center my-3">Shop Page</h6> |
||||
|
<hr style="border-width: 5px; border-color: #f44f52; width: 150px; margin-bottom: 0;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</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> |
||||
|
</div> |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 271 KiB |
After Width: | Height: | Size: 434 KiB |
After Width: | Height: | Size: 174 KiB |
After Width: | Height: | Size: 350 KiB |
After Width: | Height: | Size: 131 KiB |
After Width: | Height: | Size: 122 KiB |
After Width: | Height: | Size: 148 KiB |
After Width: | Height: | Size: 272 KiB |
After Width: | Height: | Size: 272 KiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 161 KiB |
After Width: | Height: | Size: 678 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 259 KiB |
After Width: | Height: | Size: 286 KiB |
After Width: | Height: | Size: 109 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 134 KiB |
After Width: | Height: | Size: 153 KiB |
After Width: | Height: | Size: 108 KiB |
After Width: | Height: | Size: 149 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 338 KiB |
After Width: | Height: | Size: 197 KiB |
After Width: | Height: | Size: 131 KiB |
After Width: | Height: | Size: 231 KiB |
After Width: | Height: | Size: 155 KiB |
After Width: | Height: | Size: 137 KiB |
After Width: | Height: | Size: 188 KiB |
After Width: | Height: | Size: 440 KiB |
After Width: | Height: | Size: 170 KiB |
After Width: | Height: | Size: 231 KiB |
After Width: | Height: | Size: 155 KiB |
After Width: | Height: | Size: 7.9 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,87 @@ |
|||||
|
odoo.define('theme_watchhut.theme_watchhut', function (require) { |
||||
|
"use strict"; |
||||
|
$(window).scroll(function(){ |
||||
|
$(".banner").css("opacity", 1 - $(window).scrollTop() / 250); |
||||
|
}); |
||||
|
// Detect request animation frame
|
||||
|
var scroll = window.requestAnimationFrame || |
||||
|
// IE Fallback
|
||||
|
function (callback) { window.setTimeout(callback, 1000 / 90) }; |
||||
|
var elementsToShow = document.querySelectorAll('.show-on-scroll'); |
||||
|
|
||||
|
function loop() { |
||||
|
Array.prototype.forEach.call(elementsToShow, function (element) { |
||||
|
if (isElementInViewport(element)) { |
||||
|
element.classList.add('is-visible'); |
||||
|
} else { |
||||
|
element.classList.remove('is-visible'); |
||||
|
} |
||||
|
}); |
||||
|
scroll(loop); |
||||
|
} |
||||
|
// Call the loop for the first time
|
||||
|
loop(); |
||||
|
// Helper function from: http://stackoverflow.com/a/7557433/274826
|
||||
|
function isElementInViewport(el) { |
||||
|
// special bonus for those using jQuery
|
||||
|
if (typeof jQuery === "function" && el instanceof jQuery) { |
||||
|
el = el[0]; |
||||
|
} |
||||
|
var rect = el.getBoundingClientRect(); |
||||
|
return ( |
||||
|
(rect.top <= 0 |
||||
|
&& rect.bottom >= 0) |
||||
|
|| |
||||
|
(rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) && |
||||
|
rect.top <= (window.innerHeight || document.documentElement.clientHeight)) |
||||
|
|| |
||||
|
(rect.top >= 0 && |
||||
|
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) |
||||
|
); |
||||
|
} |
||||
|
$(document).ready(function () { |
||||
|
$(".filter-button").click(function () { |
||||
|
var value = $(this).attr('data-filter'); |
||||
|
if (value == "all") { |
||||
|
$('.filter').show('1000'); |
||||
|
} |
||||
|
else { |
||||
|
$(".filter").not('.' + value).hide('3000'); |
||||
|
$('.filter').filter('.' + value).show('3000'); |
||||
|
} |
||||
|
}); |
||||
|
if ($(".filter-button").removeClass("active")) { |
||||
|
$(this).removeClass("active"); |
||||
|
} |
||||
|
$(this).addClass("active"); |
||||
|
}); |
||||
|
$(window).scroll(function(){ |
||||
|
$(".banner_about, .banner_contact").css("opacity", 1 - $(window).scrollTop() / 250); |
||||
|
}); |
||||
|
$(window).scroll(function () { |
||||
|
$(".banner_contact").css("opacity", 1 - $(window).scrollTop() / 250); |
||||
|
}); |
||||
|
$(document).ready(function(){ |
||||
|
var quantitiy=0; |
||||
|
$('.quantity-right-plus').click(function(e){ |
||||
|
// Stop acting like a button
|
||||
|
e.preventDefault(); |
||||
|
// Get the field name
|
||||
|
var quantity = parseInt($('#quantity').val()); |
||||
|
// If is not undefined
|
||||
|
$('#quantity').val(quantity + 1); |
||||
|
// Increment
|
||||
|
}); |
||||
|
$('.quantity-left-minus').click(function(e){ |
||||
|
// Stop acting like a button
|
||||
|
e.preventDefault(); |
||||
|
// Get the field name
|
||||
|
var quantity = parseInt($('#quantity').val()); |
||||
|
// If is not undefined
|
||||
|
// Increment
|
||||
|
if(quantity>0){ |
||||
|
$('#quantity').val(quantity - 1); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}); |
@ -0,0 +1,9 @@ |
|||||
|
odoo.define('theme_watchhut.theme_watchhut_shop', function (require) { |
||||
|
"use strict"; |
||||
|
$(".test").hover(function () { |
||||
|
$(this).attr("src", "/theme_watchhut/static/src/images/product/1-1.jpg"); |
||||
|
}, |
||||
|
function () { |
||||
|
$(this).attr("src", "/theme_watchhut/static/src/images/product/1.jpg"); |
||||
|
}); |
||||
|
}); |
@ -0,0 +1,26 @@ |
|||||
|
*{ |
||||
|
list-style-type:none; |
||||
|
|
||||
|
font-family: $font-default; |
||||
|
|
||||
|
&:focus,&:active{ |
||||
|
outline: none !important; |
||||
|
} |
||||
|
} |
||||
|
img{width: 100%;} |
||||
|
|
||||
|
|
||||
|
|
||||
|
body{ |
||||
|
background-color:$color-white; |
||||
|
} |
||||
|
|
||||
|
*:hover{ |
||||
|
-webkit-transition: 0.5s; |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
|
||||
|
*::selection { |
||||
|
color: rgb(0, 204, 255); |
||||
|
|
||||
|
} |
@ -0,0 +1,350 @@ |
|||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
||||
|
|
||||
|
/* Document |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the line height in all browsers. |
||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS. |
||||
|
*/ |
||||
|
|
||||
|
html { |
||||
|
line-height: 1.15; /* 1 */ |
||||
|
-webkit-text-size-adjust: 100%; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/* Sections |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* Remove the margin in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Render the `main` element consistently in IE. |
||||
|
*/ |
||||
|
|
||||
|
main { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Correct the font size and margin on `h1` elements within `section` and |
||||
|
* `article` contexts in Chrome, Firefox, and Safari. |
||||
|
*/ |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 2em; |
||||
|
margin: 0.67em 0; |
||||
|
} |
||||
|
|
||||
|
/* Grouping content |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* 1. Add the correct box sizing in Firefox. |
||||
|
* 2. Show the overflow in Edge and IE. |
||||
|
*/ |
||||
|
|
||||
|
hr { |
||||
|
box-sizing: content-box; /* 1 */ |
||||
|
height: 0; /* 1 */ |
||||
|
overflow: visible; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
|
* 2. Correct the odd `em` font sizing in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
pre { |
||||
|
font-family: monospace, monospace; /* 1 */ |
||||
|
font-size: 1em; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/* Text-level semantics |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* Remove the gray background on active links in IE 10. |
||||
|
*/ |
||||
|
|
||||
|
a { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Remove the bottom border in Chrome 57- |
||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
||||
|
*/ |
||||
|
|
||||
|
abbr[title] { |
||||
|
border-bottom: none; /* 1 */ |
||||
|
text-decoration: underline; /* 2 */ |
||||
|
text-decoration: underline dotted; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Add the correct font weight in Chrome, Edge, and Safari. |
||||
|
*/ |
||||
|
|
||||
|
b, |
||||
|
strong { |
||||
|
font-weight: bolder; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
|
* 2. Correct the odd `em` font sizing in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
code, |
||||
|
kbd, |
||||
|
samp { |
||||
|
font-family: monospace, monospace; /* 1 */ |
||||
|
font-size: 1em; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Add the correct font size in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
small { |
||||
|
font-size: 80%; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Prevent `sub` and `sup` elements from affecting the line height in |
||||
|
* all browsers. |
||||
|
*/ |
||||
|
|
||||
|
sub, |
||||
|
sup { |
||||
|
font-size: 75%; |
||||
|
line-height: 0; |
||||
|
position: relative; |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
|
||||
|
sub { |
||||
|
bottom: -0.25em; |
||||
|
} |
||||
|
|
||||
|
sup { |
||||
|
top: -0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Embedded content |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* Remove the border on images inside links in IE 10. |
||||
|
*/ |
||||
|
|
||||
|
img { |
||||
|
border-style: none; |
||||
|
} |
||||
|
|
||||
|
/* Forms |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* 1. Change the font styles in all browsers. |
||||
|
* 2. Remove the margin in Firefox and Safari. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
input, |
||||
|
optgroup, |
||||
|
select, |
||||
|
textarea { |
||||
|
font-family: inherit; /* 1 */ |
||||
|
font-size: 100%; /* 1 */ |
||||
|
line-height: 1.15; /* 1 */ |
||||
|
margin: 0; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Show the overflow in IE. |
||||
|
* 1. Show the overflow in Edge. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
input { /* 1 */ |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
||||
|
* 1. Remove the inheritance of text transform in Firefox. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
select { /* 1 */ |
||||
|
text-transform: none; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Correct the inability to style clickable types in iOS and Safari. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
[type="button"], |
||||
|
[type="reset"], |
||||
|
[type="submit"] { |
||||
|
-webkit-appearance: button; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the inner border and padding in Firefox. |
||||
|
*/ |
||||
|
|
||||
|
button::-moz-focus-inner, |
||||
|
[type="button"]::-moz-focus-inner, |
||||
|
[type="reset"]::-moz-focus-inner, |
||||
|
[type="submit"]::-moz-focus-inner { |
||||
|
border-style: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Restore the focus styles unset by the previous rule. |
||||
|
*/ |
||||
|
|
||||
|
button:-moz-focusring, |
||||
|
[type="button"]:-moz-focusring, |
||||
|
[type="reset"]:-moz-focusring, |
||||
|
[type="submit"]:-moz-focusring { |
||||
|
outline: 1px dotted ButtonText; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Correct the padding in Firefox. |
||||
|
*/ |
||||
|
|
||||
|
fieldset { |
||||
|
padding: 0.35em 0.75em 0.625em; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the text wrapping in Edge and IE. |
||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||
|
* 3. Remove the padding so developers are not caught out when they zero out |
||||
|
* `fieldset` elements in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
legend { |
||||
|
box-sizing: border-box; /* 1 */ |
||||
|
color: inherit; /* 2 */ |
||||
|
display: table; /* 1 */ |
||||
|
max-width: 100%; /* 1 */ |
||||
|
padding: 0; /* 3 */ |
||||
|
white-space: normal; /* 1 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||
|
*/ |
||||
|
|
||||
|
progress { |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the default vertical scrollbar in IE 10+. |
||||
|
*/ |
||||
|
|
||||
|
textarea { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Add the correct box sizing in IE 10. |
||||
|
* 2. Remove the padding in IE 10. |
||||
|
*/ |
||||
|
|
||||
|
[type="checkbox"], |
||||
|
[type="radio"] { |
||||
|
box-sizing: border-box; /* 1 */ |
||||
|
padding: 0; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||
|
*/ |
||||
|
|
||||
|
[type="number"]::-webkit-inner-spin-button, |
||||
|
[type="number"]::-webkit-outer-spin-button { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the odd appearance in Chrome and Safari. |
||||
|
* 2. Correct the outline style in Safari. |
||||
|
*/ |
||||
|
|
||||
|
[type="search"] { |
||||
|
-webkit-appearance: textfield; /* 1 */ |
||||
|
outline-offset: -2px; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the inner padding in Chrome and Safari on macOS. |
||||
|
*/ |
||||
|
|
||||
|
[type="search"]::-webkit-search-decoration { |
||||
|
-webkit-appearance: none; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||
|
* 2. Change font properties to `inherit` in Safari. |
||||
|
*/ |
||||
|
|
||||
|
::-webkit-file-upload-button { |
||||
|
-webkit-appearance: button; /* 1 */ |
||||
|
font: inherit; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/* Interactive |
||||
|
=========================================== |
||||
|
=============================== */ |
||||
|
|
||||
|
/* |
||||
|
* Add the correct display in Edge, IE 10+, and Firefox. |
||||
|
*/ |
||||
|
|
||||
|
details { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* Add the correct display in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
summary { |
||||
|
display: list-item; |
||||
|
} |
||||
|
|
||||
|
/* Misc |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* Add the correct display in IE 10+. |
||||
|
*/ |
||||
|
|
||||
|
template { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Add the correct display in IE 10. |
||||
|
*/ |
||||
|
|
||||
|
[hidden] { |
||||
|
display: none; |
||||
|
} |
@ -0,0 +1,23 @@ |
|||||
|
//font |
||||
|
$font-default: 'Lora', serif; |
||||
|
$font-offer:'Cinzel Decorative', cursive; |
||||
|
//colors |
||||
|
$color-red: #ff5254; |
||||
|
$color-pink: #fab4bf; |
||||
|
$color-black: #000000; |
||||
|
$color-grey: #858585; |
||||
|
$color-white:#ffffff; |
||||
|
$color-footer:#fdeaea; |
||||
|
$color-hover:#3e300bdb; |
||||
|
$color-border:#cfcdcd; |
||||
|
$color-bg-heading:#e6e4e4d1; |
||||
|
$color-whitesmoke:#8d8d8d; |
||||
|
//fon-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,77 @@ |
|||||
|
.banner{ |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 200px; |
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top: 70px; |
||||
|
padding-bottom: 90px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.banner_head{ |
||||
|
color: black; |
||||
|
text-align: center; |
||||
|
font-size: calc(3.6vw + 1rem); |
||||
|
margin: auto; |
||||
|
font-family: $font-offer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.banner_about{ |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 200px; |
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top: 70px; |
||||
|
padding-bottom: 90px; |
||||
|
} |
||||
|
|
||||
|
.banner_head{ |
||||
|
color: black; |
||||
|
text-align: center; |
||||
|
font-size: calc(3.6vw + 1rem); |
||||
|
margin: auto; |
||||
|
font-family: $font-offer; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.banner_contact{ |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 200px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top: 70px; |
||||
|
padding-bottom: 90px; |
||||
|
} |
||||
|
|
||||
|
.banner_head{ |
||||
|
color: black; |
||||
|
text-align: center; |
||||
|
font-size: calc(3.6vw + 1rem); |
||||
|
margin: auto; |
||||
|
font-family: $font-offer; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.banner_preview{ |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 0px !important; |
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top: 70px; |
||||
|
padding-bottom: 90px; |
||||
|
} |
||||
|
|
||||
|
.banner_head{ |
||||
|
color: black; |
||||
|
text-align: center; |
||||
|
font-size: calc(3.6vw + 1rem); |
||||
|
margin: auto; |
||||
|
font-family: $font-offer; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
@ -0,0 +1,86 @@ |
|||||
|
.btn { |
||||
|
border: none ; |
||||
|
outline: none !important; |
||||
|
box-shadow: none !important; |
||||
|
&-primary { |
||||
|
background-color: $color-red !important; |
||||
|
border-color: $color-red; |
||||
|
padding: 9px 35px; |
||||
|
&:hover { |
||||
|
background-color: darken($color-red, 5%) !important; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&-shop { |
||||
|
background-color: transparent !important; |
||||
|
border-radius: 0; |
||||
|
font-size: 30px; |
||||
|
color: $color-white; |
||||
|
background-image:linear-gradient(360deg, #fff 2%, #00000059 6%); |
||||
|
padding-bottom: 12px; |
||||
|
&:hover { |
||||
|
color: black !important; |
||||
|
border: none; |
||||
|
background: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&-submit { |
||||
|
background-color: transparent !important; |
||||
|
border-radius: 0; |
||||
|
font-size: 30px; |
||||
|
color: $color-white; |
||||
|
background-image:linear-gradient(360deg, #fff 2%, #00000059 6%); |
||||
|
padding-bottom: 12px; |
||||
|
&:hover { |
||||
|
color: darken($color-white, 100%) !important; |
||||
|
border: none; |
||||
|
background-image:linear-gradient(360deg, #fff 100%, #00000059 6%) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-minus { |
||||
|
background-color:transparent!important; |
||||
|
border-color: $color-grey !important; |
||||
|
height: 100%; |
||||
|
border:1px solid black; |
||||
|
|
||||
|
border-radius: 0 !important; |
||||
|
-webkit-border-radius: 0 !important; |
||||
|
-moz-border-radius: 0 !important; |
||||
|
-ms-border-radius: 0 !important; |
||||
|
-o-border-radius: 0 !important; |
||||
|
|
||||
|
&:hover{ |
||||
|
background: $color-hover !important; |
||||
|
border: transparent !important; |
||||
|
color:$color-white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-add{ |
||||
|
margin-top: 40px; |
||||
|
display: block; |
||||
|
color: $color-white; |
||||
|
font-size: 18px; |
||||
|
padding-top: 15px; |
||||
|
background: $color-grey; |
||||
|
border-radius:0 ; |
||||
|
height: 60px; |
||||
|
-webkit-border-radius:0 ; |
||||
|
-moz-border-radius:0 ; |
||||
|
-ms-border-radius:0 ; |
||||
|
-o-border-radius:0 ; |
||||
|
&:hover{ |
||||
|
color: $color-white; |
||||
|
background: darken($color-grey, 5%) !important; ; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
@ -0,0 +1,3 @@ |
|||||
|
@import './banner'; |
||||
|
@import './buttons'; |
||||
|
@import './product'; |
@ -0,0 +1,52 @@ |
|||||
|
.footer{ |
||||
|
background-color: $color-black !important; |
||||
|
.footer_bg{ |
||||
|
height: 500px; |
||||
|
background-image: url(./../images/gallery/footer1.jpg); |
||||
|
background-size: cover; |
||||
|
background-repeat: no-repeat; |
||||
|
margin: 60px 0; |
||||
|
} |
||||
|
|
||||
|
.footer_bottom{ |
||||
|
padding: 40px 40px; |
||||
|
|
||||
|
margin-left: 40px; |
||||
|
h3{ |
||||
|
color: $color-white !important; |
||||
|
font-size: 35px; |
||||
|
font-family: $font-offer; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
ul{ |
||||
|
display: flex; |
||||
|
|
||||
|
padding-left: 0; |
||||
|
li{ |
||||
|
background-image:linear-gradient(360deg, #fff 2%, #00000059 6%); |
||||
|
margin: 0 20px; |
||||
|
a{ font-size: 18px; |
||||
|
color: $color-footer; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
&:first-child{ |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
p{ |
||||
|
color: $color-white; |
||||
|
margin-top: 30px; |
||||
|
letter-spacing: 2px; |
||||
|
a{ |
||||
|
|
||||
|
text-decoration: none; |
||||
|
color: $color-footer; |
||||
|
&:hover{ |
||||
|
color:$color-hover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,3 @@ |
|||||
|
@import './header'; |
||||
|
@import './navigation'; |
||||
|
@import './footer'; |
@ -0,0 +1,142 @@ |
|||||
|
.navbar{ |
||||
|
padding: 30px 0; |
||||
|
margin: 0 60px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
|
||||
|
.navbar-collapse{ |
||||
|
transition: all 0.35s ease-out; |
||||
|
transform-origin: center left; |
||||
|
} |
||||
|
.navbar-nav{ |
||||
|
margin-left: auto; |
||||
|
background: $color-white; |
||||
|
|
||||
|
.nav-item{ |
||||
|
padding: 0 15px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.nav-link{ |
||||
|
color: black; |
||||
|
padding-left: 15px; |
||||
|
&:hover{ |
||||
|
color: $color-whitesmoke; |
||||
|
} |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
max-width: 25px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.nav-shop{ |
||||
|
margin-left: auto; |
||||
|
.nav-link{ |
||||
|
color: $color-black; |
||||
|
padding-left: 15px; |
||||
|
&:hover{ |
||||
|
color: rgba(0, 0, 0, 0.747); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bg-light{ |
||||
|
background-color:transparent !important; |
||||
|
|
||||
|
} |
||||
|
.navbar-light { |
||||
|
|
||||
|
.navbar-brand{ |
||||
|
color: black !important; |
||||
|
font-size: 35px; |
||||
|
font-family: $font-offer; |
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
font-size: 25px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.brand-shop{ |
||||
|
color: $color-black !important; |
||||
|
} |
||||
|
} |
||||
|
.navbar-light .navbar-nav .active > |
||||
|
.nav-link, .navbar-light .navbar-nav |
||||
|
.nav-link.active, .navbar-light .navbar-nav |
||||
|
.nav-link.show, .navbar-light .navbar-nav .show > .nav-link{ |
||||
|
|
||||
|
color: rgb(255, 255, 255); |
||||
|
border:1px solid; |
||||
|
border-color: transparent; |
||||
|
background-image:linear-gradient(360deg, #fff 2%, #00000059 6%) !important; |
||||
|
padding-bottom: 10px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.new{ |
||||
|
fill: black; |
||||
|
&:hover{ |
||||
|
fill:rgba(75, 75, 75, 0.747)!important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.navbar-toggler span { |
||||
|
display: block; |
||||
|
background-color: #4f4f4f; |
||||
|
height: 3px; |
||||
|
width: 25px; |
||||
|
margin-top: 5px; |
||||
|
margin-bottom: 5px; |
||||
|
position: relative; |
||||
|
left: 0; |
||||
|
opacity: 1; |
||||
|
transition: all 0.35s ease-out; |
||||
|
transform-origin: center left; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* top line needs a little padding */ |
||||
|
.navbar-toggler span:nth-child(1) { |
||||
|
margin-top: 0.3em; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Animate collapse into X. |
||||
|
*/ |
||||
|
|
||||
|
/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */ |
||||
|
.navbar-toggler:not(.collapsed) span:nth-child(1) { |
||||
|
transform: translate(15%, -33%) rotate(45deg); |
||||
|
} |
||||
|
/* center line goes transparent */ |
||||
|
.navbar-toggler:not(.collapsed) span:nth-child(2) { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button */ |
||||
|
.navbar-toggler:not(.collapsed) span:nth-child(3) { |
||||
|
transform: translate(15%, 33%) rotate(-45deg) ; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Animate collapse open into hamburger menu |
||||
|
*/ |
||||
|
|
||||
|
/* top line moves back to initial position and rotates back to 0 degrees */ |
||||
|
.navbar-toggler span:nth-child(1) { |
||||
|
transform: translate(0%, 0%) rotate(0deg) ; |
||||
|
} |
||||
|
/* middle line goes back to regular color and opacity */ |
||||
|
.navbar-toggler span:nth-child(2) { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
/* bottom line goes back to initial position and rotates back to 0 degrees */ |
||||
|
.navbar-toggler span:nth-child(3) { |
||||
|
transform: translate(0%, 0%) rotate(0deg) ; |
||||
|
} |
@ -0,0 +1,57 @@ |
|||||
|
.about{ |
||||
|
.large{ |
||||
|
opacity: 1; |
||||
|
.large_text{ |
||||
|
font-size:65px; |
||||
|
color: black; |
||||
|
letter-spacing: 1em; |
||||
|
|
||||
|
@media screen and(max-width:992px) { |
||||
|
font-size:45px; |
||||
|
letter-spacing: .5em; |
||||
|
} |
||||
|
@media screen and(max-width:992px) { |
||||
|
font-size:45px; |
||||
|
|
||||
|
letter-spacing: .2em; |
||||
|
} |
||||
|
|
||||
|
@media screen and(max-width:992px) { |
||||
|
font-size:35px; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 14px; |
||||
|
margin-top: -10px; |
||||
|
letter-spacing: 2px !important; |
||||
|
@media screen and(max-width:992px) { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.about_content{ |
||||
|
color: black; |
||||
|
margin-top: 100px; |
||||
|
padding-bottom: 50px; |
||||
|
|
||||
|
h4{ |
||||
|
font-size: 25px; |
||||
|
|
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
p{ |
||||
|
letter-spacing: 2px; |
||||
|
line-height: 2rem; |
||||
|
} |
||||
|
|
||||
|
.ital{ |
||||
|
font-style: italic; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
@ -0,0 +1,98 @@ |
|||||
|
.contact { |
||||
|
.contact_contents { |
||||
|
.email_c, |
||||
|
.tel_c { |
||||
|
a { |
||||
|
color: black; |
||||
|
font-size: 35px; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
ul { |
||||
|
display: flex; |
||||
|
padding-left: 0; |
||||
|
margin-top: 20px; |
||||
|
li { |
||||
|
&:first-child { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
width: 40px; |
||||
|
padding-right: 15px; |
||||
|
} |
||||
|
a { |
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
form { |
||||
|
margin-top: 50px; |
||||
|
padding-bottom: 50px; |
||||
|
.form-group { |
||||
|
label { |
||||
|
color: black; |
||||
|
} |
||||
|
.form-control { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: calc(2.5em + 0.75rem + 2px); |
||||
|
padding: 0.375rem 0.75rem; |
||||
|
font-size: 1rem; |
||||
|
font-weight: 400; |
||||
|
line-height: 1.5; |
||||
|
color: #000000; |
||||
|
background-color: rgb(179, 177, 177); |
||||
|
background-clip: padding-box; |
||||
|
border: 1px solid; |
||||
|
border-radius: 0; |
||||
|
transition: outline 0.15s ease-in-out; |
||||
|
-webkit-border-radius: 0; |
||||
|
-moz-border-radius: 0; |
||||
|
-ms-border-radius: 0; |
||||
|
-o-border-radius: 0; |
||||
|
box-shadow: none; |
||||
|
border-color: transparent; |
||||
|
-webkit-transition: outline 0.15s ease-in-out; |
||||
|
-moz-transition: outline 0.15s ease-in-out; |
||||
|
-ms-transition: outline 0.15s ease-in-out; |
||||
|
-o-transition: outline 0.15s ease-in-out; |
||||
|
} |
||||
|
} |
||||
|
textarea:focus, |
||||
|
.form-control:focus { |
||||
|
outline: 3px solid rgb(0, 0, 0) !important; |
||||
|
outline-offset: 4px; |
||||
|
background-color: white !important ; |
||||
|
border: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.insta{ |
||||
|
fill: rgb(0, 0, 0); |
||||
|
&:hover{ |
||||
|
fill:rgb(255, 255, 255)!important; |
||||
|
background:rgb(255, 166, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fb{ |
||||
|
fill: rgb(0, 0, 0); |
||||
|
&:hover{ |
||||
|
fill:rgb(0, 102, 255)!important; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.twt{ |
||||
|
fill: rgb(0, 0, 0); |
||||
|
&:hover{ |
||||
|
fill:rgb(56, 184, 243)!important; |
||||
|
|
||||
|
} |
||||
|
} |
@ -0,0 +1,5 @@ |
|||||
|
@import './home/gallery'; |
||||
|
@import './home/shop-button'; |
||||
|
|
||||
|
|
||||
|
|
@ -0,0 +1,6 @@ |
|||||
|
@import './home'; |
||||
|
@import './about'; |
||||
|
@import './shop'; |
||||
|
@import './cart'; |
||||
|
@import './contact'; |
||||
|
@import './preview'; |
@ -0,0 +1,128 @@ |
|||||
|
|
||||
|
|
||||
|
|
||||
|
.breadcrumb{ |
||||
|
margin-left:20px; |
||||
|
margin-top: 100px; |
||||
|
background: transparent; |
||||
|
.breadcrumb-item{ |
||||
|
position: relative; |
||||
|
padding-right: 2rem; |
||||
|
a{ |
||||
|
color: $color-black; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
&:first-child{ |
||||
|
&::before{ |
||||
|
display: inline-block; |
||||
|
|
||||
|
color: #6c757d; |
||||
|
content: " " ; |
||||
|
display: none !important; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
&::before{ |
||||
|
display: inline-block; |
||||
|
color: $color-black; |
||||
|
content: " "; |
||||
|
height: 10px; |
||||
|
width: 8px; |
||||
|
left: -17%; |
||||
|
position: absolute; |
||||
|
border: 1px solid; |
||||
|
border-top-color: currentcolor; |
||||
|
border-left-color: currentcolor; |
||||
|
bottom: 6px; |
||||
|
transform: translate; |
||||
|
transform: rotate(314deg); |
||||
|
border-top-color: transparent; |
||||
|
border-left-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.preview{ |
||||
|
padding: 0 20px; |
||||
|
margin-top: 50px; |
||||
|
padding-bottom: 60px; |
||||
|
|
||||
|
|
||||
|
nav{ |
||||
|
margin-bottom: 10px; |
||||
|
a { |
||||
|
color: $color-black; |
||||
|
font-size: 25px; |
||||
|
padding-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pre_wrapper{ |
||||
|
flex-basis: 50%; |
||||
|
max-height: 100vh; |
||||
|
overflow-y: scroll; |
||||
|
border: 1px solid rgb(255, 255, 255); |
||||
|
scroll-snap-type: y mandatory; |
||||
|
scroll-snap-type: x mandatory; |
||||
|
scroll-behavior: smooth; |
||||
|
scrollbar-width: none; /* Firefox */ |
||||
|
-ms-overflow-style: none; /* IE 10+ */ |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 0px; |
||||
|
background: transparent; /* Chrome/Safari/Webkit */ |
||||
|
} |
||||
|
|
||||
|
&.proximity { |
||||
|
scroll-snap-type: y proximity; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.preview_img{ |
||||
|
cursor: pointer; |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.preview_left{ |
||||
|
|
||||
|
margin-top: 50px; |
||||
|
|
||||
|
padding: 30px 20px; |
||||
|
h2{ |
||||
|
font-weight: normal; |
||||
|
font-size: 50px; |
||||
|
padding-top: 20px; |
||||
|
|
||||
|
} |
||||
|
.price{ |
||||
|
font-size: 20px; |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
.details{ |
||||
|
padding-top: 20px; |
||||
|
line-height: 35px; |
||||
|
word-spacing: 5px; |
||||
|
} |
||||
|
.quantity{ |
||||
|
padding-top: 20px; |
||||
|
label{ |
||||
|
font-size: 25px; |
||||
|
} |
||||
|
.input-group{ |
||||
|
margin-top: 15px; |
||||
|
width: 115px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
@ -0,0 +1,116 @@ |
|||||
|
.shop{ |
||||
|
background-color: $color-white; |
||||
|
|
||||
|
.banner{ |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 200px; |
||||
|
|
||||
|
|
||||
|
.banner_head{ |
||||
|
color: $color-black; |
||||
|
text-align: center; |
||||
|
font-size: calc(3.6vw + 1rem); |
||||
|
margin: auto; |
||||
|
font-family: $font-offer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.product{ |
||||
|
|
||||
|
padding: 0 50px; |
||||
|
.way{ |
||||
|
color: $color-black; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
.img_details{ |
||||
|
padding-top: 20px; |
||||
|
text-align: center; |
||||
|
h4{ |
||||
|
padding-top: 20px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
} |
||||
|
.main { |
||||
|
|
||||
|
text-align: center; |
||||
|
margin: auto; |
||||
|
h2{ |
||||
|
text-align: center; |
||||
|
font-size: 60px; |
||||
|
|
||||
|
color:$color-black; |
||||
|
text-transform: uppercase; |
||||
|
padding-bottom: 30px; |
||||
|
@media screen and(max-width:768px){ |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
} |
||||
|
.categories{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
@media screen and(max-width:768px){ |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
h1 { |
||||
|
font-size: 50px; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.row { |
||||
|
margin: 10px -16px; |
||||
|
} |
||||
|
/* Add padding BETWEEN each column */ |
||||
|
.row, |
||||
|
.row > .column { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
/* Create three equal columns that floats next to each other */ |
||||
|
.column { |
||||
|
float: left; |
||||
|
width: 33.33%; |
||||
|
display: none; /* Hide all elements by default */ |
||||
|
} |
||||
|
/* Clear floats after rows */ |
||||
|
.row:after { |
||||
|
content: ""; |
||||
|
display: table; |
||||
|
clear: both; |
||||
|
} |
||||
|
/* Content */ |
||||
|
.content { |
||||
|
padding: 20px 0; |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
/* The "show" class is added to the filtered elements */ |
||||
|
.show { |
||||
|
display: block; |
||||
|
} |
||||
|
/* Style the buttons */ |
||||
|
.btn { |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
padding: 12px 16px; |
||||
|
background-color: white; |
||||
|
cursor: pointer; |
||||
|
color:$color-black; |
||||
|
|
||||
|
} |
||||
|
.btn:hover { |
||||
|
color: grey; |
||||
|
} |
||||
|
.btn.active { |
||||
|
color:grey; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#hh{ |
||||
|
-webkit-transition: 0.5s; |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,44 @@ |
|||||
|
.gallery { |
||||
|
.gallery_content { |
||||
|
margin: 0 30px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.wrapper { |
||||
|
padding-bottom: 40px; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.inline-photo { |
||||
|
//border: 1em solid #fff; |
||||
|
//border-bottom: 4em solid #fff; |
||||
|
//border-radius: .25em; |
||||
|
//box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2); |
||||
|
//margin: 2em auto; |
||||
|
opacity: 0; |
||||
|
transform: translateY(0em) rotateZ(0deg); |
||||
|
transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; |
||||
|
//max-width: 600px; |
||||
|
//width: 90%; |
||||
|
will-change: transform, opacity; |
||||
|
-webkit-transform: translateY(0em) rotateZ(0deg); |
||||
|
-moz-transform: translateY(0em) rotateZ(0deg); |
||||
|
-ms-transform: translateY(0em) rotateZ(0deg); |
||||
|
-o-transform: translateY(0em) rotateZ(0deg); |
||||
|
-webkit-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; |
||||
|
-moz-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; |
||||
|
-ms-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; |
||||
|
-o-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; |
||||
|
} |
||||
|
.inline-photo.is-visible { |
||||
|
opacity: 1; |
||||
|
transform: rotateZ(0deg); |
||||
|
-webkit-transform: rotateZ(0deg); |
||||
|
-moz-transform: rotateZ(0deg); |
||||
|
-ms-transform: rotateZ(0deg); |
||||
|
-o-transform: rotateZ(0deg); |
||||
|
} |
@ -0,0 +1,15 @@ |
|||||
|
.shop_button{ |
||||
|
margin-top:90px; |
||||
|
margin-bottom: 90px; |
||||
|
.wrapper{ |
||||
|
padding-top: 40px; |
||||
|
text-align: center; |
||||
|
color: black; |
||||
|
p{ |
||||
|
line-height: 2.2rem; |
||||
|
font-size: 20px; |
||||
|
padding-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |