quizz.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html lang="cs">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Kvíz: Který učitel na GJS jsi ty?</title>
  6. <script src="https://cdn.tailwindcss.com"></script>
  7. <style>
  8. body { background-color: #f0f4f8; }
  9. .gjs-blue { background-color: #0055a4; }
  10. .card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
  11. </style>
  12. </head>
  13. <body class="flex flex-col items-center justify-center min-h-screen p-4">
  14. <div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700">
  15. <h1 class="text-2xl font-bold text-center text-gray-800 mb-8">
  16. Který učitel na GJS jsi ty?
  17. </h1>
  18. <div class="mb-8">
  19. <p class="text-lg font-semibold text-gray-700 mb-4 text-center">
  20. Lorem ipsum dolor sit amet, consectetur?
  21. </p>
  22. <div class="space-y-3">
  23. <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
  24. <input type="radio" name="q1" class="mr-2"> Lorem ipsum dolor
  25. </label>
  26. <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
  27. <input type="radio" name="q1" class="mr-2"> Sit amet consectetur
  28. </label>
  29. <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
  30. <input type="radio" name="q1" class="mr-2"> Adipiscing elit
  31. </label>
  32. <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
  33. <input type="radio" name="q1" class="mr-2"> Sed do eiusmod
  34. </label>
  35. </div>
  36. </div>
  37. <div class="flex justify-between mt-10">
  38. <button class="px-6 py-2 bg-gray-200 text-gray-700 rounded font-bold hover:bg-gray-300 transition">
  39. Předchozí
  40. </button>
  41. <button class="px-6 py-2 gjs-blue text-white rounded font-bold hover:opacity-90 transition">
  42. Další
  43. </button>
  44. </div>
  45. </div>
  46. </body>
  47. </html>