templates/home/components/skills.html.twig line 1

Open in your IDE?
  1. <section class="skills" id="skills">
  2.     <div class="container skills__flex">
  4.         <div class="skills__content">
  5.             <h2 class="h2">Mes <span class="line-break color-accent">compétences</span></h2>
  6.             <div class="skills__presentation">
  7.                 <p>{{ option.skillsDescription | nl2br }}</p>
  8.             </div>
  9.             <div class="skills__buttons">
  10.                 <a href="{{ path('contact') }}" class="btn btn-primary">Contactez-moi !</a>
  11.             </div>
  12.         </div>
  14.         <div class="skills__carousel swiper">
  16.             <div class="skills__carousel-buttons">
  17.                 <div class="skills__carousel-button skills__carousel-button-prev swiper-button-prev">
  18.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 47.998">
  19.                         <path d="M396.158,261.391a24,24,0,1,1,24-24A24.026,24.026,0,0,1,396.158,261.391Zm0-46.462a22.463,22.463,0,1,0,22.463,22.463A22.49,22.49,0,0,0,396.158,214.929Zm11.43,22.463a.768.768,0,0,0-.768-.768H385.494a.768.768,0,0,0,0,1.536H406.82A.768.768,0,0,0,407.588,237.392Zm-13.632,8.432a.767.767,0,0,0,0-1.085l-7.374-7.347,7.355-7.355a.768.768,0,0,0-1.085-1.087l-7.9,7.9a.772.772,0,0,0-.225.545.764.764,0,0,0,.227.543l7.916,7.89a.771.771,0,0,0,1.087,0Z" transform="translate(420.157 261.391) rotate(180)"/>
  20.                     </svg>
  21.                 </div>
  22.                 <div class="skills__carousel-button skills__carousel-button-next swiper-button-next">
  23.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 47.998">
  24.                         <path d="M396.158,261.391a24,24,0,1,1,24-24A24.026,24.026,0,0,1,396.158,261.391Zm0-46.462a22.463,22.463,0,1,0,22.463,22.463A22.49,22.49,0,0,0,396.158,214.929Zm11.43,22.463a.768.768,0,0,0-.768-.768H385.494a.768.768,0,0,0,0,1.536H406.82A.768.768,0,0,0,407.588,237.392Zm-13.632,8.432a.767.767,0,0,0,0-1.085l-7.374-7.347,7.355-7.355a.768.768,0,0,0-1.085-1.087l-7.9,7.9a.772.772,0,0,0-.225.545.764.764,0,0,0,.227.543l7.916,7.89a.771.771,0,0,0,1.087,0Z" transform="translate(420.157 261.391) rotate(180)"/>
  25.                     </svg>
  26.                 </div>
  27.             </div>
  29.             <div class="skills__list swiper-wrapper">
  30.                 {% for skill in skills %}
  31.                     <div class="skills__item swiper-slide">
  32.                         <div class="card">
  33.                             <div class="card__icon">
  34.                                 {{ skill.icon | raw }}
  35.                             </div>
  36.                             <div class="card__title">{{ skill.title }}</div>
  37.                             <div class="card__description">{{ skill.description }}</div>
  38.                         </div>
  39.                     </div>
  40.                 {% endfor %}
  41.             </div>
  42.         </div>
  44.     </div>
  45. </section>