<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>belli.com</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"/>
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --red:#c0392b;
      --text:#1a2744;
      --muted:#7a839a;
      --border:#dde2ef;
      --bg:#f4f6fb;
      --serif:'Cormorant Garamond',Georgia,serif;
      --sans:'Lato',sans-serif;
    }
    html,body{min-height:100vh;background:var(--bg);font-family:var(--sans);}
    body{display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem;}

    .card{
      width:100%;max-width:1100px;
      background:#fff;
      border-radius:4px;
      box-shadow:0 2px 40px rgba(26,39,68,0.10);
      overflow:hidden;
      animation:appear .65s ease both;
      border-top:3px solid var(--red);
    }
    @keyframes appear{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

    /* ── HEADER con foto tessera ── */
    .card-header{
      padding:2rem 2.5rem 0;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
    }
    .header-left{}
    .big-name{
      font-family:var(--serif);font-size:2.8rem;
      font-weight:300;color:var(--text);line-height:1;
      letter-spacing:0.06em;
    }

    /* foto tessera */
    .photo-box{
      width:200px;height:200px;
      flex-shrink:0;
      overflow:hidden;
      border-radius:4px;
      border:1px solid var(--border);
      box-shadow:0 2px 12px rgba(26,39,68,0.12);
      margin-left:1.5rem;
      margin-top:0.25rem;
    }
    .photo-box img{
      width:100%;height:100%;
      object-fit:cover;
      object-position:center center;
    }

    .body{padding:2rem 2.5rem 2rem;display:flex;flex-direction:column;gap:1.5rem;}

    .tagline{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.5;}
    .t-red{color:var(--red);}
    .t-grey{color:#6a7485;}

    .sep{display:flex;align-items:center;gap:0.75rem;}
    .sep-line{flex:1;height:1px;background:var(--border);}
    .sep-dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0;}

    .bio{font-size:0.85rem;color:var(--muted);line-height:1.85;}

    .sites-label{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:0.6rem;}
    .sites{display:flex;flex-direction:column;}
    .site{display:flex;align-items:baseline;padding:0.4rem 0;text-decoration:none;}
    .site:not(:last-child){border-bottom:1px dotted var(--border);}
    .site-num{font-family:var(--serif);font-size:0.78rem;color:var(--red);min-width:1.6rem;font-weight:600;}
    .site-name{font-size:0.82rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);min-width:165px;transition:color .2s;}
    .site:hover .site-name{color:var(--red);}
    .site-dots{flex:1;border-bottom:1px dotted var(--border);margin:0 0.6rem;margin-bottom:3px;}
    .site-desc{font-size:0.75rem;color:var(--muted);white-space:nowrap;}

    .foot{display:flex;align-items:center;justify-content:space-between;padding-top:1.25rem;border-top:1px solid var(--border);}
    .socials{display:flex;gap:1.25rem;}
    .socials a{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;}
    .socials a:hover{color:var(--red);}
    .copy{font-size:0.68rem;color:var(--border);}

    @media(max-width:560px){
      body{padding:0.75rem;}
      .card-header{padding:1.25rem 1.25rem 0;}
      .big-name{font-size:2rem;}
      .photo-box{width:70px;height:70px;}
      .body{padding:1.25rem;}
      .site-dots,.site-desc{display:none;}
      .site-name{min-width:unset;}
      .tagline{font-size:1rem;}
      .foot{flex-direction:column;gap:0.75rem;align-items:flex-start;}
    }
  </style>
</head>
<body>
<div class="card">

  <div class="card-header">
    <div class="header-left">
      <div class="big-name">belli.com</div>
    </div>
    <div class="photo-box">
      <img src="fabio.jpg" alt="Fabio Belli"/>
    </div>
  </div>

  <div class="body">

    <p class="bio">
      Italian at heart, living in Vilnius.<br>
      Curious about technology, passionate about good food, music, science fiction, and people. Father, consultant, traveller.
    </p>

    <p class="tagline">
      <span class="t-red">La vita è troppo breve</span><span class="t-grey"> per bere del vino cattivo.</span>
    </p>

    <div class="sep"><div class="sep-line"></div><div class="sep-dot"></div><div class="sep-line"></div></div>

    <div>
      <div class="sites-label">My projects</div>
      <div class="sites">
        <a href="https://fabiobelli.com" target="_blank" class="site">
          <span class="site-num">01.</span>
          <span class="site-name">fabiobelli.com</span>
          <span class="site-dots"></span>
          <span class="site-desc">IT consulting &amp; transformation</span>
        </a>
        <a href="https://sologusto.com" target="_blank" class="site">
          <span class="site-num">02.</span>
          <span class="site-name">sologusto.com</span>
          <span class="site-dots"></span>
          <span class="site-desc">Authentic Italian food</span>
        </a>
        <a href="https://ferrucciobelli.com" target="_blank" class="site">
          <span class="site-num">03.</span>
          <span class="site-name">ferrucciobelli.com</span>
          <span class="site-dots"></span>
          <span class="site-desc">In memory of my grandfather</span>
        </a>
      </div>
    </div>

    <div class="foot">
      <div class="socials">
        <a href="https://www.linkedin.com/in/fbelli/" target="_blank">LinkedIn</a>
        <a href="https://www.instagram.com/fabio_73lt/" target="_blank">Instagram</a>
        <a href="https://www.facebook.com/fab73it" target="_blank">Facebook</a>
      </div>
      <span class="copy">© 2026 belli.com</span>
    </div>

  </div>
</div>
</body>
</html>
