Novexa — Multipurpose HTML Template

Thank you for purchasing Novexa. This documentation covers everything needed to install, customize and extend the template — no build tools or frameworks required.

2. Features

• 22 fully-built pages, including 6 industry-specific homepages
• Built with HTML5, CSS3, vanilla JavaScript and Bootstrap 5
• Centralized CSS variables for one-file rebranding
• Built-in dark mode with persisted preference
• Working portfolio filter, pricing toggle, FAQ accordion, testimonial slider, tabs and modals
• Responsive from 320px to 1920px+
• Semantic HTML, ARIA labels and visible focus states

3. Requirements

No build step, package manager or server-side language is required. You only need:

• A text editor (VS Code, Sublime Text, etc.)
• A modern browser (Chrome, Firefox, Edge, Safari)
• An internet connection while viewing pages, since Bootstrap, Bootstrap Icons and Google Fonts load from their official CDNs (see Licenses for self-hosting instructions)
• Optional: a local web server (e.g. VS Code's "Live Server" extension) for the smoothest local preview

4. Folder Structure

novexa/
├── index.html, about.html, services.html, ...   (22 pages total)
├── assets/
│   ├── css/
│   │   ├── style.css        (design tokens + all components)
│   │   ├── responsive.css   (breakpoint fine-tuning)
│   │   └── dark-mode.css    (dark theme variable overrides)
│   ├── js/
│   │   └── main.js          (every interactive feature)
│   ├── images/               (drop your own images here)
│   └── icons/
└── documentation/
    └── index.html            (this file)

5. Installation

1. Unzip the download.
2. Open index.html directly in a browser, or serve the folder with a local web server for best results.
3. Upload the whole folder to your hosting provider's public directory (e.g. public_html) to go live.

6. HTML Editing

Every page shares the same header and footer markup. Sections within a page are self-contained <section> blocks — copy, reorder or delete them freely without breaking the layout around them.

7. CSS Customization

All component styles live in assets/css/style.css, organized into numbered sections (buttons, header, hero, cards, forms, footer, etc.). responsive.css only contains breakpoint overrides — leave component logic in style.css.

8. Color Customization

Every color in the template is driven by CSS variables at the top of style.css:

:root {
  --primary-color: #4338ca;
  --secondary-color: #14b8a6;
  --dark-color: #12142b;
  --light-color: #f7f8fb;
  --text-color: #383b52;
  --border-color: #e6e7f0;
}

Change these values once and every button, badge, card and section updates automatically.

9. Typography

Headings use --font-heading (Plus Jakarta Sans) and body text uses --font-body (Inter), both loaded from Google Fonts in each page's <head>. To swap fonts, update the Google Fonts <link> tag and the two variables in style.css.

10. Logo Replacement

The logo is a text-based .brand-logo element (icon mark + "Novexa" text) in partials of every page's header. Replace the text, or swap the <span class="logo-mark"> icon for an <img> tag pointing to your own logo file in assets/images/.

11. Image Replacement

Demo imagery uses lightweight CSS/icon placeholders (.img-placeholder, .avatar-placeholder) instead of stock photography, so the template ships with zero image licensing concerns. To add real photos, replace a placeholder <div> with an <img src="assets/images/yourfile.jpg" alt="..."> — the surrounding card/section CSS already accounts for either.

12. Menu Editing

Navigation lives inside <nav class="main-nav"> (desktop) and <div class="mobile-menu"> (mobile) in every page's header. Add or remove <li> items in both places to keep them in sync. Dropdowns use .has-dropdown / .dropdown-menu-c (desktop) and .mobile-has-submenu / .mobile-submenu (mobile).

13. Footer Editing

The footer is a 5-column grid (.footer-top): brand, Company, Services, Resources, and a newsletter form. Remove a .footer-col and the grid reflows automatically down to 2 or 1 columns on smaller screens.

14. Adding Pages

Duplicate the page closest to what you need, keep the <header>, mobile menu, search overlay and <footer> markup untouched, and replace everything between them. Add a link to the new page in the header and footer navigation on every page.

15. Removing Sections

Every homepage section is a top-level <section>. Deleting one never breaks another — spacing is self-contained via .section / .section-sm padding.

16. JavaScript Features

All interactivity lives in one file, assets/js/main.js, split into clearly numbered, independent blocks (preloader, sticky header, mobile menu, dark mode, FAQ accordion, pricing toggle, portfolio filter, testimonial slider, back-to-top, scroll reveal, counters, modals, tabs, password toggle, form validation). Each block checks that its markup exists before running, so removing a component's HTML never causes a console error.

17. Contact Form Integration

The contact, comment and newsletter forms validate on the front end only (see form[data-validate] in main.js). To actually send submissions, connect the <form> to:

• A form backend service (Formspree, Getform, Basin), by setting the form's action and removing onsubmit="return false", or
• Your own backend endpoint (PHP, Node.js, etc.) via a fetch() call inside the existing submit handler in main.js.

18. Newsletter Integration

Newsletter forms in the footer and blog sidebar follow the same pattern as the contact form. Connect them to Mailchimp, ConvertKit or a custom endpoint the same way.

19. Hosting Demo Customization

home-hosting.html includes a domain-search field, pricing cards with a monthly/yearly toggle, feature cards, and a server-location grid. Update data-price-monthly / data-price-yearly attributes on .pricing-price elements to change toggle amounts.

20. eCommerce Demo Customization

home-ecommerce.html is a front-end-only shop demo. "Add to Cart" buttons and category links are static UI — connect a real cart (e.g. Snipcart) or your own backend to make them functional. Product cards (.product-card) are fully reusable for any catalog size.

21. Blog Customization

blog.html, blog-details.html and home-blog.html share the same .blog-card, .sidebar-widget and .article-content classes. Duplicate blog-details.html per article and update the sidebar's "Related Posts" links manually, or wire the sidebar to a CMS if you add one.

22. Browser Support

23. Credits

Built entirely with original markup, styles and demo copy for this release. No third-party template code, stock photography, or copyrighted brand assets are included.

24–26. Image, Icon & Font Licenses

27. Changelog

28. Support

Item support covers bug fixes and usage questions for the period stated on your CodeCanyon license. For custom development beyond the scope of this template, please reach out separately.