Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- The bounded browser mockup contains a pale pastel-gradient portfolio hero with a white pill navigation bar, left blue two-line statement with selected words bold, small gray paragraph and right portrait surrounded by circular lettering and star shapes. The outer heading, browser frame and pastel background are presentation context.
- Type
- Medium-large blue sans message mixing regular and bold words; small gray sans body and compact pill navigation. Exact font and metrics unknown.
- Color and surface
- Soft pink/cream/blue wash, dark blue text, white navigation capsule and circular portrait.
- Components
- Use a pale pastel gradient field with compact white navigation, a left two-line blue statement mixing regular and bold words and a right portrait ringed by curved lettering and stars.
What makes it work
- Pale pastel gradient
- Left blue message mixing regular and bold
- Right portrait surrounded by circular lettering and stars
- White capsule navigation
On a new subjectFor a public mentoring program, pair an original mentor portrait ringed with circular lettering and stars with a left blue invitation mixing regular and bold words on a pale pastel field.
Measured
Fonts loadedAlexandria, DM Sans
H334px / 600
Body text12px
Page background#f9f8f5
Text color#000000
Page height5,613px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- A warm off-white page with very faint pink/yellow/lavender ambient color behind a left-aligned blue introduction and right portrait. The two-line sentence mixes medium sans connective words with larger bold emphasis words. A cutout headshot sits inside a rotating circular text ring with small star shapes. A long pale capsule header contains a small geometric identity icon/name, centered links and a dark rounded contact action. Following content uses broad horizontally clipped service lines, a blue centered section heading and pale blue-gray rounded portfolio tiles with isolated device mockups.
- Responsive
- Desktop intro is a side-by-side text/portrait arrangement with connective type36px/54px and emphasis48px/72px. Phone connective type18px/18px and emphasis30px/30px fit two lines within342px at x24. Paragraph changes20px/32px to16px/25.6px. Tablet puts intro/paragraph across the width, a centered contact action beneath and portrait below; phone follows the same stack with larger vertical gaps. Portrait IMG bounds180x180 desktop become140x140 tablet/phone; ring extends beyond those bounds and is not the same width as the portrait. Header1080x70 at180,33 becomes748x61 tablet and370x61 at10,33 phone, replacing links/contact with a menu icon. Lower phone service text remains horizontally clipped; no work-card phone view is saved.
- Scroll
- Actual desktop scrollY750 replaces the large header with a smaller centered460x61px navigation capsule at490,33, now including Home plus three section links. Two service lines at48px/60px appear above a centered blue Featured Work heading48px/67.2px. Two device-mockup tiles sit side by side near x245/x736, each about459x395px with20px corners and rgb(228,234,242) surface. Titles sit at their lower left. Device-screen text is image content, not page typography. Only this first work row is seen; the full5613px desktop page and click targets are not functionally tested.
