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' %}
  13. {% set body_class = 'front_page' %}
  15. {# {% block stylesheet %}
  16.     <style>
  17.       .slick-slider {
  18.         margin-bottom: 30px;
  19.       }
  20.       
  21.       .slick-dots {
  22.         position: absolute;
  23.         bottom: -45px;
  24.         display: block;
  25.         width: 100%;
  26.         padding: 0;
  27.         list-style: none;
  28.         text-align: center;
  29.       }
  30.       
  31.       .slick-dots li {
  32.         position: relative;
  33.         display: inline-block;
  34.         width: 20px;
  35.         height: 20px;
  36.         margin: 0 5px;
  37.         padding: 0;
  38.       
  39.         cursor: pointer;
  40.       }
  41.       
  42.       .slick-dots li button {
  43.         font-size: 0;
  44.         line-height: 0;
  45.         display: block;
  46.         width: 20px;
  47.         height: 20px;
  48.         padding: 5px;
  49.         cursor: pointer;
  50.         color: transparent;
  51.         border: 0;
  52.         outline: none;
  53.         background: transparent;
  54.       }
  55.       
  56.       .slick-dots li button:hover,
  57.       .slick-dots li button:focus {
  58.         outline: none;
  59.       }
  60.       
  61.       .slick-dots li button:hover:before,
  62.       .slick-dots li button:focus:before {
  63.         opacity: 1;
  64.       }
  65.       
  66.       .slick-dots li button:before {
  67.         content: ' ';
  68.         line-height: 20px;
  69.         position: absolute;
  70.         top: 0;
  71.         left: 0;
  72.         width: 12px;
  73.         height: 12px;
  74.         text-align: center;
  75.         opacity: 0.25;
  76.         background-color: black;
  77.         border-radius: 50%;
  78.       }
  79.       
  80.       .slick-dots li.slick-active button:before {
  81.         opacity: 0.75;
  82.         background-color: black;
  83.       }
  84.       
  85.       .slick-dots li button.thumbnail img {
  86.         width: 0;
  87.         height: 0;
  88.       }
  89.     </style>
  90. {% endblock %} #}
  92. {# {% block javascript %}
  93.     <script>
  94.       $(function () {
  95.         $('.main_visual').slick({
  96.           dots: false,
  97.           arrows: false,
  98.           autoplay: true,
  99.           speed: 300
  100.         })
  101.       })
  102.     </script>
  103. {% endblock javascript %} #}
  105. {% block main %}
  106.   <div class="ec-sliderRole">
  107.     <div class="main_visual">
  108.       <picture>
  109.         <source srcset="/html/user_data/assets/img/top/kv.png" media="(min-width: 768px)" />
  110.         <img src="/html/user_data/assets/img/top/kv-sp.png" alt="" />
  111.       </picture>
  112.       {# <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
  113.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
  114.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div> #}
  115.     </div>
  116.     <div class="main_bottom">
  117.       <div class="main_bottomItem">
  118.         <a href=""><img src="/html/user_data/assets/img/top/banner01.png" alt="" /></a>
  119.       </div>
  120.       <div class="main_bottomItem">
  121.         <a href=""><img src="/html/user_data/assets/img/top/banner02.png" alt="" /></a>
  122.       </div>
  123.       <div class="main_bottomItem">
  124.         <a href=""><img src="/html/user_data/assets/img/top/banner03.png" alt="" /></a>
  125.       </div>
  126.     </div>
  127.   </div>
  128. {% endblock %}