# One page site Source: https://iriscss.com/documentation/1/examples/one-page/ A whole product page in one HTML file, with most of Iris CSS in it and no JavaScript. Acme Notes is a made up note taking app. Its page uses semantic HTML first and a class only where it wants a variant. Resize the window or switch your system to dark mode, it follows without a line of extra CSS. ## Preview [Open the page on its own](https://iriscss.com/documentation/1/examples/one-page/demo/index.html.md) ## Code Save it as an `.html` file and open it in a browser. It links Iris CSS from the CDN, so there is nothing else to install. **Show the full page** ```html Acme Notes

New Shared notebooks are here

Notes that follow you everywhere

Write on your phone, finish on your laptop. Acme Notes syncs in the background and keeps every note private.

See pricing
Acme Notes 1.4 adds offline search. Press Ctrl + K in the app to try it.

Everything a notebook needs

No setup and no learning curve. Open it and start typing.

Fast

Notes open instantly, even with ten thousand of them.

Synced

Every change reaches your other devices in seconds.

Private

Notes are encrypted on your device before they leave it.

How it works

  1. Create an account
  2. Install the apps
  3. Write your first note

Storage

3.2 GB of 10 GB used

3.2 GB

Import

Importing your old notes

70%

Pricing

Monthly

Free

$0 a month

  • Two devices
  • 1 GB of storage

Pro Popular

$6 a month

  • Every device
  • 10 GB of storage
  • Shared notebooks
Yearly

Pay yearly and get two months free: Pro is $60 a year.

FeatureFreePro
Devices2Unlimited
Storage1 GB10 GB
Shared notebooksNoYes
Version history7 days1 year

Loved by writers

I moved ten years of notes over in an afternoon and never looked back.

Ada, novelist
AD GR AL LI

Join 40,000 people who write with Acme Notes.

Questions

Can I use it offline?

Yes. Notes are stored on your device and sync when you are back online.

Can I export my notes?

Any time, as Markdown or HTML.

Is there a team plan?

Not yet. Join the newsletter to hear when it ships.

Stay in the loop

One email a month about new features. No spam.

Create your account

Use it on

or

Invite link copied.

``` ## What it uses - [Navbar](https://iriscss.com/documentation/1/components/navbar/index.html.md) that sticks to the top and collapses into a menu, with a [dropdown](https://iriscss.com/documentation/1/components/dropdown/index.html.md) - [Hero](https://iriscss.com/documentation/1/layout/hero/index.html.md), [container and grid](https://iriscss.com/documentation/1/layout/container-and-grid/index.html.md), and the [cluster and switcher](https://iriscss.com/documentation/1/layout/primitives/index.html.md) primitives - [Cards](https://iriscss.com/documentation/1/components/card/index.html.md), [boxes](https://iriscss.com/documentation/1/components/box/index.html.md), [icons](https://iriscss.com/documentation/1/components/icon/index.html.md) and [badges](https://iriscss.com/documentation/1/components/badge/index.html.md) - [Alert](https://iriscss.com/documentation/1/components/alert/index.html.md), [steps](https://iriscss.com/documentation/1/components/steps/index.html.md) and a [progress bar and meter](https://iriscss.com/documentation/1/elements/progress-and-meter/index.html.md) - [Tabs](https://iriscss.com/documentation/1/components/tabs/index.html.md) and a striped [table](https://iriscss.com/documentation/1/elements/table/index.html.md) for the pricing - A [blockquote](https://iriscss.com/documentation/1/elements/typography/index.html.md) and an [avatar group](https://iriscss.com/documentation/1/components/avatar/index.html.md) - [Accordion](https://iriscss.com/documentation/1/components/accordion/index.html.md) for the questions - [Input group](https://iriscss.com/documentation/1/form/group/index.html.md) with a [tooltip](https://iriscss.com/documentation/1/components/tooltip/index.html.md), and a [toast](https://iriscss.com/documentation/1/components/toast/index.html.md) - [Modal](https://iriscss.com/documentation/1/components/modal/index.html.md) with [form controls](https://iriscss.com/documentation/1/form/controls/index.html.md), [checkboxes and a switch](https://iriscss.com/documentation/1/form/checkbox-radio-and-switch/index.html.md), and a [divider](https://iriscss.com/documentation/1/components/divider/index.html.md) - [Footer](https://iriscss.com/documentation/1/components/footer/index.html.md) with link columns