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.     }
  36.     .card-link-market {
  37.         text-decoration: none;
  38.     }
  39.     
  40.     .card-item {
  41.         width: 100%;
  42.         max-width: 342px;
  43.         margin: 0 auto;
  44.         padding: 16px 16px 35px;
  45.         background-color: #ffffff;
  46.         border-radius: 6px;
  47.         text-align: center;
  48.     }
  49.     
  50.     .card-img {
  51.         width: 100%;
  52.         font-size: 42px;
  53.         vertical-align: bottom; /* 画像の下の余白を埋める */
  54.     }
  55.     
  56.     .card-title {
  57.         margin-top: 20px;
  58.         color: black;
  59.         font-size: 20px;
  60.         line-height: 1.2;
  61.     }
  62. </style>
  63. {% endblock %}
  64. {% block main %}
  65.     <section class="card-sec">
  66.         <div class="card-inner inner">
  67.             <h2 class="page-title">店舗を選択してください</h2>
  68.             <div class="card-container">  
  69.             {% for selectedMaker in maker %}   
  70.                 <!-- card-item -->
  71.                 <a class="card-link-market" href="/makerSlider/{{selectedMaker.id}}">
  72.                     <div class="card-item">            
  73.                             <div class='card-img'>{{emoji[selectedMaker.id]}}</div> 
  74.                             <h2 class="card-title">{{ selectedMaker.name }}</h2>
  75.                     </div>
  76.                 </a>
  77.                 <!-- /card-item -->
  78.             {% endfor %}
  79.             </div>
  80.         </div>
  81.     </section>
  82. {% endblock %}