app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  12. {% block stylesheet %}
  13.     <style>
  14.         .slider_pickup .slick-list {
  15.             overflow: visible;
  16.         }
  17.         .slider_pickup {
  18.             line-height: 0;
  19.             font-size: 0;
  20.         }
  21.         .slider_pickup .slick-slide {
  22.             margin: 0 16px;
  23.             max-width: 488px;
  24.             max-height: auto !important;
  25.             img {
  26.                 width: 100%;
  27.                 height: auto;
  28.                 object-fit: cover;
  29.                 aspect-ratio: 16 / 9 !important;
  30.             }
  31.         }
  32.         .slider-dots {
  33.             display: flex;
  34.             align-items: center;
  35.             justify-content: center;
  36.             margin-top: 32px;
  37.             gap: 16px;
  38.         }
  39.         .slider-dots li {
  40.             list-style-type: none;
  41.             width: 8px;
  42.             height: 8px;
  43.             border-radius: 50%;
  44.             cursor: pointer;
  45.         }
  46.         .slider-dots li {
  47.             width: 8px;
  48.             height: 8px;
  49.             border-radius: 50%;
  50.             border: solid 1px;
  51.             border-color: #2F2725;
  52.         }
  53.         .slider-dots li.slick-active {
  54.             background: #2F2725;
  55.         }
  56.         @media(max-width: 768px) {
  57.             .slick-slide {
  58.                 margin: 0 8px;
  59.             }
  60.             .slider-dots {
  61.                 margin-top: 16px;
  62.             }
  63.             .slider-dots li {
  64.                 width: 8px;
  65.             }
  66.             .slider-dots li button {
  67.                 width: 8px;
  68.             }
  69.             .slider_pickup .slick-slide {
  70.                 margin: 0 8px;
  71.                 max-width: 327px;
  72.             }
  73.         }
  74.     </style>
  75. {% endblock %}
  77. {% block javascript %}
  78.     <script>
  79.         $(document).ready(function () {
  80.             $('.slider').slick({
  81.                 customPaging: function (slider, index) {
  82.                 return $('<button type="button" />').text((''));
  83.                 },
  84.                 dotsClass: 'slider-dots',
  85.                 slide: 'div',
  86.                 infinite: true,
  87.                 autoplay: true,
  88.                 autoplaySpeed: 7000,
  89.                 speed: 1500,
  90.                 slidesToShow: 1,
  91.                 slidesToScroll: 1,
  92.                 dots: true,
  93.                 arrows: false
  94.             });
  95.             var dots = true;
  96.         });
  97.     </script>
  98.     <script>
  99.         $(document).ready(function () {
  100.             $('.slider_pickup').slick({
  101.                 dotsClass: 'slider-dots',
  102.                 variableWidth: true,
  103.                 centerMode: true,
  104.                 dots: true,
  105.                 autoplay: true,
  106.                 autoplaySpeed: 7000,
  107.                 speed: 1500,
  108.                 focusOnSelect: true,
  109.                 infinite: true,
  110.                 arrows: false
  111.             });
  112.         });
  113.     </script>
  114.     <script>
  115.         const slideInContents = {{ [
  116.             "concept",
  117.             "lineup",
  118.             "sea_burial ",
  119.             "special",
  120.             "news",
  121.             "blogpickup"
  122.         ]|json_encode|raw }};
  123.         $(window).on('scroll', function () {
  124.             for (let i = 0; i < slideInContents.length; i++) {
  125.                 var value = slideInContents[i];
  126.                 var scroll;
  127.                 var winH = $(window).height();
  128.                 var objH = $ (`.${value}`).outerHeight();
  129.                 var objTop = $ (`.${value}`).offset().top;
  130.                 scroll = $(window).scrollTop();
  131.                 if (scroll >= objTop - winH) {
  132.                     $ (`.${value}`).addClass('animate-fadein');
  133.                 }
  134.             }
  135.         });
  136.     </script>
  137.     <script>
  138.         const slideInanimalR = {{ ["animal"]|json_encode|raw }};
  139.         $(window).on('scroll', function () {
  140.             for (let i = 0; i < slideInanimalR.length; i++) {
  141.                 var value = slideInanimalR[i];
  142.                 var scroll;
  143.                 var winH = $(window).height();
  144.                 var objH = $ (`.${value}`).outerHeight();
  145.                 var objTop = $ (`.${value}`).offset().top;
  146.                 scroll = $(window).scrollTop();
  147.                 if (scroll >= objTop - winH) {
  148.                     $ (`.${value}`).addClass('animate-slideInRight');
  149.                 }
  150.             }
  151.         });
  152.     </script>
  153.     <script>
  154.         const slideInanimalL = {{ ["animalL"]|json_encode|raw }};
  155.         $(window).on('scroll', function () {
  156.             for (let i = 0; i < slideInanimalL.length; i++) {
  157.                 var value = slideInanimalL[i];
  158.                 var scroll;
  159.                 var winH = $(window).height();
  160.                 var objH = $ (`.${value}`).outerHeight();
  161.                 var objTop = $ (`.${value}`).offset().top;
  162.                 scroll = $(window).scrollTop();
  163.                 if (scroll >= objTop - winH) {
  164.                     $ (`.${value}`).addClass('animate-slideInLeft');
  165.                 }
  166.             }
  167.         });
  168.     </script>
  169.     <script>
  170.         const slideInanimalSlow = {{ ["animalslow"]|json_encode|raw }};
  171.         $(window).on('scroll', function () {
  172.             for (let i = 0; i < slideInanimalSlow.length; i++) {
  173.                 var value = slideInanimalSlow[i];
  174.                 var scroll;
  175.                 var winH = $(window).height();
  176.                 var objH = $ (`.${value}`).outerHeight();
  177.                 var objTop = $ (`.${value}`).offset().top;
  178.                 scroll = $(window).scrollTop();
  179.                 if (scroll >= objTop - winH + 10) {
  180.                     $ (`.${value}`).addClass('animate-slideInRight');
  181.                 }
  182.             }
  183.         });
  184.     </script>
  185.     <script>
  186.         $(function () {
  187.             $(window).on("scroll", function () {
  188.                 const sliderHeight = $(".mv").height();
  189.                 if (sliderHeight + 200 < $(this).scrollTop()) {
  190.                     $(".js-logo").removeClass('opacity-0');
  191.                 } else {
  192.                     $(".js-logo").addClass('opacity-0');
  193.                 }
  194.                 if (sliderHeight - 400 < $(this).scrollTop()) {
  195.                     $(".js-sp-logo").fadeIn(300);
  196.                 } else {
  197.                     $(".js-sp-logo").fadeOut(300);
  198.                 }
  199.             });
  200.         });
  201.     </script>
  202. {% endblock javascript %}
  204. {% set Products = [
  205.         {
  206.             'id': '4',
  207.             'name' : 'warm',
  208.             'kana' : 'うぉーむ',
  209.             'description' :
  210.                 'いつもそばにいたあの子の温かな存在感。
  211.                 しっかりと感じる、あの子とのやわらかな時間。',
  212.             'images': [
  213.                 {'file_name': 'assets/img/top-page/warm.webp'},
  214.                 {'file_name': 'assets/img/top-page/warm.jpg'},
  215.                 {'file_name': 'assets/img/top-page/warm2.jpg'}
  216.             ]
  217.         },
  218.         {
  219.             'id': '7',
  220.             'name' : 'days',
  221.             'kana' : 'でいず',
  222.             'description' :
  223.                 '日々感じていたいあの子の存在感。
  224.                 毎日そっと寄り添うあの子とのやわらかな時間。',
  225.             'images': [
  226.                 {'file_name': 'assets/img/top-page/days.webp'},
  227.                 {'file_name': 'assets/img/top-page/days2.jpg'},
  228.                 {'file_name': 'assets/img/top-page/days3.jpg'}
  229.             ]
  230.         }
  231.     ]
  232. %}
  233. {% block main %}
  234.     <div
  235.         class="w-full justify-center items-top-center flex flex-col bg-background-default">
  236.         {# FV #}
  237.         <div class="animate-fadein mv relative bg-FV md:bg-FV-SP w-full pt-[53%] md:pt-[49.3%] md:h-[max(202.6vw,760px)] bg-center  bg-cover bg-no-repeat h-[53vw]">
  238.             <img src="{{asset('assets/img/top-page/logo-square.webp')}}" alt="いつくしのロゴ" class="absolute md:top-0 md:left-0 md:w-[145px] md:h-[147px] w-[max(18.75vw,240px)] h-[max(18.82vw,241px)] top-[16px] left-[32px]">
  239.             <img src="{{asset('assets/img/top-page/copy.webp')}}" alt="大切なペットのご供養はいつくしで" class="absolute right-[10.2vw] top-[12.8vw] md:right-[24px] md:top-[133.3vw] w-[max(22.03vw,282px)] h-[max(12.18vw,156px)] md:w-[234px] md:h-[130px]">
  240.             <div class="absolute mx-auto right-0 left-0 bottom-[max(1.25vw,16px)] z-30">
  241.                 <div class="items-center justify-center flex flex-col gap-3">
  242.                     <p class="text-[10px] leading-[15px] tracking-[5px]">
  243.                         SCROLL
  244.                     </p>
  245.                     <hr class="animate-lineMove h-10 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  246.                 </div>
  247.             </div>
  248.         </div>
  249.         {# CONCEPT #}
  250.         <div class=" w-full bg-top bg-cover bg-no-repeat z-10 mt-4 lg:bg-concept-SP md:mt-16" id="">
  251.             <div class="w-full flex items-center mb-20 justify-end md:justify-center md:flex-col sm:items-end">
  252.                 <div class="flex flex-col w-[300px] md:w-full md:ml-0 items-start">
  253.                     <div class="flex gap-4 items-start md:pl-6">
  254.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  255.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">CONCEPT</p>
  256.                     </div>
  257.                     <div class="z-10 md:justify-center md:flex md:flex-col md:items-center ">
  258.                         <img src="{{asset('assets/img/top-page/concept.webp')}}" alt="商品イメージ" class="concept w-full md:w-full md:-mt-[32px] md:block hidden">
  259.                         <div class="flex flex-col  md:mx-14 md:mt-6 items-start">
  260.                             <div class="font-notoserif text-[40px] font-extralight leading-[86.40px] tracking-widest pb-6 whitespace-nowrap z-10 md:text-2xl md:leading-[38.40px]">
  261.                                 <p>やわらかな<br class="lg:hidden">時間を<br class="hidden lg:block">抱きしめる。</p>
  262.                             </div>
  263.                             <div class="flex flex-col items-start">
  264.                                 <div class="leading-7 mb-20 md:mb-10 text-sm">
  265.                                     <p>いつもそばにいてくれた</p>
  266.                                     <p>大切な存在に心からの想いを伝えよう。</p>
  267.                                 </div>
  268.                                 <div class="flex flex-col items-start">
  269.                                     <div class="flex items-end justify-end pr-[14px] w-full animal">
  270.                                         <img src="{{asset('assets/img/dog.webp')}}" alt="犬" class="w-8 h-6 mr-[6px]">
  271.                                         <img src="{{asset('assets/img/turtle.webp')}}" alt="亀" class="w-[33px] h-[18px] pr-[8px]">
  272.                                         <img src="{{asset('assets/img/bird.webp')}}" alt="鳥" class="w-[30px] h-7 ">
  273.                                     </div>
  274.                                     <a href="/help/about">
  275.                                         <button class="text-sm px-12 rounded-[3px] py-[10px] border text-center border-black w-64 whitespace-nowrap hover">CONCEPT</button>
  276.                                     </a>
  277.                                 </div>
  278.                             </div>
  279.                         </div>
  280.                     </div>
  281.                 </div>
  282.                 <img src="{{asset('assets/img/top-page/concept.webp')}}" alt="商品イメージ" class="concept w-[min(59.3vw,1200px)] md:w-full md:-mt-[max(41.6vw,202px)] md:hidden">
  283.             </div>
  284.         </div>
  285.         {# LINEUP #}
  286.         <div class="w-full bg-white flex flex-col items-center justify-center">
  287.             <div class="max-w-[800px]">
  288.                 <div class="my-[120px] md:my-20">
  289.                     <div class="flex gap-4 items-start">
  290.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  291.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">LINEUP</p>
  292.                     </div>
  293.                     <div class="flex items-start justify-start gap-[72px] -mt-[36px] lg:mt-0 w-full md:flex-col md:items-center md:justify-center mb-16">
  294.                         <div class="flex flex-col gap-16 lg:gap-20">
  295.                             {% for Product in Products %}
  296.                                 <div class="flex gap-[72px]">
  297.                                     <div class="pt-[60px] lg:first:pt-6 w-[312px] flex-col flex gap-12 md:gap-8 lg:w-full lg:items-center lg:justify-center {% if Product.id is defined and Product.id % 2 == 0 %} order-2 {% endif %}">
  298.                                         <div class="flex flex-col md:gap-6 ">
  299.                                             <div class="flex gap-x-3 items-baseline font-notoserif font-light lg:hidden">
  300.                                                 <h3 class="text-[40px] leading-[60px] tracking-widest">{{Product.name}}</h3>
  301.                                                 <p class="text-sm leading-[21px] tracking-wide">{{Product.kana}}</p>
  302.                                             </div>
  303.                                             {# SPスライド #}
  304.                                             <div class="lg:flex hidden flex-col table-fixed">
  305.                                                 <div
  306.                                                     class="flex flex-col items-center table-fixed box-">
  307.                                                     {# 画像 #}
  308.                                                     <div class="slider w-[327px] h-[327px] table-cell box-border">
  309.                                                         {% for image in Product.images %}
  310.                                                             <div class="w-[327px] h-[327px] slick-slide table-cell box-border">
  311.                                                                 <img src={{asset(image.file_name)}} alt="商品画像" class="w-full h-auto lineup">
  312.                                                             </div>
  313.                                                         {% endfor %}
  314.                                                     </div>
  315.                                                 </div>
  316.                                             </div>
  317.                                         </div>
  318.                                         <div class="flex flex-col gap-12 md:gap-0 md:w-full lg:items-center {% if Product.id is defined and Product.id % 2 == 0 %} items-end {% endif %}">
  319.                                             <div class="lg:flex flex-col items-center gap-1  font-notoserif font-light hidden lg:mb-6">
  320.                                                 <h3 class="text-[32px] tracking-[6px]">{{Product.name}}</h3>
  321.                                                 <p class="text-sm tracking-wide">{{Product.kana}}</p>
  322.                                             </div>
  323.                                             <p class="leading-loose text-sm lg:text-center lg:mb-10">
  324.                                                 {{Product.description | nl2br}}
  325.                                             </p>
  326.                                             <div class="">
  327.                                                 {% if Product.id is defined and Product.id % 2 != 0 %}
  328.                                                     {# idが奇数のとき #}
  329.                                                     <div class="flex items-end pl-[14px] animalL">
  330.                                                         <img src="{{asset('assets/img/hamster.webp')}}" alt="ハムスター" class="w-8 h-[13px] pr-[6px]">
  331.                                                         <img src="{{asset('assets/img/cat.webp')}}" alt="猫" class="w-[42px] h-8 pr-[9px]">
  332.                                                         <img src="{{asset('assets/img/rabbit.webp')}}" alt="うさぎ" class="w-7">
  333.                                                     </div>
  334.                                                 {% else %}
  335.                                                     {# idが偶数の時 #}
  336.                                                     <div class="flex items-end justify-end pr-[14px] animalslow">
  337.                                                         <img src="{{asset('assets/img/dog.webp')}}" alt="犬" class="w-8 h-6 mr-[6px]">
  338.                                                         <img src="{{asset('assets/img/turtle.webp')}}" alt="亀" class="w-[33px] h-[18px] pr-[8px]">
  339.                                                         <img src="{{asset('assets/img/bird.webp')}}" alt="鳥" class="w-[30px] h-7">
  340.                                                     </div>
  341.                                                 {% endif %}
  342.                                                 <a href="{{url('product_detail',{'id':Product.id})}}">
  343.                                                     <button class="border rounded-[3px] border-black px-12 py-[10px] text-sm leading-5 w-[280px] md:w-[258px] hover">詳しくはこちら</button>
  344.                                                 </a>
  345.                                             </div>
  346.                                         </div>
  347.                                     </div>
  348.                                     {# PCスライド #}
  349.                                     <div
  350.                                         class="lg:hidden flex lineup">
  351.                                         {# スライダー #}
  352.                                         <div
  353.                                             class="">
  354.                                             {# 画像 #}
  355.                                             <div class="slider w-[max(32.5vw,417px)] h-[max(32.5vw,417px)] max-w-[417px] max-h-[417px] mb-8 ">
  356.                                                 {% for image in Product.images %}
  357.                                                     <div class=" w-[min(32.5vw,417px)] h-[max(32.5vw,417px)] max-w-[417px] max-h-[417px] slick-slide ">
  358.                                                         <img src={{asset(image.file_name)}} alt="商品画像" class="w-full h-auto">
  359.                                                     </div>
  360.                                                 {% endfor %}
  361.                                             </div>
  362.                                         </div>
  363.                                     </div>
  364.                                 </div>
  365.                             {% endfor %}
  366.                         </div>
  367.                     </div>
  368.                 </div>
  369.             </div>
  370.             {# 海洋散骨 #}
  371.             <div class="bg-background-default h-auto bg-top bg-cover bg-no-repeat w-full mx-auto items-center justify-center flex py-[120px] md:py-20 md:px-6">
  372.                 <div class="flex flex-col items-center md:items-start gap-y-6">
  373.                     <div class="w-full flex gap-4 pr-[176px] md:pr-0">
  374.                         <div class="h-20 w-[1px] bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE9]"></div>
  375.                         <p class="text-[24px] md:text-xl md:text-[32px] font-light leading-9 md:leading-[38px] tracking-[7.20px] md:tracking-[8px] pb-12 md:pb-0 whitespace-nowrap">海洋散骨</p>
  376.                     </div>
  377.                     <div class="flex gap-x-8 items-center md:flex-col md:items-end ">
  378.                         <img src="{{asset('assets/img/top-page/sea_burial .webp')}}" alt="海のイメージ" class="sea_burial  w-[min(48.75vw,488px)] md:w-[max(87.2vw,197px)] h-auto md:pb-14">
  379.                         <div class="flex flex-col text-end md:pr-8">
  380.                             <p class="text-[28px] font-light leading-10 tracking-[8.4px] mb-6">いつくしの<br>
  381.                                 海洋散骨</p>
  382.                             <p class="text-sm leading-7 mb-10 md:mb-14">どこにいてもあの子に思いを<br>
  383.                                 馳せることができます。</p>
  384.                             <a href="/sea_burial">
  385.                                 <button class="border rounded-[3px] border-black px-12 py-[10px] text-sm leading-5 whitespace-nowrap md:w-[max(68.8vw,258px)] w-[280px] hover">詳しくはこちら</button>
  386.                             </a>
  387.                         </div>
  388.                     </div>
  389.                 </div>
  390.             </div>
  391.             {# SPECIAL #}
  392.             <div class="bg-sub-beige-pale items-center justify-center flex py-[120px] gap-6 flex-col w-full md:py-20 px-6">
  393.                 <div class="max-w-[800px] md:w-full">
  394.                     <div class="flex gap-4 items-start md:mb-6">
  395.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  396.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">SPECIAL</p>
  397.                     </div>
  398.                     <div class="gap-20 flex flex-col w-full items-center md:gap-14">
  399.                         <div class="flex w-full">
  400.                             <div class="flex gap-[176px] md:flex-col md:gap-10">
  401.                                 {% for post in special_posts.posts %}
  402.                                     {% if loop.index < 3 %}
  403.                                         <a href="{{ url('special_post', { id: post.id }) }}" class="pb-4 border-b border-black w-1/2 flex flex-col items-end md:w-full hover">
  404.                                             <img src="{{ post.special_kv_pc.url }}" alt="{{ post.title }}のサムネイル" class="special w-full mb-5">
  405.                                             <div class="flex flex-col gap-4 mb-10 w-full">
  406.                                                 <div class="flex flex-wrap gap-2">
  407.                                                     {% for category in post.categories %}
  408.                                                     <span class="text-sm leading-5">{{ category.name }}</span>
  409.                                                     {% endfor %}
  410.                                                 </div>
  411.                                                 <p class="text-xl md:text-base tracking-wide leading-8">{{ post.title }}</p>
  412.                                             </div>
  413.                                             <p class="text-sm tracking-wide leading-5">{{ post.post_date|date('Y.m.d') }}</p>
  414.                                         </a>
  415.                                     {% endif %}
  416.                                 {% endfor %}
  417.                             </div>
  418.                         </div>
  419.                         <a href="{{ url('special_posts') }}">
  420.                             <button class="border rounded-[3px] border-black px-12 py-[10px] text-sm leading-5 w-[448px] md:w-[327px] hover">すべて見る</button>
  421.                         </a>
  422.                     </div>
  423.                 </div>
  424.             </div>
  425.             {# NEWS #}
  426.             <div class="bg-white items-center justify-center flex py-[120px] flex-col w-full md:py-20 md:px-6 news">
  427.                 <div class="max-w-[800px] w-full flex justify-between gap-6 md:flex-col md:gap-6">
  428.                     <div class="flex gap-4 h-fit">
  429.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  430.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">NEWS</p>
  431.                     </div>
  432.                     <div class="w-[488px] md:w-full flex flex-col items-center">
  433.                         {% if news %}
  434.                             <div class="w-full border-t border-sub-beige-pale pb-20 md:pb-10 items-center flex flex-col">
  435.                                 {% for news in news %}
  436.                                     {% if loop.index < 3 %}
  437.                                         <a href="news/{{(news.datakey)}}" class="w-full py-10 border-b border-sub-beige-pale flex flex-col gap-6 md:gap-4 hover">
  438.                                             <p class="w-full text-xl md:text-base leading-9 tracking-wide">{{news.title}}</p>
  439.                                             <p class="w-full text-end text-sm">{{ news.publicDate|date('Y.m.d') }}</p>
  440.                                         </a>
  441.                                     {% endif %}
  442.                                 {% endfor %}
  443.                                 <a href="/news" class="block border rounded-[3px] text-center border-black px-12 py-[10px] text-sm leading-5 w-[448px] md:w-[327px] mt-20 md:mt-10 hover">
  444.                                     すべて見る
  445.                                 </a>
  446.                             </div>
  447.                         {% else %}
  448.                             <p>現在、お知らせはありません。</p>
  449.                         {% endif %}
  450.                     </div>
  451.                 </div>
  452.             </div>
  453.         </div>
  454.         {# ブログPICKUP #}
  455.         {# <div class="bg-sub-beige-pale items-center justify-center flex py-20 flex-col w-full overflow-hidden">
  456.             <div class="w-full items-center justify-center flex">
  457.                 <div class="slider_pickup w-[488px] md:w-[327px] md:h-[182px] h-[274px]">
  458.                     {% for post in special_posts.posts %}
  459.                         {% if loop.index < 11 %}
  460.                             <div class="slick-slide w-[488px] md:w-[327px] md:h-[182px] h-[274px] hover">
  461.                                 <a href="{{ url('special_post', { id: post.id }) }}">
  462.                                     <img src="{{ post.special_kv_pc.url }} " alt=" {{ post.title }} のサムネイル" class=" blogpickup w-full h-auto">
  463.                                 </a>
  464.                             </div>
  465.                         {% endif %}
  466.                     {% endfor %}
  467.                 </div>
  468.             </div>
  469.         </div> #}
  470.     </div>
  471. </div>{% endblock %}