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.         }
  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.         }
  91.         
  92.         .header-photo {
  93.             position: relative;
  94.         }
  96.         .header-photo img {
  97.             position: relative;
  98.             border-radius: 10px;
  99.         }
  101.         .header-photo h2 {/*h2タグを画像の真ん中に*/
  102.             position: absolute;
  103.             top: 50%;
  104.             left: 50%;
  105.             -ms-transform: translate(-50%,-50%);
  106.             -webkit-transform: translate(-50%,-50%);
  107.             transform: translate(-50%,-50%);
  108.             margin:0;/*余計な隙間を除く*/
  109.             padding:0;/*余計な隙間を除く*/
  110.             color: white;/*文字色*/
  111.             font-size: 40px;/*文字サイズ*/
  112.             text-align:center;/*pタグ内で更に中央寄せ*/
  113.             font-family: 'Quicksand',sans-serif;
  114.             font-weight: "bold";
  115.         }
  117.     </style>
  118. {% endblock %}
  120. {% block javascript %}
  121.     <script>
  122.         $(function() {
  123.             $('.main_visual').slick({
  124.                 dots: true,
  125.                 arrows: false,
  126.                 autoplay: true,
  127.                 speed: 300
  128.             });
  129.         });
  130.     </script>
  131. {% endblock javascript %}
  133. {% block main %}
  134.     <div class="ec-sliderRole">
  135.         <div class="main_visual">
  136.             <div class="item slick-slide header-photo"><img src="https://www.teamlab.art/images/pc-l/28989"><h2 class="index-title fontweight-bold">タスタス<br />アートギャラリーカフェ</h2></div>
  137.             <div class="item slick-slide header-photo"><img src="https://www.gannett-cdn.com/presto/2022/05/02/PPHX/f00d9880-c9d2-41a2-b71b-f47e68f51ffc-Ellen_Nemetz_Pop-upload.JPG?crop=1919,1080,x0,y153&width=1919&height=1080&format=pjpg&auto=webp"><h2 class="index-title fontweight-bold">タスタス<br />アートギャラリーカフェ</h2></div>
  138.             <div class="item slick-slide header-photo"><img src="https://d23.com/app/uploads/2020/01/1180w-463h_010920-riviera-art-gallery-780x440.jpg"><h2 class="index-title fontweight-bold">タスタス<br />アートギャラリーカフェ</h2></div>
  139.         </div>
  140.     </div>
  141. {% endblock %}