templates/main/gallery.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Gallery{% endblock %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <style>
  7.         .roww {
  8.             column-width: 15em;
  9.             -moz-column-width: 15em;
  10.             -webkit-column-width: 15em;
  12.             column-gap: 1rem;
  13.             -moz-column-gap: 1rem;
  14.             -webkit-column-gap: 1rem;
  15.         }
  17.         .item {
  18.             display: inline-block;
  19.             width: 100%;
  20.             text-align: center;
  21.             margin: 0.5rem auto;
  22.             position: relative;
  23.             background: #A60A16;
  24.             padding: 2px;
  25.             border-radius: 6px;
  26.             transition: 0.3s ease;
  27.             font-size: 0;
  28.         }
  30.         .item img {
  31.             max-width: 100%;
  32.         }
  34.         .content {
  35.             position: absolute;
  36.             height: 0;
  37.             width: 0;
  38.             top: 50%;
  39.             left: 50%;
  40.             transform: translate(-50%, -50%);
  41.             background: rgba(0, 0, 0, 0.65);
  42.             z-index: 1;
  43.             display: flex;
  44.             justify-content: center;
  45.             flex-direction: column;
  46.             height: 100%;
  47.             width: 100%;
  48.             transition: 0.3s ease-in-out;
  49.             opacity: 0;
  50.         }
  52.         .content p {
  53.             opacity: 0;
  54.             transition-delay: 1s;
  55.             transition: 0.3s ease;
  56.             font-size: 20px;
  57.         }
  59.         .item:hover {
  60.             box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
  61.         }
  63.         .item:hover .content {
  64.             height: calc(100% - 30px);
  65.             width: calc(100% - 30px);
  66.             opacity: 1;
  67.         }
  69.         .item:hover .content p {
  70.             opacity: 1;
  71.             color: #fff;
  72.         }
  73.     </style>
  74. {% endblock %}
  76. {% block body %}
  77.     <div class="page-banner-area">
  78.         <div class="container">
  79.             <div class="page-banner-content">
  80.                 <div class="row align-items-center">
  81.                     <div class="col-lg-7 col-md-6">
  82.                         <h2>Photo Gallery</h2>
  83.                     </div>
  85.                     {#<div class="col-lg-5 col-md-6">
  86.                         <ul>
  87.                             <li>
  88.                                 <a href="{{ path('app_main') }}">Home</a>
  89.                             </li>
  90.                             <li>Gallery</li>
  91.                         </ul>
  92.                     </div>#}
  93.                 </div>
  94.             </div>
  95.         </div>
  97.         {{ include('include/header-bread.html.twig') }}
  98.     </div>
  100.     <div class="gallery-area pt-100 pb-75">
  101.         <div class="container">
  103.             <h3>Annual Youth Convention 2023</h3>
  104.             <hr>
  105.             <div class="row row-cols-2 row-cols-md-4 g-4" data-masonry='{"percentPosition": true }'>
  106.                 {% for i in range(10, 1) %}
  107.                     <div class="col">
  108.                         <div class="single-gallery-item">
  109.                             <a data-fancybox="gallery"
  110.                                href="{{ asset('gallery/ayc'~i~'.jpeg') }}"
  111.                                data-caption="Title">
  112.                                 <img class="img-fluid rounded rounded epcyf-gallery" alt="" loading="lazy"
  113.                                      src="{{ asset('gallery/ayc'~i~'.jpeg') }}">
  114.                             </a>
  115.                         </div>
  117.                     </div>
  118.                 {% endfor %}
  119.             </div>
  120.             <hr>
  121.             <div class="row row-cols-2 row-cols-md-4 g-4" data-masonry='{"percentPosition": true }'>
  122.                 {% for i in range(20, 1) %}
  123.                 <div class="col">
  124.                     <div class="single-gallery-item">
  125.                         <a data-fancybox="gallery"
  126.                            href="{{ asset('gallery/g'~i~'.jpg') }}"
  127.                            data-caption="Title">
  128.                             <img class="img-fluid rounded rounded epcyf-gallery" alt="" loading="lazy"
  129.                                  src="{{ asset('gallery/g'~i~'.jpg') }}">
  130.                         </a>
  131.                     </div>
  133.                 </div>
  134.                 {% endfor %}
  135.         </div>
  136.     </div>
  137.     </div>
  138.     <script src="{{ asset('assets/js/masonry.pkgd.min.js') }}"
  139.             crossorigin="anonymous" async></script>
  141. {% endblock %}