templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Casting Kalina 2026 - Saison 4{% endblock %}
  3. {% block body %}
  4. <style>
  5.   .kalina-header {
  6.     background: url('{{ asset("img/background-head.webp") }}') no-repeat center center;
  7.     background-size: cover;
  8.     padding: 80px 20px;
  9.     text-align: center;
  10.     position: relative;
  11.   }
  12.   .kalina-header::after {
  13.     content: "";
  14.     position: absolute;
  15.     top: 0; left: 0; right: 0; bottom: 0;
  16.     background: rgba(23, 33, 40, 0.75);
  17.   }
  18.   .kalina-header-content {
  19.     position: relative;
  20.     z-index: 2;
  21.   }
  22.   .kalina-logo {
  23.     max-width: 280px;
  24.     margin-bottom: 20px;
  25.   }
  26.   .kalina-btn {
  27.     background-color: #e44118;
  28.     color: #fff;
  29.     border: none;
  30.     padding: 12px 30px;
  31.     font-size: 1.2rem;
  32.     border-radius: 30px;
  33.     transition: background-color 0.3s ease;
  34.   }
  35.   .kalina-btn:hover {
  36.     background-color: #ccc;
  37.   }
  38.   .section-title {
  39.     color: #e44118;
  40.     font-weight: bold;
  41.   }
  42.   .highlight-box {
  43.     background-color: #1e2a33;
  44.     border-left: 5px solid #e44118;
  45.     padding: 20px;
  46.     border-radius: 8px;
  47.     margin-bottom: 2rem;
  48.   }
  49.   .big-cta {
  50.     background: #e44118;
  51.     color: #fff;
  52.     text-align: center;
  53.     padding: 40px 20px;
  54.     border-radius: 10px;
  55.     margin-top: 3rem;
  56.   }
  57.   .kalina-video {
  58.     display: block;
  59.     margin: 30px auto;
  60.     border-radius: 10px;
  61.     max-width: 90%;
  62.   }
  63.   footer {
  64.     background: #0f151a;
  65.     padding: 20px 0;
  66.     text-align: center;
  67.     font-size: 0.9rem;
  68.     color: #ccc;
  69.     margin-top: 60px;
  70.   }
  71.   footer a, footer a:hover{
  72.     color: #ccc;
  73.     text-decoration: none;
  74.   }
  75. </style>
  76. <!-- Header -->
  77. <header class="kalina-header">
  78.   <div class="kalina-header-content">
  79.     <img src="{{ asset('img/logo-kalina.webp') }}" alt="Logo Kalina" class="kalina-logo img-fluid">
  80.     <h1 class="display-4 section-title">CASTING 2026 - Saison 4</h1>
  81.     <p class="lead section-title">Plongez dans l’aventure et relevez le défi !</p>
  82.   </div>
  83. </header>
  84. <!-- 🎥 Vidéo -->
  85. <div class="ratio ratio-16x9">
  86. <iframe width="560" height="315" src="https://www.youtube.com/embed/0QemWLfXdTY?si=pg2r0jnLxWsddJNT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  87. </div>
  88. {#<video class="kalina-video" controls>
  89.   <source src="{{ asset('video/casting-kalina.mp4') }}" type="video/mp4">
  90.   Votre navigateur ne supporte pas la lecture de vidéos.
  91. </video>#}
  92. <!-- Infos -->
  93. <div class="container py-5">
  94.   <div class="row">
  95.     <div class="col-md-8 mx-auto">
  96.       <div class="highlight-box">
  97.         <p><strong>Kalina</strong> est un jeu d’aventure (et non de survie) : vous êtes totalement pris en charge (alimentation, hébergement, transport ...)</p>
  98.         <p>Vous pouvez gagner <strong> jusqu'à 20000 euros </strong> par équipe</p>
  99.         <p>Nul besoin d’être une grande ou un grand sportif Kalina est à la portée de toutes et tous !</p>
  100.         <p><strong>Relevez le défi Kalina et vivez une aventure inédite !</strong></p>
  101.       </div>
  102.       <div class="highlight-box">
  103.         <h4 class="section-title">⚠️ Avant de commencer</h4>
  104.         <p>Préparez les éléments suivants :</p>
  105.         <ul>
  106.           <li><strong>3 photos individuelles</strong> : portrait, silhouette, et ou une petite vidéo spontanée d'une minute reflétant votre personnalité</li>
  107.          {# <li><strong>1 vidéo de présentation</strong> (45-60 secondes)</li> #}
  108.         </ul>
  109.         <p>Merci de préparer ces éléments avant de démarrer votre dossier de candidature.</p>
  110.       </div>
  111.       <div class="highlight-box">
  112.         <h4 class="section-title">📝 Conditions de participation</h4>
  113.         <ul>
  114.           <li>Avoir minimum 18 ans</li>
  115.           <li>Être disponible du <strong>24 mai au 7 juin 2026</strong></li>
  116.           <li>Ne pas avoir de contre-indication médicale</li>
  117.         </ul>
  118.       </div>
  119.       <div class="big-cta">
  120.         <h2>Prêt·e à tenter l’aventure ?</h2>
  121.         <p class="mb-4">Inscrivez-vous dès maintenant !</p>
  122.         <a style="background-color: #172128;text-decoration:none;" href="{{ path('formulaire') }}" class="kalina-btn">Déposer ma candidature</a>
  123.       </div>
  124.     </div>
  125.   </div>
  126. </div>
  127. <!-- Footer -->
  128. <footer>
  129.   Site créé par <a href="https://basicom.fr" target="_blank">Basicom</a>
  130. </footer>
  131. {% endblock %}