Privacy Policy

What This Site Collects (And What It Doesn't)

Last updated 2026. Written in plain language on purpose, the same way this whole page argues a privacy policy should be.

USES

This site uses basic, aggregate web analytics: which pages get visited, roughly how people found them (referrer), and general device or browser type. It's used only to understand what's useful on this page and what isn't.

NOT

No accounts, no logins, no personal profiles are built. Nothing is sold to anyone. No third-party advertising trackers are embedded on this page.

STORAGE

Your dark mode preference and quiz progress live in your browser's local storage. They're never sent to a server; they just stay on your device so the setting sticks the next time you visit.

CONTACT

Questions about this page or its data practices can go through creativepea.com.

This site is a free educational project, not a business collecting data for profit. This policy will stay this short because there genuinely isn't more to disclose. If that ever changes, this page changes with it.

← Back to Webpage Anatomy

F-Pattern Reading

The coral shape is a heatmap, not a decoration. Eyes hit the full top line first, then a shorter second pass, then trail down the left edge scanning for anything worth stopping for. Everything outside that shape gets skimmed or skipped.

What to do with this: put your strongest words at the start of the first two lines and down the left edge. Don't bury your point in the middle of a paragraph.

Z-Pattern for Landing Pages

① Logo
② Sign Up
④ Learn More
③ Get Started

On pages with more visuals than text, like most landing pages, eyes don't scan line by line. They jump corner to corner: top-left, across to top-right, diagonally down to bottom-left, then across to bottom-right, tracing a Z.

What to do with this: put your logo top-left, your account/sign-up link top-right, and your main call-to-action bottom-right, right where the Z ends.

The 8pt Grid System

Card Title

16px below the icon, 16px below this line, 16px of padding all around.

Action

Every dot in the grid above is 8px apart. The card's padding, the gap under the icon, and the gap under this paragraph are all exactly 16px, which is 2 dots. Nothing here was placed by eye.

What to do with this: before you type a random padding value, ask whether 8, 16, 24, or 32 already does the job. It almost always does.

Glassmorphism Explained

This card uses glassmorphism

Glassmorphism is that frosted-glass effect you see everywhere now (thanks, Apple). It uses backdrop-filter: blur() to blur whatever is behind an element.

The CSS magic

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

Why it works: transparency + blur creates visual hierarchy without blocking content.

When to use: modals, navigation overlays, tooltips.

Browser support: works in all modern browsers. Safari needs -webkit-backdrop-filter.

Homepage Anatomy Blueprint

01 · The Hero
Transform Your Business in 30 Days

We help ambitious founders scale without burning out.

Primary CTA

Hook visitors in 3 seconds. Answer "what's in it for me?" Your H1 should make them say "yes, that's exactly what I need."

02 · The Problem
Tired of Working 60-Hour Weeks?
No time for family
Burning out fast
Stuck at $10K/mo

Show empathy first. List 3–4 problems your audience faces before pitching solutions.

03 · Your Solution
Our Simple 3-Step Process

① Discovery  →  ② Execution  →  ③ Results

Make it simple. Break your process into 3 steps.

04 · Social Proof
Trusted By 500+ Companies
★★★★★
★★★★★

Trust drives conversion. 2–3 testimonials with real names and photos.

05 · Features
Why 10,000+ Businesses Choose Us
⚡ Fast setup
🔒 Secure
📈 Scalable

Outcomes over features. Focus on results, not specs.

06 · Pricing
Flexible Plans for Every Stage
STARTER
$XX
POPULARPRO
$XX
ENTERPRISE
Custom

Good / better / best. Highlight the middle tier.

07 · Results
Real Results, Real Numbers
+250%Revenue Increase
10xROI

Show, don't tell. Concrete numbers beat vague claims.

08 · Lead Magnet
Download Our Free Growth Guide
Get It Free

Capture emails. Offer value in exchange.

09 · FAQ
Frequently Asked Questions
Do you offer refunds?+
How long is onboarding?+
Can I cancel anytime?+

Kill objections early. Answer the top 5–7 questions.

10 · Final CTA
Ready to Scale Your Business?
Start Now

Last chance to convert. Make it about them.

Homepage Anatomy, by creativepea
Save this blueprint for reference

Top Nav

Logo left, links right. The default for a reason: predictable, always visible.

Hamburger Menu

Collapses everything behind one icon. Saves space, costs a tap. Mostly a mobile pattern now.

Sidebar Nav

Vertical, persistent. Common for dashboards and docs where there are too many sections for a top bar.

Mega Menu

A dropdown that opens into a full grid of links. For sites with deep catalogs: retailers, big docs sites.

Bottom Tab Bar

Icons and short labels, pinned to the bottom. The standard for mobile apps, thumb-reachable.

›
›

Breadcrumbs

A trail, not a menu. Shows where you are in a hierarchy. Pairs with, doesn't replace, primary nav.

Same job, six different shapes.

Hero Sections, Five Ways

Text-Only, Centered

Just a headline, a line of support copy, and a button. Fast to build, fast to load, hard to get wrong.

Split Hero

Copy on one side, a product shot or illustration on the other. Shows and tells at the same time.

Full-Bleed Background

A photo or video fills the whole section, text sits on top with an overlay for contrast. High impact, needs a real image.

Product Screenshot

A short pitch above an actual screenshot of the product. Common for SaaS: it proves the thing is real.

Video Background

Looping, muted, autoplaying footage behind the headline. Heavy to load, needs a reduced-motion fallback.

Pick the one your content can actually support.

Three Ways to Handle the Fold

The One-Screen Pitch

Everything essential (what it is, why it matters, what to click) fits before the dashed line. Nothing below is required reading.

The Teaser Peek

A sliver of the next section is deliberately visible past the fold. It signals "there's more" without a scroll indicator.

↓

The Explicit Scroll Cue

An arrow, chevron, or "scroll to explore" label removes any doubt that there's more content below.

All three work. Silence about it is the only wrong answer.

Content Sections, Five Ways

Card Grid

Equal-weight items in a repeating grid. Features, team members, blog posts: anything that's a list of peers.

Zig-Zag Rows

Image and text alternate sides row to row. Slower to scan than a grid, better for telling a sequence of points.

Tabs

One panel visible at a time behind a row of switches. Keeps a busy page short at the cost of hiding content.

List / Table

Rows of structured data. Pricing comparisons, changelogs, specs: anything better scanned than read.

Carousel

One item centered and emphasized, neighbors peeking at the edges. Good for testimonials, risky for anything important.

The shape should fit the content, not the other way around.

Footers, Four Ways

Minimal

A few links and a copyright line. Right for small sites with nothing else that needs saying.

Mega Footer

A full sitemap in columns. Common on large sites where the footer doubles as secondary navigation and SEO.

Newsletter Footer

An email field and a button, front and center. The footer as one last chance to capture the visitor.

App-Download Footer

Store badges instead of links. For products where the real destination is a mobile app, not more web pages.

Same last impression, different jobs.

Contrast Checker

Real WCAG math, calculated in your browser as you type. No values are sent anywhere.

The quick fox jumps.

Body text at a normal reading size.

21.00 : 1
AA Normal Text AA Large Text AAA Normal Text AAA Large Text

Normal text needs 4.5:1 (AA) or 7:1 (AAA). Large text (18px+, or 14px+ bold) and UI borders need 3:1 (AA) or 4.5:1 (AAA).

Guess the Contrast

Would this pass WCAG AA for normal text (4.5:1)? Guess before you check the math.

Score: 0 / 0

Sample Text

This is what body copy looks like in this pairing.

This Page's Style Guide

Webpage Anatomy Style Guide

Color

coral
#FF6B5B
pink
#FF3D9A
teal
#00BFA5
sun
#FFD23F
ink
#22182B
paper
#FFF9F2

Type Scale

Aa H1 Fredoka
Aa H2 Fredoka
Aa Body Nunito
Aa Mono Space Mono

Spacing (8pt grid)

Z-Index

1 → 10 → 100 → 1000

content → dropdown → sticky nav → modal

webpage-anatomy · generated from this page
Save it, reuse it, remix it.

Box Model Playground

Every element on a page is margin, border, padding, and content, nested like a set of frames. Drag to see it for real.

margin
border
padding
content

margin: 16px; border: 4px; padding: 16px;

Breakpoint Simulator

Drag the slider to resize the frame. Watch the layout inside decide, on its own, when it's too narrow to stay horizontal.

900px · Desktop
No JavaScript is deciding this. CSS container queries are.

Take the Quiz

12 questions pulled straight from this page. Pick an answer to see it graded instantly.

Score: 0 / 12
1. What's the minimum WCAG AA contrast ratio for normal body text?

2. In this page's z-index system, what layer does a modal sit at?

3. What's the max recommended number of items in primary navigation?

4. What does CTA stand for?

5. All the spacing on this page is a multiple of what number?

6. Which native HTML element traps focus and closes on Escape without any custom JS?

7. Which HTML element creates the 'banner' landmark a screen reader can jump straight to?

8. A cookie set by a domain other than the one you're visiting, usually for ad tracking, is called what?

9. Which Core Web Vital measures how fast a page responds to a click or tap?

10. Which free tool, built right into Chrome DevTools, audits performance, accessibility, best practices, and SEO all at once?

11. Which button style trend uses thick borders and hard offset shadows instead of soft ones?

12. A CSS container query responds to the size of what?