affiliate.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="description"
      content="Recommended products and affiliate links"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recommended Products</title>
    <!-- Google Tag Manager -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "dataLayer", "GTM-KXGPCLB");
    </script>
    <!-- End Google Tag Manager -->
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v6.2.1/css/all.css"
    />
    <style>
      .products-container {
        width: 600px;
        margin: 50px auto;
      }

      .product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 30px;
      }

      .product-card {
        background: rgba(50, 50, 50, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        box-shadow: 2px 2px 0 rgba(22, 22, 22, 0.3);
      }

      .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 4px 4px 0 rgba(22, 22, 22, 0.5);
      }

      .product-image {
        max-width: 100%;
        height: auto;
        max-height: 180px;
        margin-bottom: 15px;
        border-radius: 4px;
      }

      .product-card h3 {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 1.3;
      }

      .product-card p {
        font-size: 13px;
        color: #ccc;
        margin-bottom: 15px;
        line-height: 1.4;
      }

      .product-card a {
        display: inline-block;
        background: linear-gradient(135deg, #ff9900, #ff8c00);
        color: white;
        padding: 10px 20px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
        transition: opacity 0.2s;
      }

      .product-card a:hover {
        opacity: 0.9;
      }

      .back-link {
        text-align: center;
        margin-top: 40px;
      }

      .back-link a {
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
      }

      .back-link a:hover {
        color: white;
      }

      h1 {
        font-size: 48px;
        text-align: center;
        font-weight: normal;
        text-shadow: 2px 2px 0 rgba(22, 22, 22, 0.5);
        margin-bottom: 10px;
      }

      .subtitle {
        text-align: center;
        color: #aaa;
        font-size: 14px;
        margin-bottom: 30px;
      }

      @media (max-width: 768px) {
        .products-container {
          width: 95%;
          margin: 20px auto;
          padding: 0 10px;
        }

        .product-grid {
          grid-template-columns: 1fr;
          gap: 15px;
        }

        h1 {
          font-size: 36px;
          margin-bottom: 8px;
        }

        .subtitle {
          font-size: 13px;
          margin-bottom: 20px;
        }

        .product-card {
          padding: 15px;
        }

        .product-card a {
          padding: 12px 24px;
          font-size: 15px;
        }
      }

      @media (max-width: 480px) {
        .products-container {
          width: 100%;
          margin: 10px auto;
          padding: 0 8px;
        }

        h1 {
          font-size: 28px;
          margin-bottom: 5px;
        }

        .subtitle {
          font-size: 12px;
          margin-bottom: 15px;
        }

        .product-grid {
          gap: 12px;
        }

        .product-card {
          padding: 12px;
        }

        .product-card h3 {
          font-size: 15px;
          margin-bottom: 8px;
        }

        .product-card p {
          font-size: 12px;
          margin-bottom: 12px;
        }

        .product-card a {
          padding: 10px 18px;
          font-size: 14px;
        }

        .back-link {
          margin-top: 25px;
        }

        .back-link a {
          font-size: 13px;
        }
      }
    </style>
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript
      ><iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-KXGPCLB"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
      ></iframe
    ></noscript>
    <!-- End Google Tag Manager -->

    <div class="products-container">
      <h1>Recommended</h1>
      <p class="subtitle">Products I use and recommend (affiliate links)</p>

      <div class="product-grid">
        <div class="product-card">
          <img
            src="images/system-design-interview-v1.png"
            alt="System Design Interview Vol. 1"
            class="product-image"
          />
          <h3>System Design Interview Vol. 1</h3>
          <p>
            An Insider's Guide to acing system design interviews. Essential
            reading for backend engineers preparing for tech interviews.
          </p>
          <a href="https://amzn.to/499GXN3" target="_blank">View on Amazon</a>
        </div>

        <div class="product-card">
          <img
            src="images/system-design-interview-v2.jpg"
            alt="System Design Interview Vol. 2"
            class="product-image"
          />
          <h3>System Design Interview Vol. 2</h3>
          <p>
            The sequel covering additional system design patterns and real-world
            examples. Includes 300+ diagrams explaining complex systems.
          </p>
          <a href="https://amzn.to/4tXMYok" target="_blank">View on Amazon</a>
        </div>

        <div class="product-card">
          <img
            src="images/psychology-of-money.jpg"
            alt="The Psychology of Money"
            class="product-image"
          />
          <h3>The Psychology of Money</h3>
          <p>
            Timeless lessons on wealth, greed, and happiness. A bestseller
            exploring how behavior impacts financial decisions more than math.
          </p>
          <a href="https://amzn.to/42f5PPP" target="_blank">View on Amazon</a>
        </div>
      </div>

      <div class="back-link">
        <a href="/">← Back to Home</a>
      </div>

      <div
        style="
          margin-top: 50px;
          padding-top: 30px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          text-align: center;
          font-size: 12px;
          color: #999;
        "
      >
        <p>
          <strong>Disclosure:</strong> Some links on this page are Amazon
          affiliate links. I may earn a commission from qualifying purchases at
          no extra cost to you.
        </p>
      </div>
    </div>
  </body>
</html>