juegos-bloques/index.html at main · marianobat/juegos-bloques · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Juegos por bloques</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: system-ui, sans-serif; background:#fafbff; margin:0; padding:20px; text-align:center; }
    h1 { color:#334155; margin-bottom:1em; }
    .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:24px; max-width:1000px; margin:0 auto; }
    .card { background:#fff; border-radius:14px; padding:16px; box-shadow:0 3px 10px rgba(0,0,0,.05); transition:transform .2s; }
    .card:hover { transform:translateY(-3px); }
    .thumb { width:100%; height:180px; object-fit:cover; border-radius:10px; border:1px solid #eee; }
    .card h2 { margin:10px 0 5px; font-size:1.1rem; color:#1e293b; }
    .card p { color:#64748b; font-size:.9rem; }
    a { text-decoration:none; color:inherit; }
  </style>
</head>
<body>
  <h1>🎮 Juegos por bloques</h1>
  <div class="grid">
    <a href="juego1-robot/">
      <div class="card">
        <img src="juego1-robot/assets/robot.svg" class="thumb" alt="Robot">
        <h2>Juego 1: El robot explorador</h2>
        <p>Guiá al robot hasta el objetivo usando tus bloques.</p>
      </div>
    </a>
    <!-- Más juegos próximamente -->
  </div>
</body>
</html>