templates/Elements/AboutUs/skills.html.twig line 1

Open in your IDE?
  1. {% for skill in skills %}
  2. <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="{{ 300 + (loop.index0 * 100) }}">
  3. <div class="box-feature">
  4. <span class="{{ skill.icon }}"></span>
  5. <h3 class="mb-3">{{ skill.title }}</h3>
  6. <p>
  7. {{ skill.teaser|nl2br }}
  8. </p>
  9. {% if skill.content %}
  10. <p>
  11. <a class="learn-more" data-bs-toggle="collapse" href="#skill-details-{{ skill.id }}" role="button" aria-expanded="false" aria-controls="skill-details-{{ skill.id }}">
  12. mehr erfahren
  13. </a>
  14. </p>
  15. <div class="collapse" id="skill-details-{{ skill.id }}">
  16. <div class="card card-body mt-2 text-black-50" style="font-size: 0.9rem; border: none; padding: 0; background: transparent;">
  17. {{ skill.content|nl2br }}
  18. </div>
  19. </div>
  20. {% endif %}
  21. </div>
  22. </div>
  23. {% else %}
  24. {# Fallback if no skills in DB #}
  25. <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
  26. <div class="box-feature">
  27. <span class="flaticon-house"></span>
  28. <h3 class="mb-3">Wir bauen mit Ihnen</h3>
  29. <p>
  30. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  31. Voluptates, accusamus.
  32. </p>
  33. <p><a href="#" class="learn-more">mehr erfahren</a></p>
  34. </div>
  35. </div>
  36. <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
  37. <div class="box-feature">
  38. <span class="flaticon-building"></span>
  39. <h3 class="mb-3">Ihre Immobilie verkaufen</h3>
  40. <p>
  41. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  42. Voluptates, accusamus.
  43. </p>
  44. <p><a href="#" class="learn-more">mehr erfahren</a></p>
  45. </div>
  46. </div>
  47. <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="500">
  48. <div class="box-feature">
  49. <span class="flaticon-house-3"></span>
  50. <h3 class="mb-3">Beratung von A-Z</h3>
  51. <p>
  52. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  53. Voluptates, accusamus.
  54. </p>
  55. <p><a href="#" class="learn-more">mehr erfahren</a></p>
  56. </div>
  57. </div>
  58. <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="600">
  59. <div class="box-feature">
  60. <span class="flaticon-house-1"></span>
  61. <h3 class="mb-3">Innovativer 3D Haus-Rundgang</h3>
  62. <p>
  63. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  64. Voluptates, accusamus.
  65. </p>
  66. <p><a href="#" class="learn-more">mehr erfahren</a></p>
  67. </div>
  68. </div>
  69. {% endfor %}