Cybrosys Technologies
4 months ago
127 changed files with 13427 additions and 0 deletions
@ -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 Xtream Fashion |
||||
|
=================== |
||||
|
* Design eCommerce Website with Theme Xtream Fashion |
||||
|
|
||||
|
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 |
||||
|
* 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) 2024-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,69 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2024-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 Xtream Fashion', |
||||
|
'version': '18.0.1.0.0', |
||||
|
'category': 'Theme/eCommerce', |
||||
|
'description': 'Design eCommerce Website with Theme Xtream Fashion', |
||||
|
'summary': 'Theme Xtream Fashion', |
||||
|
'author': 'Cybrosys Techno Solutions', |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'website': "https://www.cybrosys.com", |
||||
|
'depends': ['base', 'website_sale_wishlist', 'website_mass_mailing'], |
||||
|
'data': [ |
||||
|
'security/ir.model.access.csv', |
||||
|
'views/xtream_testimonials_views.xml', |
||||
|
'views/contact_us_templates.xml', |
||||
|
'views/footer_templates.xml', |
||||
|
'views/shop_templates.xml', |
||||
|
'views/header_templates.xml', |
||||
|
'views/snippets/snippets_templates.xml', |
||||
|
'views/snippets/amazing.xml', |
||||
|
'views/snippets/new_arrivals.xml', |
||||
|
'views/snippets/discount.xml', |
||||
|
'views/snippets/main_banner.xml', |
||||
|
'views/snippets/main_product.xml', |
||||
|
'views/snippets/testimonial.xml', |
||||
|
], |
||||
|
'assets': { |
||||
|
'web.assets_frontend': [ |
||||
|
'/theme_xtream/static/src/css/animate.min.css', |
||||
|
'/theme_xtream/static/src/css/owl.carousel.min.css', |
||||
|
'/theme_xtream/static/src/css/owl.theme.default.min.css', |
||||
|
'/theme_xtream/static/src/css/style.css', |
||||
|
'/theme_xtream/static/src/js/owl.carousel.js', |
||||
|
'/theme_xtream/static/src/js/owl.carousel.min.js', |
||||
|
'/theme_xtream/static/src/js/new_arrivals.js', |
||||
|
'/theme_xtream/static/src/js/testimonials.js', |
||||
|
'/theme_xtream/static/src/js/custom.js', |
||||
|
] |
||||
|
}, |
||||
|
'images': [ |
||||
|
'static/description/banner.jpg', |
||||
|
'static/description/theme_screenshot.jpg', |
||||
|
], |
||||
|
'license': 'LGPL-3', |
||||
|
'installable': True, |
||||
|
'application': False, |
||||
|
'auto_install': False, |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2024-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_xtream |
||||
@ -0,0 +1,74 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2024-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): |
||||
|
""" This controller method returns a JSON object that lists |
||||
|
products newly arrived products. |
||||
|
:return: a JSON object containing newly arrived products |
||||
|
:rtype: dict """ |
||||
|
@http.route('/get_arrival_product', auth="public", type='json') |
||||
|
def get_arrival_product(self): |
||||
|
""" |
||||
|
This return products based on last created and limits to 6 |
||||
|
""" |
||||
|
return http.Response(template='theme_xtream.new_arrivals_dynamic', |
||||
|
qcontext={'product_ids': request.env[ |
||||
|
'product.template'].sudo().search( |
||||
|
[('website_published', '=', True)], |
||||
|
order='create_date desc', limit=6)}).render() |
||||
|
|
||||
|
@http.route('/get_testimonials', auth="public", type="json") |
||||
|
def get_testimonials(self): |
||||
|
""" |
||||
|
This will return testimonials from backend. |
||||
|
""" |
||||
|
return http.Response(template='theme_xtream.testimonial', |
||||
|
qcontext={'testimonials': request.env[ |
||||
|
'xtream.testimonials'].sudo( |
||||
|
).search([])}).render() |
||||
|
|
||||
|
@http.route('/subscribe_newsletter', auth='public', type='json') |
||||
|
def subscribe_newsletter(self, **kw): |
||||
|
""" |
||||
|
To save email to newsletter mail list |
||||
|
""" |
||||
|
if request.env['mailing.contact'].sudo().search([ |
||||
|
("email", "=", kw.get("email")), |
||||
|
("list_ids", "in", [ |
||||
|
request.env.ref('mass_mailing.mailing_list_data').id])]): |
||||
|
return False |
||||
|
if request.env.user._is_public(): |
||||
|
visitor_sudo = (request.env['website.visitor'].sudo() |
||||
|
._get_visitor_from_request()) |
||||
|
|
||||
|
name = visitor_sudo.display_name if visitor_sudo else "Website Visitor" |
||||
|
else: |
||||
|
name = request.env.user.partner_id.name |
||||
|
request.env['mailing.contact'].sudo().create({ |
||||
|
"name": name, |
||||
|
"email": kw.get('email'), |
||||
|
"list_ids": [request.env.ref('mass_mailing.mailing_list_data').id] |
||||
|
}) |
||||
|
return True |
||||
@ -0,0 +1,7 @@ |
|||||
|
## Module <theme_xtream> |
||||
|
|
||||
|
#### 11.11.2024 |
||||
|
#### Version 17.0.1.0.0 |
||||
|
#### ADD |
||||
|
|
||||
|
- Initial commit for Theme Xtream Fashion |
||||
@ -0,0 +1,22 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2024-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 xtream_testimonials |
||||
@ -0,0 +1,38 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2024-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 XtreamTestimonials(models.Model): |
||||
|
""" |
||||
|
Model for testimonials |
||||
|
""" |
||||
|
_name = 'xtream.testimonials' |
||||
|
_description = "Xtream Testimonials" |
||||
|
|
||||
|
partner_id = fields.Many2one("res.partner", required=True, |
||||
|
help="Select the customer providing the" |
||||
|
"testimony", |
||||
|
domain="[('is_company', '=', False)]") |
||||
|
testimony = fields.Text(string="Testimony", required=True, |
||||
|
help="Enter the testimonial provided by the" |
||||
|
"customer") |
||||
|
|
After Width: | Height: | Size: 280 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 299 KiB |
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 382 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 249 KiB |
|
After Width: | Height: | Size: 337 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 280 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 302 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 314 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 383 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 607 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 258 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 885 B |
@ -0,0 +1,732 @@ |
|||||
|
<!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: #F5C000;; |
||||
|
--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-5 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:#875A7B !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
||||
|
Enterprise |
||||
|
</div> |
||||
|
<div class="text-center" style="background-color:#7C7BAD !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
||||
|
Odoo.sh |
||||
|
</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; border:1px solid #714b67; color:#714b67 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
||||
|
<i class="fa fa-check" style="color:green"></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 fa-check" style="color:green"></i> On Premise |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- --> |
||||
|
|
||||
|
<!-- banner-section --> |
||||
|
<div class="my-5"> |
||||
|
<div class=""> |
||||
|
<img src="./img/banner.jpg" class="img-fluid" style="border-radius: 16px; width:100%;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- --> |
||||
|
|
||||
|
|
||||
|
<!-- widgets-features --> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<!--feature section --> |
||||
|
|
||||
|
<div class="my-5" style="padding: 100px; background-color: #f1f5fd; 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> |
||||
|
|
||||
|
<p style="color: #999; |
||||
|
text-align: center; |
||||
|
font-size: 15.625px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 25.6px;">info includes 300+ elements that you may need to create website without |
||||
|
external plugins.</p> |
||||
|
</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: 12px; |
||||
|
padding: 35px 30px;"> |
||||
|
<div class="content"> |
||||
|
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
||||
|
<h4 class="mt-3"><a href="#" style=" color: var(--text-color); |
||||
|
font-size: 24px; |
||||
|
text-decoration: none; |
||||
|
font-weight: 700; |
||||
|
line-height: 1.2;">Custom Designed Snippets for better user experience</a></h4> |
||||
|
|
||||
|
<p>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: 12px; |
||||
|
padding: 35px 30px;"> |
||||
|
<div class="content"> |
||||
|
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
||||
|
<h4 class="mt-3"><a href="#" style=" color: var(--text-color); |
||||
|
font-size: 24px; |
||||
|
text-decoration: none; |
||||
|
font-weight: 700; |
||||
|
line-height: 1.2;">Hot Sales, New Arrivals, and Deal of the Week</a></h4> |
||||
|
|
||||
|
<p>Includes sections for featured sales, new arrivals, and weekly deals</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-4 col-md-6" > |
||||
|
<div style="background-color: #fff;height: 100%; |
||||
|
border-radius: 12px; |
||||
|
padding: 35px 30px;"> |
||||
|
<div class="content"> |
||||
|
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
||||
|
<h4 class="mt-3"><a href="#" style=" color: var(--text-color); |
||||
|
font-size: 24px; |
||||
|
text-decoration: none; |
||||
|
font-weight: 700; |
||||
|
line-height: 1.2;">Clean Layout and New Font Style</a></h4> |
||||
|
|
||||
|
<p>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: 12px; |
||||
|
padding: 35px 30px;"> |
||||
|
<div class="content"> |
||||
|
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
||||
|
<h4 class="mt-3"><a href="#" style=" color: var(--text-color); |
||||
|
font-size: 24px; |
||||
|
text-decoration: none; |
||||
|
font-weight: 700; |
||||
|
line-height: 1.2;"> Customized Shop View and Product Display</a></h4> |
||||
|
|
||||
|
<p>Custom categories view, product display, shop view, cart, blog, contact us page, and more.</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-4 col-md-6"> |
||||
|
<div style="background-color: #fff;height: 100%; |
||||
|
border-radius: 12px; |
||||
|
padding: 35px 30px;"> |
||||
|
<div class="content"> |
||||
|
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
||||
|
<h4 class="mt-3"><a href="#" style=" color: var(--text-color); |
||||
|
font-size: 24px; |
||||
|
text-decoration: none; |
||||
|
font-weight: 700; |
||||
|
line-height: 1.2;">Fully Responsive Theme with Premium Design.</a></h4> |
||||
|
|
||||
|
<p>Ensures a premium, responsive design across all devices</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- --> |
||||
|
|
||||
|
<!--sections --> |
||||
|
|
||||
|
<section class="my-5"> |
||||
|
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px;"> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Mobile View</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">Optimized for mobile devices, this theme ensures a sleek and stylish appearance, providing an enhanced browsing experience for users on smartphones and tablets. |
||||
|
|
||||
|
</p> |
||||
|
|
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/phone-screenshots.jpg" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Destop View</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">Effortlessly create visually appealing webpages with drag-and-drop building blocks. The desktop interface is designed for a streamlined user experience, allowing you to craft stunning layouts quickly.</p> |
||||
|
|
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/laptop-screenshots.jpg" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
|
||||
|
<!--row-2 --> |
||||
|
|
||||
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;"> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Shop Page</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">The shop view is tailored for an engaging shopping experience. Easily showcase products with customizable layouts, offering a seamless and visually appealing interface for customers.</p> |
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/1.jpg" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Cart View</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">A user-friendly and clean cart view enhances the checkout process. Shoppers can review their selected items with ease, making adjustments or proceeding to purchase without hassle.</p> |
||||
|
|
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/6.png" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
|
||||
|
<!--row-3 --> |
||||
|
|
||||
|
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 20px;"> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Overview</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">The overview section offers a snapshot of the entire eCommerce platform, featuring user-friendly customization options to tailor the theme to specific business needs</p> |
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/3.jpg" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">New Arrivals</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">Showcase the latest products effortlessly with a dedicated 'New Arrivals' section, designed to keep customers updated with the newest items in your store.</p> |
||||
|
|
||||
|
</div> |
||||
|
<div class=" mt-5" style="--aspect-ratioapt: 872/443;"> |
||||
|
<img src="./img/4.png" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;"> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Testimonial</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">Display customer reviews and testimonials elegantly, enhancing credibility and providing potential buyers with valuable insights from other shoppers |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/5.png" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
<div> |
||||
|
<div style="border-radius: 10px; padding: 32px; |
||||
|
background: rgba(48, 48, 48, 1); |
||||
|
-webkit-backdrop-filter: blur(5px); |
||||
|
backdrop-filter: blur(5px); height: 100%;"> |
||||
|
<div class="info"> |
||||
|
<span class="label" style="font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
background: -o-linear-gradient(359deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background: linear-gradient(91deg, #ff9c8d 0%, #d655a5 46.64%, #6053cb 92.32%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
margin-bottom: 13px; |
||||
|
text-transform: uppercase;">HIGHLIGHT</span> |
||||
|
<h3 class="text-white" style=" color: #fff; |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 32px; |
||||
|
margin-bottom: 9px;">Checkout Address</h3> |
||||
|
<p class="des" style="color: #c7c7c7; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 0;">A clean and simple checkout address form that enhances the user experience, reducing friction during the final purchase steps.</p> |
||||
|
|
||||
|
</div> |
||||
|
<div class="mt-5"> |
||||
|
<img src="./img/6.png" alt="Grid item" class="img-fluid"> |
||||
|
</div> |
||||
|
<a href="#" target="_blank" class="url_link" name="grid_popup" aria-label="Url link label"><span></span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<!-- --> |
||||
|
</section> |
||||
|
|
||||
|
<!-- section content --> |
||||
|
|
||||
|
|
||||
|
<!-- 2 --> |
||||
|
|
||||
|
<section class="" style="background: linear-gradient(to top, rgb(253 254 255), #E5EEFF); border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;"> |
||||
|
<div class="row d-flex align-items-center"> |
||||
|
<div class="col col-12 col-md-12 col-lg-6"> |
||||
|
<div> |
||||
|
<div> |
||||
|
<img class="img-fluid" src="./img/3.jpg" style=" |
||||
|
border-radius: 20px; |
||||
|
"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col col-12 col-md-12 col-lg-6"> |
||||
|
<div style="padding: 20px;"> |
||||
|
<h4 class="" style="font-size: 46px;"> |
||||
|
<span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
font-weight: 700; |
||||
|
display: inline-block; |
||||
|
width: 100%;"><span class="under-line">Fully Responsive </span></span><br> |
||||
|
<span class="gradient" style="background: linear-gradient(248.96deg, #FF9C8D 45.28%, #D655A5 65.79%, #6053CB 85.87%); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
font-weight: 700; |
||||
|
display: inline-block; |
||||
|
width: 100%;">Layout</span> |
||||
|
</h4> |
||||
|
|
||||
|
<div class="mt-4"> |
||||
|
<p style="color: #444;">Now take advantage of everything your dashboard has to offer even on the go. Our design are now fully responsive, enabling you to view and manage everything from the comfort of your mobile device.</p> |
||||
|
<ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4"> |
||||
|
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" style="width: 24px;"><span style=" color: #444; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 32px;">Fully responsive</span></li> |
||||
|
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" style="width: 24px;"><span style=" color: #444; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 32px;">Fits perfectly to all screen sizes</span></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- --> |
||||
|
|
||||
|
<!-- --> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="my-5"> |
||||
|
<!-- banner card --> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!-- service-section --> |
||||
|
|
||||
|
<section id="services" class="mt-5" style="border-radius: 16px; |
||||
|
border: 1px solid #EBEEF2; |
||||
|
background: var(--Neutral-N0, #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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
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; gap: 16px; 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 style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Hire Odoo Developer</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
</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: 738 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@ |
|||||
|
/** |
||||
|
* Owl Carousel v2.3.4 |
||||
|
* Copyright 2013-2018 David Deutsch |
||||
|
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
||||
|
*/ |
||||
|
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display: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} |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 308 KiB |
|
After Width: | Height: | Size: 275 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 300 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 159 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,87 @@ |
|||||
|
/** @odoo-module */ |
||||
|
import PublicWidget from "@web/legacy/js/public/public_widget" |
||||
|
import { _t } from "@web/core/l10n/translation"; |
||||
|
import { rpc } from "@web/core/network/rpc"; |
||||
|
|
||||
|
export const customXtream = PublicWidget.Widget.extend({ |
||||
|
selector: "#wrapwrap", |
||||
|
events: { |
||||
|
'click .input-group-append': 'onClickSubscribe', |
||||
|
}, |
||||
|
// Startup functions
|
||||
|
start() { |
||||
|
$('.qtyplus').click(function (e) { |
||||
|
// Stop acting like a button
|
||||
|
e.preventDefault(); |
||||
|
// Get the field name
|
||||
|
fieldName = $(this).attr('field'); |
||||
|
// Get its current value
|
||||
|
var currentVal = parseInt($('input[name=' + fieldName + ']').val()); |
||||
|
// If is not undefined
|
||||
|
if (!isNaN(currentVal)) { |
||||
|
// Increment
|
||||
|
$('input[name=' + fieldName + ']').val(currentVal + 1); |
||||
|
} else { |
||||
|
// Otherwise put a 0 there
|
||||
|
$('input[name=' + fieldName + ']').val(0); |
||||
|
} |
||||
|
}); |
||||
|
// This button will decrement the value till 0
|
||||
|
$(".qtyminus").click(function (e) { |
||||
|
// Stop acting like a button
|
||||
|
e.preventDefault(); |
||||
|
// Get the field name
|
||||
|
fieldName = $(this).attr('field'); |
||||
|
// Get its current value
|
||||
|
var currentVal = parseInt($('input[name=' + fieldName + ']').val()); |
||||
|
// If it isn't undefined or its greater than 0
|
||||
|
if (!isNaN(currentVal) && currentVal > 0) { |
||||
|
// Decrement one
|
||||
|
$('input[name=' + fieldName + ']').val(currentVal - 1); |
||||
|
} else { |
||||
|
// Otherwise put a 0 there
|
||||
|
$('input[name=' + fieldName + ']').val(0); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
counter() { |
||||
|
var buttons = $('.owl-dots button'); |
||||
|
buttons.each(function (item) { |
||||
|
}); |
||||
|
}, |
||||
|
async onClickSubscribe(ev) { |
||||
|
var $button = $(ev.currentTarget).find('span') |
||||
|
var $input = $(ev.currentTarget.parentElement).find('input') |
||||
|
if (this.emailCheck($input.val())) { |
||||
|
if ($button.text() === "SUBSCRIBE") { |
||||
|
await rpc('/subscribe_newsletter', { |
||||
|
email: $input.val() |
||||
|
}).then(function (data) { |
||||
|
if (data) { |
||||
|
$(ev.currentTarget.parentElement.parentElement).find( |
||||
|
'.warning').hide() |
||||
|
$input.css('pointer-events', 'none') |
||||
|
$button.css('background-color', 'green') |
||||
|
$button.text("THANKS") |
||||
|
} else { |
||||
|
$(ev.currentTarget.parentElement.parentElement).find( |
||||
|
'.warning').text("Already subscribed to the newsletter.") |
||||
|
$(ev.currentTarget.parentElement.parentElement).find( |
||||
|
'.warning').show() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
$(ev.currentTarget.parentElement.parentElement).find( |
||||
|
'.warning').text("Enter a valid email.") |
||||
|
$(ev.currentTarget.parentElement.parentElement).find( |
||||
|
'.warning').show() |
||||
|
} |
||||
|
}, |
||||
|
emailCheck(str) { |
||||
|
const specialChars = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; |
||||
|
return specialChars.test(str) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
PublicWidget.registry.customXtream = customXtream |
||||
@ -0,0 +1,22 @@ |
|||||
|
/** @odoo-module **/ |
||||
|
import { rpc } from "@web/core/network/rpc"; |
||||
|
import Animation from "@website/js/content/snippets.animation"; |
||||
|
/** |
||||
|
* Defines an animation class for the arrivals element in the HTML document. |
||||
|
* Sends an AJAX request to the /get_arrival_product URL using the ajax.jsonRpc |
||||
|
* method, and calls the 'call' method on the server-side. If the request is successful, |
||||
|
* @extends Animation.Class |
||||
|
*/ |
||||
|
|
||||
|
Animation.registry.arrival_product = Animation.Class.extend({ |
||||
|
selector : '.arrivals', |
||||
|
start: function(){ |
||||
|
var self = this; |
||||
|
return rpc('/get_arrival_product', { |
||||
|
}).then(function (data) { |
||||
|
if(data){ |
||||
|
self.$target.empty().append(data); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,41 @@ |
|||||
|
/** @odoo-module **/ |
||||
|
import { rpc } from "@web/core/network/rpc"; |
||||
|
import Animation from "@website/js/content/snippets.animation"; |
||||
|
/** |
||||
|
* Defines an animation class for the arrivals element in the HTML document. |
||||
|
* Sends an AJAX request to the /get_testimonials URL using the ajax.jsonRpc |
||||
|
* method, and calls the 'call' method on the server-side. If the request is successful, |
||||
|
* @extends Animation.Class |
||||
|
*/ |
||||
|
|
||||
|
Animation.registry.testimonial_xtream = Animation.Class.extend({ |
||||
|
selector : '.testimonial_xtream', |
||||
|
|
||||
|
start: function(){ |
||||
|
var self = this; |
||||
|
return rpc('/get_testimonials', { |
||||
|
}).then(function (data) { |
||||
|
if(data){ |
||||
|
self.$target.empty().append(data); |
||||
|
} |
||||
|
self.$target.find('#slider2').owlCarousel( |
||||
|
{ |
||||
|
items: 1, |
||||
|
loop: true, |
||||
|
smartSpeed: 450, |
||||
|
autoplay: true, |
||||
|
autoPlaySpeed: 1000, |
||||
|
autoPlayTimeout: 1000, |
||||
|
autoplayHoverPause: true, |
||||
|
onInitialized: self.counter, |
||||
|
dots: true, |
||||
|
} |
||||
|
); |
||||
|
}); |
||||
|
}, |
||||
|
counter() { |
||||
|
var buttons = $('.owl-dots button'); |
||||
|
buttons.each(function (item) { |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,25 @@ |
|||||
|
*:focus { |
||||
|
outline: 0 !important; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
*button:focus { |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
*{ |
||||
|
list-style-type:none; |
||||
|
|
||||
|
font-family: $font-default; |
||||
|
font-size: 14px; |
||||
|
&:focus,&:active{ |
||||
|
outline: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
*:hover{ |
||||
|
-webkit-transition: 0.5s; |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,352 @@ |
|||||
|
/*! 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,60 @@ |
|||||
|
//font |
||||
|
$font-default:'Poppins', sans-serif; |
||||
|
$font-offer: 'Roboto', sans-serif; |
||||
|
|
||||
|
|
||||
|
//colors |
||||
|
|
||||
|
|
||||
|
$color-brand: #031B09; |
||||
|
$color-brand2: #5FED83; |
||||
|
$color-black:#000000; |
||||
|
$color-white:#fff; |
||||
|
$color-font:#9f9f9f; |
||||
|
$color-font2:#9f9f9f; |
||||
|
$color-grey:#b8b8b8; |
||||
|
$color-green:#28a745; |
||||
|
$color-button:#0069d9; |
||||
|
$color-footer:#121725; |
||||
|
$color-grey:#6c6a74; |
||||
|
$color-hover:#e9c939; |
||||
|
$color-border:#dedede; |
||||
|
$color-transp:#3a3a3ab3; |
||||
|
$color-h-bg:#f4f2f8; |
||||
|
|
||||
|
$select-border-color: #ccc; |
||||
|
$select-focus-color: green; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// $color-brand: #1b1b1b; |
||||
|
// $color-black:#000000; |
||||
|
// $color-white:#fff; |
||||
|
// $color-font:#797979; |
||||
|
// $color-font2:#535353; |
||||
|
// $color-green:#44a038; |
||||
|
$color-bg:#f7f7f7; |
||||
|
// $color-footer:#121725; |
||||
|
// $color-grey:#6c6a74; |
||||
|
// $color-hover:#e95a5a; |
||||
|
// $color-border:#c3c1cc; |
||||
|
|
||||
|
//font-size |
||||
|
|
||||
|
|
||||
|
$font-h1:36px; |
||||
|
$font-h2: 18px; |
||||
|
$font-h3:36px; |
||||
|
$font-h4: 25px; |
||||
|
$font-h5:36px; |
||||
|
$font-h6: 18px; |
||||
|
$font-size-banner:60px; |
||||
|
$font-heading:46px; |
||||
|
$font-sub-heading:28px; |
||||
|
$font-text:14px; |
||||
@ -0,0 +1,498 @@ |
|||||
|
.banner_main{ |
||||
|
|
||||
|
|
||||
|
// .single-item{ |
||||
|
|
||||
|
// } |
||||
|
|
||||
|
.banner_bg{ |
||||
|
background-image: linear-gradient(#11111191, #11111191),url(./../img/bg-img/bg-1.jpg); |
||||
|
justify-content: center; |
||||
|
height: 100vh; |
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
height: 70vh; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.card{ |
||||
|
background: transparent; |
||||
|
padding-top: 175px; |
||||
|
padding-bottom: 100px; |
||||
|
border: none !important; |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:600px) { |
||||
|
padding-left: 40px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top:100px; |
||||
|
} |
||||
|
.card-title{ |
||||
|
color:$color-white; |
||||
|
font-size:7vw; |
||||
|
font-weight: bold; |
||||
|
padding-bottom: 20px; |
||||
|
|
||||
|
} |
||||
|
.card-text{ |
||||
|
color:$color-white; |
||||
|
font-weight: 700; |
||||
|
font-size:15px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.banner_bg2{ |
||||
|
background-image: linear-gradient(#11111191, #11111191),url(./../img/bg-img/bg-2.jpg); |
||||
|
justify-content: center; |
||||
|
|
||||
|
height: 100vh; |
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
height: 70vh; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.card{ |
||||
|
background: transparent; |
||||
|
padding-top: 175px; |
||||
|
padding-bottom: 100px; |
||||
|
border: none !important; |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:600px) { |
||||
|
padding-left: 40px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top:100px; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.card-title{ |
||||
|
color:$color-white; |
||||
|
font-size:7vw; |
||||
|
font-weight: bold; |
||||
|
padding-bottom: 20px; |
||||
|
|
||||
|
} |
||||
|
.card-text{ |
||||
|
color:$color-white; |
||||
|
font-weight: 700; |
||||
|
font-size:15px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.banner_bg3{ |
||||
|
|
||||
|
background-image: linear-gradient(#11111191, #11111191),url(./../img/bg-img/bg-4.jpg); |
||||
|
justify-content: center; |
||||
|
|
||||
|
height: 100vh; |
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
height: 70vh; |
||||
|
} |
||||
|
|
||||
|
.card{ |
||||
|
background: transparent; |
||||
|
padding-top: 175px; |
||||
|
padding-bottom: 100px; |
||||
|
border: none !important; |
||||
|
animation-name: fadeInOut; |
||||
|
animation-delay: 1s; |
||||
|
animation-duration: 3s; |
||||
|
|
||||
|
|
||||
|
@media screen and(max-width:600px) { |
||||
|
padding-left: 40px; |
||||
|
} |
||||
|
|
||||
|
@media screen and(max-width:768px) { |
||||
|
padding-top:50px; |
||||
|
padding-bottom: 100px; |
||||
|
} |
||||
|
.card-title{ |
||||
|
color:$color-white; |
||||
|
font-size:5vw; |
||||
|
font-weight: bold; |
||||
|
padding-bottom: 20px; |
||||
|
text-transform: uppercase; |
||||
|
|
||||
|
} |
||||
|
.card-text{ |
||||
|
color:$color-white; |
||||
|
padding-bottom: 30px; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.breadcrumb{ |
||||
|
background: transparent; |
||||
|
padding-top: 110px; |
||||
|
padding-bottom: 110px; |
||||
|
|
||||
|
.breadcrumb-item{ |
||||
|
color: $color-hover; |
||||
|
|
||||
|
&:first-child{ |
||||
|
&::before{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&::before{ |
||||
|
|
||||
|
display: inline-block; |
||||
|
padding-right: 1.5rem; |
||||
|
color: #fff; |
||||
|
content: "/"; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
a{ |
||||
|
color: $color-white; |
||||
|
text-decoration: none; |
||||
|
&:hover{ |
||||
|
color:$color-hover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.banner_bg4{ |
||||
|
background-image: url(./../images/banner/home.jpg); |
||||
|
justify-content: center; |
||||
|
max-width: 1400px; |
||||
|
margin: auto; |
||||
|
|
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
margin-top: 134px; |
||||
|
|
||||
|
|
||||
|
.breadcrumb{ |
||||
|
background: transparent; |
||||
|
padding-top: 110px; |
||||
|
padding-bottom: 110px; |
||||
|
|
||||
|
.breadcrumb-item{ |
||||
|
color: $color-hover; |
||||
|
|
||||
|
&:first-child{ |
||||
|
&::before{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&::before{ |
||||
|
|
||||
|
display: inline-block; |
||||
|
padding-right: 1.5rem; |
||||
|
color: #fff; |
||||
|
content: "/"; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
a{ |
||||
|
color: $color-white; |
||||
|
text-decoration: none; |
||||
|
&:hover{ |
||||
|
color:$color-hover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.owl-carousel button.owl-dot span { |
||||
|
height: 10px; |
||||
|
width: 10px; |
||||
|
color: $color-white; |
||||
|
background-color: $color-white; |
||||
|
border-radius: 50%; |
||||
|
display: block; |
||||
|
font-weight: 700; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
.owl-carousel button.owl-dot.active span{ |
||||
|
background-color: $color-brand2; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.owl-carousel{ |
||||
|
|
||||
|
.owl-dots{ |
||||
|
position: absolute; |
||||
|
bottom:250px; |
||||
|
left: 40px; |
||||
|
transform: rotate(89deg); |
||||
|
background-color: transparent; |
||||
|
|
||||
|
@media screen and(max-width:1150px){ |
||||
|
left: 0 !important; |
||||
|
|
||||
|
} |
||||
|
@media screen and(max-width:768px) { |
||||
|
|
||||
|
} |
||||
|
@media screen and(max-width:600px) { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.slideInDown { |
||||
|
-webkit-animation-name: slideInDown; |
||||
|
animation-name: slideInDown; |
||||
|
-webkit-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
@-webkit-keyframes slideInDown { |
||||
|
0% { |
||||
|
-webkit-transform: translateY(-100%); |
||||
|
transform: translateY(-100%); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: translateY(0); |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@keyframes slideInDown { |
||||
|
0% { |
||||
|
-webkit-transform: translateY(-100%); |
||||
|
transform: translateY(-100%); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: translateY(0); |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.tada { |
||||
|
-webkit-animation-name: tada; |
||||
|
animation-name: tada; |
||||
|
-webkit-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
@-webkit-keyframes tada { |
||||
|
0% { |
||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||
|
transform: scale3d(1, 1, 1); |
||||
|
} |
||||
|
10%, 20% { |
||||
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); |
||||
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); |
||||
|
} |
||||
|
30%, 50%, 70%, 90% { |
||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); |
||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); |
||||
|
} |
||||
|
40%, 60%, 80% { |
||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); |
||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||
|
transform: scale3d(1, 1, 1); |
||||
|
} |
||||
|
} |
||||
|
@keyframes tada { |
||||
|
0% { |
||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||
|
transform: scale3d(1, 1, 1); |
||||
|
} |
||||
|
10%, 20% { |
||||
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); |
||||
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); |
||||
|
} |
||||
|
30%, 50%, 70%, 90% { |
||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); |
||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); |
||||
|
} |
||||
|
40%, 60%, 80% { |
||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); |
||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||
|
transform: scale3d(1, 1, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.slideInUp { |
||||
|
-webkit-animation-name: slideInUp; |
||||
|
animation-name: slideInUp; |
||||
|
-webkit-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
@-webkit-keyframes slideInUp { |
||||
|
0% { |
||||
|
-webkit-transform: translateY(100%); |
||||
|
transform: translateY(100%); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: translateY(0); |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@keyframes slideInUp { |
||||
|
0% { |
||||
|
-webkit-transform: translateY(100%); |
||||
|
transform: translateY(100%); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: translateY(0); |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.slideInLeft { |
||||
|
-webkit-animation-name: slideInLeft; |
||||
|
animation-name: slideInLeft; |
||||
|
-webkit-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
@-webkit-keyframes slideInLeft { |
||||
|
0% { |
||||
|
-webkit-transform: translateX(-100%); |
||||
|
transform: translateX(-100%); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: translateX(0); |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
} |
||||
|
@keyframes slideInLeft { |
||||
|
0% { |
||||
|
-webkit-transform: translateX(-100%); |
||||
|
transform: translateX(-100%); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: translateX(0); |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.fadeInDownBig { |
||||
|
-webkit-animation-name: fadeInDownBig; |
||||
|
animation-name: fadeInDownBig; |
||||
|
-webkit-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
@-webkit-keyframes fadeInDownBig { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translate3d(0, -2000px, 0); |
||||
|
transform: translate3d(0, -2000px, 0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: none; |
||||
|
transform: none; |
||||
|
} |
||||
|
} |
||||
|
@keyframes fadeInDownBig { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translate3d(0, -2000px, 0); |
||||
|
transform: translate3d(0, -2000px, 0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: none; |
||||
|
transform: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.fadeInLeftBig { |
||||
|
-webkit-animation-name: fadeInLeftBig; |
||||
|
animation-name: fadeInLeftBig; |
||||
|
-webkit-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
@-webkit-keyframes fadeInLeftBig { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
|
transform: translate3d(-2000px, 0, 0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: none; |
||||
|
transform: none; |
||||
|
} |
||||
|
} |
||||
|
@keyframes fadeInLeftBig { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
|
transform: translate3d(-2000px, 0, 0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: none; |
||||
|
transform: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,168 @@ |
|||||
|
.btn { |
||||
|
border: none !important; |
||||
|
outline: 0 !important; |
||||
|
-webkit-transition: 0.5s; |
||||
|
transition: 0.5s; |
||||
|
box-shadow: none !important; |
||||
|
font-weight: 400; |
||||
|
&-primary { |
||||
|
background-color: transparent !important; |
||||
|
border-color: $color-white; |
||||
|
padding: 12px 36px; |
||||
|
color: #fff !important; |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
border-radius:0; |
||||
|
border:3px solid !important; |
||||
|
&:hover { |
||||
|
|
||||
|
border-color: $color-brand2 !important; |
||||
|
color: $color-white !important; |
||||
|
background: $color-brand2 !important; |
||||
|
} |
||||
|
} |
||||
|
&:focus, |
||||
|
&.focus { |
||||
|
outline: 0; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&-cart { |
||||
|
background-color:$color-brand !important; |
||||
|
margin-right: 5px; |
||||
|
padding: 2px 9px; |
||||
|
color: #fff !important; |
||||
|
font-size: 13px; |
||||
|
border-radius: 0 !important; |
||||
|
border: none; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&-checkout { |
||||
|
background-color:$color-brand2 !important; |
||||
|
padding: 2px 9px; |
||||
|
color: #fff !important; |
||||
|
font-size: 13px; |
||||
|
border-radius: 0 !important; |
||||
|
border: none; |
||||
|
} |
||||
|
&-details { |
||||
|
background-color:transparent!important; |
||||
|
padding: 2px 9px; |
||||
|
color: #fff !important; |
||||
|
font-size: 13px; |
||||
|
border-radius: 0 !important; |
||||
|
border: 1px solid !important; |
||||
|
border-color:$color-white !important; |
||||
|
border-radius: 50% !important; |
||||
|
} |
||||
|
&-checkout_m { |
||||
|
background-color:$color-brand2 !important; |
||||
|
text-decoration: none !important; |
||||
|
padding: 7px 12px; |
||||
|
color: #fff !important; |
||||
|
font-size: 13px; |
||||
|
border-radius: 0 !important; |
||||
|
border: none; |
||||
|
|
||||
|
} |
||||
|
&-cart_p { |
||||
|
background-color:$color-brand2 !important; |
||||
|
color: #fff !important; |
||||
|
font-size: 13px; |
||||
|
border-radius: 0 !important; |
||||
|
border: none; |
||||
|
padding: 13px 40px; |
||||
|
margin-left: 33px; |
||||
|
} |
||||
|
&-shopping { |
||||
|
background-color:transparent !important; |
||||
|
color: $color-brand !important; |
||||
|
font-size: 20px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
padding: 8px 15px; |
||||
|
|
||||
|
font-size: 2vw; |
||||
|
} |
||||
|
font-weight: 700; |
||||
|
border-radius: 0 !important; |
||||
|
border: 2px solid !important; |
||||
|
border-color: $color-brand !important; |
||||
|
padding: 13px 40px; |
||||
|
margin-left: 33px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&-clear { |
||||
|
background-color:transparent !important; |
||||
|
color: $color-font !important; |
||||
|
font-size: 20px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
padding: 8px 15px; |
||||
|
margin-bottom: 10px; |
||||
|
font-size: 2vw; |
||||
|
} |
||||
|
font-weight: 700; |
||||
|
border-radius: 0 !important; |
||||
|
border: 2px solid !important; |
||||
|
border-color: $color-border !important; |
||||
|
padding: 13px 40px; |
||||
|
margin-left: 33px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&-update { |
||||
|
background-color:$color-h-bg !important; |
||||
|
color: $color-font !important; |
||||
|
font-size: 20px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
padding: 8px 15px; |
||||
|
|
||||
|
font-size: 2vw; |
||||
|
} |
||||
|
font-weight: 700; |
||||
|
border-radius: 0 !important; |
||||
|
border: 2px solid !important; |
||||
|
border-color: $color-h-bg !important; |
||||
|
padding: 13px 40px; |
||||
|
margin-left: 33px; |
||||
|
} |
||||
|
|
||||
|
&-checkout_c{ |
||||
|
text-transform: uppercase; |
||||
|
background-color:$color-brand2 !important; |
||||
|
text-decoration: none !important; |
||||
|
width: 100%; |
||||
|
height: 60px; |
||||
|
color: #fff !important; |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
border-radius: 0 !important; |
||||
|
border: none; |
||||
|
line-height: 50px; |
||||
|
height: 60px; |
||||
|
&:hover{ |
||||
|
background-color: $color-brand !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&-contact{ |
||||
|
margin-top: 30px; |
||||
|
text-transform: uppercase; |
||||
|
background-color:$color-brand2 !important; |
||||
|
text-decoration: none !important; |
||||
|
width: 100%; |
||||
|
height: 60px; |
||||
|
color: #fff !important; |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
border-radius: 0 !important; |
||||
|
border: none; |
||||
|
line-height: 50px; |
||||
|
height: 60px; |
||||
|
&:hover{ |
||||
|
background-color: $color-brand !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
@import './banner'; |
||||
|
@import './button'; |
||||
|
@import './product'; |
||||
@ -0,0 +1,304 @@ |
|||||
|
.product{ |
||||
|
margin-top: 90px; |
||||
|
.main { |
||||
|
padding-top: 30px; |
||||
|
margin: auto; |
||||
|
h2{ |
||||
|
text-align: center; |
||||
|
font-size: 60px; |
||||
|
font-weight: 700; |
||||
|
color: $color-brand; |
||||
|
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: 50px 0; |
||||
|
.img_zoom{ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.wrapper{ |
||||
|
max-width: 330px; |
||||
|
position: relative; |
||||
|
&:hover{ |
||||
|
.img_details{ |
||||
|
position: absolute; |
||||
|
left: 44%; |
||||
|
display: block; |
||||
|
bottom: 45%; |
||||
|
z-index: 3; |
||||
|
@media screen and(max-width:992px){ |
||||
|
left: 35%; |
||||
|
bottom: 43%; |
||||
|
} |
||||
|
@media screen and(max-width:992px){ |
||||
|
left: 44%; |
||||
|
bottom: 43%; |
||||
|
} |
||||
|
i{ |
||||
|
font-size: 25px; |
||||
|
color: $color-white; |
||||
|
padding: 4px 2px; |
||||
|
|
||||
|
@media screen and(max-width:992px){ |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
&:after{ |
||||
|
position: absolute; |
||||
|
content: " "; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background:#00000054 !important |
||||
|
} |
||||
|
} |
||||
|
&:before{ |
||||
|
position: absolute; |
||||
|
content: " "; |
||||
|
display: block; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
} |
||||
|
@media screen and(max-width:576px){ |
||||
|
max-width: none; |
||||
|
} |
||||
|
.img_details{ |
||||
|
display: none; |
||||
|
} |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
p{ |
||||
|
color: $color-font; |
||||
|
font-size: 25px; |
||||
|
font-weight: lighter; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
h6{ |
||||
|
color: $color-brand; |
||||
|
line-height: 1.5; |
||||
|
font-weight: 400; |
||||
|
font-size: 15px; |
||||
|
letter-spacing: 1px; |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
a{ |
||||
|
font-size: 13px; |
||||
|
font-weight: 700; |
||||
|
color: $color-brand2; |
||||
|
text-decoration: none; |
||||
|
&:hover{ |
||||
|
color: $color-brand; |
||||
|
} |
||||
|
} |
||||
|
#zoomIn{ |
||||
|
transform: scale(1); |
||||
|
transition: .3s ease-in-out; |
||||
|
&:hover{ |
||||
|
transform: scale(1.3); |
||||
|
border-radius: 6px 6px 0px 0px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
/* 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-font; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.btn:hover { |
||||
|
background-color: #ddd; |
||||
|
} |
||||
|
.btn.active { |
||||
|
color: $color-brand; |
||||
|
} |
||||
|
} |
||||
|
.modal-content { |
||||
|
position: relative; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
pointer-events: auto; |
||||
|
background-color: #fff; |
||||
|
background-clip: padding-box; |
||||
|
border: 1px solid rgba(0,0,0,.2); |
||||
|
border-radius: 0; |
||||
|
outline: 0; |
||||
|
margin: auto; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin: auto; |
||||
|
max-width: 65%; |
||||
|
} |
||||
|
@media screen and(max-width:576px) { |
||||
|
margin: auto; |
||||
|
max-width: 80%; |
||||
|
} |
||||
|
} |
||||
|
.modal-dialog { |
||||
|
max-width: 660px; |
||||
|
margin: 1.75rem auto; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin: 50px 50px; |
||||
|
} |
||||
|
} |
||||
|
.modal{ |
||||
|
.model-body{ |
||||
|
padding: 20px 25px; |
||||
|
} |
||||
|
.wrapper{ |
||||
|
max-width: 100% !important; |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
.model_details{ |
||||
|
h4{ |
||||
|
color: $color-brand; |
||||
|
font-size: 22px; |
||||
|
font-weight: 700; |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
.model_rate{ |
||||
|
ul{ |
||||
|
padding-left: 0; |
||||
|
display: flex; |
||||
|
span{ |
||||
|
color:#ffcd07; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.price{ |
||||
|
color: $color-brand; |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
span{ |
||||
|
margin-left: 5px; |
||||
|
font-weight: 700; |
||||
|
font-size: 16; |
||||
|
color: $color-grey; |
||||
|
text-decoration: line-through; |
||||
|
} |
||||
|
} |
||||
|
p{ |
||||
|
color: $color-brand; |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
a{ |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.product_count{ |
||||
|
margin-top: 30px; |
||||
|
display: flex; |
||||
|
@media screen and(max-width:412px) { |
||||
|
display: grid !important; |
||||
|
grid-row-gap: 20px !important; |
||||
|
} |
||||
|
#myform { |
||||
|
margin-right:10px ; |
||||
|
text-align: center; |
||||
|
// padding: 5px; |
||||
|
// border: 1px solid #ccc; |
||||
|
display: flex; |
||||
|
// margin: 2%; |
||||
|
// border-radius: 9px; |
||||
|
width: 100px; |
||||
|
} |
||||
|
.qty { |
||||
|
width: 40px; |
||||
|
height: 25px; |
||||
|
text-align: center; |
||||
|
border: none; |
||||
|
} |
||||
|
input.qtyplus { width:25px; height:25px; |
||||
|
background-color: transparent; |
||||
|
border: none; |
||||
|
} |
||||
|
input.qtyminus { width:25px; height:25px; |
||||
|
background-color: transparent; |
||||
|
border: none; |
||||
|
} |
||||
|
.icons{ |
||||
|
margin-left: 15px; |
||||
|
span{ |
||||
|
background: $color-brand2; |
||||
|
color: $color-white; |
||||
|
font-size: 16px; |
||||
|
padding: 9px 10px; |
||||
|
&:hover{ |
||||
|
background-color: $color-black; |
||||
|
} |
||||
|
&:last-child{ |
||||
|
background-color: #00bcd4 !important; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.share{ |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
.footer_icon{ |
||||
|
padding-top: 5px; |
||||
|
a{ |
||||
|
color: $color-font; |
||||
|
margin-right: 15px; |
||||
|
&:hover{ |
||||
|
color:$color-black; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,155 @@ |
|||||
|
.card-footer { |
||||
|
margin-top: 90px; |
||||
|
.footer_content { |
||||
|
padding: 50px 0; |
||||
|
.wrapper_head { |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
.made_by { |
||||
|
color: $color-font; |
||||
|
margin-top: 20px; |
||||
|
line-height: 2; |
||||
|
span { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
color: $color-black; |
||||
|
&:hover { |
||||
|
color: $color-brand; |
||||
|
} |
||||
|
} |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.heading { |
||||
|
color: $color-brand; |
||||
|
font-size: 30px; |
||||
|
font-weight: 700; |
||||
|
letter-spacing: 12px; |
||||
|
&::first-letter { |
||||
|
color: $color-brand2; |
||||
|
} |
||||
|
hr { |
||||
|
background: $color-font; |
||||
|
margin: 3px 7px; |
||||
|
padding-right: 5px; |
||||
|
} |
||||
|
p { |
||||
|
color: $color-font; |
||||
|
font-weight: normal; |
||||
|
text-align: center; |
||||
|
@media screen and(max-width:768px) { |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
} |
||||
|
.footer_links { |
||||
|
@media screen and(max-width:992px) { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
ul { |
||||
|
padding-left: 0; |
||||
|
li { |
||||
|
padding: 5px 0; |
||||
|
display: block; |
||||
|
margin-bottom: 15px; |
||||
|
// &:last-child { |
||||
|
// } |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
color: $color-brand; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.scale-up-ver-center { |
||||
|
&:hover { |
||||
|
animation: scale-up-ver-center 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
||||
|
} |
||||
|
} |
||||
|
@keyframes scale-up-ver-center { |
||||
|
0% { |
||||
|
transform: scaleY(0.4); |
||||
|
} |
||||
|
100% { |
||||
|
transform: scaleY(1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.subscribe { |
||||
|
@media screen and(max-width:992px) { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
h4 { |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
color: $color-brand; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
.input-group { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
border-radius: 0; |
||||
|
margin-top: 70px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
.form-control { |
||||
|
border-radius: 0; |
||||
|
height: 50px; |
||||
|
} |
||||
|
.input-group-text { |
||||
|
border-radius: 0; |
||||
|
background-color: $color-brand; |
||||
|
padding: 0 20px; |
||||
|
color: $color-white; |
||||
|
border: 1px solid; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.footer_icon { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 30px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
a { |
||||
|
color: $color-black; |
||||
|
margin-right: 15px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
&:hover { |
||||
|
color: $color-font; |
||||
|
} |
||||
|
span { |
||||
|
font-size: 35px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.form-control:focus { |
||||
|
color: #495057; |
||||
|
background-color: #fff; |
||||
|
border-color: $color-brand2; |
||||
|
outline: 0; |
||||
|
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
@import './navigation'; |
||||
|
@import './footer'; |
||||
|
@import './sidebar'; |
||||
@ -0,0 +1,336 @@ |
|||||
|
.top_nav { |
||||
|
margin: 25px 0; |
||||
|
.wrapper { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 20px; |
||||
|
align-items: center; |
||||
|
@media screen and(max-width:572px) { |
||||
|
display: block; |
||||
|
} |
||||
|
.nav_center { |
||||
|
margin: auto; |
||||
|
@media screen and(max-width:992px) { |
||||
|
margin: 0; |
||||
|
} |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
.heading { |
||||
|
color: $color-brand; |
||||
|
font-size: 30px; |
||||
|
font-weight: 700; |
||||
|
@media screen and(max-width:572px) { |
||||
|
text-align: center; |
||||
|
} |
||||
|
@media screen and(max-width:768px) { |
||||
|
font-size: 3vw; |
||||
|
} |
||||
|
letter-spacing: 12px; |
||||
|
&::first-letter { |
||||
|
color: $color-brand2; |
||||
|
} |
||||
|
hr { |
||||
|
background: $color-font; |
||||
|
margin: 3px 7px; |
||||
|
padding-right: 5px; |
||||
|
} |
||||
|
p { |
||||
|
color: $color-font; |
||||
|
font-weight: normal; |
||||
|
text-align: center; |
||||
|
@media screen and(max-width:572px) { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.nav_right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
@media screen and(max-width:572px) { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.bag { |
||||
|
position: relative; |
||||
|
span { |
||||
|
color: $color-white; |
||||
|
background-color: $color-brand2; |
||||
|
height: 20px; |
||||
|
width: 20px; |
||||
|
font-size: 13px; |
||||
|
position: absolute; |
||||
|
left: -8px; |
||||
|
top: 12px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
.dropdown { |
||||
|
i { |
||||
|
font-size: 20px; |
||||
|
padding-right: 7px; |
||||
|
} |
||||
|
.d_image { |
||||
|
display: block; |
||||
|
max-width: 40px; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
.dropdown-menu { |
||||
|
padding: 30px 20px; |
||||
|
.nav_product { |
||||
|
color: $color-black; |
||||
|
margin-top: 10px; |
||||
|
span { |
||||
|
color: $color-brand; |
||||
|
} |
||||
|
} |
||||
|
.drop_buttons { |
||||
|
margin-top: 10px; |
||||
|
span { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.side_b { |
||||
|
background-color: $color-brand; |
||||
|
color: $color-white; |
||||
|
border-radius: 50%; |
||||
|
padding-top: 5px; |
||||
|
font-size: 30px; |
||||
|
cursor: pointer; |
||||
|
height: 55px; |
||||
|
display: block; |
||||
|
width: 55px; |
||||
|
padding-left: 14px; |
||||
|
@media screen and(max-width:768px) { |
||||
|
background-color: $color-brand; |
||||
|
color: $color-white; |
||||
|
border-radius: 50%; |
||||
|
padding-top: 6px !important; |
||||
|
font-size: 15px !important; |
||||
|
cursor: pointer; |
||||
|
height: 35px; |
||||
|
display: block; |
||||
|
width: 35px; |
||||
|
padding-left: 11px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.navigation { |
||||
|
padding: 35px 0 50px 0px; |
||||
|
.help-line { |
||||
|
background-color: $color-brand2; |
||||
|
width: auto; |
||||
|
height: 35px; |
||||
|
padding: 0 30px; |
||||
|
display: block; |
||||
|
line-height: 35px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
a { |
||||
|
color: $color-white; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
&:hover { |
||||
|
background-color: $color-brand; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.navbar-dark { |
||||
|
padding: 20px 0; |
||||
|
@media screen and(max-width:768px) { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr; |
||||
|
grid-row-gap: 30px; |
||||
|
} |
||||
|
.navbar-toggler { |
||||
|
border: 2px solid; |
||||
|
border-color: $color-brand2; |
||||
|
background-color: $color-brand2; |
||||
|
border-radius: 0; |
||||
|
.navbar-toggler-icon { |
||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); |
||||
|
} |
||||
|
} |
||||
|
.navbar-brand { |
||||
|
@media screen and(max-width:768px) { |
||||
|
margin: auto; |
||||
|
} |
||||
|
.footer_icon { |
||||
|
position: relative; |
||||
|
.link_top { |
||||
|
color: $color-white; |
||||
|
background: $color-brand2; |
||||
|
font-size: 11px; |
||||
|
padding: 5px 12px; |
||||
|
font-weight: 700; |
||||
|
position: absolute; |
||||
|
top: -43px; |
||||
|
left: 9px; |
||||
|
&:after { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
content: ""; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 0 9px 9px 9px; |
||||
|
border-color: transparent transparent #7bf098 transparent; |
||||
|
bottom: -2px; |
||||
|
left: -6px; |
||||
|
-webkit-transform: rotate(-45deg); |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
a { |
||||
|
color: $color-black; |
||||
|
margin-right: 15px; |
||||
|
&:hover { |
||||
|
color: $color-font; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.navbar-nav { |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
.link_top { |
||||
|
color: $color-white; |
||||
|
background: $color-brand2; |
||||
|
font-size: 11px; |
||||
|
padding: 5px 15px; |
||||
|
font-weight: 700; |
||||
|
position: absolute; |
||||
|
top: -29px; |
||||
|
left: 221px; |
||||
|
&:after { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
content: ""; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 0 9px 9px 9px; |
||||
|
border-color: transparent transparent #7bf098 transparent; |
||||
|
bottom: -2px; |
||||
|
left: -6px; |
||||
|
-webkit-transform: rotate(-45deg); |
||||
|
transform: rotate(-45deg); |
||||
|
// bottom: -1px; |
||||
|
// left: -6px; |
||||
|
// transform: rotate(-36deg); |
||||
|
} |
||||
|
} |
||||
|
.nav-item { |
||||
|
.dropdown-menu { |
||||
|
@media screen and(max-width:992px) { |
||||
|
text-align: center; |
||||
|
} |
||||
|
.dropdown-item { |
||||
|
padding: 10px 10px; |
||||
|
&:hover { |
||||
|
color: $color-brand; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.nav-link { |
||||
|
color: $color-black; |
||||
|
padding-right: 15px; |
||||
|
padding-left: 15px; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
font-size: 14px; |
||||
|
font-weight: 700; |
||||
|
text-transform: uppercase; |
||||
|
@media screen and(max-width:992px) { |
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.navbar-nav .nav-item.active .nav-link { |
||||
|
color: $color-brand !important; |
||||
|
} |
||||
|
.navbar-dark .navbar-nav .nav-link:focus, |
||||
|
.navbar-dark .navbar-nav .nav-link:hover { |
||||
|
color: $color-font !important; |
||||
|
} |
||||
|
/* ============ desktop view ============ */ |
||||
|
@media all and (min-width: 992px) { |
||||
|
.navbar .nav-item .dropdown-menu { |
||||
|
display: none; |
||||
|
} |
||||
|
.navbar .nav-item:hover .nav-link { |
||||
|
color: #181818; |
||||
|
} |
||||
|
.navbar .nav-item:hover .dropdown-menu { |
||||
|
display: block; |
||||
|
border: none; |
||||
|
} |
||||
|
.navbar .nav-item .dropdown-menu { |
||||
|
margin-top: 0; |
||||
|
padding: 20px 10px; |
||||
|
} |
||||
|
} |
||||
|
/* ============ desktop view .end// ============ */ |
||||
|
#arrow { |
||||
|
position: relative; |
||||
|
top: 0; |
||||
|
transition: top ease 0.5s; |
||||
|
} |
||||
|
#arrow:hover { |
||||
|
top: -5px; |
||||
|
} |
||||
|
.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:active { |
||||
|
background-color: $color-brand2; |
||||
|
color: $color-white; |
||||
|
} |
||||
|
.sidenav { |
||||
|
height: 100%; |
||||
|
width: 0; |
||||
|
position: fixed; |
||||
|
z-index: 4; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background-color: $color-white; |
||||
|
overflow-x: hidden; |
||||
|
transition: 0.5s; |
||||
|
padding-top: 60px; |
||||
|
} |
||||
|
.sidenav a { |
||||
|
padding: 8px 8px 8px 32px; |
||||
|
text-decoration: none; |
||||
|
font-size: 25px; |
||||
|
color: $color-brand; |
||||
|
display: block; |
||||
|
transition: 0.3s; |
||||
|
} |
||||
|
.sidenav a:hover { |
||||
|
color: $color-brand2; |
||||
|
} |
||||
|
.sidenav .closebtn { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 25px; |
||||
|
font-size: 36px; |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
#main { |
||||
|
transition: margin-left 0.5s; |
||||
|
padding: 16px; |
||||
|
} |
||||
|
@media screen and (max-height: 450px) { |
||||
|
.sidenav { |
||||
|
padding-top: 15px; |
||||
|
} |
||||
|
.sidenav a { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue