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

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