H&H · 01
Opening
The logo’s block steps as the page loads, then opens out into the page.
Not client work. Made from the photos and logo on H&H’s own websites. Official imagery, and an unlit shot of Eden House Za’abeel, would make it more polished.
- Block
- One block in the component library: drag it onto a page and the loader, hero and about come as a set, with fields for the logo, photos and words.
- After
- The opening of Likova (opens in a new tab), up to its 3D cube.
- Loader
- The logo’s dots fill in as the page loads, on a block that steps like Eden House’s terraces. Behind it, Eden House Za’abeel’s facade in H&H’s teal and sand.
- Hero
- At 100% the logo fades and the block opens out into the page, the heading rising into its tab. Scrolling, it slides away, the tower rises and its lights come on.
- Nav
- The block has no nav of its own, since every WiserSite builds theirs differently. The site’s nav sits over it and carries the logo once the loader’s gone; --top-nav-height tells the block how much room to leave. The demo’s is a stand-in for H&H’s.
- Lights
- Only the lit photo is online, so the unlit one is the same photo with its warm lights taken out.
- Reduced motion
- No loader, and nothing moves with the scroll.
- Fonts
- Urbanist stands in for Avant Garde and Azo Sans, the fonts on H&H’s sites.