Talinda Mirror Rings
Model profile in the album UI. Oval rings ripple from the mirror portrait and from every click. A casting check compares a brief with her measurements, calendar and rates and gives a verdict.
Summary
Model profile in the album UI. Oval rings ripple from the mirror portrait and from every click. A casting check compares a brief with her measurements, calendar and rates and gives a verdict. The numbers, credits and text are invented demo content.
Prompt
The brief this page was built from.
Build a public DEPO profile, "Talinda Mirror Rings", in the product UI of depo0/album.php: dark
ground, Poppins headings, Lato text, yellow primary actions, pill sub-navigation, rails of
rounded tiles, signed-in site header and footer. The animated background is unique to this
profile and is tied to a working tool. Background: Oval rings from the portrait and from clicks.
Tool: the live casting check with a verdict that unlocks sending. Honour reduced motion and work
from 360 px to 1920 px.
Look
- Type: Poppins (headings), Lato (text), self-hosted site fonts.
- Palette: site tokens #18171a, #27262b, #ffb500, #469a58, plus the profile's background colours.
- Layout: sub-navigation, identity, the profile's tool in glass panels, rails of tiles and people.
- Motion: one canvas background at low resolution, paused in a hidden tab, a still frame under reduced motion.
Built with
| Part | What |
|---|---|
| HTML | public/demo62/index.html |
| CSS | public/demo62/css/demo62.css, profile.css, copies of the depo0 site CSS |
| JS | public/demo62/js/demo62.js, bg.js (canvas loop), depo0 header and footer scripts; vanilla |
| Libraries | none |
| Fonts | public/demo62/fonts/ |
| Images | /_img/photos/, /_img/site/first-page/, public/demo62/img/ (icons, logos) |
Borrowed
Header, footer, site CSS and album components from public/depo0. Otherwise nothing borrowed.
Config
None — static page.
Suits a site for…
What kind of website would this design fit? Agree with a tag by clicking it, or add your own — a tag can be several words.
No tags yet — be the first.
Comments 0
No comments yet — be the first.