1. Introduction

Nexora is a premium single-page HTML5 landing page for creative digital agencies. It ships with an editorial layout, filterable portfolio, accessible FAQ accordion, impact counters, pricing packages, and a contact form ready for Formspree or a custom endpoint.

No build tools or npm install are required.

2. Requirements

• A modern browser (latest Chrome, Firefox, Safari, or Edge)
• Optional: a static host (Netlify, Vercel, GitHub Pages, S3, shared hosting)
• Optional: Formspree or another form endpoint for real submissions

3. Package structure

nexora/
├── index.html
├── assets/
│   ├── css/style.css
│   ├── js/main.js
│   ├── images/ …
│   ├── icons/ …
│   └── fonts/ …
├── documentation/index.html
├── README.txt
├── CHANGELOG.txt
├── CREDITS.txt
└── LICENSES.txt

4. Installation

1. Unzip the purchase package.
2. Open index.html locally, or serve the folder:

python -m http.server 8080

Then open the local URL printed by your static server in a browser.

5. HTML structure

index.html contains one landing page with semantic sections:

• Header / navigation
• Hero, trust strip, intro, services
• Featured work + filterable portfolio
• Impact, why, process, team, testimonials
• Packages, FAQ, final CTA, contact, footer

Section IDs such as #services, #work, and #contact power in-page navigation.

6. Changing branding

7. Changing colors

Edit design tokens at the top of assets/css/style.css:

:root {
  --nx-paper: #eef0f3;
  --nx-ink: #14171c;
  --nx-accent: #2f6f6a;
  /* … */
}

--nx-accent drives buttons, eyebrows, and interactive accents.

8. Changing typography

Display, body, and mono stacks are controlled by:

--nx-font-display
--nx-font-body
--nx-font-mono

Self-hosted OFL fonts live in assets/fonts/. To swap fonts, add new @font-face rules and point the custom properties to the new family names.

9. Replacing images

Replace files in assets/images/ while keeping filenames, or update the src paths in index.html.

• Hero / CTA: wide 16:9 works best
• Intro / portrait portfolio: 3:4
• Use meaningful alt text
• Prefer optimized JPG/WebP under ~400KB when possible

See CREDITS.txt for the full asset manifest.

10. Editing services

Services are editorial rows inside #services. Duplicate or delete .service-item blocks and update titles, copy, and tags.

11. Portfolio management

Featured projects live in #work. The full grid lives in #portfolio.

Each .portfolio-item needs:

• data-category — one or more of branding digital web product
• data-span — desktop grid span (4–8)
• data-ratio — portrait, landscape, or square
• Image, title, and meta line

12. Portfolio filters

Filter buttons in [data-filters] use data-filter values matching portfolio categories. The script in assets/js/main.js toggles .is-hidden on items. Add a new filter by adding a button and using the same category token on items.

13. Team customization

The team is a typographic roster (no portrait files required). Edit names, roles, and bios in #team. Accent swatches can be restyled via .team-member__swatch. To use photographs instead, add media elements inside each .team-member and extend the CSS.

14. Testimonials

Quotes in #testimonials are fictional demo content. Replace copy and attribution, and keep the disclaimer if you still use demo quotes.

15. Pricing

Package cards in #pricing are layout demos — not marketplace license prices. Update figures, features, and CTAs, or remove the section.

16. FAQ

The accordion uses buttons with aria-expanded and panels with matching aria-controls. Duplicate an .accordion__item block to add a question. JavaScript keeps one panel open at a time and remains keyboard accessible.

17. Contact form configuration

The form validates in the browser. It does not show a fake “message sent” success state.

Formspree

1. Create a form at Formspree.
2. Set the form action:

<form … action="https://formspree.io/f/YOUR_FORM_ID" method="post">

Custom endpoint

Point action to your API URL that accepts POST. Keep field name attributes or map them server-side.

Until action is a real URL (not #), submit shows an informational note directing buyers to this documentation.

18. JavaScript features

assets/js/main.js provides:

• Mobile navigation (full-screen overlay) + Escape to close
• Sticky header + active section links
• Smooth anchor scrolling with focus management
• Portfolio filtering
• FAQ accordion
• Scroll reveals + counters (respects prefers-reduced-motion)
• Back to top
• Contact validation
• Optional desktop custom cursor

19. Responsive behavior

Layouts reflow at roughly 640px, 768px, 900px, 1024px, and 1100px. The portfolio becomes an asymmetric 12-column grid on large screens and stacks on small screens. Test at 320–1920px widths after customizing.

20. Accessibility

• Skip link, landmarks, and heading hierarchy
• Visible :focus-visible styles
• Accordion ARIA states
• Meaningful image alternatives
• Reduced-motion support

21. Deployment

Upload the entire nexora/ folder to any static host. Ensure assets/ paths remain relative. When you have a public domain, add a canonical link and og:url meta tag in index.html pointing to that URL (comments in the head mark where).

22. Credits

See CREDITS.txt for fonts, icons, and the image asset manifest. Demo photographs are original generative assets created for this product (disclosed in CREDITS/LICENSES).

23. Licenses

See LICENSES.txt. Fonts are SIL OFL 1.1 with the full license text at assets/fonts/OFL.txt. Template usage follows your marketplace license.

24. Troubleshooting

25. Support guidance

Contact the seller through your marketplace order page. Include your purchase ID, browser version, and steps to reproduce. Customization beyond documentation scope (custom CMS builds, backend apps) may be offered only if the seller provides paid support.