Your page is ready

Your page has a warm cream background with deep cocoa text and terracotta pill buttons. The name uses a classic bookish serif for a homemade feel, and the rest uses a clean system sans-serif so it stays tidy. "Order a custom cake" is the standout: a larger, deeper burnt-orange button with a soft shadow, placed at the top.

The code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maya Bakes | Links</title>
  <meta name="description" content="Home baker in Austin, TX: sourdough, cookies and custom cakes. Weekend pop-ups at the farmers market. Message me to order!">

  <style>
    /* =========================================================
       THEME COLORS: change these to retheme the whole page
       ========================================================= */
    :root {
      --bg: #FBF5EC;            /* warm cream background */
      --text: #3B2A20;          /* deep cocoa brown for main text */
      --text-muted: #6B4F3F;    /* softer brown for bio and footer */
      --button-bg: #A8492A;     /* terracotta buttons */
      --button-bg-hover: #933D21;
      --button-text: #FFFFFF;   /* button label color */
      --accent: #7A3317;        /* deep burnt orange for the featured button */
      --accent-hover: #662A12;
      --ring: #3B2A20;          /* keyboard focus outline */
      --avatar-ring: #E9D8C4;   /* soft border around the photo */

      /* Fonts: system fonts only, nothing downloaded */
      --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
      --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* =========================================================
       BASE
       ========================================================= */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background-color: var(--bg);
      /* very soft warm glow at the top, purely decorative */
      background-image: radial-gradient(ellipse at top, #F6E6D3 0%, rgba(251, 245, 236, 0) 60%);
      background-repeat: no-repeat;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* =========================================================
       LAYOUT
       ========================================================= */
    main {
      max-width: 480px;
      margin: 0 auto;
      padding: 3rem 1.25rem 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* =========================================================
       PROFILE: photo, name, bio
       ========================================================= */
    .avatar {
      width: 112px;
      height: 112px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid var(--avatar-ring);
      background-color: var(--avatar-ring); /* shows while the photo loads */
      box-shadow: 0 6px 18px rgba(59, 42, 32, 0.12);
    }

    h1 {
      margin: 1.25rem 0 0.5rem;
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.01em;
    }

    h1 .brand {
      display: block;
      margin-top: 0.15rem;
      font-size: 1.05rem;
      font-weight: 400;
      font-style: italic;
      color: var(--text-muted);
    }

    /* the dot between the two names is hidden visually because
       the names stack on two lines; screen readers still hear it */
    h1 .sep {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .bio {
      margin: 0 0 2rem;
      max-width: 34ch;
      color: var(--text-muted);
      font-size: 1rem;
    }

    /* =========================================================
       LINK BUTTONS
       ========================================================= */
    nav {
      width: 100%;
    }

    .links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
    }

    .btn {
      /* icon on the left, label centered, empty column on the right for balance */
      display: grid;
      grid-template-columns: 24px 1fr 24px;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      min-height: 52px;
      padding: 0.75rem 1.25rem;
      border-radius: 999px;            /* pill shape */
      background-color: var(--button-bg);
      color: var(--button-text);
      font-weight: 600;
      font-size: 1rem;
      text-decoration: none;
      box-shadow: 0 2px 0 rgba(59, 42, 32, 0.18);
      transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    }

    .btn svg {
      width: 20px;
      height: 20px;
      justify-self: center;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .btn:hover {
      background-color: var(--button-bg-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(59, 42, 32, 0.18);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 0 rgba(59, 42, 32, 0.18);
    }

    .btn:focus-visible {
      outline: 3px solid var(--ring);
      outline-offset: 3px;
    }

    /* ---------- Featured button: "Order a custom cake" ---------- */
    .btn--featured {
      min-height: 64px;
      font-size: 1.125rem;
      background-color: var(--accent);
      box-shadow: 0 8px 20px rgba(122, 51, 23, 0.28);
    }

    .btn--featured:hover {
      background-color: var(--accent-hover);
      box-shadow: 0 12px 24px rgba(122, 51, 23, 0.32);