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.         ]|json_encode|raw }};
  122.         $(window).on('scroll', function () {
  123.             for (let i = 0; i < slideInContents.length; i++) {
  124.                 var value = slideInContents[i];
  125.                 var scroll;
  126.                 var winH = $(window).height();
  127.                 var objH = $ (`.${value}`).outerHeight();
  128.                 var objTop = $ (`.${value}`).offset().top;
  129.                 scroll = $(window).scrollTop();
  130.                 if (scroll >= objTop - winH) {
  131.                     $ (`.${value}`).addClass('animate-fadein');
  132.                 }
  133.             }
  134.         });
  135.     </script>
  136.     <script>
  137.         const slideInanimalR = {{ ["animal"]|json_encode|raw }};
  138.         $(window).on('scroll', function () {
  139.             for (let i = 0; i < slideInanimalR.length; i++) {
  140.                 var value = slideInanimalR[i];
  141.                 var scroll;
  142.                 var winH = $(window).height();
  143.                 var objH = $ (`.${value}`).outerHeight();
  144.                 var objTop = $ (`.${value}`).offset().top;
  145.                 scroll = $(window).scrollTop();
  146.                 if (scroll >= objTop - winH) {
  147.                     $ (`.${value}`).addClass('animate-slideInRight');
  148.                 }
  149.             }
  150.         });
  151.     </script>
  152.     <script>
  153.         const slideInanimalL = {{ ["animalL"]|json_encode|raw }};
  154.         $(window).on('scroll', function () {
  155.             for (let i = 0; i < slideInanimalL.length; i++) {
  156.                 var value = slideInanimalL[i];
  157.                 var scroll;
  158.                 var winH = $(window).height();
  159.                 var objH = $ (`.${value}`).outerHeight();
  160.                 var objTop = $ (`.${value}`).offset().top;
  161.                 scroll = $(window).scrollTop();
  162.                 if (scroll >= objTop - winH) {
  163.                     $ (`.${value}`).addClass('animate-slideInLeft');
  164.                 }
  165.             }
  166.         });
  167.     </script>
  168.     <script>
  169.         const slideInanimalSlow = {{ ["animalslow"]|json_encode|raw }};
  170.         $(window).on('scroll', function () {
  171.             for (let i = 0; i < slideInanimalSlow.length; i++) {
  172.                 var value = slideInanimalSlow[i];
  173.                 var scroll;
  174.                 var winH = $(window).height();
  175.                 var objH = $ (`.${value}`).outerHeight();
  176.                 var objTop = $ (`.${value}`).offset().top;
  177.                 scroll = $(window).scrollTop();
  178.                 if (scroll >= objTop - winH + 10) {
  179.                     $ (`.${value}`).addClass('animate-slideInRight');
  180.                 }
  181.             }
  182.         });
  183.     </script>
  184.     <script>
  185.         $(function () {
  186.             $(window).on("scroll", function () {
  187.                 const sliderHeight = $(".mv").height();
  188.                 if (sliderHeight + 200 < $(this).scrollTop()) {
  189.                     $(".js-logo").removeClass('opacity-0');
  190.                 } else {
  191.                     $(".js-logo").addClass('opacity-0');
  192.                 }
  193.                 if (sliderHeight - 400 < $(this).scrollTop()) {
  194.                     $(".js-sp-logo").fadeIn(300);
  195.                 } else {
  196.                     $(".js-sp-logo").fadeOut(300);
  197.                 }
  198.             });
  199.         });
  200.     </script>
  201. {% endblock javascript %}
  203. {% set Products = [
  204.         {
  205.             'id': '4',
  206.             'name' : 'warm',
  207.             'kana' : 'うぉーむ',
  208.             'description' :
  209.                 'いつもそばにいたあの子の温かな存在感。
  210.                 しっかりと感じる、あの子とのやわらかな時間。',
  211.             'images': [
  212.                 {'file_name': 'assets/img/top-page/warm.webp'},
  213.                 {'file_name': 'assets/img/top-page/warm.jpg'},
  214.                 {'file_name': 'assets/img/top-page/warm2.jpg'}
  215.             ]
  216.         },
  217.         {
  218.             'id': '7',
  219.             'name' : 'days',
  220.             'kana' : 'でいず',
  221.             'description' :
  222.                 '日々感じていたいあの子の存在感。
  223.                 毎日そっと寄り添うあの子とのやわらかな時間。',
  224.             'images': [
  225.                 {'file_name': 'assets/img/top-page/days.webp'},
  226.                 {'file_name': 'assets/img/top-page/days2.jpg'},
  227.                 {'file_name': 'assets/img/top-page/days3.jpg'}
  228.             ]
  229.         }
  230.     ]
  231. %}
  232. {% block main %}
  233.     <div
  234.         class="w-full justify-center items-top-center flex flex-col bg-background-default">
  235.         {# FV #}
  236.         <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]">
  237.             <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]">
  238.             <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]">
  239.             <div class="absolute mx-auto right-0 left-0 bottom-[max(1.25vw,16px)] z-30">
  240.                 <div class="items-center justify-center flex flex-col gap-3">
  241.                     <p class="text-[10px] leading-[15px] tracking-[5px]">
  242.                         SCROLL
  243.                     </p>
  244.                     <hr class="animate-lineMove h-10 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  245.                 </div>
  246.             </div>
  247.         </div>
  248.         {# CONCEPT #}
  249.         <div class=" w-full bg-top bg-cover bg-no-repeat z-10 mt-4 lg:bg-concept-SP md:mt-16" id="">
  250.             <div class="w-full flex items-center mb-20 justify-end md:justify-center md:flex-col sm:items-end">
  251.                 <div class="flex flex-col w-[300px] md:w-full md:ml-0 items-start">
  252.                     <div class="flex gap-4 items-start md:pl-6">
  253.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  254.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">CONCEPT</p>
  255.                     </div>
  256.                     <div class="z-10 md:justify-center md:flex md:flex-col md:items-center ">
  257.                         <img src="{{asset('assets/img/top-page/concept.webp')}}" alt="商品イメージ" class="concept w-full md:w-full md:-mt-[32px] md:block hidden">
  258.                         <div class="flex flex-col  md:mx-14 md:mt-6 items-start">
  259.                             <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]">
  260.                                 <p>やわらかな<br class="lg:hidden">時間を<br class="hidden lg:block">抱きしめる。</p>
  261.                             </div>
  262.                             <div class="flex flex-col items-start">
  263.                                 <div class="leading-7 mb-20 md:mb-10 text-sm">
  264.                                     <p>いつもそばにいてくれた</p>
  265.                                     <p>大切な存在に心からの想いを伝えよう。</p>
  266.                                 </div>
  267.                                 <div class="flex flex-col items-start">
  268.                                     <div class="flex items-end justify-end pr-[14px] w-full animal">
  269.                                         <img src="{{asset('assets/img/dog.webp')}}" alt="犬" class="w-8 h-6 mr-[6px]">
  270.                                         <img src="{{asset('assets/img/turtle.webp')}}" alt="亀" class="w-[33px] h-[18px] pr-[8px]">
  271.                                         <img src="{{asset('assets/img/bird.webp')}}" alt="鳥" class="w-[30px] h-7 ">
  272.                                     </div>
  273.                                     <a href="/help/about">
  274.                                         <button class="text-sm px-12 rounded-[3px] py-[10px] border text-center border-black w-64 whitespace-nowrap hover">CONCEPT</button>
  275.                                     </a>
  276.                                 </div>
  277.                             </div>
  278.                         </div>
  279.                     </div>
  280.                 </div>
  281.                 <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">
  282.             </div>
  283.         </div>
  284.         {# LINEUP #}
  285.         <div class="w-full bg-white flex flex-col items-center justify-center">
  286.             <div class="max-w-[800px]">
  287.                 <div class="my-[120px] md:my-20">
  288.                     <div class="flex gap-4 items-start">
  289.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  290.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">LINEUP</p>
  291.                     </div>
  292.                     <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">
  293.                         <div class="flex flex-col gap-16 lg:gap-20">
  294.                             {% for Product in Products %}
  295.                                 <div class="flex gap-[72px]">
  296.                                     <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 %}">
  297.                                         <div class="flex flex-col md:gap-6 ">
  298.                                             <div class="flex gap-x-3 items-baseline font-notoserif font-light lg:hidden">
  299.                                                 <h3 class="text-[40px] leading-[60px] tracking-widest">{{Product.name}}</h3>
  300.                                                 <p class="text-sm leading-[21px] tracking-wide">{{Product.kana}}</p>
  301.                                             </div>
  302.                                             {# SPスライド #}
  303.                                             <div class="lg:flex hidden flex-col table-fixed">
  304.                                                 <div
  305.                                                     class="flex flex-col items-center table-fixed box-">
  306.                                                     {# 画像 #}
  307.                                                     <div class="slider w-[327px] h-[327px] table-cell box-border">
  308.                                                         {% for image in Product.images %}
  309.                                                             <div class="w-[327px] h-[327px] slick-slide table-cell box-border">
  310.                                                                 <img src={{asset(image.file_name)}} alt="商品画像" class="w-full h-auto lineup">
  311.                                                             </div>
  312.                                                         {% endfor %}
  313.                                                     </div>
  314.                                                 </div>
  315.                                             </div>
  316.                                         </div>
  317.                                         <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 %}">
  318.                                             <div class="lg:flex flex-col items-center gap-1  font-notoserif font-light hidden lg:mb-6">
  319.                                                 <h3 class="text-[32px] tracking-[6px]">{{Product.name}}</h3>
  320.                                                 <p class="text-sm tracking-wide">{{Product.kana}}</p>
  321.                                             </div>
  322.                                             <p class="leading-loose text-sm lg:text-center lg:mb-10">
  323.                                                 {{Product.description | nl2br}}
  324.                                             </p>
  325.                                             <div class="">
  326.                                                 {% if Product.id is defined and Product.id % 2 != 0 %}
  327.                                                     {# idが奇数のとき #}
  328.                                                     <div class="flex items-end pl-[14px] animalL">
  329.                                                         <img src="{{asset('assets/img/hamster.webp')}}" alt="ハムスター" class="w-8 h-[13px] pr-[6px]">
  330.                                                         <img src="{{asset('assets/img/cat.webp')}}" alt="猫" class="w-[42px] h-8 pr-[9px]">
  331.                                                         <img src="{{asset('assets/img/rabbit.webp')}}" alt="うさぎ" class="w-7">
  332.                                                     </div>
  333.                                                 {% else %}
  334.                                                     {# idが偶数の時 #}
  335.                                                     <div class="flex items-end justify-end pr-[14px] animalslow">
  336.                                                         <img src="{{asset('assets/img/dog.webp')}}" alt="犬" class="w-8 h-6 mr-[6px]">
  337.                                                         <img src="{{asset('assets/img/turtle.webp')}}" alt="亀" class="w-[33px] h-[18px] pr-[8px]">
  338.                                                         <img src="{{asset('assets/img/bird.webp')}}" alt="鳥" class="w-[30px] h-7">
  339.                                                     </div>
  340.                                                 {% endif %}
  341.                                                 <a href="{{url('product_detail',{'id':Product.id})}}">
  342.                                                     <button class="border rounded-[3px] border-black px-12 py-[10px] text-sm leading-5 w-[280px] md:w-[258px] hover">詳しくはこちら</button>
  343.                                                 </a>
  344.                                             </div>
  345.                                         </div>
  346.                                     </div>
  347.                                     {# PCスライド #}
  348.                                     <div
  349.                                         class="lg:hidden flex lineup">
  350.                                         {# スライダー #}
  351.                                         <div
  352.                                             class="">
  353.                                             {# 画像 #}
  354.                                             <div class="slider w-[max(32.5vw,417px)] h-[max(32.5vw,417px)] max-w-[417px] max-h-[417px] mb-8 ">
  355.                                                 {% for image in Product.images %}
  356.                                                     <div class=" w-[min(32.5vw,417px)] h-[max(32.5vw,417px)] max-w-[417px] max-h-[417px] slick-slide ">
  357.                                                         <img src={{asset(image.file_name)}} alt="商品画像" class="w-full h-auto">
  358.                                                     </div>
  359.                                                 {% endfor %}
  360.                                             </div>
  361.                                         </div>
  362.                                     </div>
  363.                                 </div>
  364.                             {% endfor %}
  365.                         </div>
  366.                     </div>
  367.                 </div>
  368.             </div>
  369.             {# 海洋散骨 #}
  370.             <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">
  371.                 <div class="flex flex-col items-center md:items-start gap-y-6">
  372.                     <div class="w-full flex gap-4 pr-[176px] md:pr-0">
  373.                         <div class="h-20 w-[1px] bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE9]"></div>
  374.                         <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>
  375.                     </div>
  376.                     <div class="flex gap-x-8 items-center md:flex-col md:items-end ">
  377.                         <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">
  378.                         <div class="flex flex-col text-end md:pr-8">
  379.                             <p class="text-[28px] font-light leading-10 tracking-[8.4px] mb-6">いつくしの<br>
  380.                                 海洋散骨</p>
  381.                             <p class="text-sm leading-7 mb-10 md:mb-14">どこにいてもあの子に思いを<br>
  382.                                 馳せることができます。</p>
  383.                             <a href="/sea_burial">
  384.                                 <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>
  385.                             </a>
  386.                         </div>
  387.                     </div>
  388.                 </div>
  389.             </div>
  390.             {# SPECIAL #}
  391.             <div class="bg-sub-beige-pale items-center justify-center flex py-[120px] gap-6 flex-col w-full md:py-20 px-6">
  392.                 <div class="max-w-[800px] md:w-full">
  393.                     <div class="flex gap-4 items-start md:mb-6">
  394.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  395.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">SPECIAL</p>
  396.                     </div>
  397.                     <div class="gap-20 flex flex-col w-full items-center md:gap-14">
  398.                         <div class="flex w-full">
  399.                             <div class="flex gap-[176px] md:flex-col md:gap-10">
  400.                                 {% for post in special_posts.posts %}
  401.                                     {% if loop.index < 3 %}
  402.                                         <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">
  403.                                             <img src="{{ post.special_kv_pc.url }}" alt="{{ post.title }}のサムネイル" class="special w-full mb-5">
  404.                                             <div class="flex flex-col gap-4 mb-10 w-full">
  405.                                                 <div class="flex flex-wrap gap-2">
  406.                                                     {% for category in post.categories %}
  407.                                                     <span class="text-sm leading-5">{{ category.name }}</span>
  408.                                                     {% endfor %}
  409.                                                 </div>
  410.                                                 <p class="text-xl md:text-base tracking-wide leading-8">{{ post.title }}</p>
  411.                                             </div>
  412.                                             <p class="text-sm tracking-wide leading-5">{{ post.post_date|date('Y.m.d') }}</p>
  413.                                         </a>
  414.                                     {% endif %}
  415.                                 {% endfor %}
  416.                             </div>
  417.                         </div>
  418.                         <a href="{{ url('special_posts') }}">
  419.                             <button class="border rounded-[3px] border-black px-12 py-[10px] text-sm leading-5 w-[448px] md:w-[327px] hover">すべて見る</button>
  420.                         </a>
  421.                     </div>
  422.                 </div>
  423.             </div>
  424.             {# NEWS #}
  425.             <div class="bg-white items-center justify-center flex py-[120px] flex-col w-full md:py-20 md:px-6 news">
  426.                 <div class="max-w-[800px] w-full flex justify-between gap-6 md:flex-col md:gap-6">
  427.                     <div class="flex gap-4 h-fit">
  428.                         <hr class="h-20 w-[1px] border-none bg-gradient-to-b from-[#ADAAA6] to-[#F0EDE900]">
  429.                         <p class="text-2xl font-light leading-[38px] tracking-[7.20px] md:text-xl md:leading-10 md:tracking-[8px]">NEWS</p>
  430.                     </div>
  431.                     <div class="w-[488px] md:w-full flex flex-col items-center">
  432.                         {% if news %}
  433.                             <div class="w-full border-t border-sub-beige-pale pb-20 md:pb-10 items-center flex flex-col">
  434.                                 {% for news in news %}
  435.                                     {% if loop.index < 3 %}
  436.                                         <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">
  437.                                             <p class="w-full text-xl md:text-base leading-9 tracking-wide">{{news.title}}</p>
  438.                                             <p class="w-full text-end text-sm">{{ news.publicDate|date('Y.m.d') }}</p>
  439.                                         </a>
  440.                                     {% endif %}
  441.                                 {% endfor %}
  442.                                 <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">
  443.                                     すべて見る
  444.                                 </a>
  445.                             </div>
  446.                         {% else %}
  447.                             <p>現在、お知らせはありません。</p>
  448.                         {% endif %}
  449.                     </div>
  450.                 </div>
  451.             </div>
  452.         </div>
  453.         {# ブログPICKUP #}
  454.         {# <div class="bg-sub-beige-pale items-center justify-center flex py-20 flex-col w-full overflow-hidden">
  455.             <div class="w-full items-center justify-center flex">
  456.                 <div class="slider_pickup w-[488px] md:w-[327px] md:h-[182px] h-[274px]">
  457.                     {% for post in special_posts.posts %}
  458.                         {% if loop.index < 11 %}
  459.                             <div class="slick-slide w-[488px] md:w-[327px] md:h-[182px] h-[274px] hover">
  460.                                 <a href="{{ url('special_post', { id: post.id }) }}">
  461.                                     <img src="{{ post.special_kv_pc.url }} " alt=" {{ post.title }} のサムネイル" class=" blogpickup w-full h-auto">
  462.                                 </a>
  463.                             </div>
  464.                         {% endif %}
  465.                     {% endfor %}
  466.                 </div>
  467.             </div>
  468.         </div> #}
  469.     </div>
  470. </div>{% endblock %}