Be-ig

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Be–ig | Work in Progress</title>

  <!-- Google Font: Inter Tight -->
  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;600;700&display=swap" rel="stylesheet">

  <style>
    /* -------------------
       BASE STYLES
    ------------------- */
    :root {
      --bg-gray: #f2f2f2;
      --text: #000;
      --maxw: 1400px;
      --gap-xl: 60px;
      --gap-lg: 40px;
      --gap-md: 24px;
      --gap-sm: 12px;
    }

    html, body { margin: 0; padding: 0; }
    body {
      font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      color: var(--text);
      background: #fff;
      font-weight: 300;
    }

    h1, h2, h3 { margin: 0; font-weight: 700; }
    p { margin: 0 0 1.2em 0; line-height: 1.6; }
    a { text-decoration: none; color: inherit; }

    /* Helpers */
    .semibold { font-weight: 600; }
    .light { font-weight: 300; }
    .highlight { background: #fff; padding: 2px 4px; }

    /* Container e area grigia */
    .container {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      gap: var(--gap-xl);
    }
    .page-bg { background: var(--bg-gray); }

    /* -------------------
       HEADER (TUO)
    ------------------- */
    <header id="beig-header" style="display:block">
  <div class="logo">Be–ig</div>
  <div class="work-in-progress">WORK IN PROGRESS</div>
  <nav class="topnav">
    <a href="#">About me</a>
    <a href="#">Works</a>
    <a href="#">Easy Diary</a>
    <a href="#">Contact</a>
  </nav>
</header>

    /* -------------------
       HERO / BIO + INTRO
    ------------------- */
    .bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
    .card { background: #fff; padding: 40px; }

    /* -------------------
       BOOKS
    ------------------- */
    .books { background: #fff; padding: 60px 40px; }
    .book { margin-bottom: 50px; }
    .book-title { font-weight: 700; font-size: 1.5rem; margin-bottom: 10px; }
    .book-text { line-height: 1.6; }

    /* -------------------
       GALLERY
    ------------------- */
    .gallery { padding: 60px 40px; }
    .gallery h2 { font-size: 1.5rem; margin-bottom: 24px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
    .ph { aspect-ratio: 1/1; background: #ddd; border-radius: 4px; }

    /* -------------------
       FOOTER (TUO)
    ------------------- */
    <footer id="beig-footer" style="display:block">
  <p>© 2025 Be–ig</p>
  <p>Valencia, Spain – Trieste, Italy</p>
  <p><a href="mailto:info@be-ig.com">info@be-ig.com</a> | <a href="#">Amazon Author Page</a></p>
</footer>

    /* -------------------
       RESPONSIVE
    ------------------- */
    @media (max-width: 900px) {
      .bio-grid { grid-template-columns: 1fr; }
      #beig-header { flex-direction: column; gap: 12px; align-items: flex-start; }
      .topnav { gap: 16px; }
    }
  </style>
</head>
<body>

  <!-- TUO HEADER -->
  <header id="beig-header" style="display:block">
    <div class="logo">Be–ig</div>
    <div class="work-in-progress">WORK IN PROGRESS</div>
    <nav class="topnav">
      <a href="#">About me</a>
      <a href="#">Works</a>
      <a href="#">Easy Diary</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <!-- AREA GRIGIA DI CONTENUTO -->
  <div class="page-bg">
    <main class="container">

      <!-- BIO + INTRO (due colonne) -->
      <section class="bio-grid">
        <div class="card">
          <h2>About me</h2>
          <p>[Qui inserirai la tua biografia: luogo, studi, progetti e collaborazioni con editori, musei o gallerie.]</p>
          <p class="semibold">[Evidenze o riconoscimenti qui]</p>
        </div>
        <div class="card">
          <h2>Easy Diary</h2>
          <p>[Breve testo introduttivo al progetto, la filosofia e il motivo ispiratore.]</p>
        </div>
      </section>

      <!-- BOOKS -->
      <section class="books">
        <div class="book">
          <div class="book-title">Learn Letters, Learn History</div>
          <div class="book-text">[Testo descrittivo del libro, breve sinossi e curiosità sulla serie o sulle illustrazioni.]</div>
        </div>
        <div class="book">
          <div class="book-title">...and then there's him</div>
          <div class="book-text">[Testo introduttivo, tono personale e poetico come da PNG.]</div>
        </div>
      </section>

      <!-- GALLERY -->
      <section class="gallery">
        <h2>Easy Diary →</h2>
        <div class="grid">
          <!-- segnaposto 1:1; sostituirai con <img src="URL" alt=""> mantenendo class="ph" o una tua classe -->
          <div class="ph"></div>
          <div class="ph"></div>
          <div class="ph"></div>
          <div class="ph"></div>
          <div class="ph"></div>
          <div class="ph"></div>
        </div>
      </section>

    </main>
  </div>

  <!-- TUO FOOTER -->
  <footer id="beig-footer" style="display:block">
    <p>© 2025 Be–ig</p>
    <p>Valencia, Spain – Trieste, Italy</p>
    <p><a href="mailto:info@be-ig.com">info@be-ig.com</a> | <a href="#">Amazon Author Page</a></p>
  </footer>

</body>
</html>