templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block title %}Homepage {% endblock %}
  4. {% block inbody %} style="margin : 0 px;background-color: #9a99cc;" class="flex justify-center item-center"{% endblock %}
  5. {% block body %}
  7. <div
  8.     id="transition"
  9.     class="absolute top-0 left-0 bg-[#9A99CC] w-[100vw] h-[100vh] max-h-[100vh] transition-all ease-in-out duration-1000"
  10. >
  12. </div>
  13. <main class="main-wrapper bg-[#9A99CC] w-full h-[100svh] bg-cover bg-center" 
  14.     style="background-image: url('{{ asset("assets/images/home.jpg") }}')"
  15. >
  16.     <div class="w-full h-full bg-gradient-to-t from-[#9A99CC] from-30% to-[#00000099] flex justify-center">
  18.         <div class="max-w-[500px] w-full h-full flex items-center justify-end flex-col pb-4 xl:pb-[10%]">
  19.             <div class="w-[80%] max-w-[300px] absolute top-8  rounded-xl p-2 pt-2 ">
  20.                     <img src="{{ asset('resources/images/LOGO.png') }}" alt="">
  21.             </div>
  22.             <p
  23.                 class="max-w-[500px] font-black text-[#ffd742] text-4xl drop-shadow-[-2px_2px_0px_#dc2f8b] m-0 text-center w-[90svw] -rotate-[7deg]"
  24.             >
  25.                 DIVERTIRSI È BELLO MA VINCERE DI PIÙ!
  26.             </p>
  27.             <a 
  28.                 {# href="{{ path('app_home')}}" #}
  29.                 onclick="changeScreen('{{ path('app_home')}}')"
  30.                 class="animate-bounce card test_transition bg-[#ffd742] rounded-2xl flex flex-row items-center justify-center w-[40%] p-2 mt-5 drop-shadow-[-2px_2px_0px_#dc2f8b] "
  31.             >
  32.                 <p
  33.                 class="font-black text-white text-xl drop-shadow-[-2px_2px_0px_#dc2f8b] m-0 text-center"
  34.                 >
  35.                     ENTRA ORA!
  36.                 </p>
  37.             </a>
  38.         </div>
  40.     </div>
  42. </main>
  46. {% endblock %}
  49. {% block body_javascripts %}
  50. {{ parent() }}
  51. <script>
  53. $( document ).ready(function(){
  54.     $('#transition').addClass('max-h-0');
  55.     $('#transition').removeClass('max-h-[100vh]');
  56.     $('#transition').addClass('z-10');
  57. })
  59. function changeScreen(path) {
  60.     $('#transition').addClass('max-h-[100vh]');
  61.     $('#transition').addClass('z-10');
  62.     setTimeout(function() {
  63.         window.location.href = path;
  64.     },1000);
  65. }
  67. </script>
  68. {% endblock %}