app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'front_page' %}
  10. {% block stylesheet %}
  11. <style>
  12.     .slick-slider {
  13.         margin-bottom: 30px;
  14.     }
  15.     .slick-dots {
  16.         position: absolute;
  17.         bottom: -45px;
  18.         display: block;
  19.         width: 100%;
  20.         padding: 0;
  21.         list-style: none;
  22.         text-align: center;
  23.     }
  24.     .slick-dots li {
  25.         position: relative;
  26.         display: inline-block;
  27.         width: 20px;
  28.         height: 20px;
  29.         margin: 0 5px;
  30.         padding: 0;
  31.         cursor: pointer;
  32.     }
  33.     .slick-dots li button {
  34.         font-size: 0;
  35.         line-height: 0;
  36.         display: block;
  37.         width: 20px;
  38.         height: 20px;
  39.         padding: 5px;
  40.         cursor: pointer;
  41.         color: transparent;
  42.         border: 0;
  43.         outline: none;
  44.         background: transparent;
  45.     }
  46.     .slick-dots li button:hover,
  47.     .slick-dots li button:focus {
  48.         outline: none;
  49.     }
  50.     .slick-dots li button:hover:before,
  51.     .slick-dots li button:focus:before {
  52.         opacity: 1;
  53.     }
  54.     .slick-dots li button:before {
  55.         content: " ";
  56.         line-height: 20px;
  57.         position: absolute;
  58.         top: 0;
  59.         left: 0;
  60.         width: 12px;
  61.         height: 12px;
  62.         text-align: center;
  63.         opacity: .25;
  64.         background-color: black;
  65.         border-radius: 50%;
  66.     }
  67.     .slick-dots li.slick-active button:before {
  68.         opacity: .75;
  69.         background-color: black;
  70.     }
  71.     .slick-dots li button.thumbnail img {
  72.         width: 0;
  73.         height: 0;
  74.     }
  75. </style>
  76. {% endblock %}
  77. {% block main %}
  78. <div class="mv">
  79.     <div class="slider-wrap">
  80.         <div class="swiper slider">
  81.             <div class="swiper-wrapper">
  82.                 <!-- サタプラ放送前 -->
  83.                 <!-- <div class="swiper-slide">
  84.                     <a href="https://www.mbs.jp/saturday-plus/" target="_blank" class="swiper-slide-link">
  85.                         <picture>
  86.                             <source srcset="{{ asset('assets/img/top/sp/main06.jpg', 'user_data') }}" media="(max-width: 768px)">
  87.                             <img src="{{ asset('assets/img/top/main06.jpg', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されます!">
  88.                         </picture>
  89.                     </a>
  90.                 </div> -->
  91.                 <!-- サタプラ放送後 -->
  92.                 <div class="swiper-slide">
  93.                     <a href="https://hirota-s.com/products/list?category_id=51" class="swiper-slide-link">
  94.                         <picture>
  95.                             <source srcset="{{ asset('assets/img/top/sp/main06-3.jpg', 'user_data') }}" media="(max-width: 768px)">
  96.                             <img src="{{ asset('assets/img/top/main06-3.jpg', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されました!">
  97.                         </picture>
  98.                     </a>
  99.                 </div>
  100.                 <div class="swiper-slide">
  101.                     <a href="https://hirota-s.com/products/detail/36" class="swiper-slide-link">
  102.                         <picture>
  103.                             <source srcset="{{ asset('assets/img/top/sp/main05.jpg', 'user_data') }}" media="(max-width: 768px)">
  104.                             <img src="{{ asset('assets/img/top/main05.jpg', 'user_data') }}" alt="MBS毎日放送「魔法のレストラン」でひろたのぽんずが紹介されました!">
  105.                         </picture>
  106.                     </a>
  107.                 </div>
  108.                 <div class="swiper-slide">
  109.                     <a href="{{ url('recipe') }}">
  110.                         <picture>
  111.                             <source srcset="{{ asset('assets/img/top/sp/main01.jpg', 'user_data') }}" media="(max-width: 768px)">
  112.                             <img src="{{ asset('assets/img/top/main01.jpg', 'user_data') }}" alt="手造りひろたのポン酢レシピ特集">
  113.                         </picture>
  114.                     </a>
  115.                 </div>
  116.                 <div class="swiper-slide">
  117.                     <a href="https://hirota-s.com/products/detail/8">
  118.                         <picture>
  119.                             <source srcset="{{ asset('assets/img/top/sp/main02.jpg', 'user_data') }}" media="(max-width: 768px)">
  120.                             <img src="{{ asset('assets/img/top/main02.jpg', 'user_data') }}" alt="いつもの料理がランクアップ!ひろたの万能つゆ">
  121.                         </picture>
  122.                     </a>
  123.                 </div>
  124.                 <div class="swiper-slide">
  125.                     <a href="https://hirota-s.com/products/list">
  126.                         <picture>
  127.                             <source srcset="{{ asset('assets/img/top/sp/main03.jpg', 'user_data') }}" media="(max-width: 768px)">
  128.                             <img src="{{ asset('assets/img/top/main03.jpg', 'user_data') }}" alt="ひろたの豊富なラインナップをご自宅で">
  129.                         </picture>
  130.                     </a>
  131.                 </div>
  132.                 <div class="swiper-slide">
  133.                     <a href="https://hirota-s.com/products/detail/11">
  134.                         <picture>
  135.                             <source srcset="{{ asset('assets/img/top/sp/main04.jpg', 'user_data') }}" media="(max-width: 768px)">
  136.                             <img src="{{ asset('assets/img/top/main04.jpg', 'user_data') }}" alt="徳島県那賀町・木頭産ゆずを使用したゆずぽんず">
  137.                         </picture>
  138.                     </a>
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143.     <div class="slider-thumbnail-wrap">
  144.         <div class="swiper slider-thumbnail">
  145.             <div class="swiper-wrapper">
  146.                 <!-- サタプラ放送前 -->
  147.                 <!-- <div class="swiper-slide"><img src="{{ asset('assets/img/top/main06.jpg', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されます!"></div> -->
  148.                 <!-- サタプラ放送後 -->
  149.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main06-3.jpg?20251122', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されました!"></div>
  150.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main05.jpg', 'user_data') }}" alt="MBS毎日放送「魔法のレストラン」でひろたのぽんずが紹介されました!"></div>
  151.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main01.jpg', 'user_data') }}" alt="手造りひろたのポン酢レシピ特集"></div>
  152.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main02.jpg', 'user_data') }}" alt="いつもの料理がランクアップ!ひろたの万能だし"></div>
  153.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main03.jpg', 'user_data') }}" alt="ひろたの豊富なラインナップをご自宅で"></div>
  154.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main04.jpg', 'user_data') }}" alt="徳島県那賀町・木頭産ゆずを使用したゆずぽんず"></div>
  155.             </div>
  156.         </div>
  157.         <div class="swiper-button-prev"></div>
  158.         <div class="swiper-button-next"></div>
  159.     </div>
  160. </div>
  161. {% endblock %}