templates/website/pages/portfolio.html.twig line 1

Open in your IDE?
  1. {% extends 'website/base.html.twig' %}
  3. {% block title %}Portfolio{% endblock %}
  5. {% block css %}
  6.     <style>
  7.         .portfolio-item-blur .portfolio-item-image:before {
  8.             background: linear-gradient(to right, #933eff, #3e74ff);
  9.         }
  10.     </style>
  11. {% endblock %}
  13. {% block body %}
  15.     <section class="position-relative bg-fit overlay-black-50 page-header-bg">
  17.         <div class="position-absolute" style="right: 0;
  18.         background-color: white;
  19.   bottom: 0;
  20.   z-index: -1;
  21.   min-width: 100%;
  22.   min-height: 100%;">
  23.             <video autoplay muted loop playsinline>
  24.                 <source src="{{ asset('assets/images/background/hero-section.webm') }}" type="video/webm">
  25.                 Your browser does not support the video tag.
  26.             </video>
  27.         </div>
  28.         <div class="container">
  29.             <div class="row text-center justify-content-center">
  30.                 <div class="col-lg-8">
  31.                     <h1 class="text-white">Portfolio</h1>
  32.                     <h2 class="scroll-down"></h2>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </section>
  38.     <!--==========
  39.       End of page header ==========-->
  42.     <!--==========
  43.       Start of portfolio section ==========-->
  45.     <section class="slice-ptb">
  46.         <div class="container">
  47.             <div class="row">
  48.                 <div class="col-12">
  49.                     <div class="text-center">
  51.                         <!--===== Start of filters =====-->
  52.                         <div class="filters filter-button-group">
  53.                             <ul>
  54.                                 <li class="active" data-filter="*">All</li>
  55.                                 {% for category in categories %}
  56.                                     <li data-filter=".category_{{ category.id }}">{{ category.name }}</li>
  57.                                 {% endfor %}
  58.                             </ul>
  59.                         </div>
  60.                         <!--===== End of filters =====-->
  62.                     </div>
  63.                     <div class="grid portfolio-column-3 popup-container grid-spacing-05">
  64.                         {% for portfo in portfolios %}
  65.                             <div class="grid-item category_{{ portfo.cat_id }}">
  66.                                 <div class="portfolio-item-blur">
  67.                                     <div class="portfolio-item-image">
  68.                                         <img class="img-fluid" src="{{ portfo.image }}" alt="{{ portfo.alt }}">
  69.                                         <div class="portfolio-item-hover">
  70.                                             <a class="d-flex align-items-center" href="{{ path('website.portfolio_detail',{'slug':portfo.slug}) }}"> <span>{{ portfo.name }}</span></a>
  71.                                             <ul class="list-unstyled portfolio-item-category">
  72.                                                 <li><a href="{{ path('website.portfolio_detail',{'slug':portfo.slug}) }}">{{ portfo.cat_name }}</a></li>
  73.                                             </ul>
  74.                                         </div>
  75.                                     </div>
  76.                                 </div>
  77.                             </div>
  78.                         {% endfor %}
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </section>
  84. {% endblock %}