app/template/default/Category/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' %}
  10. {% set mypageno = 'index' %}
  12. {% set body_class = 'mypage' %}
  14. {% block stylesheet %}
  15.     <style>
  16.         .header-photo {
  17.             position: relative;
  18.         }
  20.         .header-photo div {
  21.             position: absolute;
  22.             top: 50%;
  23.             left: 50%;
  24.             -ms-transform: translate(-50%,-50%);
  25.             -webkit-transform: translate(-50%,-50%);
  26.             transform: translate(-50%,-50%);
  27.             margin:0;/*余計な隙間を除く*/
  28.             padding:0;/*余計な隙間を除く*/
  29.             color: white;/*文字色*/
  30.             font-size: 40px;/*文字サイズ*/
  31.             text-align:center;/*pタグ内で更に中央寄せ*/
  32.             font-family: 'Quicksand',sans-serif;
  33.             font-weight: "bold";
  34.         }
  36.         .header-photo img {
  37.             width: 99.5%;
  38.         }
  40.         .artists-title {
  41.             margin-left: 5%;
  42.             font-weight: bold;
  43.         }
  44.         .img-wrapper p {
  45.             color: black;
  46.         }
  48.         /* 922以下の時 */
  49.         @media screen and (max-width: 580px) {
  50.             .header-photo div {
  51.                 font-size: 30px;
  52.             }
  53.         }
  54.     </style>
  55. {% endblock %}
  57. {% block main %}
  60. <div class="header-photo">
  61.     <img src="https://uploads-ssl.webflow.com/631e594043d13c32e2c927d9/631e60467a1cf632e0fb11da_high-road.jpg">
  62.     <div class="artists-title">カテゴリー</div>
  63. </div>
  65. <div class="artCategory-flex-page">
  66.     {% for category in categories %}
  67.         <div class="img-wrapper">
  68.             <a href="/products/list?category_id={{category.id}}">
  69.                 <img src="{{ asset(category.category_image |no_image_product, 'user_data') }}" alt=category.name>
  70.                 <p>{{ category.name }}</p>
  71.             </a>
  72.         </div>
  73.     {% endfor %}
  74. </div>
  76. {% endblock %}