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

Open in your IDE?
  1. {% block main %}
  3. <style>
  5. .main_box_i {
  6.   display: flex;    
  7.   flex-wrap: wrap;
  8.   justify-content: space-around;    
  9.   width: 100%
  10.   height: auto;
  11.   background-color: ;
  12.   border: solid 1px #dcdcdc;
  13.   margin-top: 10px;
  14.   margin-bottom: 10px;
  15.   position: relative;
  16. }
  17. .box_i {
  18.   display: flex;
  19.   flex-wrap: wrap;
  20.   background-color: #fff;
  21.   width:calc(100% / 3 - 20px);  
  22.   min-width: 315px;
  23.   height: auto; 
  24.   border: solid 1px #dcdcdc;
  25.   margin-top: 10px;
  26.   margin-bottom: 10px;
  27. }
  28. .box_i1 { 
  29.   display: flex;    
  30.   flex-wrap: wrap;
  31.   justify-content: space-around;      
  32.   width: 150px;
  33.   height: 150px;
  34.   background-color: ;    
  35.   margin-top: 20px;
  36.   margin-bottom: 10px;
  37.   margin-left: 6px;
  38. }
  39. .box_i2 {
  40.   width: 100%;
  41.   height: auto;
  42.   text-align: left;
  43. }
  44. .box_i3 { 
  45.   display: flex;    
  46.   flex-wrap: wrap;
  47.   width: 300px;
  48.   height: 150px;
  49.   border: ;
  50.   background-color: ;    
  51.   margin-top: 20px;
  52.   margin-bottom: 10px;
  53.   margin-left: 9px;
  54. }
  55. .box_i4 { 
  56.   display: flex;    
  57.   flex-wrap: wrap;
  58.   width: 300px;
  59.   height: 150px;
  60.   border: ;
  61.   background-color: ;    
  62.   margin-top: 20px;
  63.   margin-bottom: 10px;
  64.   margin-left: 9px;
  65. }
  66. /*空欄用*/
  67. .box_i5 { 
  68.   display: flex;    
  69.   flex-wrap: wrap;
  70.   justify-content: space-around;      
  71.   width: 150px;
  72.   height: 150px;
  73.   background-color: #fff;    
  74.   margin-top: 20px;
  75.   margin-bottom: 10px;
  76.   margin-left: 6px;
  77. }
  78. .pexample_i1 {
  79.   color: #000;    
  80.   margin-top: 10px;    
  81.   margin-bottom: -10px;
  82.   margin: left;    
  83.   width: 300px;     
  84.   height: 24px;
  85.   font-weight: 500;
  86.   margin-left: 20px;
  87. }
  88. .pexample_i2 {
  89.   color: #000;    
  90.   margin-top: px; 
  91.   font-size: 12px;
  92.   margin: left;  
  93.   margin-left: 20px;
  94.   width: 300px;     
  95.   height: 20px;
  96.   font-weight: 400;
  97. }
  98. .pexample_i3 {
  99.   color: #4682b4;    
  100.   margin-top: -10px;    
  101.   font-size: 12px;
  102.   margin: left;    
  103.   width: 300px;     
  104.   height: 12px;
  105.   font-weight: 400;
  106. }
  107. .pexample_i4 {
  108.   text-align: left;    
  109.   margin: left;    
  110.   margin-left: 10px;
  111.   color: #4682b4;    
  112.   margin-top: 20px;
  113.   margin-bottom: 10px;
  114.   font-size: 12px;
  115.   width: 300px;     
  116.   height: 20px;
  117.   font-weight: 400;
  118. }
  119. .fit-picture_i {
  120.   width: 300px;
  121. }
  122. .fit-picture_i2 {
  123.   width: 150px;
  124.   height: 150px;
  125. }
  126. </style>
  127. <div class="ec-role">
  128.     <div class="main_box_i">
  129.         <div class="box_i">
  130.             <p class="pexample_i1">【ナカトミ　オフィシャルサイト】</p>
  131.             <div class="box_i4">
  132.             <a href="https://www.nakatomi-sangyo.com/">
  133.             <img class="fit-picture_i" src="https://www.nakatomishop.com/html/user_data/assets/img/toppagecategory/cgof_2025_300_150.png"></a>    
  134.             <p class="pexample_i2">ナカトミ  ホームページ</p>    
  135.             </div>
  136.             {#<div class="box_i1">
  137.             <a href="#">
  138.             <img src="#></a>    
  139.             <p class="pexample_i2"></p>    
  140.             </div>#}
  141.             <div class="box_i1">
  142.             <a href="https://www.nakatomi-sangyo.com/catalog/index.html">
  143.             <img class="fit-picture_i2" src="https://nakatomishop.sakura.ne.jp/prod//merchandiseimage/25slider/25CATALOG_TOP.png"></a>    
  144.             <p class="pexample_i2">2024年【夏】カタログ</p>    
  145.             </div>
  146.             <div class="box_i1">
  147.             <a href="https://www.nakatomi-sangyo.com/catalog/2024winter.html">
  148.             <img class="fit-picture_i2" src="https://www.nakatomishop.com/html/user_data/assets/img/top_sale/2024winter/2024winter_catalog_top.png"></a>    
  149.             <p class="pexample_i2">2024年【冬】カタログ</p>    
  150.             </div>            
  151.             <div class="box_i2">  
  152.             <a href="{{ url('homepage') }}https://www.nakatomi-sangyo.com/index.html">
  153.             <p class="pexample_i4">【ナカトミホームページ】へ移動</p></a>
  154.             </div>   
  155.         </div>   
  156.         <div class="box_i">
  157.             <p class="pexample_i1">アウトレット・オプション品</p>
  158.             <div class="box_i3">
  159.             <a href="https://www.nakatomishop.com/products/list?category_id=9">
  160.             <img src="{{ url('homepage') }}/html/user_data/assets/img/top_sale/top_main/cgop_300_150.png"></a>
  161.             <p class="pexample_i2">各種オプション品などはこちらから</p>    
  162.             </div>
  163.             <div class="box_i3">
  164.             <a href="https://www.nakatomishop.com/products/list?category_id=10">
  165.             <img src="{{ url('homepage') }}/html/user_data/assets/img/top_sale/top_main/cgot_300_150.png"></a>    
  166.             <p class="pexample_i2">お得なアウトレット品もあります</p>    
  167.             </div>
  168.             <div class="box_i2">  
  169.             <a href="https://www.nakatomishop.com/products/list?category_id=9">
  170.             <p class="pexample_i4">【オプション品】一覧へ移動</p></a>
  171.             </div>   
  172.         </div>   
  173.         <div class="box_i">
  174.             <p class="pexample_i1">ナカトミショップ　ガイド</p>
  175.             <div class="box_i1">
  176.             <a href="https://www.nakatomishop.com/entry">
  177.             <img src="{{ url('homepage') }}/html/user_data/assets/img/top_sale/top_main/新規会員登録_300_300.png"></a>    
  178.             <p class="pexample_i2">新規会員登録</p>    
  179.             </div>
  180.             <div class="box_i1">
  181.             <a href="https://www.nakatomishop.com/user_data/3nenhosyoukiyaku">
  182.             <img src="{{ url('homepage') }}/html/user_data/assets/img/top_sale/top_main/3年保証_300_300.png"></a>    
  183.             <p class="pexample_i2">３年保証</p>    
  184.             </div>
  185.             <div class="box_i1">
  186.             <a href="https://page.line.me/420khjyx?openQrModal=true">
  187.             <img src="{{ url('homepage') }}/html/user_data/assets/img/top_sale/top_main/LINE_FD_300_300.png"></a>    
  188.             <p class="pexample_i2">LINE友だち募集中！</p>    
  189.             </div>
  190.             <div class="box_i1">
  191.             <a href="https://www.nakatomishop.com/guide">
  192.             <img src="{{ url('homepage') }}/html/user_data/assets/img/top_sale/top_main/ご利用ガイド_300_300_.png"></a>
  193.             <p class="pexample_i2">ご利用に関して</p>    
  194.             </div>            
  195.             <div class="box_i2">  
  196.             <a href="https://www.nakatomishop.com/guide">
  197.             <p class="pexample_i4">【ご利用ガイド】へ移動</p></a>
  198.             </div>   
  199.         </div>   
  200.     </div>   
  201. </div>
  203. {% endblock %}