<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ibrahim Ali</title>
<meta name="description" content="The official home of Ibrahim Ali. Turning three.">
<meta property="og:title" content="Ibrahim Ali">
<meta property="og:description" content="Turning three. Welcome to my corner of the internet.">
<meta property="og:image" content="photo1.jpg">
<meta name="theme-color" content="#14213d">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --cream:#fbf5e9;
    --navy:#14213d;
    --blue:#2f55c9;
    --sun:#f4b63f;
    --green:#8fd14f;
    --ink:#1d2433;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Nunito',system-ui,sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2{font-family:'Fraunces',Georgia,serif;color:var(--navy);line-height:1.05}

  /* gingham strip */
  .gingham{
    height:22px;
    background:
      linear-gradient(90deg,rgba(47,85,201,.55) 50%,transparent 50%) 0 0/22px 22px,
      linear-gradient(rgba(47,85,201,.55) 50%,transparent 50%) 0 0/22px 22px,
      #fff;
  }

  .wrap{max-width:1040px;margin:0 auto;padding:0 22px}

  /* hero */
  .hero{padding:56px 0 40px}
  .hero .wrap{display:grid;gap:40px;align-items:center}
  @media(min-width:820px){.hero .wrap{grid-template-columns:1.1fr .9fr}}
  .eyebrow{
    display:inline-block;
    background:var(--navy);color:var(--cream);
    padding:6px 14px;border-radius:999px;
    font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
    margin-bottom:22px;
  }
  .hero h1{font-size:clamp(3.2rem,11vw,6.6rem);font-weight:800;letter-spacing:-.02em}
  .hero h1 span{color:var(--blue)}
  .hero p.lead{
    font-size:clamp(1.15rem,3.2vw,1.5rem);
    margin-top:22px;max-width:30ch;
  }
  .age{
    margin-top:30px;
    display:flex;align-items:center;gap:16px;
  }
  .age .num{
    font-family:'Fraunces',serif;font-weight:800;font-size:4.6rem;line-height:1;
    color:var(--sun);
    -webkit-text-stroke:3px var(--navy);
    paint-order:stroke fill;
  }
  .age .txt{font-weight:700;color:var(--navy);line-height:1.25}

  .frame{
    position:relative;
    background:#fff;padding:12px 12px 44px;
    border-radius:6px;
    box-shadow:0 18px 40px rgba(20,33,61,.18);
    transform:rotate(2.5deg);
    max-width:380px;margin:0 auto;
  }
  .frame.alt{transform:rotate(-2.5deg)}
  .frame img,.frame .ph{
    display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;
    background:linear-gradient(135deg,#dfe6fa,#fbe3a9);
  }
  .frame .cap{
    position:absolute;left:0;right:0;bottom:11px;text-align:center;
    font-family:'Fraunces',serif;font-weight:600;color:var(--navy);font-size:1.05rem;
  }

  /* about */
  section{padding:64px 0}
  .about{background:var(--navy);color:var(--cream)}
  .about h2{color:var(--cream);font-size:clamp(2rem,6vw,3.2rem);margin-bottom:18px}
  .about .wrap{display:grid;gap:36px;align-items:center}
  @media(min-width:820px){.about .wrap{grid-template-columns:.9fr 1.1fr}}
  .about p{font-size:1.15rem;max-width:46ch;margin-bottom:14px}
  .about .sign{font-family:'Fraunces',serif;font-weight:600;color:var(--sun);font-size:1.3rem;margin-top:10px}

  /* quick facts */
  .facts h2{font-size:clamp(2rem,6vw,3.2rem);margin-bottom:28px}
  .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .card{
    background:#fff;border-radius:18px;padding:24px;
    border:3px solid var(--navy);
    box-shadow:6px 6px 0 var(--navy);
  }
  .card:nth-child(2){box-shadow:6px 6px 0 var(--sun)}
  .card:nth-child(3){box-shadow:6px 6px 0 var(--blue)}
  .card:nth-child(4){box-shadow:6px 6px 0 var(--green)}
  .card small{display:block;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6a7285;font-size:.72rem}
  .card strong{display:block;font-family:'Fraunces',serif;font-size:1.6rem;color:var(--navy);margin-top:6px;line-height:1.15}

  /* footer */
  footer{text-align:center;padding:40px 22px 56px;color:#6a7285;font-size:.95rem}
  footer b{color:var(--navy);font-family:'Fraunces',serif;font-size:1.15rem;display:block;margin-bottom:4px}

  /* small motion */
  @media(prefers-reduced-motion:no-preference){
    .frame{animation:float 6s ease-in-out infinite}
    .frame.alt{animation-delay:-3s}
    @keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
  }
</style>
</head>
<body>

<div class="gingham"></div>

<header class="hero">
  <div class="wrap">
    <div>
      <span class="eyebrow">ibrahimali.com</span>
      <h1>Ibrahim<br><span>Ali.</span></h1>
      <p class="lead">Hi, I'm Ibrahim. This is my own corner of the internet, and I'm just getting started.</p>
      <div class="age">
        <div class="num">3</div>
        <div class="txt">years old<br>October 2026</div>
      </div>
    </div>
    <figure class="frame">
      <img src="photo1.jpg" alt="Ibrahim laughing in blue overalls" onerror="this.outerHTML='<div class=ph></div>'">
      <figcaption class="cap">Full of energy</figcaption>
    </figure>
  </div>
</header>

<section class="about">
  <div class="wrap">
    <figure class="frame alt">
      <img src="photo2.jpg" alt="Ibrahim sitting and smiling in a blue checked shirt" onerror="this.outerHTML='<div class=ph></div>'">
      <figcaption class="cap">Always up to something</figcaption>
    </figure>
    <div>
      <h2>A note from Dad</h2>
      <p>Ibrahim, I bought this name for you before you could read it. By the time you can, I hope it still feels like yours.</p>
      <p>You are three today. You laugh loudly, you run everywhere, and you make every room better. Whatever you build one day, you will already own the address.</p>
      <p class="sign">Happy birthday, my son.</p>
    </div>
  </div>
</section>

<section class="facts">
  <div class="wrap">
    <h2>The basics</h2>
    <div class="grid">
      <div class="card"><small>Name</small><strong>Ibrahim Ali</strong></div>
      <div class="card"><small>Age</small><strong>Three</strong></div>
      <div class="card"><small>Home</small><strong>Multan, Pakistan</strong></div>
      <div class="card"><small>Mood</small><strong>Giggly</strong></div>
    </div>
  </div>
</section>

<footer>
  <b>Ibrahim Ali</b>
  ibrahimali.com &middot; Kept safe for him by his dad
</footer>

<div class="gingham"></div>
</body>
</html>
