index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KZDM8E7H6B"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-KZDM8E7H6B');
</script>

  <title>The Coin Knight Showcase | A pixel art adventure by Sullydux</title>
  <meta property="og:title" content="The Coin Knight Showcase | A pixel art adventure by Sullydux">
  <link rel="icon" type="image/png" href="Web_Asset/icon.png">
  <meta property="og:image" content="https://sullybase.github.io/Coin/Web_Asset/icon.png">


  <meta name="description"
        content="Explore a handcrafted pixel art world filled with challenges and hidden secrets. Coins are scattered throughout the world, waiting to be collected. There are scattered flags that act as checkpoints. Save the realm from the slimes and their boss.">
  <meta property="og:description"
        content="Explore a handcrafted pixel art world filled with challenges and hidden secrets. Coins are scattered throughout the world, waiting to be collected. There are scattered flags that act as checkpoints. Save the realm from the slimes and their boss.">
  <meta name="author" content="Sullydux">
  <meta name="robots" content="index,follow">
  <link rel="canonical" href="https://sullybase.github.io/Coin/">
  <meta property="og:type" content="website">

  <style>
    :root{--accent:#0f6fff;--bg:#0f1724;--card:#0b1220;--muted:#9aa4b2;--base-font-size:16px;--icon-size:64px;--character-width:140px;--enemy-width:120px;--flag-width:96px;color-scheme:dark}
    *{box-sizing:border-box}
    html{font-size:var(--base-font-size)}
    body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:linear-gradient(180deg,#071022 0%, #081426 60%);color:#e6eef8;line-height:1.6}
    .container{max-width:1100px;margin:28px auto;padding:20px}
    header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:linear-gradient(90deg, rgba(255,255,255,0.03), transparent);border-radius:12px}
    .brand{display:flex;align-items:center;gap:14px}
    .brand img{width:var(--icon-size);height:var(--icon-size);border-radius:10px;object-fit:cover}
    .title{font-size:1.75rem;font-weight:700;letter-spacing:0.6px}
    .subtitle{font-size:0.8125rem;color:var(--muted);margin-top:2px}
    .byline{color:var(--muted);font-size:0.875rem;text-decoration:none}

    .hero{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px;align-items:center;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
    .hero-banner{background:url('Web_Asset/Cover.png') center/cover no-repeat;border-radius:10px;height:360px;display:flex;align-items:flex-end;padding:18px}
    .hero-card{background:rgba(2,6,23,0.5);padding:12px;border-radius:8px;backdrop-filter:blur(6px)}

    .hero-cards-row{display:flex;justify-content:space-between;gap:14px}

    .section{display:flex;gap:20px;margin-top:18px;align-items:center}
    .section.reverse{flex-direction:row-reverse}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;flex:1;word-wrap:break-word;overflow-wrap:break-word}
    .img-wrap{flex:0 0 240px;text-align:center}
    .img-wrap img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
    .character{width:var(--character-width);height:auto;margin:0 auto;display:block}
    .enemy{width:var(--enemy-width);height:auto;margin:0 auto;display:block}
    /* Pixel-art rendering: prefer nearest-neighbor to avoid blurry scaling */
    .pixel-art{image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges}
    h2{margin:0 0 8px 0}
    p{margin:0;color:#cdd9ea}

    .play-row{display:flex;align-items:center;gap:18px;margin-top:18px}
    .play-btn{background:var(--accent);color:white;padding:12px 20px;border-radius:10px;border:0;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 8px 30px rgba(15,111,255,0.18)}
    .download-btn{background:transparent;color:#e6eef8;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);font-weight:600;text-decoration:none}
    .download-btn:hover{border-color:rgba(255,255,255,0.14)}
    .flag{width:var(--flag-width)}

    footer{margin-top:26px;color:var(--muted);font-size:0.8125rem;text-align:center}

    /* Tablet view - minimal adjustments to keep desktop look */
    @media (max-width:1024px){
      .container{padding:16px}
    }

    /* Mobile - stack and optimize for small screens */
    @media (max-width:800px){
      .section{flex-direction:column}
      .section.reverse{flex-direction:column}
      .img-wrap{order:-1;width:100%}
      .play-row{flex-direction:column;align-items:flex-start}
      .hero-cards-row{flex-direction:column;gap:14px}
    }

    @media (max-width:768px){
      :root{--base-font-size:15px;--icon-size:56px;--character-width:120px;--enemy-width:100px;--flag-width:80px}
      
      .container{padding:12px;margin:12px auto}
      header{flex-direction:column;text-align:center;gap:12px;padding:10px 14px}
      .brand{justify-content:center}
      .title{font-size:1.35rem}
      .subtitle{font-size:0.75rem}
      
      .hero-banner{height:240px;padding:12px}
      .hero-card{padding:10px}
      .hero-card h2{font-size:1.1rem}
      .hero-card p{font-size:0.9rem}
      
      .card{padding:14px}
      h2{font-size:1.2rem;margin-bottom:6px}
      p{font-size:0.95rem;white-space:normal}
      
      .play-row{flex-direction:column;align-items:stretch;gap:12px;width:100%}
      .play-btn{padding:14px 16px;font-size:1rem;text-align:center;width:100%}
      .download-group{flex-direction:column;width:100%}
      .download-btn{width:100%;text-align:center;padding:10px}
      
      footer{font-size:0.75rem;margin-top:20px}
    }

    @media (max-width:480px){
      :root{--base-font-size:14px;--icon-size:48px;--character-width:100px;--enemy-width:80px;--flag-width:64px}
      
      .container{padding:10px;margin:8px auto}
      header{padding:8px 10px;gap:8px}
      .brand{gap:10px}
      .brand img{width:var(--icon-size);height:var(--icon-size)}
      .title{font-size:1.2rem;letter-spacing:0.3px}
      .byline{font-size:0.75rem}
      
      .hero{padding:12px;gap:12px}
      .hero-banner{height:200px;padding:10px}
      .hero-card{padding:8px}
      .hero-card h2{font-size:1rem;margin:0}
      .hero-card p{font-size:0.85rem}
      
      .card{padding:12px}
      h2{font-size:1.1rem;margin-bottom:4px}
      p{font-size:0.9rem;white-space:normal}
      
      .play-row{gap:10px;margin-top:12px}
      .play-btn{padding:12px 14px;font-size:0.95rem}
      .download-group{gap:6px}
      .download-btn{padding:8px 10px;font-size:0.85rem}
      
      footer{font-size:0.7rem}
    }

    @media (max-width:360px){
      :root{--base-font-size:13px;--icon-size:40px;--character-width:80px;--enemy-width:70px;--flag-width:56px}
      
      .container{padding:8px}
      .title{font-size:1.1rem}
      .hero-banner{height:180px}
      .card{padding:10px}
      h2{font-size:1rem}
      p{font-size:0.85rem;white-space:normal}
    }

    /* Touch-friendly interactions for mobile */
    @media (hover: none) and (pointer: coarse) {
      .play-btn,
      .download-btn {
        min-height: 44px;
        min-width: 44px;
      }
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="brand">
      <img src="Web_Asset/icon.png" alt="The Coin Knight icon" class="pixel-art">
        <div>
          <div class="title">The Coin Knight</div>
          <div class="subtitle">A pixel art adventure</div>
        </div>
      </div>
      <div style="text-align:right"><a href="https://sullybase.github.io/" class="byline">By Sullydux</a></div>
    </header>

    <main>
      <section class="hero">
        <div class="hero-banner">
          <div class="hero-card">
            <h2 style="margin:0">Embark on a shiny quest</h2>
            <p style="margin-top:6px;max-width:520px">The Coin Knight is a pixel art platformer game where you, the knight, collects coins and fights slimes. At the end fight the boss!</p>
          </div>
        </div>

        <div class="hero-cards-row">
          <div class="card" style="flex:1">
            <h2>About the Game</h2>
            <p>This is a 2D pixel art game I made for fun. It is my first Godot game, so I was and am still learning. It is available as a Windows, Linux, or Mac app and on a website. It is using Godot 4.0.</p>
          </div>
          <div class="card" style="flex:0 0 240px;text-align:center">
            <img src="Web_Asset/character.png" alt="Character preview" class="character pixel-art">
          </div>
          <div class="card" style="flex:1">
            <h2>Updates</h2>
            <p>This is still in development so more features are going to be added soon! <a href="https://sullydux.github.io/sullydux/email.html" target="_blank" rel="noopener">Email me</a> if you have any suggestions or found any bugs. I am open to constructive criticism.</p>
          </div>
        </div>
      </section>

      <section class="section reverse">
        <div class="card">
          <h2>Be a Hero But Also Beware</h2>
          <p>Explore a handcrafted pixel art world packed with challenges and hidden secrets, all within a tightly designed map. Coins are scattered throughout the environment, rewarding careful exploration and risk-taking. Scattered flags act as checkpoints, letting you push forward without losing progress when you fall. The realm is under siege by slimes and their fearsome boss, causing all citizens to flee. You will face the challenges alone.</p>
        </div>
        <div class="img-wrap">
          <img src="Web_Asset/slime.png" alt="Enemy: Slime" class="enemy pixel-art">
        </div>
      </section>

      <section class="section">
        <div class="card">
          <div class="play-row">
            <a class="play-btn" href="https://sullybase.github.io/Coin/game.html">Play The Coin Knight on Web</a>
            <div class="download-group" style="display:flex;gap:10px;align-items:center">
              <a class="download-btn" href="https://www.patreon.com/collection/2257757" target="_blank" rel="noopener">Download (Windows, Linux, Mac)</a>
              <a class="download-btn" href="https://sullybase.github.io/Coin/RM/">Readme.md</a>
              <a class="download-btn" href="https://sullybase.github.io/Coin/LICENSE.txt" target="_blank" rel="noopener">License</a>
            </div>
          </div>
        </div>
        <div class="img-wrap">
          <img src="Web_Asset/flag.png" alt="Flag" class="flag pixel-art">
        </div>
      </section>
    </main>

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