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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_h {
  4.    display: flex;    
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;    
  7.   width: 100%;
  8.   height: auto;
  9.   background-color: ;
  10.   position: relative;
  11.   margin-top: 25px;
  12.   margin-bottom: 100px;
  13. }
  14. .box_h {
  15.   display: flex;
  16.   flex-wrap: wrap;
  17.   background-color: #fff;
  18.   width:calc(100% / 4 - 20px);  
  19.   width: 315px;
  20.   height: auto; 
  21.   {#border: solid 1px #dcdcdc;#}
  22.   margin-left: 10px;
  23.   margin-right: 10px;
  24.   margin-top: 10px;
  25.   margin-bottom: 10px;
  26.   {#position: relative;#}/*sliderに重ねる場合使用*/
  27.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  28. }
  29. .box_ha {
  30.     display: flex;
  31.     flex-wrap: wrap;
  32.     justify-content: space-around;    
  33.     background-color: bule;
  34.     width: auto;  
  35.     height: auto; 
  36.     text-align: center;
  37.     padding-left: auto;
  38.     padding-right: auto;
  39.     {#position: relative;#}/*sliderに重ねる場合使用*/
  40.     {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  41. }
  42. .box_h1 { 
  43.   display: flex;    
  44.   flex-wrap: wrap;
  45.   justify-content: space-around;      
  46.   width: 150px;
  47.   height: 150px;
  48.   background-color: ;    
  49.   margin-top: 10px;
  50.   margin-bottom: 10px;
  51.   margin-left: 6px;
  52. }
  53. .box_h2 {
  54.   width: auto;
  55.   height: auto;
  56.   text-align: left;
  57. }
  58. .box_h3 {
  59.   background-color: ;    
  60.   display: flex;
  61.   flex-wrap: wrap;
  62.   width: 300px;    
  63.   height: 300px;    
  64.   margin-top: 20px;
  65.   margin-right: auto; 
  66.   margin-left: auto;
  67. }
  68. .box_h4 { 
  69.   display: flex;    
  70.   flex-wrap: wrap;
  71.   justify-content: space-around;      
  72.   width: 150px;
  73.   height: 150px;
  74.   background-color: #fff;    
  75.   margin-top: 20px;
  76.   margin-bottom: 10px;
  77.   margin-left: 6px;
  78. }
  79. .box_h5 { 
  80.   display: flex;    
  81.   flex-wrap: wrap;
  82.   width: 300px;
  83.   height: 150px;
  84.   border: ;
  85.   background-color: #999;    
  86.   margin-top: 20px;
  87.   margin-bottom: 10px;
  88.   margin-left: 9px;
  89. }
  90. .pexample_h1 {
  91.   color: #008080; 
  92.   margin: 0 auto;
  93.   margin-top: 6px;    
  94.   margin-bottom: -6px;
  95.   margin: left;    
  96.   width: 100%;     
  97.   height: 20px;
  98.   font-weight: 500;
  99.   margin-left: 10px;
  100. }
  101. .pexample_h2 {
  102.   color: #000;    
  103.   margin-top: 2px; 
  104.   font-size: 12px;
  105.   margin: left;  
  106.   margin-left: 10px;
  107.   width: auto;     
  108.   height: 20px;
  109.   font-weight: 400;
  110. }
  111. .pexample_h3 {
  112.   color: #4682b4;    
  113.   margin-top: -10px;    
  114.   font-size: 12px;
  115.   margin: left;    
  116.   width: 300px;     
  117.   height: 12px;
  118.   font-weight: 400;
  119. }
  120. .pexample_h4 {
  121.   text-align: left;    
  122.   margin: left;    
  123.   margin-left: 10px;
  124.   color: #4682b4;    
  125.   margin-top: 20px;
  126.   margin-bottom: 10px;
  127.   font-size: 12px;
  128.   width: 300px;     
  129.   height: 20px;
  130.   font-weight: 400;
  131. }
  132. .fit-picture_a {
  133.   width: 150px;
  134. }
  135. .fit-picture_b {
  136.   width: 300px;
  137.   height: 150px;
  138. }
  139. .fit-picture_o {
  140.   width: 160px;
  141.   opacity: 0.6;
  142. }
  143. .fit-picture_n {
  144.   width: 40px;
  145.   margin-top: -2px;
  146. }
  147. /*<img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">*/
  148. </style>
  149. <div class="main_box_h">
  150.     <div class="box_ha">
  151.         <div class="box_h">
  152.             <p class="pexample_h1">75cm首振りビッグファン</p>
  153.                 <div class="box_h3">
  154.                     <a href="https://www.nakatomishop.com/products/detail/1376">
  155.                     <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-75ZS_POP_300_300.png" width="300px" alt="BF-75ZS"></a> 
  156.                     <p class="pexample_r2">BF-75ZS</p>
  157.                 </div>
  158.             <div class="box_h2">  
  159.             <a href="https://www.nakatomishop.com/products/list?category_id=28">
  160.             <p class="pexample_h4">【ビッグファン】へ移動</p></a>
  161.             </div>   
  162.         </div>        
  163.         <div class="box_h">
  164.             <p class="pexample_h1">大型循環送風機 -ビッグファン-</p>
  165.             <div class="box_h1">
  166.             <a href="https://www.nakatomishop.com/products/detail/1361">
  167.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>    
  168.             <p class="pexample_h2">BF-60JZ</p>    
  169.             </div>
  170.             <div class="box_h1">
  171.             <a href="https://www.nakatomishop.com/products/detail/1362">
  172.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-75VZ_300_300.png"></a>    
  173.             <p class="pexample_h2">BF-75VZ</p>    
  174.             </div>
  175.             <div class="box_h1">
  176.             <a href="https://www.nakatomishop.com/products/detail/1363">
  177.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-100VZ_300_300.png"></a>    
  178.             <p class="pexample_h2">BF-100VZ</p>    
  179.             </div>
  180.             <div class="box_h1">
  181.             <a href="https://www.nakatomishop.com/products/detail/1360">
  182.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-125VZ_300_300.png"></a>    
  183.             <p class="pexample_h2">BF-125VZ</p>    
  184.             </div>            
  185.             <div class="box_h2">  
  186.             <a href="https://www.nakatomishop.com/products/list?category_id=28">
  187.             <p class="pexample_h4">【ビッグファン】一覧へ移動</p></a>
  188.             </div>   
  189.         </div>   
  190.         <div class="box_h">
  191.             <p class="pexample_h1">エアーカーテン</p>
  192.             <div class="box_h1">
  193.             <a href="https://www.nakatomishop.com/products/detail/319">
  194.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/N900-AC_300_300.png"></a>    
  195.             <p class="pexample_h2">N900-AC</p>    
  196.             </div>
  197.             <div class="box_h1">
  198.             <a href="https://www.nakatomishop.com/products/detail/320">
  199.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/N1200-AC_300_300.png"></a>    
  200.             <p class="pexample_h2">N1200-AC</p>    
  201.             </div>
  202.             <div class="box_h1">
  203.             <a href="https://www.nakatomishop.com/products/list?category_id=99">
  204.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_BF_300_300.png"></a>    
  205.             <p class="pexample_h2">ビッグファン交換用羽根</p>    
  206.             </div>
  207.             <div class="box_h1">
  208.             <a href="https://www.nakatomishop.com/products/list?category_id=27">
  209.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_FF_300_300.png"></a>    
  210.             <p class="pexample_h2">工場扇-交換用羽根</p>    
  211.             </div>            
  212.             <div class="box_h2">  
  213.             <a href="https://www.nakatomishop.com/products/list?category_id=30">
  214.             <p class="pexample_h4">【エアーカーテン】一覧へ移動</p></a>
  215.             </div>   
  216.         </div>        
  217.         <div class="box_h">
  218.             <p class="pexample_h1">スポットクーラー</p>
  219.             <div class="box_h5">
  220.             <a href="https://www.nakatomishop.com/products/detail/1366">
  221.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/SAC-27HCS_150_300.png"></a>    
  222.             <p class="pexample_h2">SAC-27HCS</p>    
  223.             </div>
  224.             <div class="box_h5">
  225.             <a href="https://www.nakatomishop.com/products/detail/1365">
  226.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/SAC-30WS_150_300.png"></a>    
  227.             <p class="pexample_h2">SAC-30WS</p>    
  228.             </div>
  229.   
  230.             <div class="box_h2">  
  231.             <a href="https://www.nakatomishop.com/products/list?category_id=1">
  232.             <p class="pexample_h4">【スポットクーラー】一覧へ移動</p></a>
  233.             </div>   
  234.         </div>           
  235.     </div>   
  236. </div>   
  237. {% endblock %}