@ -0,0 +1,46 @@ |
|||
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg |
|||
:target: https://www.gnu.org/licenses/agpl-3.0-standalone.html |
|||
:alt: License: AGPL-3 |
|||
|
|||
Theme Voltro |
|||
============ |
|||
* Attractive and modern eCommerce Website theme for Odoo 17 |
|||
|
|||
Configuration |
|||
============= |
|||
* No need of additional configuration. |
|||
|
|||
License |
|||
------- |
|||
Affero General Public License, Version 3 (AGPL-3). |
|||
(https://www.gnu.org/licenses/agpl-3.0.en.html) |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
Credits |
|||
======= |
|||
* Developer: (v17) 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 `Our Website <https://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: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
from . import controllers |
|||
from . import models |
@ -0,0 +1,98 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
{ |
|||
'name': "Theme Voltro", |
|||
'version': "17.0.1.0.0", |
|||
'category': 'Theme/Corporate', |
|||
'summary': 'Theme Voltro is an advanced eCommerce theme crafted for ' |
|||
'digital product marketplaces. It transforms your online ' |
|||
'store into a sophisticated, technology-focused platform' |
|||
' with a sleek dark mode interface and modern design.', |
|||
'description': 'Theme Voltro is an Advanced eCommerce Theme designed specifically' |
|||
' for Digital Product Marketplaces. This Theme transforms your ' |
|||
'online store into a sophisticated technology-focused platform ' |
|||
'with its sleek dark mode interface and modern aesthetics.', |
|||
'author': 'Cybrosys Techno Solutions', |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
'website': 'https://www.cybrosys.com', |
|||
'depends': ['website', 'mail', 'website_sale_wishlist', |
|||
'website_sale_comparison'], |
|||
'data': [ |
|||
'data/website_menus.xml', |
|||
'views/home.xml', |
|||
'views/header.xml', |
|||
'views/footer.xml', |
|||
'views/contact_us.xml', |
|||
'views/about.xml', |
|||
'views/shop.xml', |
|||
'views/product_template_views.xml', |
|||
'views/product_view_template.xml', |
|||
'views/snippets/banner.xml', |
|||
'views/snippets/product_categories.xml', |
|||
'views/snippets/offer.xml', |
|||
'views/snippets/arrivals.xml', |
|||
'views/snippets/launches.xml', |
|||
'views/snippets/brands.xml', |
|||
'views/snippets/contact_us.xml', |
|||
'views/snippets/sub_banner.xml', |
|||
'views/snippets/services.xml', |
|||
'views/snippets/about_story.xml', |
|||
'views/snippets/achievements.xml', |
|||
'views/snippets/about_team.xml', |
|||
], |
|||
'assets': { |
|||
'web.assets_frontend': [ |
|||
"/theme_voltro/static/src/js/owl.carousel.js", |
|||
"/theme_voltro/static/src/js/owl.carousel.min.js", |
|||
"/theme_voltro/static/src/js/product_tab.js", |
|||
"/theme_voltro/static/src/js/product_category.js", |
|||
"/theme_voltro/static/src/js/achievements_counter.js", |
|||
"/theme_voltro/static/src/js/zoom_image.js", |
|||
"/theme_voltro/static/src/xml/product_arrival_template.xml", |
|||
"/theme_voltro/static/src/js/brands.js", |
|||
"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js", |
|||
"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js", |
|||
"https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/EasePack.min.js", |
|||
"https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/CustomEase.min.js", |
|||
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css", |
|||
"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css", |
|||
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css", |
|||
"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css", |
|||
"https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/css/splide.min.css", |
|||
"https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/js/splide.min.js", |
|||
"https://cdn.jsdelivr.net/npm/drift-zoom/dist/Drift.min.js", |
|||
"https://cdn.jsdelivr.net/npm/drift-zoom/dist/drift-basic.min.css", |
|||
"/theme_voltro/static/src/js/thumbnail.carousel.js", |
|||
"/theme_voltro/static/src/js/home_banner.js", |
|||
"/theme_voltro/static/src/css/style.css", |
|||
], |
|||
}, |
|||
"images": [ |
|||
"static/description/banner.jpg", |
|||
"static/description/theme_screenshot.jpg", |
|||
], |
|||
"license": "AGPL-3", |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
@ -0,0 +1,24 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
from . import voltro |
|||
from . import custom_website_form |
|||
from . import product_snippets |
@ -0,0 +1,43 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
from odoo import http |
|||
from odoo.addons.website.controllers.form import WebsiteForm |
|||
|
|||
class CustomWebsiteForm(WebsiteForm): |
|||
""" |
|||
This class extends the WebsiteForm controller in Odoo to allow custom handling |
|||
of form submissions from the website. Specifically, it modifies form submissions |
|||
for the 'mail.mail' model to concatenate the 'name' and 'second_name' fields |
|||
into a single 'name' field before processing the form. |
|||
""" |
|||
@http.route('/website/form/<string:model_name>', type='http', |
|||
auth="public", methods=['POST'], website=True) |
|||
def website_form(self, model_name, **kwargs): |
|||
""" |
|||
If the model is 'mail.mail' and the fields 'name' and 'second_name' are |
|||
provided, it concatenates these two fields into the 'name' field. |
|||
""" |
|||
if model_name == 'mail.mail': |
|||
if 'name' in kwargs and 'second_name' in kwargs: |
|||
kwargs['name'] = f"{kwargs['name']} {kwargs['second_name']}" |
|||
kwargs.pop('second_name', None) |
|||
return super(CustomWebsiteForm, self).website_form(model_name, **kwargs) |
@ -0,0 +1,57 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
from odoo import http |
|||
from odoo.http import request |
|||
|
|||
|
|||
class WebsiteProduct(http.Controller): |
|||
@http.route('/get_product_arrivals', auth="public", type='json', website=True) |
|||
def get_product_arrivals(self): |
|||
"""Get the website arrival products for snippet""" |
|||
new_arrivals = request.env['product.template'].sudo().search_read( |
|||
[('website_published', '=', True)], |
|||
order='create_date desc', limit=4) |
|||
values = { |
|||
'new_arrivals': new_arrivals, |
|||
'symbol': request.env.user.company_id.currency_id.symbol |
|||
} |
|||
response = http.Response(template='theme_voltro.arrival_product_show', |
|||
qcontext=values) |
|||
return response.render() |
|||
|
|||
@http.route('/get_product_categories', auth="public", type='json', website=True) |
|||
def get_product_category(self): |
|||
"""Get the website arrival products for snippet""" |
|||
public_categ_id = request.env[ |
|||
'product.public.category'].sudo().search_read( |
|||
[('parent_id', '=', False)], fields=['name', 'image_1920','id']) |
|||
|
|||
values = { |
|||
'categories': public_categ_id, |
|||
} |
|||
response = http.Response(template='theme_voltro.product_categories_show', |
|||
qcontext=values) |
|||
return response.render() |
|||
|
|||
|
|||
|
|||
|
@ -0,0 +1,42 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
import logging |
|||
from odoo import http |
|||
from odoo.http import request |
|||
|
|||
_logger = logging.getLogger(__name__) |
|||
|
|||
class MenuController(http.Controller): |
|||
""" |
|||
Controller for handling redirections to various pages based on menu clicks. |
|||
|
|||
This class defines several routes that redirect users to different pages |
|||
in the website based on the menus clicked. Each method corresponds to a specific |
|||
page in the 'theme_voltro' theme. |
|||
|
|||
""" |
|||
|
|||
@http.route('/about', website=True, type='http', auth='public',csrf=False) |
|||
def home_page(self): |
|||
"""Redirect to the about page.""" |
|||
return request.render('theme_voltro.about_page') |
|||
|
@ -0,0 +1,12 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<odoo> |
|||
<data> |
|||
<!-- Menu for pages --> |
|||
<record id="menu_about" model="website.menu"> |
|||
<field name="name">About</field> |
|||
<field name="url">/about</field> |
|||
<field name="parent_id" ref="website.main_menu"/> |
|||
<field name="sequence" type="int">15</field> |
|||
</record> |
|||
</data> |
|||
</odoo> |
@ -0,0 +1,6 @@ |
|||
## Module <theme_voltro> |
|||
|
|||
#### 14.11.2024 |
|||
#### Version 17.0.1.0.0 |
|||
#### ADD |
|||
- Initial commit for Theme Voltro |
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
from . import product_template |
@ -0,0 +1,32 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
|||
# Author: Anfas Faisal K (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU AFFERO |
|||
# GENERAL PUBLIC LICENSE (AGPL 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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
|||
# (AGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
from odoo import models, fields |
|||
|
|||
class ProductTemplate(models.Model): |
|||
""" |
|||
Inherits the 'product.template' model to add a new field for product |
|||
highlights. |
|||
""" |
|||
_inherit = 'product.template' |
|||
|
|||
product_highlights = fields.Text(string="Product Highlights", |
|||
help="Key highlights or features of the product.") |
After Width: | Height: | Size: 431 KiB |
After Width: | Height: | Size: 135 KiB |
After Width: | Height: | Size: 327 KiB |
After Width: | Height: | Size: 192 KiB |
After Width: | Height: | Size: 138 KiB |
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 70 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 193 KiB |
After Width: | Height: | Size: 210 KiB |
After Width: | Height: | Size: 140 KiB |
After Width: | Height: | Size: 755 KiB |
After Width: | Height: | Size: 629 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 311 KiB |
After Width: | Height: | Size: 163 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 4.8 MiB |
After Width: | Height: | Size: 24 MiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 784 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 431 KiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 249 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 3.4 MiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 24 MiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 929 B |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 3.8 MiB |
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: 368 KiB |
After Width: | Height: | Size: 189 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 6.3 MiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 885 B |
@ -0,0 +1,547 @@ |
|||
<!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> |
|||
body { |
|||
font-family: "Montserrat", sans-serif; |
|||
background-color: #F9FAFB; |
|||
} |
|||
|
|||
.oe_styling_v8 { |
|||
font-family: "Open Sans", "Helvetica", Sans; |
|||
font-weight: 300; |
|||
color: #646464; |
|||
background: white; |
|||
font-size: 16px; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- overview --> |
|||
<div class="container my-5"> |
|||
|
|||
<!-- support-header --> |
|||
|
|||
<div class="oe_styling_v8"> |
|||
<span rel="stylesheet" |
|||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"></span> |
|||
|
|||
|
|||
|
|||
|
|||
<div class="position-relative py-3"> |
|||
<div class="position-absolute d-none d-lg-block"> |
|||
</div> |
|||
|
|||
|
|||
<div class=" pt-4 float-left w-100"> |
|||
|
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
|
|||
<div class="text-left logo-cybro"> |
|||
<a class="" href="#"> |
|||
|
|||
<img |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/logo-cybro.png?85f7616"> |
|||
|
|||
|
|||
</a> |
|||
|
|||
|
|||
</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> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<!--- Closed section-top-menu ---> |
|||
|
|||
|
|||
<div class=" pt-5 w-100 float-left"> |
|||
|
|||
<div class="text-center"> |
|||
|
|||
<img src="./img/Logo.png" style="width: 70%;" class="img-fluid"> |
|||
|
|||
</div> |
|||
<div class="text-center pt-5"> |
|||
<img src="./img/banner.jpg" style="width: 90%;" class="img-fluid"> |
|||
</div> |
|||
|
|||
<div class="text-center mt-5 pt-5"> |
|||
|
|||
<img style="width:90%" src="./img/voltro-theme-banner.svg"> |
|||
|
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="text-center pt-5"> |
|||
<img src="./img/voltro-banner.svg" style="width: 90%;" class="img-fluid"> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
<div class=" pt-5" > |
|||
<div class="p-5 mx-auto" style="background-color:#FFF8D8;border-radius: 24px;width: 90%;"> |
|||
<h2 class="p-4" style="font-size: 40px;font-weight: bold;color: #000;">Theme Components</h2> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12 overflow-hidden"> |
|||
<div class="p-5 text-white position-relative w-100" |
|||
style="overflow: hidden; background: rgb(30,30,30);background: linear-gradient(306deg, rgba(30,30,30,1) 0%, rgba(94,87,58,1) 100%);border-radius: 20px;border:4px solid #fff ;height:300px;"> |
|||
<h2>Featured Categories</h2> |
|||
<p>Explore our diverse collection of handpicked categories, each offering premium products tailored to your needs. Find the perfect match from our curated selections designed to deliver quality and satisfaction.⚡</p> |
|||
<div class="width:30% position-absolute right-0" style="right:0px;bottom:0px"> |
|||
<img src="./img/2.png" style="width: 450px;" alt="" |
|||
class="img-fluid"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6 mt-4"> |
|||
<div class="p-5 text-white position-relative w-100" |
|||
style="overflow: hidden; background: rgb(30,30,30);background: linear-gradient(306deg, rgba(30,30,30,1) 0%, rgba(94,87,58,1) 100%);border-radius: 20px;border:4px solid #fff ;"> |
|||
<h2>Discover Featured Products </h2> |
|||
<p>Explore our carefully curated selection of premium products designed to exceed your expectations. From cutting-edge technology to everyday essentials, find exactly what you need with unmatched quality and performance. |
|||
</p> |
|||
<div> |
|||
<img src="./img/3.png" alt="" |
|||
class="img-fluid"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6 mt-4"> |
|||
<div class="p-5 text-white position-relative w-100" |
|||
style="overflow: hidden; background: rgb(30,30,30);background: linear-gradient(306deg, rgba(30,30,30,1) 0%, rgba(94,87,58,1) 100%);border-radius: 20px;border:4px solid #fff ; height:100%;"> |
|||
<h2>NEW LAUNCHES </h2> |
|||
<p>Experience excellence with our newest arrivals. From cutting-edge designs to timeless classics, explore what's fresh in our collection.</p> |
|||
<div> |
|||
<img src="./img/4.png" alt="" |
|||
class="img-fluid"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12 overflow-hidden"> |
|||
<div class="p-5 text-white position-relative w-100" |
|||
style="overflow: hidden; background: rgb(30,30,30);background: linear-gradient(306deg, rgba(30,30,30,1) 0%, rgba(94,87,58,1) 100%);border-radius: 20px;border:4px solid #fff ;height:300px;"> |
|||
<h2>TRUSTED BRANDS </h2> |
|||
<p>Partnering with industry leaders to bring you quality and excellence. Explore our curated selection of renowned brands, each chosen to ensure your complete satisfaction.⚡</p> |
|||
<div class="width:30% position-absolute right-0" style="right:0px;bottom:0px"> |
|||
<img src="./img/5.png" style="width: 450px;" alt="" |
|||
class="img-fluid"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6 mt-4"> |
|||
<div class="p-5 text-white position-relative w-100" |
|||
style="overflow: hidden; background: rgb(30,30,30);background: linear-gradient(306deg, rgba(30,30,30,1) 0%, rgba(94,87,58,1) 100%);border-radius: 20px;border:4px solid #fff ;"> |
|||
<h2>Contact Our Team |
|||
</h2> |
|||
<p>Reach out through our dedicated support channels designed to provide you with prompt, professional assistance. Whether you prefer a direct call or written communication, our 24/7 team is ready to help with your inquiries, ensuring responsive and reliable support when you need it most.. |
|||
</p> |
|||
<div> |
|||
<img src="./img/13.png" alt="" |
|||
class="img-fluid"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6 mt-4"> |
|||
<div class="p-5 text-white position-relative w-100" |
|||
style="overflow: hidden; background: rgb(30,30,30);background: linear-gradient(306deg, rgba(30,30,30,1) 0%, rgba(94,87,58,1) 100%);border-radius: 20px;border:4px solid #fff ; height:100%;"> |
|||
<h2>MEET THE TEAM |
|||
</h2> |
|||
<p>Discover the dedicated professionals behind our success. Our diverse team of experts brings together years of industry experience and innovative thinking to deliver exceptional results for our clients. Get to know the individuals who make our vision a reality.</p> |
|||
<div> |
|||
<img src="./img/9.png" alt="" |
|||
class="img-fluid"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="text-center pt-5"> |
|||
<img src="./img/Frame (2).svg" style="width: 90%;" class="img-fluid"> |
|||
</div> |
|||
<div class="text-center pt-5"> |
|||
<img src="./img/about-us.svg" class="img-fluid"> |
|||
</div> |
|||
<div class="text-center "> |
|||
<img src="./img/product_page_s.svg" class="img-fluid"> |
|||
</div> |
|||
|
|||
<div class="text-center "> |
|||
<img src="./img/shop_page.svg" class="img-fluid"> |
|||
</div> |
|||
|
|||
<div class="text-center "> |
|||
<img src="./img/checl.svg" class="img-fluid"> |
|||
</div> |
|||
|
|||
<div class="text-center "> |
|||
<img src="./img/wish.svg" class="img-fluid"> |
|||
</div> |
|||
|
|||
<div class="mx-auto pt-5" style="width:90%"> |
|||
<div class=""> |
|||
|
|||
<div class="row "> |
|||
|
|||
<div class="col-lg-12"> |
|||
<h3 class="text-uppercase float-left font-weight-bold" |
|||
style="color:#4a1760; padding-top:80px; font-size:26px"> |
|||
Our Industries</h3> <br> |
|||
<div style="font-size:22px" class="text-left float-left w-100 pb-5 mb-4">Get |
|||
Insight in our odoo knowledge and our marked footprint |
|||
in industries |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/trading.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2"> Trading </h3> |
|||
<p style="font-size:20px">Easily procure and sell |
|||
your products</p> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/trading.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2"> E-commerce & Website |
|||
</h3> |
|||
<p style="font-size:20px">Mobile friendly, awe-inspiring |
|||
product pages</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/POS.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2"> POS</h3> |
|||
<p style="font-size:20px">Easy configuration and |
|||
convivial experience</p> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/Edu.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2">Education</h3> |
|||
<p style="font-size:20px">A platform for educational |
|||
management</p> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/Production.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2">Manufacturing</h3> |
|||
<p style="font-size:20px">Plan, track and schedule |
|||
your operations</p> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/Production.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2">Manufacturing</h3> |
|||
<p style="font-size:20px">Plan, track and schedule |
|||
your operations</p> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4 bg-white" style="border-radius:16px; height:232px"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/POS.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2">Service Management</h3> |
|||
<p style="font-size:20px">Keep track of services |
|||
and invoice</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4" |
|||
style="border-radius:16px; height:232px; background-color:#fff"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/Edu.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2">Restaurant</h3> |
|||
<p style="font-size:20px">Run your bar or restaurant |
|||
methodically</p> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="col-lg-4 mt-4"> |
|||
|
|||
<div class="w-100 float-left p-4" |
|||
style="border-radius:16px; height:232px; background-color:#fff"> |
|||
|
|||
<img class="w-25" |
|||
src="//apps.odoocdn.com/apps/assets/16.0/theme_coffee_shop/images/Production.png?85f7616"> |
|||
<h3 style="color:#522065; font-size:22px" class="pt-2">Hotel management</h3> |
|||
<p style="font-size:20px">An all-inclusive hotel |
|||
management application</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
|
|||
|
|||
<div class="my-5"> |
|||
<!-- banner card --> |
|||
|
|||
|
|||
|
|||
<!-- service-section --> |
|||
|
|||
<section id="services" class="mt-5" style="border-radius: 16px; |
|||
border: 1px solid #EBEEF2; |
|||
background-color: #FFF; |
|||
padding: 60px 40px; |
|||
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);"> |
|||
<div class="text-center mt-4"> |
|||
<h3 class="mb-0" style="color: #000; |
|||
text-align: center; |
|||
font-family: Montserrat; |
|||
font-size: 40px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: normal; |
|||
text-transform: uppercase; |
|||
padding-bottom: 50px;">Our Services</h3> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FA5A7D; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/gear.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;"> Odoo Customization</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FF947A; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/wrench-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;"> Odoo Implementation</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#3CD856; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/life-ring-icon.svg" class="img-responsive" height="28px" |
|||
width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Support</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#BF83FF; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/arrows-repeat.svg" class="img-responsive" height="28px" |
|||
width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Migration</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#01649C; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/puzzle-piece-icon.svg" class="img-responsive" height="28px" |
|||
width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo integration</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#69CC70; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/odoo-consultancy.svg" class="img-responsive" height="28px" |
|||
width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Consultancy</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#2E4556; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/odoo-licencing.svg" class="img-responsive" height="28px" |
|||
width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Licensing</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FCD12C; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/hire-odoo.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Hire Odoo Developer</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
</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: 564 KiB |
@ -0,0 +1,107 @@ |
|||
/* Your provided CSS with adjustments for #wrapper and #content */ |
|||
|
|||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap"); |
|||
|
|||
@font-face { |
|||
font-family: "wild_worldbold"; |
|||
src: url("https://assets.codepen.io/756881/wild_world-webfont.woff2") format("woff2"), |
|||
url("https://assets.codepen.io/756881/wild_world-webfont.woff") format("woff"); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
:root { |
|||
--fluid-min-width: 320; |
|||
--fluid-max-width: 1140; |
|||
--fluid-screen: 100vw; |
|||
--fluid-bp: calc( |
|||
(var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / |
|||
(var(--fluid-max-width) - var(--fluid-min-width)) |
|||
); |
|||
|
|||
--f-0-min: 18; |
|||
--f-0-max: 20; |
|||
--step-0: calc( |
|||
((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * |
|||
var(--fluid-bp) |
|||
); |
|||
|
|||
--f-1-min: 20; |
|||
--f-1-max: 24; |
|||
--step-1: calc( |
|||
((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * |
|||
var(--fluid-bp) |
|||
); |
|||
} |
|||
|
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body { |
|||
background-color: #c4c4c4; |
|||
font-family: "Open Sans", sans-serif; |
|||
color: white; |
|||
overscroll-behavior: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
font-weight: 300; |
|||
overflow-x: hidden; |
|||
font-size: var(--step-0); |
|||
} |
|||
|
|||
#wrapper { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#content { |
|||
overflow: visible; |
|||
width: 100%; |
|||
padding: 0 0.75rem; |
|||
} |
|||
|
|||
section { |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.spacer { |
|||
min-height: 50vh; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
min-height: 50vh; |
|||
} |
|||
|
|||
.heading { |
|||
position: absolute; |
|||
top: 50vh; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.heading p { |
|||
font-family: "wild_worldbold"; |
|||
font-size: 15.5vw; |
|||
font-size: clamp(12px, 15.5vw, 250px); |
|||
text-align: center; |
|||
line-height: 0.67; |
|||
margin: 0; |
|||
color: #111; |
|||
-webkit-text-stroke-width: 1.5px; |
|||
-webkit-text-stroke-color: white; |
|||
z-index: -10; |
|||
} |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1004 B |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 119 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 154 KiB |
After Width: | Height: | Size: 290 B |
After Width: | Height: | Size: 425 B |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 88 KiB |
After Width: | Height: | Size: 456 B |
After Width: | Height: | Size: 125 KiB |
After Width: | Height: | Size: 239 KiB |
After Width: | Height: | Size: 251 KiB |
After Width: | Height: | Size: 246 KiB |
After Width: | Height: | Size: 216 KiB |
After Width: | Height: | Size: 239 KiB |
After Width: | Height: | Size: 251 KiB |
After Width: | Height: | Size: 872 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 187 KiB |
After Width: | Height: | Size: 274 KiB |
After Width: | Height: | Size: 205 KiB |