templates/stationary_courses/free-lesson.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Zatoka Kodu{% endblock %}
  5. {% block body %}
  7.     <!-- **************** MAIN CONTENT START **************** -->
  8.     <main>
  10.         <!-- =======================
  11.         Main Banner START -->
  12.         <section class="position-relative overflow-hidden pt-5 pt-lg-3">
  13.             <!-- SVG START -->
  14.             <figure class="position-absolute top-50 start-0 translate-middle-y ms-n7 d-none d-xxl-block">
  15.                 <svg class="rotate-74 fill-danger opacity-1">
  16.                     <circle cx="180.4" cy="15.5" r="7.7" />
  17.                     <path d="m159.9 22.4c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  18.                     <ellipse transform="matrix(.3862 -.9224 .9224 .3862 71.25 138.08)" cx="139.4" cy="15.5" rx="6.1" ry="6.1" />
  19.                     <circle cx="118.9" cy="15.5" r="5.4" />
  20.                     <path d="m98.4 20.1c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2.1 4.6-4.6 4.6z" />
  21.                     <path d="m77.9 19.3c-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8 3.8 1.7 3.8 3.8-1.7 3.8-3.8 3.8z" />
  22.                     <path d="m57.3 18.6c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
  23.                     <path d="m36.8 17.8c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  24.                     <circle cx="16.3" cy="15.5" r="1.6" />
  25.                     <circle cx="180.4" cy="38.5" r="7.7" />
  26.                     <path d="m159.9 45.3c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  27.                     <ellipse transform="matrix(.8486 -.5291 .5291 .8486 .7599 79.566)" cx="139.4" cy="38.5" rx="6.1" ry="6.1" />
  28.                     <circle cx="118.9" cy="38.5" r="5.4" />
  29.                     <path d="m98.4 43.1c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2.1 4.6-4.6 4.6z" />
  30.                     <circle cx="77.9" cy="38.5" r="3.8" />
  31.                     <path d="m57.3 41.5c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1c0 1.8-1.4 3.1-3.1 3.1z" />
  32.                     <path d="m36.8 40.8c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  33.                     <circle cx="16.3" cy="38.5" r="1.6" />
  34.                     <circle cx="180.4" cy="61.4" r="7.7" />
  35.                     <path d="m159.9 68.3c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  36.                     <ellipse transform="matrix(.3862 -.9224 .9224 .3862 28.902 166.26)" cx="139.4" cy="61.4" rx="6.1" ry="6.1" />
  37.                     <circle cx="118.9" cy="61.4" r="5.4" />
  38.                     <path d="m98.4 66c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6c0 2.6-2.1 4.6-4.6 4.6z" />
  39.                     <path d="m77.9 65.2c-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8 3.8 1.7 3.8 3.8-1.7 3.8-3.8 3.8z" />
  40.                     <path d="m57.3 64.5c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
  41.                     <path d="m36.8 63.7c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  42.                     <circle cx="16.3" cy="61.4" r="1.6" />
  43.                     <circle cx="180.4" cy="84.4" r="7.7" />
  44.                     <path d="m159.9 91.3c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  45.                     <path    d="m139.4 90.5c-3.4 0-6.1-2.7-6.1-6.1s2.7-6.1 6.1-6.1 6.1 2.7 6.1 6.1c0 3.3-2.7 6.1-6.1 6.1z" />
  46.                     <circle cx="118.9" cy="84.4" r="5.4" />
  47.                     <path d="m98.4 89c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2.1 4.6-4.6 4.6z" />
  48.                     <path d="m77.9 88.2c-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8 3.8 1.7 3.8 3.8-1.7 3.8-3.8 3.8z" />
  49.                     <path d="m57.3 87.4c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1c0 1.8-1.4 3.1-3.1 3.1z" />
  50.                     <path d="m36.8 86.7c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  51.                     <circle cx="16.3" cy="84.4" r="1.6" />
  52.                     <circle cx="180.4" cy="107.3" r="7.7" />
  53.                     <path d="m159.9 114.2c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  54.                     <path d="m139.4 113.4c-3.4 0-6.1-2.7-6.1-6.1s2.7-6.1 6.1-6.1 6.1 2.7 6.1 6.1-2.7 6.1-6.1 6.1z" />
  55.                     <circle cx="118.9" cy="107.3" r="5.4" />
  56.                     <path d="m98.4 111.9c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6c0 2.6-2.1 4.6-4.6 4.6z" />
  57.                     <path d="m77.9 111.2c-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8 3.8 1.7 3.8 3.8-1.7 3.8-3.8 3.8z" />
  58.                     <path d="m57.3 110.4c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
  59.                     <path d="m36.8 109.6c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3c0.1 1.3-1 2.3-2.3 2.3z" />
  60.                     <circle cx="16.3" cy="107.3" r="1.6" />
  61.                     <circle cx="180.4" cy="130.3" r="7.7" />
  62.                     <path d="m159.9 137.2c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  63.                     <ellipse transform="matrix(.3862 -.9224 .9224 .3862 -34.62 208.52)" cx="139.4" cy="130.3" rx="6.1" ry="6.1" />
  64.                     <circle cx="118.9" cy="130.3" r="5.4" />
  65.                     <path d="m98.4 134.9c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2.1 4.6-4.6 4.6z" />
  66.                     <path d="m77.9 134.1c-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8 3.8 1.7 3.8 3.8-1.7 3.8-3.8 3.8z" />
  67.                     <path d="m57.3 133.4c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
  68.                     <path d="m36.8 132.6c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  69.                     <circle cx="16.3" cy="130.3" r="1.6" />
  70.                     <circle cx="180.4" cy="153.2" r="7.7" />
  71.                     <path d="m159.9 160.1c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  72.                     <ellipse transform="matrix(.3862 -.9224 .9224 .3862 -55.794 222.61)" cx="139.4" cy="153.2" rx="6.1" ry="6.1" />
  73.                     <circle cx="118.9" cy="153.2" r="5.4" />
  74.                     <path d="m98.4 157.8c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6c0 2.6-2.1 4.6-4.6 4.6z" />
  75.                     <circle cx="77.9" cy="153.2" r="3.8" />
  76.                     <path d="m57.3 156.3c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
  77.                     <path d="m36.8 155.5c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  78.                     <circle cx="16.3" cy="153.2" r="1.6" />
  79.                     <circle cx="180.4" cy="176.2" r="7.7" />
  80.                     <path d="m159.9 183.1c-3.8 0-6.9-3.1-6.9-6.9s3.1-6.9 6.9-6.9 6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9z" />
  81.                     <ellipse transform="matrix(.3862 -.9224 .9224 .3862 -76.968 236.7)" cx="139.4" cy="176.2" rx="6.1" ry="6.1" />
  82.                     <circle cx="118.9" cy="176.2" r="5.4" />
  83.                     <path d="m98.4 180.8c-2.5 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2.1 4.6-4.6 4.6z" />
  84.                     <path d="m77.9 180c-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8 3.8 1.7 3.8 3.8-1.7 3.8-3.8 3.8z" />
  85.                     <path d="m57.3 179.3c-1.7 0-3.1-1.4-3.1-3.1s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
  86.                     <path d="m36.8 178.5c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3z" />
  87.                     <circle cx="16.3" cy="176.2" r="1.6" />
  88.                 </svg>
  89.             </figure>
  90.             <!-- SVG END -->
  92.             <!-- SVG START -->
  93.             <span class="position-absolute top-50 end-0 translate-middle-y mt-5 me-n5 d-none d-xxl-inline-flex">
  94.         <svg class="fill-warning rotate-186 opacity-8">
  95.             <path d="m35.4 54.2c0 0.6 0 1.1-0.1 1.7-0.9 9.3-9.2 16.1-18.5 15.1-4.5-0.4-8.5-2.6-11.4-6.1-2.8-3.5-4.2-7.9-3.7-12.4 0.9-9.3 9.2-16.1 18.5-15.1 4.5 0.4 8.5 2.6 11.4 6.1 2.4 3 3.8 6.8 3.8 10.7zm-33.4 0c0 3.8 1.3 7.5 3.8 10.4 2.8 3.4 6.8 5.5 11.2 6 9.1 0.9 17.2-5.8 18.1-14.8 0.4-4.4-0.9-8.7-3.7-12.1s-6.8-5.5-11.2-6c-9.2-0.8-17.3 5.8-18.2 14.9v1.6z" />
  96.             <path d="m39 54.1c0 1.1-0.1 2.2-0.3 3.3-1.8 9.8-11.2 16.2-21 14.4-4.7-0.8-8.8-3.5-11.5-7.4-2.7-4-3.7-8.7-2.8-13.5 1.8-9.8 11.2-16.2 21-14.4 4.7 0.9 8.8 3.6 11.5 7.5 2.1 3 3.1 6.6 3.1 10.1zm-35.6 0.1c0 3.5 1.1 7 3.1 9.9 2.7 3.9 6.7 6.5 11.3 7.4 9.6 1.8 18.8-4.5 20.6-14.1 0.9-4.6-0.1-9.3-2.8-13.2s-6.7-6.5-11.3-7.4c-9.6-1.8-18.8 4.5-20.6 14.1-0.2 1.1-0.3 2.2-0.3 3.3z" />
  97.             <path d="m42.8 54.2c0 1.7-0.2 3.3-0.7 5-2.7 10.2-13.3 16.3-23.5 13.6-5-1.3-9.1-4.5-11.7-8.9-2.5-4.5-3.2-9.7-1.9-14.7 2.7-10.2 13.3-16.3 23.5-13.6 5 1.3 9.1 4.5 11.7 8.9 1.7 3 2.6 6.3 2.6 9.7zm-38.1 0c0 3.3 0.9 6.5 2.5 9.4 2.5 4.4 6.6 7.5 11.5 8.8 10 2.7 20.4-3.3 23.1-13.4 1.3-4.9 0.6-9.9-1.9-14.3s-6.6-7.5-11.5-8.8c-10-2.6-20.4 3.4-23 13.4-0.5 1.6-0.7 3.3-0.7 4.9z" />
  98.             <path d="m46.7 54.2c0 2.2-0.4 4.5-1.1 6.6-3.6 10.7-15.3 16.5-26.1 12.8-5.2-1.8-9.4-5.4-11.8-10.4-2.4-4.9-2.8-10.5-1-15.7 3.6-10.6 15.3-16.4 26-12.8l-0.1 0.2 0.1-0.2c5.2 1.8 9.4 5.4 11.8 10.4 1.5 2.9 2.2 6 2.2 9.1zm-40.8 0c0 3.1 0.7 6.1 2.1 8.9 2.4 4.8 6.5 8.4 11.6 10.2 10.5 3.6 22-2.1 25.6-12.6 1.7-5.1 1.4-10.6-1-15.4s-6.5-8.4-11.6-10.2c-10.5-3.6-22 2.1-25.6 12.6-0.7 2.1-1.1 4.3-1.1 6.5z" />
  99.             <path d="m50.7 54.2c0 2.8-0.5 5.6-1.6 8.2-4.5 11.2-17.4 16.6-28.6 12.1-5.4-2.2-9.7-6.4-12-11.8s-2.3-11.4-0.1-16.8c4.5-11.2 17.4-16.6 28.6-12.1 5.4 2.2 9.7 6.4 12 11.8 1.1 2.8 1.7 5.7 1.7 8.6zm-43.6 0c0 2.8 0.6 5.7 1.7 8.4 2.2 5.3 6.4 9.4 11.8 11.6 11 4.5 23.6-0.9 28.1-11.9 2.2-5.3 2.1-11.2-0.1-16.5s-6.4-9.4-11.8-11.6c-11-4.5-23.6 0.9-28.1 11.9-1.1 2.6-1.6 5.3-1.6 8.1z" />
  100.             <path d="m54.7 54.2c0 3.4-0.7 6.7-2.2 9.9-5.5 11.7-19.5 16.7-31.2 11.3-5.7-2.6-10-7.3-12.1-13.2s-1.8-12.2 0.8-17.9c5.5-11.7 19.4-16.8 31.1-11.3 5.7 2.6 10 7.3 12.1 13.2 1 2.6 1.5 5.3 1.5 8zm-46.5 0c0 2.7 0.5 5.3 1.4 7.9 2.1 5.8 6.3 10.4 11.9 13 11.5 5.4 25.3 0.4 30.6-11.1 2.6-5.6 2.9-11.8 0.8-17.6s-6.3-10.4-11.9-13l0.1-0.2-0.1 0.1c-11.5-5.4-25.3-0.4-30.6 11.1-1.5 3.1-2.2 6.5-2.2 9.8z" />
  101.             <path d="m58.7 54.2c0 4-1 7.9-2.8 11.5-6.4 12.2-21.5 16.9-33.6 10.6-6-3.1-10.3-8.3-12.3-14.6s-1.4-13.1 1.7-19c6.3-12.2 21.4-17 33.6-10.6 5.9 3.1 10.3 8.3 12.3 14.6 0.8 2.5 1.1 5 1.1 7.5zm-49.5 0c0 2.5 0.4 5 1.1 7.4 2 6.3 6.3 11.4 12.1 14.4 12 6.3 26.9 1.6 33.1-10.4 3-5.8 3.6-12.5 1.7-18.7-2-6.3-6.3-11.4-12.1-14.4-12-6.3-26.9-1.6-33.1 10.4-1.9 3.5-2.8 7.4-2.8 11.3z" />
  102.             <path d="m62.9 54.2c0 4.6-1.2 9.1-3.5 13.1-7.3 12.7-23.6 17.1-36.2 9.9-6.1-3.5-10.5-9.2-12.4-16s-0.9-14 2.6-20.1c7.3-12.7 23.5-17.1 36.2-9.8l-0.1 0.2 0.1-0.2c6.1 3.5 10.5 9.2 12.4 16 0.5 2.3 0.9 4.6 0.9 6.9zm-52.7-0.1c0 2.3 0.3 4.6 0.9 6.9 1.8 6.7 6.2 12.3 12.2 15.8 12.5 7.2 28.5 2.9 35.7-9.6 3.5-6.1 4.4-13.1 2.5-19.8-1.8-6.7-6.2-12.3-12.2-15.8-12.5-7.2-28.5-2.8-35.7 9.7-2.2 3.9-3.4 8.3-3.4 12.8z" />
  103.             <path d="m67 54.2c0 5.2-1.4 10.3-4.2 14.8-8.2 13.2-25.5 17.2-38.7 9-6.4-4-10.8-10.2-12.5-17.5s-0.5-14.8 3.5-21.2c8.2-13.2 25.5-17.2 38.7-9 6.4 4 10.8 10.2 12.5 17.5 0.5 2.1 0.7 4.3 0.7 6.4zm-55.9-0.1c0 2.1 0.2 4.3 0.7 6.4 1.7 7.2 6.1 13.3 12.4 17.2 13 8.1 30.1 4.1 38.2-8.9 3.9-6.3 5.1-13.7 3.4-20.9s-6.1-13.3-12.4-17.2c-13-8.1-30.1-4.1-38.2 8.9-2.6 4.4-4.1 9.4-4.1 14.5z" />
  104.             <path d="m71.2 54.2c0 5.8-1.7 11.5-5 16.4-9.1 13.7-27.6 17.4-41.2 8.3-6.6-4.4-11.1-11.1-12.7-18.9s0-15.7 4.4-22.3c9.1-13.6 27.6-17.4 41.2-8.3 6.6 4.4 11.1 11.1 12.7 18.9 0.4 2 0.6 4 0.6 5.9zm-59.1-0.1c0 1.9 0.2 3.9 0.6 5.9 1.5 7.7 6 14.3 12.5 18.6 13.5 9 31.7 5.3 40.7-8.2 4.3-6.5 5.9-14.4 4.3-22-1.5-7.7-6-14.3-12.5-18.6-13.5-9-31.7-5.3-40.7 8.2-3.3 4.8-4.9 10.4-4.9 16.1z" />
  105.             <path d="m75.4 54.3c0 6.4-2 12.7-5.8 18-10 14.1-29.6 17.5-43.7 7.5-6.9-4.8-11.4-12-12.8-20.3s0.5-16.6 5.3-23.4c9.9-14.1 29.6-17.5 43.7-7.5 6.8 4.8 11.4 12 12.8 20.3 0.3 1.8 0.5 3.6 0.5 5.4zm-62.4-0.2c0 1.8 0.2 3.6 0.5 5.3 1.4 8.2 5.9 15.3 12.7 20.1 14 9.9 33.4 6.5 43.2-7.4 4.8-6.8 6.6-15 5.2-23.1-1.4-8.2-5.9-15.3-12.7-20.1-14-9.9-33.4-6.5-43.2 7.4-3.8 5.3-5.7 11.5-5.7 17.8z" />
  106.             <path d="m79.6 54.3c0 7.1-2.3 13.9-6.5 19.7-10.9 14.6-31.6 17.7-46.3 6.8-7.1-5.3-11.7-13-13-21.7s0.9-17.4 6.2-24.5c10.9-14.6 31.6-17.7 46.3-6.8 7.1 5.3 11.7 13 13 21.7 0.2 1.5 0.3 3.1 0.3 4.8zm-65.8-0.2c0 1.6 0.1 3.2 0.4 4.8 1.3 8.7 5.8 16.3 12.8 21.5 14.5 10.8 35 7.7 45.7-6.7 5.2-7 7.4-15.6 6.1-24.2s-5.8-16.3-12.8-21.5l0.1-0.1v0.1c-14.5-10.8-35-7.7-45.7 6.7-4.3 5.7-6.6 12.4-6.6 19.4z" />
  107.             <path d="m83.9 54.3c0 7.7-2.5 15.1-7.4 21.3-11.8 15.1-33.7 17.8-48.8 6-7.3-5.7-12-13.9-13.1-23.1s1.4-18.3 7.1-25.6c11.8-15.1 33.7-17.8 48.8-6 7.3 5.7 12 13.9 13.1 23.1 0.2 1.4 0.3 2.8 0.3 4.3zm-69.2-0.2c0 1.4 0.1 2.9 0.3 4.3 1.1 9.1 5.7 17.2 13 22.9 15 11.7 36.6 9 48.3-6 5.7-7.2 8.1-16.2 7-25.4-1.1-9.1-5.7-17.2-13-22.9-15-11.7-36.6-9-48.3 6-4.8 6.1-7.3 13.5-7.3 21.1z" />
  108.             <path d="m88.1 54.3c0 8.3-2.8 16.4-8.2 22.9-12.7 15.6-35.7 18-51.3 5.3-7.6-6.1-12.3-14.9-13.3-24.5-1-9.7 1.8-19.2 8-26.7 12.7-15.6 35.7-18 51.3-5.3 7.6 6.1 12.3 14.9 13.3 24.5 0.2 1.2 0.2 2.5 0.2 3.8zm-72.6-0.2c0 1.2 0.1 2.5 0.2 3.8 1 9.6 5.6 18.2 13.1 24.3 15.5 12.5 38.3 10.2 50.9-5.2 6.1-7.5 8.9-16.9 7.9-26.5s-5.6-18.2-13.1-24.3c-15.5-12.6-38.3-10.2-50.9 5.2-5.2 6.5-8.1 14.5-8.1 22.7z" />
  109.             <path d="m92.4 54.2c0 9-3.1 17.6-9 24.6-13.6 16.1-37.7 18.1-53.8 4.5-7.8-6.6-12.6-15.8-13.4-26-0.9-10.2 2.3-20 8.9-27.8 13.5-16 37.7-18.1 53.8-4.5 7.8 6.6 12.6 15.8 13.4 26 0.1 1.1 0.1 2.2 0.1 3.2zm-76-0.1c0 1.1 0 2.1 0.1 3.2 0.8 10.1 5.6 19.2 13.3 25.7 15.9 13.5 39.8 11.4 53.3-4.5 6.5-7.7 9.7-17.5 8.8-27.6-0.8-9.9-5.6-19.1-13.3-25.6-15.9-13.5-39.8-11.4-53.3 4.5-5.8 6.9-8.9 15.4-8.9 24.3z" />
  110.             <path d="m96.7 54.2c0 9.7-3.5 18.9-9.9 26.2-14.5 16.6-39.8 18.3-56.3 3.8-8-7-12.8-16.7-13.6-27.4-0.7-10.6 2.8-20.9 9.8-28.9 14.5-16.6 39.8-18.2 56.3-3.8l-0.1 0.1 0.1-0.1c8 7 12.8 16.7 13.6 27.4 0.1 0.9 0.1 1.8 0.1 2.7zm-79.5-0.1c0 0.9 0 1.8 0.1 2.7 0.7 10.6 5.4 20.2 13.4 27.1 16.4 14.4 41.5 12.7 55.8-3.7 7-7.9 10.4-18.1 9.7-28.7-0.7-10.5-5.4-20.1-13.4-27.1-16.4-14.3-41.5-12.7-55.8 3.8-6.4 7.2-9.8 16.4-9.8 25.9z" />
  111.             <path d="m101 54.2c0 10.3-3.8 20.1-10.7 27.9-15.4 17.1-41.8 18.4-58.9 3-8.3-7.5-13.1-17.7-13.7-28.8s3.2-21.8 10.7-30c15.4-17.1 41.8-18.4 58.9-3 8.3 7.5 13.1 17.7 13.7 28.8v2.1zm-83-0.1c0 0.7 0 1.4 0.1 2.2 0.6 11 5.4 21.1 13.6 28.5 16.9 15.3 43.1 13.9 58.4-3 7.4-8.2 11.2-18.8 10.6-29.8s-5.4-21.1-13.6-28.5c-16.9-15.3-43.1-13.9-58.4 3-7 7.7-10.7 17.4-10.7 27.6z" />
  112.             <path d="m105.3 54.2c0 11-4.1 21.4-11.6 29.5-16.3 17.5-43.9 18.6-61.4 2.3-8.5-7.9-13.4-18.6-13.8-30.2-0.5-11.6 3.6-22.7 11.5-31.2 16.3-17.5 43.9-18.5 61.4-2.2 8.5 7.9 13.4 18.6 13.8 30.2 0.1 0.5 0.1 1.1 0.1 1.6zm-86.5-0.1v1.6c0.4 11.5 5.3 22.1 13.7 30 17.4 16.2 44.7 15.2 60.9-2.2 7.8-8.4 11.9-19.4 11.5-30.9s-5.3-22.1-13.7-30l0.1-0.1-0.1 0.1c-17.4-16.1-44.7-15.1-60.9 2.3-7.5 8-11.5 18.3-11.5 29.2z" />
  113.             <path d="m109.6 54.2c0 11.7-4.4 22.7-12.5 31.2-17.2 18-45.9 18.7-63.9 1.5-8.7-8.3-13.7-19.6-14-31.6-0.3-12.1 4.2-23.6 12.5-32.3 17.2-18 45.9-18.7 63.9-1.5 8.7 8.3 13.7 19.6 14 31.6v1.1zm-90 0v1.1c0.3 12 5.2 23.1 13.9 31.4 17.9 17.1 46.3 16.4 63.4-1.5 8.3-8.7 12.7-20 12.4-32s-5.3-23.2-13.9-31.4c-17.9-17.1-46.4-16.4-63.4 1.5-8.1 8.4-12.4 19.3-12.4 30.9z" />
  114.             <path d="m113.9 54.2c0 12.3-4.7 24-13.4 32.8-18.1 18.5-47.9 18.9-66.4 0.8-9-8.8-14-20.5-14.1-33-0.2-12.5 4.6-24.4 13.4-33.4 18.1-18.6 47.9-18.9 66.4-0.8l-0.1 0.1 0.1-0.1c9 8.8 14 20.5 14.1 33v0.6zm-93.6 0v0.5c0.1 12.4 5.1 24.1 14 32.8 18.4 18 48 17.6 65.9-0.7 8.7-8.9 13.4-20.7 13.3-33.1s-5.1-24.1-14-32.8c-18.4-18-48-17.6-65.9 0.7-8.6 8.8-13.3 20.3-13.3 32.6z" />
  115.             <path d="m118.3 54.2c0 13-5.1 25.3-14.3 34.5-19 19-50 19-69 0-9.2-9.2-14.3-21.4-14.3-34.5 0-13 5.1-25.3 14.3-34.5 19-19 50-19 69 0l-0.1 0.1 0.1-0.1c9.2 9.2 14.3 21.5 14.3 34.5zm-97.2 0c0 12.9 5 25.1 14.2 34.2 18.9 18.9 49.6 18.9 68.4 0 9.1-9.1 14.2-21.3 14.2-34.2s-5-25.1-14.2-34.2c-18.8-18.9-49.5-18.9-68.4 0-9.2 9.1-14.2 21.3-14.2 34.2z" />
  116.         </svg>
  117.     </span>
  118.             <!-- SVG END -->
  120.             <!-- SVG START -->
  121.             <figure class="position-absolute top-0 start-0 ms-5">
  122.                 <svg class="fill-orange opacity-4" width="29px" height="29px">
  123.                     <path d="M29.004,14.502 C29.004,22.512 22.511,29.004 14.502,29.004 C6.492,29.004 -0.001,22.512 -0.001,14.502 C-0.001,6.492 6.492,-0.001 14.502,-0.001 C22.511,-0.001 29.004,6.492 29.004,14.502 Z"></path>
  124.                 </svg>
  125.             </figure>
  126.             <!-- SVG END -->
  128.             <!-- Content START -->
  129.             <div class="container">
  130.                 <!-- Title -->
  131.                 <div class="row align-items-center g-5">
  132.                     <!-- Left content START -->
  133.                     <div class="col-lg-5 col-xl-5 position-relative z-index-1 text-center text-lg-start mb-5 mb-sm-0">
  134.                         <!-- SVG -->
  135.                         <figure class="fill-warning position-absolute bottom-0 end-0 me-5 d-none d-xl-block">
  136.                             <svg width="42px" height="42px">
  137.                                 <path d="M21.000,-0.001 L28.424,13.575 L41.999,20.999 L28.424,28.424 L21.000,41.998 L13.575,28.424 L-0.000,20.999 L13.575,13.575 L21.000,-0.001 Z" />
  138.                             </svg>
  139.                         </figure>
  140.                         <!-- SVG -->
  141.                         <figure class="fill-success position-absolute top-0 start-50 translate-middle-x mt-n5 ms-5">
  142.                             <svg width="22px" height="21px">
  143.                                 <path d="M10.717,4.757 L14.440,-0.001 L14.215,6.023 L20.142,4.757 L16.076,9.228 L21.435,12.046 L15.430,12.873 L17.713,18.457 L12.579,15.252 L10.717,20.988 L8.856,15.252 L3.722,18.457 L6.005,12.873 L-0.000,12.046 L5.359,9.228 L1.292,4.757 L7.220,6.023 L6.995,-0.001 L10.717,4.757 Z" />
  144.                             </svg>
  145.                         </figure>
  146.                         <!-- Title -->
  147.                         <h1 class="mb-0 display-6">Zaprogramuj przyszłość swojego
  148.                             <span class="position-relative">dziecka
  149.                                 <!-- SVG START -->
  150.                         <span class="position-absolute top-50 start-50 translate-middle ms-3 z-index-n1">
  151.                             <svg width="300px" height="62.1px" enable-background="new 0 0 366 62.1" viewBox="0 0 366 62.1" xmlns="http://www.w3.org/2000/svg">
  152.                                 <path class="fill-warning" d="m322.5 25.3c0 1.4 2.9 0.8 3.1 1.6 0.8 1.1-1.1 1.3-0.6 2.4 13.3 0.9 26.9 1.7 40.2 4-2.5 0.7-4.9 1.6-7.3 1.1-4-0.9-8.2-1-12.2-1.2-8.5-0.5-16.9-1.9-25.5-1.7h-3.1c2.6 0.6 4.8 0.4 5.7 2.2-7.3 0.4-14.1-0.8-21.2-1.1-0.2 0.6-0.5 1.2-0.8 1.8 21.3 0.7 42.5 1.6 64.3 4.6-4.2 1.6-7.7 1-10.8 0.8-6.8-0.5-13.5-1.3-20.3-1.9-0.9-0.1-2.3-0.1-2.9 0.2-2.2 1.6-4.3 0.6-7 0.4 1.4-1 2.5 0.5 3.9-0.8-5.6-1-10.7 0.6-15.9 0s-10.5-0.6-16.6-0.8c2 1.6 4.6 1.3 6.2 1.4 4.9 0 9.9 0.8 14.8 0.7 5.3-0.1 10.4 0.5 15.5 0.9 3.2 0.3 6.7-0.1 9.9-0.4 1.1-0.1 0.5 0.3 0.6 0.6 0.5 0.9 2.2 0.8 3.6 0.8 5.1-0.1 10.1 0.6 14.8 1.5 0.8 0.1 1.5 0 1.7 0.7 0 0.7-0.8 0.6-1.5 0.8-3.9 1.2-7.4-0.2-11.1-0.2-2 0-4.3-1.5-6 0.5-0.3 0.4-1.4 0.1-2.2-0.1-4.5-0.8-9.1-0.5-13.8-1.5-2.3-0.5-5.6 0.1-8.4 0.5-4 0.5-8-0.7-12.1-0.9-3.4-0.2-7.1-0.5-10.5-0.7-7.1-0.3-14.2-1.2-22.3-0.4 4.9 1.1 9.4 1.2 13.8 1.2 9.7 0 19.2 2.3 28.9 1.6 7.3 3.2 15.9 1.5 23.8 2.9 4.9 0.8 10.1 0.8 15.2 1.2 0.5 0 0.8 0.3 1.1 0.9-20-2.1-40.2-1.4-60.8-3 4.9 2.1 10.8-0.3 15.3 2.7-8 1.9-15.8-0.9-23.5-0.1 2.8 1.4 7.1 1.1 9.3 3.3 0.5 0.5 0.2 1.1-1.2 1.3 2.3 1 3.4-2.1 5.7-0.4 0.2-0.6 0.2-1 0.3-1.5 0.8-0.3 2 0.8 1.5 1.5-0.2 0.1 0 0.3 0 0.5 18.7 0.4 37.3 1.7 56.2 3.6-1.7 1.1-2.8 1.2-4.2 1.1-7.1-0.5-14.1-0.9-21.2-1.4-3.1-0.2-6.3-0.4-9.4-0.4-7.6-0.2-15-0.7-22.4-1-9-0.4-17.9-0.1-26.9-0.1-1.2 0-2.9-0.4-3.9 1 14.8 0.3 29.7 0.6 44.4 1.1 14.8 0.6 29.9 1.3 44.2 4.2-4.3 1-8.8 0.9-13 0.5-5.3-0.5-10.5-1.1-15.8-1.2-11.4-0.3-22.9-0.9-34.3-1.2-17.6-0.4-35.4-0.3-53.1-0.4-10.8-0.1-21.7-0.2-32.5 0-17.8 0.4-35.7 0.2-53.5 0.5-13.1 0.3-26.3 0.1-39.4 0.5-11.1 0.3-22.4 0.6-33.6 1-13.1 0.6-26.1 0.2-39.3 0.4-3.9 0.1-7.6 0.2-11.8-0.2 0.9-1.2 2.3-1.3 3.9-1.3 8.4 0.2 16.6-0.4 24.9-0.9 3.9-0.2 7.9-0.4 11.9 0.2 2.5 0.4 5.3-0.3 8-0.4 7.3-0.4 14.7-0.7 22-0.9 11.9-0.5 23.7-1.2 35.6-0.8 7.7 0.2 15.3-0.6 22.9-0.1 2.3 0.2 4.3-0.5 6.5-1h-17.6c-9.6 0-19-0.1-28.6 0-8 0.1-16.1 0.3-24 0.8-2.6 0.2-5.4 0.1-8.2 0.1-10.1 0.3-20.1 0.6-30.2 0.5-5.4 0-10.7-0.1-15.9 0.6-2.3 0.3-4-1.3-6.5-0.6 0.2 0.4 0.5 0.9 0.6 1.5-1.9 0-4 0.4-4.9-0.1-4.2-2.2-9.4-1.5-14.1-2.3-1.7-0.3-3.7-0.1-4.3-1.5-0.5-1.3 1.9-1.5 2.6-2.6-4.2-1.4-4.6-5-8.5-7.2-1.5 0.2-0.9 2.8-4.2 1.3 0.3 2.4 4.5 3.9 2.8 6.4-2.3 0.3-3.2-0.8-4.2-1.7-2.5-4-5.1-8.4-5.1-12.7 0.2-6.8 0.2-13.8 3.6-20.4 0.3-0.5 0.3-1 0.8-1.4 0.9-0.9 1.2-2.4 3.6-2.1 2.2 0.2 2.5 1.5 2.6 2.6 0.2 1.4 1.5 1.8 3.2 2.5 0.9-1.4 0.5-2.9 2.6-3.7 0.2-0.1 0.3-0.4 0.3-0.4-3.1-2.2 1.2-2.2 2.3-3.3-3.1-1.8-4-4.3-3.7-7-1.5-0.3-3.1-0.4-4.5 0-1.7 0.6-2.2-0.5-2.9-1 0.6-0.5 0.8-1.1 2.2-1.3 7.6-0.9 15.2-1.7 22.9-2 20-0.7 39.9-0.9 59.9-1 11.9-0.1 23.8 0.4 35.6 1.1 3.6 0.2 7.1-0.9 10.7-0.5 7.9 0.9 15.8 0.3 23.8 0.5 7.3 0.1 14.4-0.6 21.7-0.1 12.2 0.9 24.4 0.3 36.7 0.6 9.4 0.3 18.9 0.4 28.2 1 11.9 0.7 23.8 1.3 35.6 2 11.1 0.6 22.4 0.5 33.3 2 7.1 1 14.4 1.1 21.3 2.4 4 0.7 8.2 1.6 12.4 1.9 2.2 0.2 0.9 1 1.5 1.5-4-0.8-8-0.8-12.1-1.4-4.3-0.7-8.5-1-12.8 0.4-2.9 1-6.3 0.2-9.3-0.1-10.2-1.1-20.6-1.6-30.8-2.4-12.1-0.9-24.3-1.4-36.4-2.1-9.9-0.6-20-0.5-29.9-1-11.4-0.6-22.7 0-34.2-0.5-6.3-0.3-12.3-0.3-18.5-0.4-4.2-0.1-8.4 1.3-12.8 0.3 0.6 0.2 1.2 0.7 1.9 0.7 10.5 0 20.9 1.9 31.6 1.7 6.5-0.1 13.1 0.2 19.8 0.8 3.2 0.3 6.3-0.4 9.7-0.1 7.6 0.7 15.5 0.5 23 0.8 12.4 0.5 24.7 0.4 37.1 1.1 13.3 0.7 26.8 2.1 39.9 4.1 6.2 0.9 12.7 1.5 19.2 1.7 0.6 0 1.1 0.1 1.5 0.5-4.6 0.1-9.3 0-13.9-0.5-0.6 1.1 1.4 0.9 1.5 1.9-9.7 1.6-19.6-1.4-29.4-0.1 2.2 1.4 5.1 1 7.4 1 7.3 0.1 14.1 1.3 21.2 1.9 2.8 0.3 5.9 0 8.5 0.8 1.5 0.5 4.6-1.1 4.9 1.3 4-0.7 7.3 1.5 11.1 1.2 4-0.3 7.7 0.6 11.6 1.1 0.8 0.1 2.2 0.3 2.3 1.1 0.2 1-1.1 1.2-2 1.5-3.4 1-6.7-0.4-10.1-0.4-0.9 0-2-0.2-2.9-0.2-9.4 0.1-18.8-1.3-28.3-1.8-6-0.4-12.1-0.9-18.1-1.3 0 0.2 0 0.4-0.2 0.6 6.1 0.5 12.1 1.4 18.3 0.7z"/>
  153.                             </svg>
  154.                         </span>
  155.                                 <!-- SVG END -->
  156.                     </span>
  157.                         </h1>
  159.                         <!-- Content -->
  160.                         <p class="my-4 lead">Pomóż swojemu dziecku rozwijać cyfrowe kompetencje i zapewnij lepszy start w przyszłość. Dołącz do grona tysiąca zadowolonych rodziców! </p>
  162.                         <!-- Info -->
  163.                         <ul class="list-inline position-relative justify-content-center justify-content-lg-start mb-4">
  164.                             <li class="list-inline-item me-2"> <i class="bi bi-patch-check-fill h6 me-1"></i>Trenerzy-Programiści</li>
  165.                             <li class="list-inline-item"> <i class="bi bi-patch-check-fill h6 me-1"></i>Zajęcia przez internet</li>
  166.                             <li class="list-inline-item me-2"> <i class="bi bi-patch-check-fill h6 me-1"></i>Niewielkie grupy</li>
  167.                         </ul>
  168.                     </div>
  169.                     <!-- Left content END -->
  171.                     <!-- Right content START -->
  172.                     <div class="col-lg-7 col-xl-7 text-center position-relative">
  173.                         <div>
  174.                             <img src="{{ asset('./assets/images/element/banner-class.jpg')  }}" style="width:500px;">
  175.                         </div>
  176.                         <div class="card card-body shadow p-4 p-sm-5 position-relative">
  177.                             <!-- Form START -->
  178.                             <form class="row g-3 position-relative" id="contact-form">
  179.                                 <!-- Name -->
  180.                                 <div class="col-md-6 col-lg-12 col-xl-6">
  181.                                     <label class="form-label"><b>Twoje imię i nazwisko *</b></label>
  182.                                     <input type="text" id="contact-form-name" class="form-control orange-border-input" aria-label="Name" style="padding:12px;" required>
  183.                                 </div>
  184.                                 <!-- Phone number -->
  185.                                 <div class="col-md-6 col-lg-12 col-xl-6">
  186.                                     <label class="form-label"><b>Numer Telefonu *</b></label>
  187.                                     <input type="text" id="contact-form-phone" class="form-control orange-border-input" style="padding:12px;" required>
  188.                                 </div>
  189.                                 <!-- Email -->
  190.                                 <div class="col-md-6 col-lg-12 col-xl-6">
  191.                                     <label class="form-label"><b>Twój email (niewymagany)</b></label>
  192.                                     <input type="email" id="contact-form-email" class="form-control orange-border-input" style="padding:12px;">
  193.                                 </div>
  194.                                 <div class="col-md-6 col-lg-12 col-xl-6">
  195.                                     <label class="form-label"><b>Szkoła (Miasto i numer placówki)</b></label>
  196.                                     <input type="text" id="contact-form-school" class="form-control orange-border-input" style="padding:12px;">
  197.                                 </div>
  198.                                 <!-- Button -->
  199.                                 <div class="d-sm-flex align-items-center justify-content-center justify-content-lg-start">
  200.                                     <!-- Button -->
  201.                                     <submit class="btn btn-lg btn-gold mx-auto mt-3" id="free-lesson">ZAPISZ NA DARMOWE WARSZTATY</submit>
  202.                                 </div>
  203.                             </form>
  204.                             <!-- Form END -->
  205.                         </div>
  206.                         <!-- Image -->
  207.                         <!--
  208.                         <div class="position-relative">
  209.                             <img src="{{ asset('./assets/images/element/banner-class.jpg')  }}" alt="">
  210.                         </div>
  211.                         -->
  212.                     </div>
  213.                     <!-- Right content END -->
  214.                 </div>
  215.             </div>
  216.             <!-- Content END -->
  217.         </section>
  218.         <!-- =======================
  219.         Main Banner END -->
  221.         <section>
  222.             <div class="container">
  223.                 <div class="row g-4 align-items-center">
  224.                     <div class="col-lg-5">
  225.                         <!-- Title -->
  226.                         <h2>Co wyróżnia naukę z <span class="text-warning">Małymi Programistami</span> ?</h2>
  227.                         <!-- Image -->
  228.                         <div class="overflow-hidden">
  229.                             <img src="assets/images/stationary/programowanie.png" class="card-img-top" alt="course image">
  230.                             <div class="card-img-overlay d-flex p-3">
  231.                                 <!-- Video button and link -->
  232.                                 <div class="m-auto">
  233.                                     <a href="{{ asset('./assets/videos/main.mp4')  }}" class="btn btn-lg text-gold btn-round btn-white-shadow mb-0" data-glightbox="" data-gallery="course-video">
  234.                                         <i class="fas fa-play"></i>
  235.                                     </a>
  236.                                 </div>
  237.                             </div>
  238.                         </div>
  240.                     </div>
  241.                     <div class="col-lg-7" style="padding-top: 100px;">
  242.                         <div class="row g-4">
  243.                             <!-- Item -->
  244.                             <div class="col-sm-6">
  245.                                 <div class="bs-gold bg-opacity-10 text-gold rounded-2">
  246.                                     <i class="fa-solid fa-comments fs-4"></i>
  247.                                     <span style="color: #24292d; padding-left: 1rem; font-size: 1.3125rem !important; font-weight: 700;">Zajęcia na żywo</span>
  248.                                 </div>
  249.                                 <p class="mb-0">Nasz kurs to lekcje na żywo w których dziecko przez cały czas bierze aktywny udział.</p>
  250.                             </div>
  251.                             <!-- Item -->
  252.                             <div class="col-sm-6">
  253.                                 <div class="bs-gold bg-opacity-10 text-gold rounded-2">
  254.                                     <i class="fa-solid fa-users-rectangle fs-4"></i>
  255.                                     <span style="color: #24292d; padding-left: 1rem; font-size: 1.3125rem !important; font-weight: 700;">Małe grupy</span>
  256.                                 </div>
  257.                                 <p class="mb-0">Grupy składają sie z max 5 osób. Sprawia to że instruktor poświęci odpowiednią ilość czasu każdemu dziecku. </p>
  258.                             </div>
  259.                             <!-- Item -->
  260.                             <div class="col-sm-6">
  261.                                 <div class="bs-gold bg-opacity-10 text-gold rounded-2">
  262.                                     <i class="fa-solid fa-money-bill-1-wave fs-4"></i>
  263.                                     <span style="color: #24292d; padding-left: 1rem; font-size: 1.3125rem !important; font-weight: 700;">Gwarancja Satysfakcji</span>
  264.                                 </div>
  265.                                 <p class="mb-0">Nie kupuj kota w worku. Jeżeli nie spodobają Ci się zajęcia, nie musisz za nie płacić. </p>
  266.                             </div>
  267.                             <!-- Item -->
  268.                             <div class="col-sm-6">
  269.                                 <div class="bs-gold bg-opacity-10 text-gold rounded-2">
  270.                                     <i class="fa-solid fa-gamepad fs-4"></i>
  271.                                     <span style="color: #24292d; padding-left: 1rem; font-size: 1.3125rem !important; font-weight: 700;">Super zabawa</span>
  272.                                 </div>
  273.                                 <p class="mb-0">Mimo, że dzieci uczą się naprawdę trudnych rzeczy, nie traktują tych zajęć jak lekcji w szkole, ale jak wyjątkową zabawę</p>
  274.                             </div>
  275.                         </div>
  276.                     </div>
  277.                 </div>
  278.             </div>
  279.         </section>
  280.         <section>
  281.             <div class="container">
  282.                 <div class="row g-4 align-items-center">
  283.                     <div class="col-lg-12">
  284.                         <!-- Title -->
  285.                         <h2 class="text-center">Kurs programowania <span class="text-warning">SCRATCH</span></h2>
  286.                         <img src="{{ asset('./assets/images/stationary/scratch-logo.png')  }}" style="width:300px;" class ="mx-auto d-block">
  287.                     </div>
  288.                     <div class="col-6 my-4 lead">
  289.                             Zajęcia online Scratch dla dzieci to fascynujący sposób na wprowadzenie najmłodszych uczniów w świat programowania i kreatywnego myślenia. Podczas tych zajęć dzieci uczą się tworzyć własne interaktywne gry, animacje i projekty za pomocą prostego, graficznego języka programowania o nazwie Scratch.Zajęcia stacjonarne w szkołach Scratch dla dzieci nie tylko uczą podstaw programowania, ale także rozwijają kreatywność, umiejętności interpersonalne i umysłowe. To doskonały sposób na przygotowanie dzieci do cyfrowego świata i zachęcenie ich do eksploracji nowych technologii.
  290.                         <a href="https://scratch.mit.edu/projects/403884641/embed" target=”_blank” ><img src="https://cyberfun.pl/assets/images/gra.gif" style="padding-top:50px;" alt="about"></a>
  291.                     </div>
  292.                     <div class="col-6 my-4 lead">
  293.                         <p><b>1.Tworzenie gier i animacji:</b> Dzieci używają Scratch do projektowania gier, w których mogą grać, oraz animacji, które ożywiają ich wyobraźnię</p>
  294.                         <p> <b>2. Kreatywność:</b> Scratch zachęca dzieci do wyrażania swojej kreatywności, pozwalając im projektować własne postacie, tła i dźwięki.</p>
  296.                         <p> <b>3. Rozwiązywanie problemów: </b>Podczas rozwoju projektów dzieci rozwijają umiejętność rozwiązywania problemów, uczą się logiki i myślenia algorytmicznego.</p>
  298.                         <p>  <b>4.Współpraca: </b>Scratch może być używany w grupach, co zachęca dzieci do współpracy, dzielenia się pomysłami i rozwiązywania problemów razem.</p>
  300.                         <p>   <b>5.Rozwijanie umiejętności komputerowych: </b> Dzieci zdobywają podstawową wiedzę na temat działania komputera, co może przydać się w przyszłości.</p>
  302.                         <p>    <b>6.Wzmacnianie pewności siebie:</b> Sukcesy w tworzeniu projektów Scratch wzmacniają poczucie własnej wartości i pewność siebie uczniów.</p>
  304.                         <p>     <b>7. Radość z nauki:</b> Scratch jest interaktywny i zabawny, co sprawia, że nauka programowania staje się przyjemnością.</p>
  305.                     </div>
  306.                 </div>
  307.             </div>
  308.         </section>
  309.         <section>
  310.             <div class="container">
  311.                 <div class="row g-4 justify-content-md-center">
  312.                     <!-- Category item -->
  313.                     <div class="col-sm-6 col-lg-12 col-xl-12 text-center">
  314.                         <h2>Darmowe Warsztaty</h2>
  315.                         <p class="lead text-center">Zapraszamy na niezwykłe i kreatywne warsztaty programowania dla dzieci, gdzie świat kodowania staje się przyjemną zabawą! Nasze zajęcia są <br><b>całkowicie darmowe</b><br> i skierowane do dzieci w wieku <b>od 7 do 12 lat</b>, które chcą odkryć tajniki tworzenia własnych gier i animacji.
  316.                             <br />
  317.                             Nie jest wymagane wcześniejsze doświadczenie w programowaniu. Nasze warsztaty są dostosowane do różnych poziomów zaawansowania, dzięki czemu każde dziecko może znaleźć coś dla siebie.
  318.                             <br />
  319.                             Aby wziąć udział w warsztatach Scratch, prosimy o dokonanie rejestracji, ponieważ ilość miejsc jest ograniczona. Pamiętaj, że warsztaty są całkowicie darmowe, więc to doskonała okazja, aby rozpocząć przygodę z programowaniem!
  320.                             <br />
  321.                             Niech Twoje dziecko odkryje fascynujący świat kodowania i tworzenia własnych projektów na naszych warsztatach Scratch. Czekamy na wszystkie małe entuzjastów programowania!
  322.                         </p>
  323.                     </div>
  324.                 </div>
  326.             <!-- Right content START -->
  327.             <div class="col-lg-12 col-xl-12 text-center position-relative">
  328.                 <div class="card card-body shadow p-4 p-sm-5 position-relative">
  329.                     <!-- Form START -->
  330.                     <form class="row g-3 position-relative" id="contact-form2">
  331.                         <!-- Name -->
  332.                         <div class="col-md-6 col-lg-12 col-xl-6">
  333.                             <label class="form-label"><b>Twoje imię i nazwisko *</b></label>
  334.                             <input type="text" id="contact-form-name2" class="form-control orange-border-input" aria-label="Name" style="padding:12px;" required>
  335.                         </div>
  336.                         <!-- Phone number -->
  337.                         <div class="col-md-6 col-lg-12 col-xl-6">
  338.                             <label class="form-label"><b>Numer Telefonu *</b></label>
  339.                             <input type="text" id="contact-form-phone2" class="form-control orange-border-input" style="padding:12px;" required>
  340.                         </div>
  341.                         <!-- Email -->
  342.                         <div class="col-md-6 col-lg-12 col-xl-6">
  343.                             <label class="form-label"><b>Twój email (niewymagany)</b></label>
  344.                             <input type="email" id="contact-form-email2" class="form-control orange-border-input" style="padding:12px;">
  345.                         </div>
  346.                         <div class="col-md-6 col-lg-12 col-xl-6">
  347.                             <label class="form-label"><b>Szkoła (Miasto i numer placówki)</b></label>
  348.                             <input type="text" id="contact-form-school2" class="form-control orange-border-input" style="padding:12px;">
  349.                         </div>
  350.                         <!-- Button -->
  351.                         <div class="d-sm-flex align-items-center justify-content-center justify-content-lg-start">
  352.                             <!-- Button -->
  353.                             <submit class="btn btn-lg btn-gold mx-auto mt-3" id="free-lesson2">ZAPISZ NA DARMOWE WARSZTATY</submit>
  354.                         </div>
  355.                     </form>
  356.                     <!-- Form END -->
  357.                 </div>
  358.             </div>
  359.             </div>
  360.             <!-- Right content END -->
  361.         </section>
  363.         <!-- =======================
  364.         Reviews START -->
  365.         <section class="bg-light">
  366.             <div class="container">
  367.                 <div class="row g-4 g-lg-5 align-items-center">
  368.                     <div class="col-xl-7 order-2 order-xl-1">
  369.                         <div class="row mt-0 mt-xl-5">
  370.                             <!-- Review -->
  371.                             <div class="col-md-7 position-relative mb-0 mt-0 mt-md-5">
  372.                                 <!-- SVG -->
  373.                                 <figure class="fill-danger opacity-2 position-absolute top-0 start-0 translate-middle mb-3">
  374.                                     <svg width="211px" height="211px">
  375.                                         <path d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,163.014 -0.005,105.011 C-0.005,47.015 47.013,-0.004 105.012,-0.004 C163.010,-0.004 210.030,47.015 210.030,105.011 Z"></path>
  376.                                     </svg>
  377.                                 </figure>
  379.                                 <div class="bg-body shadow text-center p-4 rounded-3 position-relative mb-5 mb-md-0">
  380.                                     <!-- Avatar -->
  381.                                     <div class="avatar avatar-xl mb-3">
  382.                                         <img class="avatar-img rounded-circle" src="{{ asset('./assets/images/avatar/01.jpg')  }}" alt="avatar">
  383.                                     </div>
  384.                                     <!-- Content -->
  385.                                     <blockquote>
  386.                                         <p>
  387.                                             <span class="me-1 small"><i class="fas fa-quote-left"></i></span>
  388.                                             Bardzo przystępnie prowadzone kursy dla dzieci i młodzieży. Prowadzący merytorycznie przygotowani, ale co najważniejsze, mający bardzo dobry kontakt z dzieciakami. Efekt - kursanci chcą wracać co semestr i kontynuować naukę, a może zabawę ? Polecam
  389.                                             <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  390.                                         </p>
  391.                                     </blockquote>
  392.                                     <!-- Rating -->
  393.                                     <ul class="list-inline mb-2">
  394.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  395.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  396.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  397.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  398.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
  399.                                     </ul>
  400.                                     <!-- Info -->
  401.                                     <h6 class="mb-0">Dominika Markowska</h6>
  402.                                 </div>
  403.                             </div>
  405.                             <!-- Mentor list -->
  406.                             <div class="col-md-5 mt-5 mt-md-0 d-none d-md-block">
  407.                                 <div class="bg-body shadow p-4 rounded-3 d-inline-block position-relative">
  408.                                     <!-- Icon -->
  409.                                     <div class="icon-lg bg-warning rounded-circle position-absolute top-0 start-100 translate-middle">
  410.                                         <i class="bi bi-shield-fill-check text-dark"></i>
  411.                                     </div>
  412.                                     <!-- Title -->
  413.                                     <h6 class="mb-3">Sprawdzeni nauczyciele</h6>
  414.                                     <!-- Mentor Item -->
  415.                                     <div class="d-flex align-items-center mb-3">
  416.                                         <!-- Avatar -->
  417.                                         <div class="avatar avatar-sm">
  418.                                             <img class="avatar-img rounded-1" src="{{ asset('./assets/images/avatar/09.jpg')  }}" alt="avatar">
  419.                                         </div>
  420.                                         <!-- Info -->
  421.                                         <div class="ms-2">
  422.                                             <h6 class="mb-0">Kasia Popława</h6>
  423.                                             <p class="mb-0 small">Nauczyciel Scratch</p>
  424.                                         </div>
  425.                                     </div>
  427.                                     <!-- Mentor Item -->
  428.                                     <div class="d-flex align-items-center mb-3">
  429.                                         <!-- Avatar -->
  430.                                         <div class="avatar avatar-sm">
  431.                                             <img class="avatar-img rounded-1" src="{{ asset('./assets/images/avatar/04.jpg')  }}" alt="avatar">
  432.                                         </div>
  433.                                         <!-- Info -->
  434.                                         <div class="ms-2">
  435.                                             <h6 class="mb-0">Paweł Dobrydach</h6>
  436.                                             <p class="mb-0 small">Trener Unity</p>
  437.                                         </div>
  438.                                     </div>
  440.                                     <!-- Mentor Item -->
  441.                                     <div class="d-flex align-items-center">
  442.                                         <!-- Avatar -->
  443.                                         <div class="avatar avatar-sm">
  444.                                             <img class="avatar-img rounded-1" src="{{ asset('./assets/images/avatar/02.jpg')  }}" alt="avatar">
  445.                                         </div>
  446.                                         <!-- Info -->
  447.                                         <div class="ms-2">
  448.                                             <h6 class="mb-0">Krystian Struga</h6>
  449.                                             <p class="mb-0 small">Trener Python</p>
  450.                                         </div>
  451.                                     </div>
  452.                                 </div>
  453.                             </div>
  454.                         </div> <!-- Row END -->
  456.                         <div class="row mt-5 mt-xl-0">
  457.                             <!-- Rating -->
  458.                             <div class="col-7 mt-0 mt-xl-5 text-end position-relative z-index-1 d-none d-md-block">
  459.                                 <!-- SVG -->
  460.                                 <figure    class="fill-danger position-absolute top-0 start-50 mt-n7 ms-6 ps-3 pt-2 z-index-n1 d-none d-lg-block">
  461.                                     <svg enable-background="new 0 0 160.7 159.8" height="180px">
  462.                                         <path d="m153.2 114.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  463.                                         <path d="m116.4 114.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  464.                                         <path d="m134.8 114.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  465.                                         <path d="m135.1 96.9c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  466.                                         <path d="m153.5 96.9c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  467.                                         <path d="m98.3 96.9c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  468.                                         <ellipse cx="116.7" cy="99.1" rx="2.1" ry="2.2" />
  469.                                         <path d="m153.2 149.8c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.3 0.9-2.2 2.1-2.2z" />
  470.                                         <path d="m135.1 132.2c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2 0-1.3 0.9-2.2 2.1-2.2z" />
  471.                                         <path d="m153.5 132.2c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.3 0.9-2.2 2.1-2.2z" />
  472.                                         <path d="m80.2 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2z" />
  473.                                         <path d="m117 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  474.                                         <path d="m98.6 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  475.                                         <path d="m135.4 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  476.                                         <path d="m153.8 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  477.                                         <path d="m80.6 61.7c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  478.                                         <ellipse cx="98.9" cy="63.9" rx="2.1" ry="2.2" />
  479.                                         <path d="m117.3 61.7c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  480.                                         <ellipse cx="62.2" cy="63.9" rx="2.1" ry="2.2" />
  481.                                         <ellipse cx="154.1" cy="63.9" rx="2.1" ry="2.2" />
  482.                                         <path d="m135.7 61.7c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  483.                                         <path d="m154.4 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  484.                                         <path d="m80.9 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  485.                                         <path d="m44.1 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  486.                                         <path d="m99.2 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2z" />
  487.                                         <ellipse cx="117.6" cy="46.3" rx="2.1" ry="2.2" />
  488.                                         <path d="m136 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  489.                                         <path d="m62.5 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  490.                                         <path d="m154.7 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  491.                                         <path d="m62.8 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  492.                                         <ellipse cx="136.3" cy="28.6" rx="2.1" ry="2.2" />
  493.                                         <path d="m99.6 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  494.                                         <path d="m117.9 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2z" />
  495.                                         <path d="m81.2 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z" />
  496.                                         <path d="m26 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z" />
  497.                                         <ellipse cx="44.4" cy="28.6" rx="2.1" ry="2.2" />
  498.                                         <path d="m136.6 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z" />
  499.                                         <path d="m155 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z" />
  500.                                         <path d="m26.3 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z" />
  501.                                         <path d="m81.5 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z" />
  502.                                         <path d="m63.1 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z" />
  503.                                         <path d="m44.7 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z" />
  504.                                         <path d="m118.2 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z" />
  505.                                         <path d="m7.9 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z" />
  506.                                         <path d="m99.9 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2z" />
  507.                                     </svg>
  508.                                 </figure>
  510.                                 <div class="p-3 bg-primary d-inline-block rounded-4 shadow-lg text-center" style="background:url({{ asset('./assets/images/pattern/01.png')  }}) no-repeat center center; background-size:cover;">
  511.                                     <!-- Info -->
  512.                                     <h5 class="text-white mb-0">4.5/5.0</h5>
  513.                                     <!-- Rating -->
  514.                                     <ul class="list-inline mb-2">
  515.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  516.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  517.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  518.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  519.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
  520.                                     </ul>
  521.                                     <p class="text-white mb-0">Opinia oparta o 113 recenzji</p>
  522.                                 </div>
  523.                             </div>
  525.                             <!-- Review -->
  526.                             <div class="col-md-5 mt-n6 mb-0 mb-md-5">
  527.                                 <div class="bg-body shadow text-center p-4 rounded-3">
  528.                                     <!-- Avatar -->
  529.                                     <div class="avatar avatar-xl mb-3">
  530.                                         <img class="avatar-img rounded-circle" src="{{ asset('./assets/images/avatar/03.jpg')  }}" alt="avatar">
  531.                                     </div>
  532.                                     <!-- Content -->
  533.                                     <blockquote>
  534.                                         <p>
  535.                                             <span class="me-1 small"><i class="fas fa-quote-left"></i></span>
  536.                                             Świetna inicjatywa, pobudza wyobraźnię i kreatywność dzieci od najmłodszych lat
  537.                                             <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  538.                                         </p>
  539.                                     </blockquote>
  540.                                     <!-- Rating -->
  541.                                     <ul class="list-inline mb-2">
  542.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  543.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  544.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  545.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  546.                                         <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
  547.                                     </ul>
  548.                                     <!-- Info -->
  549.                                     <h6 class="mb-0">Robert Borkowski</h6>
  550.                                 </div>
  551.                             </div>
  552.                         </div> <!-- Row END -->
  553.                     </div>
  554.                     <div class="col-xl-5 order-1 text-center text-xl-start">
  555.                         <!-- Title -->
  556.                         <h2 class="fs-1">Opinie naszych uczniów i rodziców</h2>
  557.                         <p>
  558.                             "Bardzo polecam zajęcia z programowania dla dzieci organizowane przez tę firmę!
  559.                             Moje dziecko uczestniczyło w kilku kursach i zawsze były one bardzo ciekawe i dobrze poprowadzone.
  560.                             Pawełek zawsze czeka z niecierpliwością na kolejne zajęcia i chętnie dzieli się swoimi osiągnięciami z programowania.
  561.                             Gorąco polecam te zajęcia każdemu, kto chce pomóc swojemu dziecku rozwinąć się w dziedzinie technologii!"
  562.                         </p>
  563.                         <a target="_blank" href="https://www.google.com/search?q=cyberfun&ei=L0tbZKikNIH2qwGxxajQCw&ved=0ahUKEwjo94vAoOr-AhUB-yoKHbEiCroQ4dUDCGs&uact=5&oq=cyberfun&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIHCAAQExCABDIHCAAQExCABDIHCAAQExCABDIHCAAQExCABDIICAAQHhATEAoyBggAEB4QEzIGCAAQHhATMgIIJjoHCAAQHhCwA0oECEEYAVB1WOkDYIYGaAFwAHgAgAHCAYgBwgGSAQMwLjGYAQCgAQHIAQHAAQE&sclient=gws-wiz-serp#lrd=0x47164377ab98a51d:0xe46b79b1532740a2,3,,,," class="btn btn-primary mb-0">Napisz Recenzję</a>
  564.                     </div>
  565.                 </div> <!-- Row END -->
  566.             </div>
  567.         </section>
  568.         <!-- =======================
  569.         Reviews END -->
  570.         <section class="mb-n9 position-relative z-index-9">
  571.             <div class="container">
  572.                 <div class="row">
  573.                     <div class="col-11 col-md-10 mx-auto">
  574.                         <div class="bg-warning rounded-3 shadow p-3 p-sm-4 position-relative overflow-hidden">
  575.                             <!-- SVG decoration -->
  576.                             <figure class="position-absolute top-100 start-100 translate-middle mt-n6 ms-n5">
  577.                                 <svg width="211px" height="211px">
  578.                                     <path class="fill-white opacity-4" d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,163.014 -0.005,105.011 C-0.005,47.015 47.013,-0.004 105.012,-0.004 C163.010,-0.004 210.030,47.015 210.030,105.011 Z"></path>
  579.                                 </svg>
  580.                             </figure>
  581.                             <!-- SVG decoration -->
  582.                             <figure class="position-absolute top-100 start-0 translate-middle mt-n6 ms-5">
  583.                                 <svg width="141px" height="141px">
  584.                                     <path class="fill-white opacity-4" d="M140.520,70.258 C140.520,109.064 109.062,140.519 70.258,140.519 C31.454,140.519 -0.004,109.064 -0.004,70.258 C-0.004,31.455 31.454,-0.003 70.258,-0.003 C109.062,-0.003 140.520,31.455 140.520,70.258 Z"></path>
  585.                                 </svg>
  586.                             </figure>
  587.                             <!-- SVG decoration -->
  588.                             <figure class="position-absolute top-0 start-50 mt-4 ms-n9">
  589.                                 <svg width="41px" height="41px">
  590.                                     <path class="fill-white opacity-4" d="M40.531,20.265 C40.531,31.458 31.457,40.531 20.265,40.531 C9.072,40.531 -0.001,31.458 -0.001,20.265 C-0.001,9.073 9.072,-0.001 20.265,-0.001 C31.457,-0.001 40.531,9.073 40.531,20.265 Z"></path>
  591.                                 </svg>
  592.                             </figure>
  594.                             <!-- Icon logos START -->
  595.                             <div class="p-2 bg-white shadow rounded-3 rotate-74 position-absolute top-0 start-0 ms-3 mt-5 d-none d-sm-block">
  596.                                 <img src="{{ asset('./assets/images/client/unity.png')  }}" class="h-40px" alt="Icon">
  597.                             </div>
  598.                             <div class="p-1 bg-white shadow rounded-3 rotate-74 position-absolute top-0 end-0 mt-5 me-5 d-none d-sm-block">
  599.                                 <img src="{{ asset('./assets/images/client/minecraft.svg')  }}" class="h-30px" alt="Icon">
  600.                             </div>
  601.                             <div     class="p-2 bg-white shadow rounded-3 rotate-130 position-absolute bottom-0 start-50 ms-5 mb-2 d-none d-lg-block">
  602.                                 <img src="{{ asset('./assets/images/client/scratch.png')  }}" class="h-20px" alt="Icon">
  603.                             </div>
  604.                             <!-- Icon logos END -->
  606.                             <div class="row">
  607.                                 <div class="col-md-8 mx-auto text-center py-5 position-relative">
  608.                                     <!-- Title -->
  609.                                     <h2 id="newsletter_title">Zapisz się do Newslettera i bądź na bieżąco z promocjami</h2>
  610.                                     <!-- Form -->
  611.                                     <form class="row align-items-center justify-content-center mt-3">
  612.                                         <div class="col-lg-8" id="newsletter_input">
  613.                                             <div class="bg-body shadow rounded-pill p-2">
  614.                                                 <div class="input-group">
  615.                                                     <input class="form-control border-0 me-1" id="newsletter_email" type="email" placeholder="Wprowadź swój adres email">
  616.                                                     <button type="button" id="newsletter_button" class="btn btn-blue mb-0 rounded-pill">Zapisz!</button>
  617.                                                 </div>
  618.                                             </div>
  619.                                         </div>
  620.                                     </form>
  621.                                 </div>
  622.                             </div> <!-- Row END -->
  623.                         </div>
  624.                     </div>
  625.                 </div> <!-- Row END -->
  626.             </div>
  627.         </section>
  628.     </main>
  629. {% endblock %}
  632. {%  block js %}
  633.     <script src="{{ asset('./assets/js/jquery-3.6.4.min.js')  }}"></script>
  634.     <script>
  635.         function isValidEmail() {
  636.             var input = document.getElementById('newsletter_email')
  637.             var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  638.             return pattern.test(input.value);
  639.         }
  640.         function sendMessage() {
  641.             const data = {
  642.                 email: $('#newsletter_email').val(),
  643.                 type: 'newsletter'
  644.             };
  646.             $.ajax({
  647.                 url: '/message',
  648.                 method: 'POST',
  649.                 data: data,
  650.                 success: function(response) {
  651.                     document.getElementById('newsletter_title').innerHTML = "Dziękujemy!</br>Twój adres mailowy został dodany do Newslettera";
  652.                     document.getElementById('newsletter_input').style.setProperty('display', 'none');
  653.                 },
  654.                 error: function(jqXHR, textStatus, errorThrown) {
  655.                     console.error('Error sending message:', errorThrown);
  656.                 }
  657.             });
  658.         }
  660.         function sendContactForm() {
  661.             const data = {
  662.                 name: $('#contact-form-name').val(),
  663.                 phone: $('#contact-form-phone').val(),
  664.                 email: $('#contact-form-email').val(),
  665.                 message: 'Darmowe online' + $('#contact-form-school').val(),
  666.                 type: 'contact'
  667.             };
  669.             $.ajax({
  670.                 url: '/message',
  671.                 method: 'POST',
  672.                 data: data,
  673.                 success: function(response) {
  674.                     document.getElementById('contact-form').innerHTML = "<div class=\"col-lg-12 mx-auto text-center\">\n" +
  675.                         "                        <h2>Dziękujemy za zgłoszenie</h2>\n" +
  676.                         "                        <h5 class=\"mb-0\">Odezwiemy się o Ciebie w ciągu 2 dni i zaproponujemy termin darmowych zajęć. Do usłyszenia!</h5>\n" +
  677.                         "                    </div>";
  678.                 },
  679.                 error: function(jqXHR, textStatus, errorThrown) {
  680.                     console.error('Error sending message:', errorThrown);
  681.                 }
  682.             });
  683.         }
  685.         document.getElementById('newsletter_button').addEventListener('click', function() {
  686.             var alert = document.createElement('div');
  687.             if(isValidEmail()) {
  688.                 sendMessage();
  689.             } else {
  690.                 alert.className = 'alert text-center alert-danger';
  691.                 alert.innerHTML = '<h4 class="alert-heading">Podaj prawidłowy adres email</h4>';
  692.             }
  693.             alert.style.position = 'fixed';
  694.             alert.style.left = '50%';
  695.             alert.style.top = '30%';
  696.             alert.style.transform = 'translate(-50%, -50%)';
  697.             alert.style.BorderRadius = "10px";
  698.             alert.style.zIndex = '10';
  699.             document.body.appendChild(alert);
  700.             setTimeout(function() {
  701.                 document.body.removeChild(alert);
  702.             }, 2000);
  704.         });
  706.         function sendContactForm2() {
  707.             const data = {
  708.                 name: $('#contact-form-name2').val(),
  709.                 phone: $('#contact-form-phone2').val(),
  710.                 email: $('#contact-form-email2').val(),
  711.                 message: 'Darmowe online' + $('#contact-form-school2').val(),
  712.                 type: 'contact'
  713.             };
  715.             $.ajax({
  716.                 url: '/message',
  717.                 method: 'POST',
  718.                 data: data,
  719.                 success: function(response) {
  720.                     document.getElementById('contact-form2').innerHTML = "<div class=\"col-lg-12 mx-auto text-center\">\n" +
  721.                         "                        <h2>Dziękujemy za zgłoszenie</h2>\n" +
  722.                         "                        <h5 class=\"mb-0\">Odezwiemy się o Ciebie w ciągu 2 dni i zaproponujemy termin darmowych zajęć. Do usłyszenia!</h5>\n" +
  723.                         "                    </div>";
  724.                 },
  725.                 error: function(jqXHR, textStatus, errorThrown) {
  726.                     console.error('Error sending message:', errorThrown);
  727.                 }
  728.             });
  729.         }
  731.         document.getElementById('newsletter_button').addEventListener('click', function() {
  732.             var alert = document.createElement('div');
  733.             if(isValidEmail()) {
  734.                 sendMessage();
  735.             } else {
  736.                 alert.className = 'alert text-center alert-danger';
  737.                 alert.innerHTML = '<h4 class="alert-heading">Podaj prawidłowy adres email</h4>';
  738.             }
  739.             alert.style.position = 'fixed';
  740.             alert.style.left = '50%';
  741.             alert.style.top = '30%';
  742.             alert.style.transform = 'translate(-50%, -50%)';
  743.             alert.style.BorderRadius = "10px";
  744.             alert.style.zIndex = '10';
  745.             document.body.appendChild(alert);
  746.             setTimeout(function() {
  747.                 document.body.removeChild(alert);
  748.             }, 2000);
  750.         });
  752.         document.getElementById('free-lesson').addEventListener('click', function() {
  753.             sendContactForm();
  754.         });
  755.         document.getElementById('free-lesson2').addEventListener('click', function() {
  756.             sendContactForm2();
  757.         });
  758.     </script>
  759.     {{ parent() }}
  760. {%  endblock %}