# Orbit by MRHTML

A bright, precise product landing page with an original dashboard illustration, three illustrated feature cards, interactive workflow steps, example pricing, and native disclosure FAQs.

## Open it

Unzip the folder and open `index.html` in a modern browser. No install, build, account, server, fonts, or CDN is needed. Keep `styles.css` and `script.js` beside the HTML file. All interactions work locally, including the workflow selector and monthly/yearly price examples.

## Make it yours

1. Edit the title, description, product name, headings, feature copy, and footer in `index.html`. Search for `Orbit`, `MRHTML`, and `Sample` to find example content.
2. Set your colors in the `:root` variables at the top of `styles.css`. Typography uses installed system fonts. Layout sections and responsive breakpoints are named and grouped in that file.
3. Edit the `phases` object in `script.js` to change the three workflow examples. Dashboard values update from that same object.
4. Replace the illustrative prices in both HTML and JavaScript. The monthly example is $12 per person per month; the yearly example is $108 per person per year, displayed as $9 per month. These are sample US dollar prices, not an offer.
5. Replace the concept-exploration pricing links with a real, verified destination only when you have one. Currently they lead to an on-page explanation of the demo.
6. Before publishing a real customized site, remove `<meta name="robots" content="noindex,follow" />`, set accurate metadata, and add a canonical URL if appropriate for your actual domain. The included noindex directive keeps the uncustomized demo out of search results.
7. Upload the folder contents to a static host if you choose. Check your live navigation, metadata, mobile layout, and contact destinations afterward.

## What is real in this demo

Orbit is a fictional MRHTML product concept. It has no customer claims, testimonials, integrations, signup, checkout, backend, or contact form. The dashboard is an original illustration, not a connected application. Clicking a workflow step changes local sample content. No data is collected, stored, or sent. The billing control changes illustrative numbers and explains the billing period.

Without JavaScript the entire page, navigation, FAQs, initial dashboard, and monthly pricing examples remain readable. Workflow changes and the billing update require JavaScript; their explanatory notes are shown when it is off.

## Accessibility and motion

The page includes a skip link, visible keyboard focus, native links/radios/details, responsive styles down to 320 CSS pixels, and `prefers-reduced-motion` support. The workflow buttons announce their selected state and the updated example. Test again after your edits, especially if changing colors, font sizes, or controls. This is not a claim of complete accessibility certification.

## Files and license

- `index.html`: structure, copy, dashboard artwork, and initial values.
- `styles.css`: design, responsive rules, and reduced-motion behavior.
- `script.js`: small local interactions; no dependencies.
- `ASSETS.md`: provenance for the original artwork and system fonts.
- `LICENSE`: the MIT license for original template code and documentation.

The footer includes a visible `Designed by MRHTML` link to `https://mrhtml.com/` with `rel="nofollow"` as creator credit. The MIT license does not impose a mandatory website-credit link or require a followed link.