app/template/default/Maker/list.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2. <style>
  3.     .card-sec {
  4.         padding-top: 60px; /* ページタイトルの上の余白 */
  5.         padding-bottom: 100vh; /* カード下の余白*/
  6.         background-color: #EFEFEF; /* 背景色 */
  7.     }
  8.     
  9.     .page-title {
  10.         position: relative;
  11.         color: #333333;
  12.         font-size: 20px;
  13.         text-align: center;
  14.     }
  15.     
  16.     .page-title:before { /* page-titleの下線 */
  17.         display: inline-block;
  18.         position: absolute;
  19.         width: 100px;
  20.         height: 5px;
  21.         border-radius: 2px;
  22.         background-color: #3F51B5;
  23.         content: '';
  24.         bottom: -42px;
  25.         left: 50%;
  26.         -webkit-transform: translateX(-50%);
  27.         transform: translateX(-50%);
  28.     }
  29.     
  30.     .card-container {
  31.         display: grid; /* カードの横並び */
  32.         grid-template-columns: repeat(auto-fit, minmax(342px, 1fr)); /* gridの設定 */
  33.         gap: 20px 30px; /* カード同士の隙間 縦方向 横方向 */
  34.         margin: 109px auto 0;
  35.     }
  37.     .card-link-market {
  38.         text-decoration: none;
  39.     }
  40.     
  41.     .card-item {
  42.         width: 100%;
  43.         max-width: 342px;
  44.         margin: 0 auto;
  45.         padding: 16px 16px 35px;
  46.         background-color: #ffffff;
  47.         border-radius: 6px;
  48.         text-align: center;
  49.     }
  50.     
  51.     .card-img {
  52.         width: 100%;
  53.         font-size: 42px;
  54.         vertical-align: bottom; /* 画像の下の余白を埋める */
  55.     }
  56.     
  57.     .card-title {
  58.         margin-top: 20px;
  59.         color: black;
  60.         font-size: 20px;
  61.         line-height: 1.2;
  62.     }
  65. </style>
  66. {% endblock %}
  69. {% block main %}
  71.     <section class="card-sec">
  72.         <div class="card-inner inner">
  73.             <h2 class="page-title">店舗を選択してください</h2>
  74.             <div class="card-container">  
  75.             {% for selectedMaker in maker %}   
  76.                 <!-- card-item -->
  77.                 <a class="card-link-market" href="/makerSlider/{{selectedMaker.id}}">
  78.                     <div class="card-item">            
  79.                             <div class='card-img'>{{emoji[selectedMaker.id]}}</div> 
  80.                             <h2 class="card-title">{{ selectedMaker.name }}</h2>
  81.                     </div>
  82.                 </a>
  83.                 <!-- /card-item -->
  84.             {% endfor %}
  85.             </div>
  86.         </div>
  87.     </section>
  89. {% endblock %}