app/template/default/Block/maker.twig line 1

Open in your IDE?
  1. <head>
  2.     <style>
  3.         body {
  4.             font-family: Arial, sans-serif;
  5.             background-color: #f8f9fa;
  6.             margin: 0;
  7.         }
  8.         .maker_container {
  9.             width: 100%;
  10.             margin: auto;
  11.             padding: 20px;
  12.             background-color: #e9ecef;
  13.             border-radius: 8px;
  14.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  15.         }
  16.         h1 {
  17.             text-align: left;
  18.             color: #333;
  19.         }
  20.         ul {
  21.             list-style-type: none;
  22.             padding: 0;
  23.         }
  24.         img {
  25.             width: 30%;
  26.         }
  27.         
  28.         
  29.         .manufacturer-list {
  30.             display: flex;
  31.             flex-wrap: wrap;
  32.             justify-content: flex-start;
  33.             list-style-type: none;
  34.             padding: 0;
  35.         }
  36.         .manufacturer-item {
  37.             flex: 0 0 29%;
  38.             padding: 10px;
  39.             margin: 5px 0;
  40.             margin-left: 2%;
  41.             margin-right: 2%;
  42.             background-color: #ffffff;
  43.             border-radius: 4px;
  44.             text-align: center;
  45.             font-size: 18px;
  46.             color: #495057;
  47.         }
  49.         /* レスポンシブデザインのためのメディアクエリ */
  50.         @media (max-width: 768px) {
  51.             .manufacturer-item {
  52.                 flex: 0 0 45%; /* 各アイテムを1列に並べる */
  53.             }
  54.             img {
  55.                 width: 75%;
  56.             }
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="ec-BlockHedder">
  62.         <h1 class="ec-BlockHedder__title">BRAND<span class="ec-BlockHedder__subtitle">ブランドから探す</span></h1>
  63.     </div>
  64.     <div class="maker_container">
  65.         <ul class="manufacturer-list">
  66.             <li class="manufacturer-item"><a href="/products/list?maker_id=1&m=LIXIL"><img src="/html/user_data/assets/img/logo_lixil.png" alt="LIXIL"></a></li>
  67.             <li class="manufacturer-item"><a href="/products/list?maker_id=2&m=YKK AP"><img src="/html/user_data/assets/img/logo_ykkap.png" alt="YKK AP"></a></li>
  68.             <li class="manufacturer-item"><a href="/products/list?maker_id=3&m=三協アルミ"><img src="/html/user_data/assets/img/logo_sankyoarumi.png" alt="三協アルミ"></a></li>
  69.             <li class="manufacturer-item"><a href="/products/list?maker_id=4&m=四国化成"><img src="/html/user_data/assets/img/logo_shikokukasei.png" alt="四国化成"></a></li>
  70.             <li class="manufacturer-item"><a href="/products/list?maker_id=5&m=タカショー"><img src="/html/user_data/assets/img/logo_takasho.png" alt="タカショー"></a></li>
  71.             <li class="manufacturer-item"><a href="/products/list?maker_id=8&m=パナソニック"><img src="/html/user_data/assets/img/logo_panasonic.png" alt="パナソニック"></a></li>
  72.             <li class="manufacturer-item"><a href="/products/list?maker_id=9&m=イナバ"><img src="/html/user_data/assets/img/logo_inaba.png" alt="イナバ"></a></li>
  73.             <li class="manufacturer-item"><a href="/products/list?maker_id=10&m=ヨドコウ"><img src="/html/user_data/assets/img/logo_yodo.png" alt="ヨドコウ"></a></li>
  74.             <li class="manufacturer-item"><a href="/products/list?maker_id=6&m=ユニゾン"><img src="/html/user_data/assets/img/logo_unison.png" alt="ユニゾン"></a></li>
  75.             <li class="manufacturer-item"><a href="/products/list?maker_id=7&m=エスピック"><img src="/html/user_data/assets/img/logo_sbic.png" alt="エスピック"></a></li>
  76.             <li class="manufacturer-item"><a href="/products/list?maker_id=13&m=タクボ"><img src="/html/user_data/assets/img/logo_takubo.png" alt="タクボ"></a></li>
  77.         </ul>
  78.     </div>
  79. </body>