templates/default/index.html.twig line 1

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