@ -0,0 +1,48 @@ |
|||
.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg |
|||
:target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html |
|||
:alt: License: LGPL-3 |
|||
|
|||
Theme OG Store |
|||
============== |
|||
* Design Web Pages with Theme OG Store |
|||
|
|||
Installation |
|||
============ |
|||
- www.odoo.com/documentation/18.0/setup/install.html |
|||
- Install our custom addon |
|||
|
|||
License |
|||
------- |
|||
General Public License, Version 3 (LGPL v3). |
|||
(https://www.gnu.org/licenses/lgpl-3.0-standalone.html) |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
Credits |
|||
------- |
|||
* Developer: (V18) Anfas Faisal K, Amaya Aravind |
|||
* Contact: odoo@cybrosys.com |
|||
|
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
* Website : https://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) 2025-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 controllers |
|||
from . import models |
@ -0,0 +1,87 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-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 OG Store', |
|||
'version': '18.0.1.0.0', |
|||
'category': 'Theme', |
|||
'summary': 'Design Web Pages with Theme OG', |
|||
'description': 'Theme OG is an ideal choice for your Odoo 18.' |
|||
'This theme promises to offer a refreshing experience with Odoo,' |
|||
'enhancing its functionality and aesthetics."', |
|||
'author': 'Cybrosys Techno Solutions', |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
'website': "https://www.cybrosys.com", |
|||
'depends': ['website_sale_wishlist', 'website_sale', |
|||
'website_sale_comparison'], |
|||
'data': [ |
|||
'security/ir.model.access.csv', |
|||
'data/og_configuration_data.xml', |
|||
'views/checkout.xml', |
|||
'views/footer.xml', |
|||
'views/header.xml', |
|||
'views/og_configuration_views.xml', |
|||
'views/product_view_template.xml', |
|||
'views/shop.xml', |
|||
'views/snippets/best_seller_highlight.xml', |
|||
'views/snippets/categories_highlight.xml', |
|||
'views/snippets/choose_highlight.xml', |
|||
'views/snippets/exclusive_category.xml', |
|||
'views/snippets/offer_highlight.xml', |
|||
'views/snippets/product_highlight.xml', |
|||
'views/snippets/service_highlight.xml', |
|||
'views/snippets/shop_highlight.xml', |
|||
'views/snippets/subscribe_highlight.xml', |
|||
'views/snippets/testimonials_highlight.xml', |
|||
], |
|||
'assets': { |
|||
'web.assets_frontend': [ |
|||
"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css", |
|||
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css", |
|||
"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css", |
|||
"/theme_og_store/static/src/css/style.css", |
|||
"/theme_og_store/static/src/css/owl.carousel.min.css", |
|||
"/theme_og_store/static/src/css/owl.theme.default.min.css", |
|||
'/theme_og_store/static/src/js/owl.carousel.js', |
|||
'/theme_og_store/static/src/js/owl.carousel.min.js', |
|||
'/theme_og_store/static/src/js/product_category.js', |
|||
'/theme_og_store/static/src/js/shop_highlight.js', |
|||
'/theme_og_store/static/src/js/testimonials.js', |
|||
'/theme_og_store/static/src/js/best_seller.js', |
|||
'/theme_og_store/static/src/js/website_sale.js', |
|||
'/theme_og_store/static/src/js/exclusive_categories.js', |
|||
"/theme_og_store/static/src/xml/category_tab_content.xml", |
|||
"/theme_og_store/static/src/xml/exclusive_tab_content.xml", |
|||
"/theme_og_store/static/src/xml/best_seller_tab_content.xml", |
|||
"/theme_og_store/static/src/xml/testimonial_tab_content.xml", |
|||
"/theme_og_store/static/src/xml/shop_tab_content.xml", |
|||
], |
|||
}, |
|||
'images': [ |
|||
'static/description/banner.jpg', |
|||
'static/description/theme_screenshot.jpg' |
|||
], |
|||
'license': 'LGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
@ -0,0 +1,23 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-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 product_snippet |
|||
from . import website_sale |
@ -0,0 +1,99 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from odoo import http |
|||
from odoo.http import request |
|||
|
|||
|
|||
class WebsiteProduct(http.Controller): |
|||
@http.route('/get_best_sellers', auth="public", type='json', website=True) |
|||
def get_best_sellers(self): |
|||
"""Get the top-selling products based on sales quantity.""" |
|||
query = """ |
|||
SELECT product_id, SUM(product_uom_qty) as total_qty |
|||
FROM sale_order_line |
|||
WHERE state IN ('sale', 'done') |
|||
GROUP BY product_id |
|||
ORDER BY total_qty DESC |
|||
LIMIT 12 |
|||
""" |
|||
request.env.cr.execute(query) |
|||
results = request.env.cr.fetchall() |
|||
# Get product IDs from query results |
|||
product_ids = [row[0] for row in results] |
|||
if product_ids: |
|||
# Fetch the corresponding product templates |
|||
products = request.env['product.product'].sudo().browse( |
|||
product_ids) |
|||
best_sellers = products.mapped('product_tmpl_id') |
|||
else: |
|||
# Fallback to the newest products if no sales data |
|||
best_sellers = request.env['product.template'].sudo().search([], |
|||
limit=12) |
|||
products_data = [{ |
|||
'name': product.name, |
|||
'price': product.list_price, # Website price |
|||
'image_url': f'/web/image/product.template/{product.id}/image_1920', |
|||
'url': f'/shop/product/{product.id}' |
|||
} for product in best_sellers] |
|||
values = { |
|||
'products': products_data, |
|||
} |
|||
return values |
|||
|
|||
@http.route('/get_exclusive_categories', auth="public", type='json', |
|||
website=True) |
|||
def get_exclusive_category(self): |
|||
"""Get the selected category from theme configuration and its best-selling products""" |
|||
# Fetch the selected category from the theme configuration |
|||
theme_config = request.env['og.configuration'].sudo().search([], |
|||
limit=1) |
|||
if not theme_config or not theme_config.category_id: |
|||
return False |
|||
|
|||
category_id = theme_config.category_id.id |
|||
exclusive_products = request.env['product.template'].sudo().search([ |
|||
('public_categ_ids', '=', category_id), |
|||
('active', '=', True) |
|||
], limit=9) |
|||
products_data = [{ |
|||
'name': product.name, |
|||
'price': product.list_price, # Use website price |
|||
'image_url': f'/web/image/product.template/{product.id}/image_1920', |
|||
'url': f'/shop/product/{product.id}' |
|||
} for product in exclusive_products] |
|||
values = { |
|||
'categories': products_data, |
|||
} |
|||
return values |
|||
|
|||
@http.route('/get_product_categories', auth="public", type='json', |
|||
website=True) |
|||
def get_product_category(self): |
|||
"""Get the website categories for the snippet.""" |
|||
public_categs = request.env[ |
|||
'product.public.category'].sudo().search_read( |
|||
[('parent_id', '=', False)], fields=['name', 'image_1920', 'id'] |
|||
) |
|||
values = { |
|||
'categories': public_categs, |
|||
} |
|||
return values |
@ -0,0 +1,156 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from odoo import http |
|||
from odoo.http import request |
|||
from odoo.addons.website_sale.controllers.main import WebsiteSale |
|||
|
|||
|
|||
class WebsiteSaleInherit(WebsiteSale): |
|||
@http.route() |
|||
def shop(self, page=0, category=None, search='', min_price=0.0, |
|||
max_price=0.0, ppg=False, **post): |
|||
"""Supering to update the product data.""" |
|||
res = super().shop(page, category, search, min_price, max_price, ppg, |
|||
**post) |
|||
currency = request.website.currency_id |
|||
recommended_products = self.get_personalized_recommendations() |
|||
best_sellers = self.get_bestseller_products() |
|||
all_products = res.qcontext.get('products', []) |
|||
offset = int(post.get('offset', 0)) |
|||
all_product_data = [{ |
|||
'name': product.name, |
|||
'price': product.list_price, |
|||
'image_url': f'/web/image/product.template/{product.id}/image_1920', |
|||
'url': f'/shop/product/{product.id}', |
|||
'currency_symbol': currency.symbol, |
|||
'product_id' :product.id, |
|||
'product_variant_id':product.product_variant_id.id, |
|||
'type':product.type, |
|||
'products_variant_id': product.product_variant_id.id, |
|||
|
|||
} for product in all_products] |
|||
visible_products = all_product_data[:12] |
|||
|
|||
recommended_data = [{ |
|||
'name': product.name, |
|||
'price': product.list_price, |
|||
'image_url': f'/web/image/product.template/{product.id}/image_1920', |
|||
'url': f'/shop/product/{product.id}', |
|||
'currency_symbol': currency.symbol, |
|||
'product_id' :product.id, |
|||
'product_variant_id':product.product_variant_id.id, |
|||
'type':product.type, |
|||
'products_id': product, |
|||
'products_variant_id': product.product_variant_id.id, |
|||
|
|||
} for product in recommended_products] |
|||
|
|||
products_data = [{ |
|||
'name': product.name, |
|||
'price': product.list_price, |
|||
'image_url': f'/web/image/product.template/{product.id}/image_1920', |
|||
'url': f'/shop/product/{product.id}', |
|||
'currency_symbol': currency.symbol, |
|||
'product_id' :product.id, |
|||
'product_variant_id':product.product_variant_id.id, |
|||
'type':product.type, |
|||
'products_id': product, |
|||
'products_variant_id': product.product_variant_id.id, |
|||
|
|||
} for product in best_sellers] |
|||
|
|||
res.qcontext.update({ |
|||
'best_sellers': products_data, |
|||
'recommended_data': recommended_data, |
|||
'all_products': all_product_data, |
|||
'visible_products': visible_products, |
|||
'total_products': len(all_product_data), |
|||
'products_per_page': 12, |
|||
'offset': offset + 12 |
|||
}) |
|||
return res |
|||
|
|||
def get_bestseller_products(self, **kwargs): |
|||
"""Get the top-selling products based on sales quantity.""" |
|||
query = """ |
|||
SELECT sol.product_id, SUM(sol.product_uom_qty) as total_qty |
|||
FROM sale_order_line sol |
|||
JOIN product_product pp ON sol.product_id = pp.id |
|||
JOIN product_template pt ON pp.product_tmpl_id = pt.id |
|||
WHERE sol.state IN ('sale', 'done') |
|||
AND pt.is_published = TRUE |
|||
GROUP BY sol.product_id |
|||
ORDER BY total_qty DESC |
|||
LIMIT 12 |
|||
""" |
|||
request.env.cr.execute(query) |
|||
results = request.env.cr.fetchall() |
|||
# Get product IDs from query results |
|||
product_ids = [row[0] for row in results] |
|||
if product_ids: |
|||
# Fetch the corresponding product templates |
|||
products = request.env['product.product'].sudo().browse( |
|||
product_ids) |
|||
best_sellers = products.mapped('product_tmpl_id') |
|||
else: |
|||
# Fallback to the newest products if no sales data |
|||
best_sellers = request.env['product.template'].sudo().search([ |
|||
('is_published', '=', True)], limit=12) |
|||
return best_sellers |
|||
|
|||
def get_personalized_recommendations(self): |
|||
"""Method to get personalized recommendation on the products.""" |
|||
# Get the logged-in partner |
|||
partner = request.env.user.partner_id |
|||
# Fetch the partner's purchase history |
|||
orders = request.env['sale.order'].sudo().search([ |
|||
('partner_id', '=', partner.id), |
|||
('state', 'in', ['sale', 'done']), # Only confirmed orders |
|||
]) |
|||
|
|||
# Collect purchased product template IDs and categories |
|||
purchased_templates = set() |
|||
purchased_categories = set() |
|||
for order in orders: |
|||
for line in order.order_line: |
|||
purchased_templates.add( |
|||
line.product_id.product_tmpl_id.id) |
|||
purchased_categories.add( |
|||
line.product_id.categ_id.id) |
|||
|
|||
# Fetch recommended product templates based on purchase history |
|||
recommended_templates = request.env['product.template'].search([ |
|||
('categ_id', 'in', list(purchased_categories)), |
|||
('id', 'not in', list(purchased_templates)), |
|||
('is_published', '=', True), # Only published products |
|||
], limit=10) # Limit to 10 recommendations |
|||
return recommended_templates |
|||
|
|||
@http.route('/shop/products/attributes', type='json', auth="public", website=True) |
|||
def get_products_attributes(self, product_ids=None, **kw): |
|||
"""Method to get products.""" |
|||
result = {} |
|||
if product_ids: |
|||
products = request.env['product.template'].sudo().browse(product_ids) |
|||
for product in products: |
|||
result[product.id] = bool(product.valid_product_template_attribute_line_ids) |
|||
return result |
@ -0,0 +1,9 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<odoo> |
|||
<data noupdate="1"> |
|||
<!-- Creating demo record in blast.configuration --> |
|||
<record id="og_configuration_data" model="og.configuration"> |
|||
<field name="name">OG Store Configuration</field> |
|||
</record> |
|||
</data> |
|||
</odoo> |
@ -0,0 +1,12 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<odoo> |
|||
<data> |
|||
<!-- Menu for pages.--> |
|||
<record id="menu_about" model="website.menu"> |
|||
<field name="name">About</field> |
|||
<field name="url">/about</field> |
|||
<field name="parent_id" ref="website.main_menu"/> |
|||
<field name="sequence" type="int">15</field> |
|||
</record> |
|||
</data> |
|||
</odoo> |
@ -0,0 +1,7 @@ |
|||
## Module <theme_og_store> |
|||
|
|||
#### 29.07.2025 |
|||
#### Version 18.0.1.0.0 |
|||
#### ADD |
|||
|
|||
- Initial Commit for the module Theme OG Store |
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-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 og_configuration |
@ -0,0 +1,39 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-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 fields, models |
|||
|
|||
|
|||
class OGConfiguration(models.Model): |
|||
"""Contains fields to add necessary values for snippets""" |
|||
_name = 'og.configuration' |
|||
_description = 'OG Configuration' |
|||
|
|||
name = fields.Char(string='Name', help="Name of the Configuration.") |
|||
category_id = fields.Many2one( |
|||
'product.public.category', |
|||
string="Product Category", |
|||
help="Select the product category to display products from.") |
|||
best_products_ids = fields.Many2many('product.product', |
|||
string="Best Products", |
|||
help="Choose multiple products " |
|||
"to display as Best Products", |
|||
domain="[('sale_ok', '=', True)]") |
|
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 5.6 KiB |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 3.7 MiB |
After Width: | Height: | Size: 5.2 MiB |
After Width: | Height: | Size: 3.8 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 3.3 MiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 4.1 MiB |
After Width: | Height: | Size: 3.6 MiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 929 B |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 2.5 MiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.3 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 2.7 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 151 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 885 B |
@ -0,0 +1,478 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>app index</title> |
|||
<link |
|||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" |
|||
rel="stylesheet" |
|||
/> |
|||
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
|||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
|||
<link |
|||
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" |
|||
rel="stylesheet" |
|||
/> |
|||
<link |
|||
rel="stylesheet" |
|||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" |
|||
/> |
|||
<style> |
|||
:root { |
|||
--primary-color: #2390eb; |
|||
--bg-white: #fff; |
|||
--text-color: #121212; |
|||
--text-color-light: #64728f; |
|||
} |
|||
|
|||
body { |
|||
font-family: "Montserrat", sans-serif; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- overview --> |
|||
<div class="container"> |
|||
<!-- support-header --> |
|||
|
|||
<div class="supports my-3 py-3" style="border-bottom: 1px solid #e7e7e7"> |
|||
<div class="row justify-content-between"> |
|||
<div class="col-4"> |
|||
<div class="my-3"> |
|||
<img |
|||
src="//apps.odoocdn.com/apps/assets/17.0/theme_boec/images/Cybrosys.png?fcdde35" |
|||
style="width: auto !important; height: 40px !important" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="col-6"> |
|||
<div class="row" style="margin-top: 10px"> |
|||
<div class="my-3 d-flex align-items-center justify-content-end"> |
|||
<span class="me-3"><b>Supports: </b></span> |
|||
<div |
|||
class="text-center" |
|||
style=" |
|||
background-color: #017e84 !important; |
|||
font-size: 0.8rem !important; |
|||
color: #fff !important; |
|||
font-weight: 500 !important; |
|||
padding: 4px !important; |
|||
margin: 0 3px !important; |
|||
border-radius: 50px !important; |
|||
min-width: 120px !important; |
|||
" |
|||
> |
|||
Community |
|||
</div> |
|||
<div |
|||
class="text-center" |
|||
style=" |
|||
background-color: #865474 !important; |
|||
font-size: 0.8rem !important; |
|||
color: #fff !important; |
|||
font-weight: 500 !important; |
|||
padding: 4px !important; |
|||
margin: 0 3px !important; |
|||
border-radius: 50px !important; |
|||
min-width: 120px !important; |
|||
" |
|||
> |
|||
Enterprise |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" style="margin-top: 10px"> |
|||
<div class="d-flex align-items-center justify-content-end"> |
|||
<span class="me-3"><b>Availability: </b></span> |
|||
<div |
|||
class="text-center col" |
|||
style=" |
|||
border: 1px solid #017e84; |
|||
font-size: 0.8rem !important; |
|||
color: #017e84 !important; |
|||
font-weight: 500 !important; |
|||
padding: 4px !important; |
|||
margin: 0 3px !important; |
|||
border-radius: 20px !important; |
|||
min-width: 120px !important; |
|||
" |
|||
> |
|||
<i class="fa fa-times" style="color: red"></i> Odoo Online |
|||
</div> |
|||
<div |
|||
class="text-center col" |
|||
style=" |
|||
font-size: 0.8rem !important; |
|||
color: #865474 !important; |
|||
border: 1px solid #865474; |
|||
font-weight: 500 !important; |
|||
padding: 4px !important; |
|||
margin: 0 3px !important; |
|||
border-radius: 20px !important; |
|||
min-width: 120px !important; |
|||
" |
|||
> |
|||
<i class="fa-solid fa-check" style="color: rgb(13, 182, 13); padding-right: 3px;"></i> Odoo.sh |
|||
</div> |
|||
<div |
|||
class="text-center col" |
|||
style=" |
|||
font-size: 0.8rem !important; |
|||
color: #5b899e !important; |
|||
border: 1px solid #5b899e; |
|||
font-weight: 500 !important; |
|||
padding: 4px !important; |
|||
margin: 0 3px !important; |
|||
border-radius: 20px !important; |
|||
min-width: 120px !important; |
|||
" |
|||
> |
|||
<i class="fa-solid fa-check" style="color: rgb(13, 182, 13); padding-right: 3px;"></i> On Premise |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
<!-- logo-banner --> |
|||
<div class="my-3"> |
|||
<img src="./img/og1.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
<!-- banner-section --> |
|||
<div class="my-3"> |
|||
<img src="./img/og2.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
<!-- responsive banner --> |
|||
<div class="my-3"> |
|||
<img src="./img/og3.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
<!--feature card section --> |
|||
<!-- |
|||
<div class="my-3" style="padding: 100px; background-color: #E1ECF6; border-radius: 16px;"> |
|||
<div class="container"> |
|||
<div class="row mb-60"> |
|||
<div class="col-lg-12 d-flex justify-content-center align-items-center flex-wrap gap-3"> |
|||
<div class="position-relative" ; style=" |
|||
text-align: center; |
|||
font-size: 46.875px; |
|||
font-style: normal; |
|||
padding-bottom: 40px; "> |
|||
<h2 style="font-weight: 600;">Our Features</h2> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row g-4"> |
|||
<div class="col-lg-4 col-md-6" style="visibility: visible;"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 30px; |
|||
padding: 35px 30px; |
|||
text-align: center;"> |
|||
<div class="content"> |
|||
<img src="./img/pages.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;"> Custom Designed Snippets for better user experience </a></h4> |
|||
<p style="font-size: 14px; color: #556171; margin: 0;">Optimized Code Snippets for Enhanced User Experience.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff; height: 100%; |
|||
border-radius: 30px; |
|||
padding: 35px 30px;text-align: center;"> |
|||
<div class="content"> |
|||
<img src="./img/customize.svg" class="img-responsive" height="46px" width="46px"> |
|||
|
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Fully Customized AboutUs page </a></h4> |
|||
<p style="font-size: 14px; color: #556171; margin: 0;">Key information about the Hospital and includes sections dedicated to showcasing Facilities, giving visitors insight into the qualities.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff; height: 100%; |
|||
border-radius: 30px; |
|||
padding: 35px 30px;text-align: center;"> |
|||
<div class="content"> |
|||
<img src="./img/support.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Contains Location and Services by Default </a></h4> |
|||
<p style="font-size: 14px; color: #556171; margin: 0;">Showcases services or items in an elegant and visually appealing layout.</p> |
|||
</div> |
|||
|
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 30px; |
|||
padding: 35px 30px;text-align: center;"> |
|||
<div class="content"> |
|||
<img src="./img/clean-code.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Features dynamic elements </a></h4> |
|||
<p style="font-size: 14px; color: #556171; margin: 0;">Features dynamic elements like sliders and testimonials.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 30px; |
|||
padding: 35px 30px;text-align: center;"> |
|||
<div class="content"> |
|||
<img src="./img/font.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">A Clean layout and Style </a></h4> |
|||
<p style="font-size: 14px; color: #556171; margin: 0;">Modern, Clean Interface with Premium Typography.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 30px; |
|||
padding: 35px 30px;text-align: center;"> |
|||
<div class="content"> |
|||
<img src="./img/resposnive.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Fully Responsive Theme with a Premium Design </a></h4> |
|||
<p style="font-size: 14px; color: #556171; margin: 0;">Premium Responsive Design for All Devices</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
|
|||
<!-- feature banner --> |
|||
<div class="my-3"> |
|||
<img src="./img/og4.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
<!-- card-column --> |
|||
<!-- <div class="my-3"> |
|||
<div class="row"> |
|||
<div class="col-md-6"> |
|||
<img src="./img/medicate-product-banner.png" class="img-fluid" style="width: 100%;"> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<img src="./img/medicate-product-banner-2.png" class="img-fluid" style="width: 100%;"> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- --> |
|||
|
|||
<!-- facility-banner --> |
|||
<div class="my-3"> |
|||
<img src="./img/og5.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
<!-- about-banner --> |
|||
<!-- <div class="my-3"> |
|||
<img src="./img/og6.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> --> |
|||
<!-- --> |
|||
|
|||
<!-- service-banner --> |
|||
<div class="my-3"> |
|||
<img src="./img/og7.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
|
|||
<!-- blog-banner --> |
|||
<div class="my-3"> |
|||
<img src="./img/og8.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
<!-- --> |
|||
<div class="my-3"> |
|||
<img src="./img/og11.jpg" class="img-fluid" style="width: 100%" /> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
<div class="my-3"> |
|||
<!-- banner card --> |
|||
|
|||
<!-- service-section --> |
|||
|
|||
<!-- <section id="services" class="" style="border-radius: 16px; |
|||
border: 1px solid #EBEEF2; |
|||
background-color: #FFF; |
|||
padding: 60px 40px; |
|||
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);"> |
|||
<div class="text-center mt-4"> |
|||
<h3 class="mb-0" style="color: #000; |
|||
text-align: center; |
|||
font-family: Montserrat; |
|||
font-size: 40px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: normal; |
|||
text-transform: uppercase; |
|||
padding-bottom: 50px;">Our Services</h3> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FA5A7D; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/gear.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;"> Odoo Customization</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FF947A; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/wrench-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;"> Odoo Implementation</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#3CD856; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/life-ring-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Support</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#BF83FF; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/arrows-repeat.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Migration</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#01649C; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/puzzle-piece-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo integration</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#69CC70; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/odoo-consultancy.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Consultancy</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#2E4556; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/odoo-licencing.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Licensing</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FCD12C; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/hire-odoo.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Hire Odoo Developer</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
</section> --> |
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> |
|||
</html> |
After Width: | Height: | Size: 760 KiB |
@ -0,0 +1,109 @@ |
|||
*:focus { |
|||
outline: 0 !important; |
|||
} |
|||
|
|||
*:hover { |
|||
-webkit-transition: 0.2s; |
|||
transition: 0.2s; |
|||
} |
|||
|
|||
*:focus { |
|||
outline: 0 !important; |
|||
box-shadow: none !important; |
|||
} |
|||
|
|||
*button:focus { |
|||
border: none; |
|||
outline: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
* { |
|||
list-style-type: none; |
|||
font-family: $font-default !important; |
|||
font-size: 18px; |
|||
|
|||
&:focus, |
|||
&:active { |
|||
outline: none !important; |
|||
} |
|||
} |
|||
|
|||
// html.sr .load-hidden { |
|||
// visibility: hidden; |
|||
// } |
|||
|
|||
*::selection { |
|||
color: rgb(243, 235, 238); |
|||
background-color: black; |
|||
} |
|||
|
|||
*a, |
|||
a:visited { |
|||
color: #990000; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
body { |
|||
position: relative; |
|||
font-family: font-default !important; |
|||
color: var(--text-color); |
|||
background-color: $green-300; |
|||
// overflow: hidden; |
|||
} |
|||
|
|||
|
|||
.affix { |
|||
top: 0; |
|||
width: 100%; |
|||
z-index: 9999 !important; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.bg_img { |
|||
position: absolute; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.img1 { |
|||
top: 20%; |
|||
left: 0; |
|||
width: 250px; |
|||
|
|||
@media (max-width:768px) { |
|||
|
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
|
|||
.img2 { |
|||
top: 15%; |
|||
width: 250px; |
|||
|
|||
right: 0; |
|||
|
|||
@media (max-width:768px) { |
|||
|
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.heading_wrapper{ |
|||
p{ |
|||
font-size: 20px; |
|||
font-weight: 500; |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
.section_heading{ |
|||
color: $secondary-color; |
|||
font-size: 36px; |
|||
padding: 50px 0; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
} |
@ -0,0 +1,349 @@ |
|||
/*! 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,56 @@ |
|||
// Fonts |
|||
$font-default: "Rubik", sans-serif; |
|||
|
|||
$white: #ffff; |
|||
|
|||
|
|||
|
|||
$primary-color:#299E60; |
|||
$brand-dark: #0C0C0C; |
|||
$secondary-color: #19603B; |
|||
$orange:#FF9800; |
|||
|
|||
|
|||
|
|||
$background-color: #f4f4f4; |
|||
|
|||
$green-300:#EAF5EF; |
|||
$green-600: #00E0C6; |
|||
$green-700: #009393; |
|||
$green-500: #4DAE7B; |
|||
$green-400:#83C7A3; |
|||
|
|||
|
|||
|
|||
$blue-700:#3B5266; |
|||
|
|||
$grey-500: #B1B5C3; |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
:root { |
|||
|
|||
--up-primary: #D5BC93; |
|||
--brand-red: #BE3144; |
|||
--brand-dark: #242424; |
|||
--up-bg-section:#161616; |
|||
|
|||
|
|||
|
|||
--brand-heading: #0C0C0C; |
|||
--brand-text: #767676; |
|||
|
|||
--brand-blue-900: #090e1b; |
|||
--brand-blue-100: #EEF1F8; |
|||
|
|||
--brand-green-900: #011E24; |
|||
--brand-green-800: #323D46; |
|||
--card-bg: #F5F5F5; |
|||
--brand-grey:#DFDFDF; |
|||
|
|||
|
|||
|
|||
--grey-color-900: #34383B; |
|||
} |
@ -0,0 +1,116 @@ |
|||
.btn { |
|||
border: none !important; |
|||
outline: 0 !important; |
|||
-webkit-transition: 0.5s; |
|||
transition: 0.5s; |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
&-primary { |
|||
border-radius: 25px; |
|||
font-size: 14px; |
|||
|
|||
|
|||
text-decoration: none; |
|||
padding: 10px 20px; |
|||
position: relative; |
|||
border: 1px solid $primary-color !important; |
|||
background-color: $primary-color; |
|||
color: $white !important; |
|||
transition: all 0.3s; |
|||
|
|||
|
|||
|
|||
&:hover { |
|||
background-color: var(--white-color); |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
&-secondary { |
|||
|
|||
border-radius: 25px; |
|||
font-size: 14px; |
|||
|
|||
|
|||
text-decoration: none; |
|||
padding: 10px 20px; |
|||
position: relative; |
|||
border: 1px solid $green-400 !important; |
|||
background-color: $green-400; |
|||
color: $white !important; |
|||
transition: all 0.3s; |
|||
|
|||
|
|||
|
|||
&:hover { |
|||
background-color: var(--white-color); |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
&-sb { |
|||
border-radius: 25px; |
|||
font-size: 16px; |
|||
|
|||
|
|||
text-decoration: none; |
|||
padding: 10px 20px; |
|||
position: relative; |
|||
border: 1px solid #141416 !important; |
|||
background-color: #141416; |
|||
color: $white !important; |
|||
transition: all 0.3s; |
|||
|
|||
|
|||
|
|||
&:hover { |
|||
background-color: var(--white-color); |
|||
|
|||
color: #141416 !important; |
|||
} |
|||
} |
|||
|
|||
&-appStore ,&-playStore{ |
|||
border-radius: 5px; |
|||
|
|||
|
|||
text-decoration: none; |
|||
padding: 5px 20px; |
|||
position: relative; |
|||
border: 1px solid #141416 !important; |
|||
background-color: #141416; |
|||
color: $white !important; |
|||
transition: all 0.3s; |
|||
width: fit-content; |
|||
.btn_content{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 5px; |
|||
img{ |
|||
width: 35px; |
|||
} |
|||
span{ |
|||
font-size: 12px; |
|||
} |
|||
p{ |
|||
margin-bottom: 0; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
margin-bottom: 5px; |
|||
} |
|||
} |
|||
&:hover{ |
|||
background-color: black; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
@ -0,0 +1 @@ |
|||
@import 'buttons'; |
@ -0,0 +1,91 @@ |
|||
.hero { |
|||
background-image: url(../../assets/banner/banner-bg.png); |
|||
height: 85vh; |
|||
background-size: cover; |
|||
background-position: center; |
|||
|
|||
.wrapper { |
|||
|
|||
|
|||
.banner-carousel .item { |
|||
|
|||
padding: 0px; |
|||
text-align: center; |
|||
|
|||
border-radius: 10px; |
|||
} |
|||
|
|||
|
|||
.owl-nav button { |
|||
background: #007bff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 50%; |
|||
width: 40px; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
margin: 0 5px; |
|||
} |
|||
|
|||
.owl-nav button:hover { |
|||
background: #0056b3; |
|||
} |
|||
|
|||
.owl-dots { |
|||
display: flex; |
|||
justify-content: end; |
|||
padding-right: 15%; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.owl-dots .owl-dot { |
|||
background: #ccc; |
|||
width: 12px; |
|||
height: 12px; |
|||
margin: 5px; |
|||
border-radius: 50%; |
|||
|
|||
} |
|||
|
|||
.owl-dots .owl-dot.active { |
|||
background: $orange; |
|||
} |
|||
|
|||
.banner_item { |
|||
margin-top: 40px; |
|||
display: grid; |
|||
grid-template-columns: 60% 40%; |
|||
|
|||
perspective: 1000px; |
|||
|
|||
.banner_left { |
|||
text-align: start; |
|||
margin-right: 40px; |
|||
|
|||
h1 { |
|||
font-size: 5rem; |
|||
color: $secondary-color; |
|||
font-weight: 600; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
p { |
|||
font-size: 16px; |
|||
color: $secondary-color; |
|||
line-height: 1.7; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
|
|||
.banner_right { |
|||
max-width: 750px; |
|||
padding-top: 50px; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,119 @@ |
|||
footer{ |
|||
background-color: $white; |
|||
.wrapper{ |
|||
padding-top: 50px; |
|||
.footer_icon{ |
|||
padding-bottom: 30px; |
|||
} |
|||
.footer_heading{ |
|||
color: #3B5266; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
padding-bottom: 15px; |
|||
} |
|||
.footer_address{ |
|||
padding-left: 0; |
|||
|
|||
li{ |
|||
padding-bottom: 10px; |
|||
|
|||
a{ |
|||
color: #353945; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
address{ |
|||
color: #353945; |
|||
font-size: 16px; |
|||
margin-top: -10px; |
|||
} |
|||
.social-icons { |
|||
a { |
|||
margin-left: 15px; |
|||
display: inline-block; |
|||
|
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer_links{ |
|||
padding-left: 0; |
|||
li{ |
|||
padding-bottom: 10px; |
|||
|
|||
a{ |
|||
color: #353945; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
.location{ |
|||
height: 100%; |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
|
|||
.location-switcher { |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: Arial, sans-serif; |
|||
position: relative; |
|||
width: max-content; |
|||
} |
|||
|
|||
.location-icon { |
|||
font-size: 16px; |
|||
|
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.location-dropdown { |
|||
appearance: none; |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
width: 100%; |
|||
padding: 5px 30px 5px 10px; |
|||
font-size: 14px; |
|||
color: #95A1BB; |
|||
border: none; |
|||
border-radius: 4px; |
|||
background-color: transparent; |
|||
background-image: none; |
|||
background-repeat: no-repeat; |
|||
background-position: right 10px center; |
|||
background-size: 18px; /* Adjust size as needed */ |
|||
cursor: pointer; |
|||
// overflow: ; |
|||
} |
|||
|
|||
.location-dropdown:focus { |
|||
outline: none; |
|||
border-color: #007BFF; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
.app_btn_wrapper{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.credit{ |
|||
color: #95A1BB; |
|||
font-size: 14px; |
|||
} |
@ -0,0 +1,3 @@ |
|||
@import 'navbar'; |
|||
@import 'banner'; |
|||
@import 'footer'; |
@ -0,0 +1,428 @@ |
|||
header { |
|||
position: relative; |
|||
width: 100%; |
|||
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; |
|||
z-index: 1000; |
|||
padding-bottom: 0; |
|||
} |
|||
// header.fixed { |
|||
// position: fixed; |
|||
// top: 0; |
|||
// left: 0; |
|||
// padding: 10px 0; |
|||
// background-color: #fff; |
|||
// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|||
// transform: translateY(0); |
|||
// } |
|||
header.relative { |
|||
transform: translateY(-10px); |
|||
} |
|||
.logo { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
img { |
|||
height: 50px; |
|||
} |
|||
span { |
|||
font-size: 22px; |
|||
color: $primary-color; |
|||
font-weight: 600; |
|||
|
|||
} |
|||
} |
|||
.navbar_right_form { |
|||
display: flex; |
|||
justify-content: right; |
|||
align-items: baseline; |
|||
gap: 15px; |
|||
input::placeholder { |
|||
font-size: 16px; |
|||
/* Adjust the font size */ |
|||
} |
|||
.input_wrapper { |
|||
width: 60%; |
|||
} |
|||
.form-control { |
|||
border-color: transparent; |
|||
width: 100%; |
|||
margin-top: -20px !important; |
|||
padding: 0px 5px; |
|||
&:focus { |
|||
border-color: black; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
@media (max-width: 992px) { |
|||
display: none; |
|||
} |
|||
// @media (max-width: 768px) { |
|||
// display:block; |
|||
// } |
|||
} |
|||
.right_menu { |
|||
ul { |
|||
display: flex; |
|||
gap: 30px; |
|||
justify-content: end; |
|||
padding-top: 5px; |
|||
padding-left: 0; |
|||
margin-bottom: 0; |
|||
|
|||
li { |
|||
a { |
|||
img { |
|||
width: 20px; |
|||
} |
|||
} |
|||
} |
|||
.notification { |
|||
position: relative; |
|||
} |
|||
.user { |
|||
img { |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
@media (max-width: 992px) { |
|||
display: none; |
|||
} |
|||
} |
|||
.count { |
|||
position: absolute; |
|||
top: -10px; |
|||
right: -5px; |
|||
border-radius: 50%; |
|||
color: $white; |
|||
height: 15px; |
|||
width: 15px; |
|||
font-size: 12px; |
|||
background-color: #FF9800; |
|||
text-align: center; |
|||
} |
|||
.navbar { |
|||
|
|||
|
|||
.wrapper { |
|||
display: flex; |
|||
justify-content: start; |
|||
align-items: center; |
|||
width: 100%; |
|||
.logo { |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
a { |
|||
text-decoration: none; |
|||
color: $primary-color; |
|||
} |
|||
} |
|||
.hamburger { |
|||
display: none; |
|||
flex-direction: column; |
|||
gap: 5px; |
|||
cursor: pointer; |
|||
span { |
|||
width: 25px; |
|||
height: 3px; |
|||
background-color: $brand-dark; |
|||
transition: all 0.3s ease; |
|||
} |
|||
&.active span:nth-child(1) { |
|||
transform: translateY(8px) rotate(45deg); |
|||
} |
|||
&.active span:nth-child(2) { |
|||
opacity: 0; |
|||
} |
|||
&.active span:nth-child(3) { |
|||
transform: translateY(-8px) rotate(-45deg); |
|||
} |
|||
} |
|||
.nav-links { |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 50px; |
|||
justify-content: space-between; |
|||
gap: 40px; |
|||
width: -webkit-fill-available; |
|||
|
|||
// @media (max-width: 768px) { |
|||
// flex-direction: column; |
|||
// max-height:80vh !important; |
|||
// } |
|||
ul { |
|||
display: flex; |
|||
gap: 20px; |
|||
margin-bottom: 0; |
|||
border: 1px solid transparent; |
|||
border-left-color:#E6E8EC !important; |
|||
li { |
|||
list-style: none; |
|||
a { |
|||
text-decoration: none; |
|||
color: #777E90; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
&:hover { |
|||
color: $green-700 !important; |
|||
border-bottom: 1px solid $primary-color; |
|||
border-bottom-width: 2px; |
|||
transition: border 0.3s ease, transform 0.3s ease; |
|||
} |
|||
} |
|||
.active { |
|||
color: $green-700 !important; |
|||
border: 1px solid transparent; |
|||
border-bottom-color: $primary-color; |
|||
border-bottom-width: 2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
// Mobile Styles |
|||
@media (max-width: 768px) { |
|||
.hamburger { |
|||
display: flex !important; |
|||
} |
|||
.nav-links { |
|||
position: absolute; |
|||
top: 65px !important; |
|||
right: 0; |
|||
background-color: $background-color; |
|||
width: 100%; |
|||
max-height: 0; |
|||
overflow: hidden; |
|||
transition: max-height 0.3s ease-in-out; |
|||
ul { |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 20px 0; |
|||
li { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
&.active { |
|||
max-height: 200px; // Adjust based on menu content |
|||
} |
|||
} |
|||
} |
|||
.top-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 8px 16px; |
|||
background-color: #F2F2F2; |
|||
font-size: 14px; |
|||
|
|||
|
|||
.left-content, |
|||
.right-content { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.left-content{ |
|||
gap: 15px; |
|||
align-items: baseline; |
|||
img{ |
|||
margin-right: 5px; |
|||
} |
|||
a{ |
|||
color: #8A9CA7; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.right-content{ |
|||
display: flex; |
|||
justify-content: end; |
|||
} |
|||
|
|||
.righ_links{ |
|||
display: flex; |
|||
gap: 15px; |
|||
margin-right: 20px; |
|||
a{ |
|||
color: #8A9CA7; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.contact-info { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.offer-info { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.social-icons { |
|||
a { |
|||
margin-left: 15px; |
|||
display: inline-block; |
|||
|
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.bottom_bar{ |
|||
padding: 5px 0px; |
|||
background-color: #83C7A3 !important; |
|||
|
|||
.location{ |
|||
height: 100%; |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
|
|||
.location-switcher { |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: Arial, sans-serif; |
|||
position: relative; |
|||
width: max-content; |
|||
} |
|||
|
|||
.location-icon { |
|||
font-size: 16px; |
|||
color: #007BFF; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.location-dropdown { |
|||
appearance: none; |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
width: 100%; |
|||
padding: 5px 30px 5px 10px; |
|||
font-size: 14px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
background-color: transparent; |
|||
background-image: url('../../assets/icons/Options.svg') !important; |
|||
background-repeat: no-repeat; |
|||
background-position: right 10px center; |
|||
background-size: 18px; /* Adjust size as needed */ |
|||
cursor: pointer; |
|||
// overflow: ; |
|||
} |
|||
|
|||
.location-dropdown:focus { |
|||
outline: none; |
|||
border-color: #007BFF; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search_wrapper{ |
|||
height: 100%; |
|||
display: flex; |
|||
width: 100%; |
|||
border: none; |
|||
} |
|||
|
|||
.search-container { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
border: none !important; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.search-input { |
|||
flex: 1; |
|||
padding: 10px; |
|||
border: none; |
|||
border-top-left-radius: 10px; |
|||
border-bottom-left-radius: 10px; |
|||
|
|||
outline: none; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.search-button { |
|||
|
|||
background-color: #fff; |
|||
border-top-right-radius: 10px; |
|||
border-bottom-right-radius: 10px; |
|||
border: none; |
|||
padding: 9px 20px; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
transition: background-color 0.3s ease; |
|||
img{ |
|||
width: 20px; |
|||
} |
|||
} |
|||
|
|||
.search-button:hover { |
|||
background-color: #f4f4f4; |
|||
} |
|||
|
|||
|
|||
.popup-container{ |
|||
display: flex; |
|||
justify-content: end; |
|||
} |
|||
|
|||
/* Button Styles */ |
|||
.popup-button { |
|||
|
|||
background-color: transparent; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.popup-button:hover { |
|||
// background-color: #0056b3; |
|||
} |
|||
|
|||
/* Popup Styles */ |
|||
.popup { |
|||
display: none; |
|||
position: absolute; |
|||
top: 100%; /* Place below the button */ |
|||
left: 0; /* Align with the button */ |
|||
background-color: white; |
|||
border: 1px solid #ccc; |
|||
border-radius: 8px; |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
|||
padding: 15px; |
|||
z-index: 10; |
|||
width: 200px; |
|||
} |
|||
|
|||
.popup::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: -8px; /* Adjust to align arrow with popup */ |
|||
left: 20px; /* Adjust arrow position */ |
|||
border-width: 8px; |
|||
border-style: solid; |
|||
border-color: transparent transparent white transparent; |
|||
} |
|||
|
|||
/* Popup Action Button */ |
|||
.popup-action { |
|||
padding: 5px 10px; |
|||
background-color: #28a745; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.popup-action:hover { |
|||
background-color: #218838; |
|||
} |
@ -0,0 +1,6 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} |
@ -0,0 +1,6 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} |
@ -0,0 +1,146 @@ |
|||
.status { |
|||
padding: 100px 0px; |
|||
.stats_wrapp { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|||
gap: 50px; |
|||
@media (max-width:992px) { |
|||
gap: 15px; |
|||
} |
|||
} |
|||
.stat { |
|||
text-align: center; |
|||
width: 100%; |
|||
} |
|||
.type { |
|||
font-weight: 500; |
|||
position: relative; |
|||
padding-bottom: 25px; |
|||
color: var(--black-color); |
|||
&:after { |
|||
position: absolute; |
|||
content: ""; |
|||
width: 70px; |
|||
height: 2px; |
|||
background-color: var(--up-primary); |
|||
bottom: 10%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
p { |
|||
color: var(--brand-text); |
|||
} |
|||
.number { |
|||
font-size: 2.6rem; |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
.goals { |
|||
background-color: var(--up-bg-section); |
|||
padding: 100px 0px; |
|||
.wrapper { |
|||
.goals_text { |
|||
h4 { |
|||
color: var(--up-primary); |
|||
margin-bottom: 20px; |
|||
font-size: 30px; |
|||
} |
|||
.content { |
|||
padding-top: 20px; |
|||
h6 { |
|||
color: var(--up-primary); |
|||
padding-bottom: 15px; |
|||
} |
|||
p { |
|||
color: var(--white-color); |
|||
} |
|||
} |
|||
} |
|||
.goals_img { |
|||
max-width: 700px; |
|||
margin: auto; |
|||
@media (max-width:992px) { |
|||
margin-top: 40px; |
|||
} |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.our_team { |
|||
padding: 100px 0px; |
|||
@media (max-width:768px) { |
|||
padding-bottom: 50px; |
|||
} |
|||
.wrapper { |
|||
.team_wrapper { |
|||
.img_wrapper { |
|||
max-width: 450px; |
|||
position: relative; |
|||
margin-bottom: 20px; |
|||
img { |
|||
width: 100%; |
|||
border-radius: 8px; |
|||
} |
|||
ul { |
|||
display: flex; |
|||
justify-content: end; |
|||
width: 100%; |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 15px; |
|||
padding-left: 0; |
|||
li { |
|||
margin-right: 10px; |
|||
} |
|||
.icon { |
|||
fill: #D5BC93; |
|||
/* Initial color */ |
|||
transition: fill 0.3s ease; |
|||
/* Smooth transition */ |
|||
} |
|||
.icon:hover { |
|||
fill: white; |
|||
/* New color on hover */ |
|||
} |
|||
li { |
|||
a { |
|||
display: block; |
|||
border-radius: 50%; |
|||
padding: 8px; |
|||
border: 1px solid; |
|||
border-color: var(--up-primary); |
|||
height: 40px; |
|||
width: 40px; |
|||
display: flex; |
|||
&:hover { |
|||
background-color: var(--up-primary); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.subscribe { |
|||
padding-bottom: 100px; |
|||
@media (max-width:768px) { |
|||
padding-bottom: 50px; |
|||
} |
|||
.sub_content { |
|||
background-image: url(../../assets/banner/sub.png); |
|||
background-position: center; |
|||
background-size: cover; |
|||
text-align: center; |
|||
color: var(--white-color); |
|||
padding: 40px 20px; |
|||
border-radius: 15px; |
|||
h2 { |
|||
margin-bottom: 25px; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,50 @@ |
|||
.contact_form { |
|||
margin-top: 100px; |
|||
padding: 100px 0; |
|||
padding-bottom: 50px; |
|||
|
|||
.contact_left { |
|||
background-image: url(../../assets/contact/contact-bg.jpg); |
|||
background-position: center; |
|||
height: 500px; |
|||
background-size: cover; |
|||
|
|||
.wrapper { |
|||
background-color: rgba(0, 0, 0, 0.235); |
|||
color: var(--white-color); |
|||
padding: 100px 50px; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
h2 { |
|||
font-size: 48px; |
|||
padding-bottom: 15px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.contact-form { |
|||
background-color: var(--card-bg); |
|||
padding: 40px 30px; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.form-control { |
|||
border: none; |
|||
border-bottom: 1px solid #cccccc99; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
background-color: transparent; |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
.form-control:focus { |
|||
border-bottom-color: #c43710; |
|||
box-shadow: none; |
|||
} |
|||
} |
@ -0,0 +1,4 @@ |
|||
@import './home/home'; |
|||
@import './about'; |
|||
@import './contact'; |
|||
@import './portfoliio' |
@ -0,0 +1,162 @@ |
|||
.portfolio{ |
|||
padding: 100px 0; |
|||
|
|||
@media (max-width:768px) { |
|||
padding-bottom: 50px; |
|||
} |
|||
.wrapper{ |
|||
.portfolio_grid{ |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
|||
justify-content: center; |
|||
gap: 2rem; /* Equivalent to gap in flexbox */ |
|||
.portfolio_wrapper{ |
|||
.p_img_wrapper{ |
|||
position: relative; |
|||
max-width: auto; |
|||
margin-bottom: 15px; |
|||
img{ |
|||
width: 100%; |
|||
border-radius: 5px; |
|||
} |
|||
.badge{ |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 20px; |
|||
background-color: rgba(0, 0, 0, 0.169); |
|||
font-weight: 400; |
|||
text-transform: uppercase; |
|||
font-size: 12px; |
|||
padding: 7px 8px; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.p_content{ |
|||
padding-top: 15px; |
|||
span{ |
|||
font-size: 14px; |
|||
margin-bottom: 15px; |
|||
color: var(--brand-text); |
|||
} |
|||
|
|||
.main_content{ |
|||
border: 1px solid transparent; |
|||
border-bottom-color: var(--brand-grey) !important; |
|||
margin-bottom: 15px; |
|||
h4{ |
|||
font-size: 22px; |
|||
font-weight: 600; |
|||
color: var(--brand-heading); |
|||
margin-bottom: 15px; |
|||
} |
|||
p{ |
|||
font-size: 16px; |
|||
margin-bottom: 15px; |
|||
color: var(--brand-text); |
|||
} |
|||
} |
|||
.auth{ |
|||
font-size: 16px; |
|||
margin-bottom: 15px; |
|||
color: var(--brand-text); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
// Portfolio single style |
|||
|
|||
.portfolio_single{ |
|||
|
|||
.portfolio_wrapper{ |
|||
.p_img_wrapper{ |
|||
position: relative; |
|||
max-width: auto; |
|||
margin-bottom: 15px; |
|||
img{ |
|||
width: 100%; |
|||
border-radius: 5px; |
|||
} |
|||
.badge{ |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 20px; |
|||
background-color: rgba(0, 0, 0, 0.169); |
|||
font-weight: 400; |
|||
text-transform: uppercase; |
|||
font-size: 12px; |
|||
padding: 7px 8px; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.p_content{ |
|||
padding-top: 15px; |
|||
span{ |
|||
font-size: 14px; |
|||
margin-bottom: 15px; |
|||
color: var(--brand-text); |
|||
} |
|||
|
|||
.main_content{ |
|||
border: 1px solid transparent; |
|||
border-bottom-color: var(--brand-grey) !important; |
|||
margin-bottom: 15px; |
|||
h4{ |
|||
font-size: 22px; |
|||
font-weight: 600; |
|||
color: var(--brand-heading); |
|||
margin-bottom: 15px; |
|||
} |
|||
p{ |
|||
font-size: 16px; |
|||
margin-bottom: 15px; |
|||
color: var(--brand-text); |
|||
} |
|||
} |
|||
.auth{ |
|||
font-size: 16px; |
|||
margin-bottom: 15px; |
|||
color: var(--brand-text); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.project_info{ |
|||
padding-top: 40px; |
|||
.p_wrapp{ |
|||
margin-bottom: 30px; |
|||
.project_heading{ |
|||
font-size: 20px; |
|||
padding-bottom: 15px; |
|||
} |
|||
p{ |
|||
font-size: 16px; |
|||
color: var(--brand-text); |
|||
line-height: 2.0 |
|||
} |
|||
ul{ |
|||
padding-left: 0; |
|||
li{ |
|||
font-size: 16px; |
|||
color: var(--brand-text); |
|||
|
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
} |
@ -0,0 +1,27 @@ |
|||
.add_section{ |
|||
background-color: $white; |
|||
padding: 100px 0; |
|||
.add_img{ |
|||
max-width: 550px; |
|||
img{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
.add_info_wrapper{ |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.add_info{ |
|||
h2{ |
|||
font-size: 48px; |
|||
color: $secondary-color; |
|||
padding-bottom: 40px; |
|||
} |
|||
p{ |
|||
font-size: 16px; |
|||
color: $brand-dark; |
|||
line-height: 1.9; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,23 @@ |
|||
.categories_section { |
|||
padding-top: 50px; |
|||
padding-bottom: 100px; |
|||
|
|||
|
|||
.categories_wrapper { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); |
|||
gap: 15px; |
|||
.categories{ |
|||
text-align: center; |
|||
&:hover{ |
|||
cursor: pointer; |
|||
} |
|||
.img_wrapper{ |
|||
margin-bottom: 15px; |
|||
} |
|||
.type{ |
|||
color: $green-500; |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,37 @@ |
|||
.choose { |
|||
padding-top: 50px; |
|||
padding-bottom: 100px; |
|||
.choose_wrapper { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); |
|||
gap: 15px; |
|||
|
|||
.choose_content { |
|||
position: relative; |
|||
|
|||
.img_wrapper { |
|||
max-width: 450px |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.content { |
|||
position: absolute; |
|||
z-index: 3; |
|||
top: 30%; |
|||
left: 20px; |
|||
width: 50%; |
|||
p{ |
|||
color: $white; |
|||
font-size: 22px; |
|||
span{ |
|||
color: #FFAA2B; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,114 @@ |
|||
.exclusive { |
|||
padding-top: 50px; |
|||
padding-bottom: 100px; |
|||
|
|||
.wrapper { |
|||
|
|||
|
|||
#new_arrivals { |
|||
margin-top: 50px; |
|||
|
|||
.owl-nav, |
|||
.owl-dots { |
|||
|
|||
/* Ensure they are visible */ |
|||
} |
|||
|
|||
.owl-nav{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: -80px; |
|||
} |
|||
|
|||
.owl-nav button { |
|||
background: transparent; |
|||
color: rgb(236, 121, 39); |
|||
border: none; |
|||
border-radius: 50%; |
|||
width: 40px; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
margin: 0 5px; |
|||
} |
|||
|
|||
.owl-nav button:hover { |
|||
border: 1px solid #FFD596; |
|||
} |
|||
|
|||
.owl-dots { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
.owl-dots .owl-dot { |
|||
background: #ccc; |
|||
width: 12px; |
|||
height: 12px; |
|||
margin: 5px; |
|||
border-radius: 50%; |
|||
|
|||
} |
|||
|
|||
.owl-dots .owl-dot.active { |
|||
background: $orange; |
|||
} |
|||
} |
|||
|
|||
.exclusie_card { |
|||
background-color: $white !important; |
|||
.img_wrapper { |
|||
background-color: $white !important; |
|||
max-width: 450px; |
|||
border-top-left-radius: 15px; |
|||
border-top-right-radius: 15px; |
|||
|
|||
img { |
|||
width: 100%; |
|||
border-top-left-radius: 15px; |
|||
border-top-right-radius: 15px; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.card_bottom { |
|||
border: 1px solid $grey-500; |
|||
background-color: $white; |
|||
border-top-color: transparent !important; |
|||
border-bottom-left-radius: 15px; |
|||
border-bottom-right-radius: 15px; |
|||
padding: 25px 25px; |
|||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; |
|||
|
|||
.top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
h6 { |
|||
color: #000000; |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
p { |
|||
color: $secondary-color; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.right { |
|||
|
|||
.price { |
|||
border: 1px solid #FFD596; |
|||
border-radius: 8px; |
|||
padding: 10px 10px; |
|||
color: #B36A00; |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,8 @@ |
|||
@import 'categories'; |
|||
@import 'add'; |
|||
@import 'exclusive'; |
|||
@import 'service'; |
|||
@import 'choose_us'; |
|||
@import 'testimonial'; |
|||
@import 'subscribe'; |
|||
@import 'offer'; |
@ -0,0 +1,55 @@ |
|||
.offer{ |
|||
.wrapper{ |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); |
|||
gap: 0; |
|||
.offer_wrapper{ |
|||
position: relative; |
|||
.off{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background: #30506c4d; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: $white; |
|||
font-size: 3.5rem; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
} |
|||
.new_tag{ |
|||
position: absolute; |
|||
top: 10px; |
|||
right: 15px; |
|||
|
|||
background-color: #425466; |
|||
color: $white; |
|||
border-radius: 15px; |
|||
font-size: 14px; |
|||
padding: 1px 10px; |
|||
|
|||
} |
|||
.sale_tag{ |
|||
position: absolute; |
|||
top: 10px; |
|||
right: 20%; |
|||
color: $white; |
|||
border-radius: 15px; |
|||
font-size: 14px; |
|||
padding: 1px 10px; |
|||
background-color: #FFAA2B; |
|||
|
|||
} |
|||
|
|||
&:hover{ |
|||
.off{ |
|||
opacity: 1 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,25 @@ |
|||
.service{ |
|||
background-color: $white; |
|||
padding: 50px 0; |
|||
.service_wrapper{ |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); |
|||
justify-content: center; |
|||
gap: 2rem; |
|||
.grid-item{ |
|||
text-align: center; |
|||
padding: 20px 20px; |
|||
img{ |
|||
width: 50px; |
|||
margin-bottom: 20px; |
|||
} |
|||
h6{ |
|||
font-size: 22px; |
|||
} |
|||
p{ |
|||
font-size: 14px; |
|||
color: $blue-700; |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,29 @@ |
|||
|
|||
.subscribe{ |
|||
background-image: url(../../../assets/banner/sb-bg.png); |
|||
background-position: center; |
|||
background-size: cover; |
|||
p{ |
|||
font-size: 16px; |
|||
line-height: 1.9; |
|||
text-align: center; |
|||
padding-bottom: 20px; |
|||
} |
|||
.sb_wrapp{ |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 30px; |
|||
gap: 20px; |
|||
input{ |
|||
|
|||
padding: 15px; |
|||
border: 1px solid; |
|||
border-color: $grey-500; |
|||
border-radius: 8px; |
|||
background-color: transparent; |
|||
outline: none; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,137 @@ |
|||
|
|||
.testimonial{ |
|||
padding-top: 50px; |
|||
|
|||
padding-bottom: 80px; |
|||
position: relative; |
|||
|
|||
.testimonial_wrapp{ |
|||
background-color: $white; |
|||
border-radius: 15px; |
|||
padding: 20px 20px; |
|||
p{ |
|||
font-size: 16px; |
|||
color: #3B5266; |
|||
text-align: left; |
|||
padding-bottom: 20px; |
|||
line-height: 1.9; |
|||
margin-top: 20px; |
|||
|
|||
} |
|||
.bottom{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20px; |
|||
.user_icon{ |
|||
width: 50px; |
|||
height: 50px; |
|||
border-radius: 50%; |
|||
background-color: #F5F9FC; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
img{ |
|||
width: 25px; |
|||
} |
|||
} |
|||
.testimonial_user_info{ |
|||
h6{ |
|||
color: #304659; |
|||
font-weight: 500; |
|||
margin-bottom: 0px; |
|||
} |
|||
span{ |
|||
color: #555555; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.owl-nav{ |
|||
display: flex !important; |
|||
} |
|||
|
|||
.owl-nav{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: -80px; |
|||
} |
|||
|
|||
.owl-nav button { |
|||
background: transparent; |
|||
color: rgb(236, 121, 39); |
|||
border: none; |
|||
border-radius: 50%; |
|||
width: 40px; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
margin: 0 5px; |
|||
} |
|||
|
|||
.owl-nav button:hover { |
|||
border: 1px solid #FFD596; |
|||
} |
|||
|
|||
.owl-dots { |
|||
display: flex !important; |
|||
justify-content: center; |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
.owl-dots .owl-dot { |
|||
background: #ccc; |
|||
width: 12px; |
|||
height: 12px; |
|||
margin: 5px; |
|||
border-radius: 50%; |
|||
|
|||
} |
|||
|
|||
.owl-dots .owl-dot.active { |
|||
background: $orange; |
|||
} |
|||
} |
|||
|
|||
.icons img:nth-child(1) { /* First image */ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.icons img:nth-child(2) { /* Second image */ |
|||
position: absolute; |
|||
top: 0; |
|||
right: 5%; |
|||
} |
|||
|
|||
.icons img:nth-child(3) { /* Third image */ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 20%; |
|||
} |
|||
|
|||
|
|||
.icons img:nth-child(4) { /* Second image */ |
|||
position: absolute; |
|||
bottom: 10%; |
|||
left: -5px; |
|||
} |
|||
|
|||
.icons img:nth-child(5) { /* Third image */ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
|
|||
.icons img:nth-child(6) { /* Third image */ |
|||
position: absolute; |
|||
top: 0; |
|||
right: 30%; |
|||
} |
|||
|
|||
|
@ -0,0 +1,21 @@ |
|||
// Font |
|||
// @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); |
|||
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); |
|||
|
|||
|
|||
|
|||
// Global |
|||
|
|||
@import 'normalize'; |
|||
@import 'variables'; |
|||
|
|||
|
|||
@import 'pages/pages'; |
|||
|
|||
|
|||
|
|||
@import 'components/components'; |
|||
@import 'layouts/layouts'; |
|||
@import 'common'; |
|||
@import 'annimate'; |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 156 KiB |
After Width: | Height: | Size: 311 KiB |
After Width: | Height: | Size: 258 KiB |
After Width: | Height: | Size: 224 KiB |
After Width: | Height: | Size: 189 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 731 B |