templates/faq/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{{ seoTitle }}!{% endblock %}
  3. {% block seo %}
  4.     <meta name="title" content="{{ seoTitle }}" />
  5.     <meta name="description" content="{{ seoDescription }}" />
  6.     <meta name="keywords" content="{{ seoKeys }}" />
  7. {% endblock %}
  8. {% block stylesheets %}
  9.     {{ parent() }}
  10.     <style>
  11.         .row.align-items-md-stretch {
  12.             margin: 1em 0;
  13.         }
  14.         input {
  15.             position: absolute;
  16.             opacity: 0;
  17.             z-index: -1;
  18.         }
  20.         .row {
  21.             display: flex;
  22.         }
  23.         .row .col {
  24.             flex: 1;
  25.         }
  26.         .row .col:last-child {
  27.             margin-left: 1em;
  28.         }
  30.         /* Accordion styles */
  31.         .tabs {
  32.             border-radius: 8px;
  33.             overflow: hidden;
  34.             box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
  35.         }
  37.         .tab {
  38.             width: 100%;
  39.             color: white;
  40.             overflow: hidden;
  41.         }
  42.         .tab-label {
  43.             display: flex;
  44.             justify-content: space-between;
  45.             padding: 1em;
  46.             background: #2c3e50;
  47.             font-weight: bold;
  48.             cursor: pointer;
  49.             /* Icon */
  50.         }
  51.         .tab-label:hover {
  52.             background: #1a252f;
  53.         }
  54.         .tab-label::after {
  55.             content: "❯";
  56.             width: 1em;
  57.             height: 1em;
  58.             text-align: center;
  59.             transition: all 0.35s;
  60.         }
  61.         .tab-content {
  62.             max-height: 0;
  63.             padding: 0 1em;
  64.             color: #2c3e50;
  65.             background: white;
  66.             transition: all 0.35s;
  67.         }
  68.         .tab-close {
  69.             display: flex;
  70.             justify-content: flex-end;
  71.             padding: 1em;
  72.             font-size: 0.75em;
  73.             background: #2c3e50;
  74.             cursor: pointer;
  75.         }
  76.         .tab-close:hover {
  77.             background: #1a252f;
  78.         }
  80.         input:checked + .tab-label {
  81.             background: #1a252f;
  82.         }
  83.         input:checked + .tab-label::after {
  84.             transform: rotate(90deg);
  85.         }
  86.         input:checked ~ .tab-content {
  87.             max-height: 100vh;
  88.             padding: 1em;
  89.         }
  90.     </style>
  91. {% endblock %}
  92. {% block main %}
  93.     <div class="container">
  94.         <h1 class="text-center display-2">FAQ</h1>
  96.         <div class="container-fluid p-5 mb-4 ">
  97.             <div class="container">
  98.                 <p class="text-center"> Diese Seite bietet Antworten auf häufig gestellte Fragen (FAQ), um Ihnen bei der Navigation und Nutzung unserer Dienstleistungen zu helfen.
  100.                     </p>
  101.                 <h3 class="text-center display-4">Fragen und Antworten:</h3>
  102.             </div>
  103.             <div class="container">
  105.                 <div class="tabs">
  106.                 {% for f in faq  %}
  108.                     <div class="tab">
  109.                         <input type="radio" id="rd{{ loop.index }}" name="rd">
  110.                         <label class="tab-label" for="rd{{ loop.index }}">{{ f.name }}</label>
  111.                         <div class="tab-content">
  112.                             {{ f.description | raw }}
  113.                         </div>
  114.                     </div>
  116.                 {% endfor %}
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </div>
  122. {% endblock %}
  124. {% block javascripts %}
  125.     {{ parent() }}
  126.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  128. {% endblock %}