app/template/akracing/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.         }
  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.         }
  31.         .slick-dots li {
  32.             position: relative;
  33.             display: inline-block;
  34.             width: 20px;
  35.             height: 20px;
  36.             margin: 0 5px;
  37.             padding: 0;
  39.             cursor: pointer;
  40.         }
  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.         }
  56.         .slick-dots li button:hover,
  57.         .slick-dots li button:focus {
  58.             outline: none;
  59.         }
  61.         .slick-dots li button:hover:before,
  62.         .slick-dots li button:focus:before {
  63.             opacity: 1;
  64.         }
  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: .25;
  76.             background-color: black;
  77.             border-radius: 50%;
  79.         }
  81.         .slick-dots li.slick-active button:before {
  82.             opacity: .75;
  83.             background-color: black;
  84.         }
  86.         .slick-dots li button.thumbnail img {
  87.             width: 0;
  88.             height: 0;
  89.         }
  90.     </style>
  91. {% endblock %}
  93. {% block javascript %}
  94.     <script>
  95.         $(function() {
  96.             $('.main_visual').slick({
  97.                 dots: true,
  98.                 arrows: false,
  99.                 autoplay: true,
  100.                 infinite: true,
  101.                 slidesToShow: 1,
  102.                 slidesToScroll: 1,
  103.                 speed: 300,
  104.                 asNavFor: '.thumb-item-nav'
  105.             });
  106.             $('.thumb-item-nav').slick({
  107.                 accessibility: true,
  108.                 arrows: false,
  109.                 autoplay: true,
  110.                 speed: 300,
  111.                 infinite: true,
  112.                 slidesToShow: 3,
  113.                 slidesToScroll: 1,
  114.                 asNavFor: '.thumb-item',
  115.                 focusOnSelect: false,
  116.                 variableWidth: true
  117.             });
  118.         });
  119.     </script>
  120. {% endblock javascript %}
  122. {% block main %}
  123.     <div id="topFast">
  124.             <div id="keyimage">
  125.                 <div class="ec-sliderRole">
  126.                     <div class="main_visual">
  127.                         <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider1.png') }}" alt=""></div>
  128.                         <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider2.png') }}" alt=""></div>
  129.                         <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider3.png') }}" alt=""></div>
  130.                     </div>
  131.                 </div>
  132.             </div><!-- #keyimage -->
  133.             <div class="top-info">
  134.                 <div class="top-info_inner">
  135.                     <div class="spnone">
  136.                         <h2>気がつけば、<br>いつもここ</h2>
  137.                         <p>AKRacing & Tsubasa Honda</p>
  138.                         <div class="slider thumb-item-nav">
  139.                             <div class="item slick-slide"></div>
  140.                             <div class="item slick-slide"></div>
  141.                             <div class="item slick-slide"></div>
  142.                         </div>
  143.                     </div>
  144.                     <div class="pcnone">
  145.                         <h2>
  146.                             <img src="{{ asset('assets/img/top/top_title.png') }}" alt="気がつけば、いつもここ">
  147.                         </h2>
  148.                     </div>
  149.                 </div>
  150.             </div><!-- top-info -->
  151.     </div><!-- #topFast -->
  153.     <div id="top-side">
  154.             <ul class="ak-sns-icon">
  155.                 <li><a href="https://twitter.com/AKRacingJapan" target="_blank"><i class="fab fa-twitter"></i></a></li>
  156.                 <li><a href="https://www.youtube.com/channel/UC3IfqphfSpYgHY-x_PA8oqw" target="_blank"><i class="fab fa-youtube"></i></a></li>
  157.                 <li><img src="{{ asset('assets/img/top/Social.png') }}" alt=""></li>
  158.             </ul>
  159.             <p class="scroll"><img src="{{ asset('assets/img/top/scroll.png') }}" alt=""></p>
  160.     </div>
  161. {% endblock %}
  162.                     
  163.