app/template/default/Block/topic.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. #}
  12. {% block stylesheet %}
  13. <style>
  14. .ec-topicRole {
  15.     padding-top: 0;
  16.     padding-bottom: 60px;
  17.     border-bottom: 1px solid #555555;
  18.     margin-bottom: 75px;
  19. }
  20. .ec-role {
  21.     margin-bottom: 0;
  22.     max-width: 905px;
  23. }
  24. .ec-secHeading {
  25.     margin-bottom: 30px;
  26. }
  27. .ec-secHeading .ec-secHeading__en {
  28.     line-height: 1;
  29. }
  30. .ec-secHeading .ec-secHeading__line {
  31.     width: 14px;
  32.     height: 1px;
  33.     margin-bottom: 5px;
  34. }
  35. .ec-topicRole .ec-topicRole__list {
  36.     flex-wrap: wrap;
  37.     gap: 20px;
  38. }
  39. .ec-topicRole .ec-topicRole__listItem {
  40.     width: calc(100% / 3);
  41.     max-width: 275px;
  42. }
  44. @media only screen and (max-width: 768px) {
  45.     .ec-topicRole .ec-topicRole__listItem {
  46.         width: 100%;
  47.         max-width: 100%;
  48.     }
  50.     .ec-topicRole {
  51.         padding-bottom: 30px;
  52.         margin-bottom: 30px;
  53.     }
  54. }
  56. </style>
  57. {% endblock %}
  59. <div class="ec-topicRole">
  60.     <div class="ec-role">
  61.         <div class="ec-secHeading txtCenter">
  62.             <p class="ec-secHeading__en">{{ '特集'|trans }}</p>
  63.             <p class="ec-secHeading__line"></p>
  64.             <p class="ec-secHeading__ja">{{ 'TOPICS'|trans }}</p>
  65.         </div>
  66.         <div class="ec-topicRole__list displayPc">
  67.             <div class="ec-topicRole__listItem mb10">
  68.                 <a href="/frontlines/html/special/gadget/index.php">
  69.                     <img src="/html/images/top/banner/gadget-pc.png" alt="ガジェット特集">
  70.                 </a>
  71.             </div>
  72.             <div class="ec-topicRole__listItem mb10">
  73.                 <a href="/frontlines/html/special/bag/index.php">
  74.                     <img src="/html/images/top/banner/bag-pc.png" alt="バッグ特集">
  75.                 </a>
  76.             </div>
  77.             <div class="ec-topicRole__listItem mb10">
  78.                 <a href="/frontlines/html/special/outdoor/index.php">
  79.                     <img src="/html/images/top/banner/outdoor-pc.png" alt="アウトドア特集">
  80.                 </a>
  81.             </div>
  82.         </div>
  83.         <div class="ec-topicRole__list displaySp">
  84.             <div class="ec-topicRole__listItem mb10">
  85.                 <a href="/frontlines/html/special/gadget/index.php">
  86.                     <img src="/html/images/top/banner/gadget-sp.png" alt="ガジェット特集">
  87.                 </a>
  88.             </div>
  89.             <div class="ec-topicRole__listItem mb10">
  90.                 <a href="/frontlines/html/special/bag/index.php">
  91.                     <img src="/html/images/top/banner/bag-sp.png" alt="バッグ特集">
  92.                 </a>
  93.             </div>
  94.             <div class="ec-topicRole__listItem mb10">
  95.                 <a href="/frontlines/html/special/outdoor/index.php">
  96.                     <img src="/html/images/top/banner/outdoor-sp.png" alt="アウトドア特集">
  97.                 </a>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </div>