templates/accueil/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Page d'Accueil - Aéroclub {% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" type="text/css" href="{{ asset('public/css/style.css') }}">
  7.     <!-- Préchargement de la police Google -->
  8.     <link href="https://fonts.googleapis.com/css?family=Oswald" as="style">
  9.     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald" crossorigin="anonymous">
  10.     
  11.     <!-- BOOSTRAP-->
  12.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  13.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" defer></script>
  14.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" defer></script>
  15.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" defer></script>
  17.     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
  18.     <script src="https://kit.fontawesome.com/b04d3e51a0.js" crossorigin="anonymous"></script>
  19. {% endblock %}
  21. {% block navbar %}
  22. <nav>
  23.     <ul>
  24.         {% for categorie in categories %}
  25.             <li><a href="#">{{ categorie.name }}</a></li>
  26.         {% endfor %}
  27.     </ul>
  28. </nav>
  29. {% endblock %}
  31. {% block body %}
  33.     <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 70%; height:auto; justify-content:center;display: flex;">
  34.         <div class="carousel-inner">
  35.             <div class="carousel-item active">
  36.                 <img class="d-block w-100" src="uploads/images/avionpose.jpeg" alt="First slide">
  37.             </div>
  38.             <div class="carousel-item">
  39.                 <img class="d-block w-100" src="uploads/images/avionenpleinvol.jpg" alt="Second slide">
  40.             </div>
  41.             <div class="carousel-item">
  42.                 <img class="d-block w-100" src="uploads/images/aviondecollage.jpeg" alt="Third slide">
  43.             </div>
  44.         </div>
  45.     </div>
  46. <main>
  47.     <p id="ParagrapheTexte" style="padding: 5em; align-items:center; margin: 0; font-family: Oswald; display: flex; flex-direction: row; justify-content: center; text-align: center;">
  48.         Bienvenue sur le blog de l'Aéroclub, créé par moi-même,<br> Al karshi Abdullrahman, passionné d'aviation et développeur web.<br>
  49.         J'ai conçu cet espace pour partager notre passion du vol et offrir un lieu de discussion virtuel pour tous les membres de notre aéroclub.<br>
  50.         Ici, vous trouverez des articles sur des discussions, des conseils de pilotage.<br>
  51.         Le blog propose également un forum de discussion.<br>
  52.         Rejoignez-nous et découvrez les cieux avec notre blog, où chaque vol est une nouvelle aventure.
  53.     </p>
  55.     <!-- 1ère SECTION -->
  56.     <section id="blocavion">
  57.         <div id="blocavionBloc">
  58.             <div id="TBEnglobe">
  59.                 <h1 id="Titrebloc">Avion en Plein vol</h1>
  60.                 <p id="Texte">
  61.                     <span>Un avion en plein vol, une vue à couper le souffle</span><br>
  62.                     À bord de l'avion, c'est une expérience à part.<br>
  63.                     À travers le hublot, on admire un spectacle unique : des nuages comme des coussins moelleux et des vues imprenables sur la terre qui défile en dessous.<br>
  64.                     Chaque petite secousse ou virage ajoute une touche de frisson excitant, tandis que l'ambiance à bord est empreinte d'une agréable attente pour les aventures à venir.
  65.                 </p>
  66.             </div>
  67.         </div>
  69.         <div id="blocavionIMG">
  70.             <img src="uploads/images/avionmatin.jpg" style="max-height: 500px; width:100%; height:100%; background-size:cover;" alt="Avion en plein vol au matin">
  71.         </div>
  72.     </section>
  74.     <!-- 2ème SECTION -->
  75.     <section id="blocavion">
  76.         <div id="blocavionIMG">
  77.             <img src="uploads/images/aviondenuit.jpg" style="max-height: 500px; width:100%; height: 100%;" alt="Avion en plein vol de nuit">
  78.         </div>
  80.         <div id="blocavionBloc">
  81.             <div id="TBEnglobe">
  82.                 <h1 id="Titrebloc">Vol en pleine nuit</h1>
  83.                 <p id="Texte">
  84.                     <span>Voler en pleine nuit, une vue à couper le souffle</span><br>
  85.                     Voler sous les étoiles permet de profiter d'une tranquillité rare et d'une vue spectaculaire.<br>
  86.                     Ces moments magiques, partagés avec d'autres passionnés d'aviation, créent des souvenirs inoubliables et renforcent les liens au sein de la communauté de l'aéroclub.<br>
  87.                     C'est une aventure nocturne qui allie camaraderie et émerveillement sous la voûte étoilée.
  88.                 </p>
  89.             </div>
  90.         </div>
  91.     </section>
  93.     <!-- SECTION GALERIE -->
  94.     <section id="GALERIE">
  95.         <div id="BLOC_IMG">
  96.             <img src="uploads/images/logoaeroclubdefrance.jpeg" height="400" width="200" alt="Logo de l'aéroclub de France">
  97.             <div class="EnglobeSigne">
  98.                 <span class="Signe">Notre Emblème</span>
  99.             </div>
  100.         </div>
  102.         <div id="BLOC_IMG">
  103.             <img src="uploads/images/avionsoleil.jpg" height="400" width="200" alt="Avion sous le soleil">
  104.             <div class="EnglobeSigne">
  105.                 <span class="Signe">Admirer la vue</span>
  106.             </div>
  107.         </div>
  109.         <div id="BLOC_IMG">
  110.             <img src="uploads/images/avion.jpg" height="400" width="200" alt="Avion en vol">
  111.             <div class="EnglobeSigne">
  112.                 <span class="Signe">Décollage passionnant</span>
  113.             </div>
  114.         </div>
  116.         <div id="BLOC_IMG">
  117.             <img src="uploads/images/avionlibere.jpeg" height="400" width="200" alt="Avion en liberté">
  118.             <div class="EnglobeSigne">
  119.                 <span class="Signe">Notre liberté</span>
  120.             </div>
  121.         </div>
  122.     </section>
  124.     <!-- SECTION SERVICES -->
  125.     <section id="SERVICES">
  126.         <div class="EnglobeSERVICE">
  127.             <a href="#"><img src="uploads/images/vol.jpg" class="rounded-circle" height="160" width="160" alt="Vol aérien"></a>
  128.             <h3>Une fois en l'air</h3>
  129.             <span class="TexteSERVICE">Plus qu'à profiter de la vue.</span>
  130.         </div>
  132.         <div class="EnglobeSERVICE">
  133.             <a href="#"><img src="uploads/images/avionpaysage.jpg" class="rounded-circle" height="160" width="160" alt="Avion avec paysage"></a>
  134.             <h3>Des paysages magnifiques</h3>
  135.             <span class="TexteSERVICE">Des paysages à couper le souffle.</span>
  136.         </div>
  138.         <div class="EnglobeSERVICE">
  139.             <a href="#"><img src="uploads/images/avionenvol.jpg" class="rounded-circle" height="160" width="160" alt="Avion en vol"></a>
  140.             <h3>Prend ton Envol</h3>
  141.             <span class="TexteSERVICE">Ne reste pas pied au plancher, prend ton envol.</span>
  142.         </div>
  144.         <div class="EnglobeSERVICE">
  145.             <a href="#"><img src="uploads/images/petitavion.jpg" class="rounded-circle" height="160" width="160" alt="Petit avion"></a>
  146.             <h3>Une préparation méticuleuse</h3>
  147.             <span class="TexteSERVICE">Un avion à apprendre et à connaître.</span>
  148.         </div>
  149.     </section>
  150. </main>
  154. {% endblock %}