index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/plainlabs.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>PlainLab &middot; We make plain apps that simply work</title>
    <style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    body {
      color: rgb(31, 41, 55);
      background-color: rgb(249, 250, 251);
    }
    h1 {
      font-size: 1.5rem;
      line-height: 3rem;
      font-weight: medium;
    }
    h2 {
      font-size: 1.25rem;
      line-height: 2rem;
      font-weight: medium;
    }
    p {
      font-size: 1rem;
      line-height: 1.5rem;
      opacity: 0.7;
    }
    a {
      text-decoration: none;
      color: inherit;
    }

    .content {
      padding: 0.5rem;
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .contact {
      margin-top: 2rem;
      opacity: 0.7;
    }

    .footer {
      margin: 3rem 0 1rem;
      text-align: center;
      font-size: 0.8rem;
      opacity: 0.5;
    }

    .product-container {
      display: grid;
      grid-gap: 1rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 2rem;
      padding: 0.5rem;
    }

    .product-item {
      border-radius: 1rem;
      border: 1px solid #dadce0;
      padding: 1rem;
      font-size: 1.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: white;
      color: rgb(55, 65, 81);
    }

    .product-item:hover {
      background-color: rgb(243, 244, 246);
      cursor: pointer;
    }

    .logo {
      width: 7rem;
      height: 7rem;
    }

    </style>
  </head>
  <body>
    <main class="content">
      <a href="https://github.com/plainlab">
        <img src="/plainlabs.svg" alt="PlainLab logo" class="logo" />
      </a>
      <h1>PlainLab</h1>
      <p>We build plain apps that simply work</p>

      <section class="product-container">
        <a class="product-item" href="https://github.com/memoetapp/memoet">
          <h2>Memoet</h2>
          <p>A spaced repetition software</p>
        </a>
        <a class="product-item" href="https://musetrainer.github.io">
          <h2>MuseTrainer</h2>
          <p>MusicXML Piano Trainer</p>
        </a>
        <a class="product-item" href="https://pdfmailmerger.github.io">
          <h2>PlainMerge</h2>
          <p>PDF mail merger</p>
        </a>
        <a class="product-item" href="https://github.com/plainlab/plainprinter">
          <h2>PlainPrinter</h2>
          <p>Auto screen printer</p>
        </a>
        <a class="product-item" href="https://github.com/plainlab/mememe">
          <h2>Mememe</h2>
          <p>Meme for Slack</p>
        </a>
        <a class="product-item" href="https://github.com/plainlab/plainremover">
          <h2>PlainRemover</h2>
          <p>Image background remover</p>
        </a>
      </section>
    </main>
    <footer class="footer">
      <a href="https://github.com/plainlab">PlainLab</a> &copy; 2025
    </footer>
  </body>
</html>