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

Open in your IDE?
  1. {% block main %}
  3. <style>
  5. .main_box_g {
  6.    display: flex;    
  7.   flex-wrap: wrap;
  8.   justify-content: space-around;    
  9.   width: 100%;
  10.   height: auto;
  11.   min-height: 450px;
  12.   background-color: ;
  13.   position: relative;
  14.   margin-top: 25px;
  15.   margin-bottom: 100px;
  16. }
  17. .box_g {
  18.   display: flex;
  19.   flex-wrap: wrap;
  20.   background-color: #fff;
  21.   width:calc(100% / 4 - 20px);  
  22.   width: 315px;
  23.   height: auto; 
  24.   {#border: solid 1px #dcdcdc;#}
  25.   margin-left: 10px;
  26.   margin-right: 10px;
  27.   margin-top: 10px;
  28.   margin-bottom: 10px;
  29.   {#position: relative;#}/*sliderに重ねる場合使用*/
  30.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  31. }
  32. .box_ga {
  33.     display: flex;
  34.     flex-wrap: wrap;
  35.     justify-content: space-around;    
  36.     background-color: bule;
  37.     width: auto;  
  38.     height: auto; 
  39.     text-align: center;
  40.     padding-left: auto;
  41.     padding-right: auto;
  42.     {#position: relative;#}/*sliderに重ねる場合使用*/
  43.     {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  44. }
  46. .box_g1 { 
  47.   display: flex;    
  48.   flex-wrap: wrap;
  49.   justify-content: space-around;      
  50.   width: 150px;
  51.   height: 150px;
  52.   background-color: ;    
  53.   margin-top: 10px;
  54.   margin-bottom: 10px;
  55.   margin-left: 6px;
  56. }
  57. .box_g2 {
  58.   width: auto;
  59.   height: auto;
  60.   text-align: left;
  61. }
  62. .box_g3 { 
  63.   background-color: ;    
  64.   display: flex;
  65.   flex-wrap: wrap;
  66.   width: 300px;    
  67.   height: 300px;    
  68.   margin-top: 20px;
  69.   margin-right: auto; 
  70.   margin-left: auto;
  71. }
  72. /*空欄用*/
  73. .box_g4 { 
  74.   display: flex;    
  75.   flex-wrap: wrap;
  76.   justify-content: space-around;      
  77.   width: 150px;
  78.   height: 150px;
  79.   background-color: #fff;    
  80.   margin-top: 20px;
  81.   margin-bottom: 10px;
  82.   margin-left: 6px;
  83. }
  84. .box_g5 { 
  85.   display: flex;    
  86.   flex-wrap: wrap;
  87.   width: 300px;
  88.   height: 150px;
  89.   border: ;
  90.   background-color: #999;    
  91.   margin-top: 10px;
  92.   margin-bottom: 10px;
  93.   margin-left: 9px;
  94. }
  95. .pexample_g1 {
  96.   color: #008080; 
  97.   margin: 0 auto;
  98.   margin-top: 6px;    
  99.   margin-bottom: -6px;
  100.   margin: left;    
  101.   width: 100%;     
  102.   height: 20px;
  103.   font-weight: 500;
  104.   margin-left: 10px;
  105. }
  106. .pexample_g2 {
  107.   color: #000;    
  108.   margin-top: 2px; 
  109.   font-size: 12px;
  110.   margin: left;  
  111.   margin-left: 10px;
  112.   width: auto;     
  113.   height: 20px;
  114.   font-weight: 400;
  115. }
  116. .pexample_g3 {
  117.   color: #4682b4;    
  118.   margin-top: -10px;    
  119.   font-size: 12px;
  120.   margin: left;    
  121.   width: 300px;     
  122.   height: 12px;
  123.   font-weight: 400;
  124. }
  125. .pexample_g4 {
  126.   text-align: left;    
  127.   margin: left;    
  128.   margin-left: 10px;
  129.   color: #4682b4;    
  130.   margin-top: 16px;
  131.   margin-bottom: 10px;
  132.   font-size: 12px;
  133.   width: 300px;     
  134.   height: 20px;
  135.   font-weight: 400;
  136. }
  137. .fit-picture_a {
  138.   width: 150px;
  139. }
  140. .fit-picture_b {
  141.   width: 300px;
  142.   height: 150px;
  143.   margin-bottom: 5px;
  144. }
  145. .fit-picture_o {
  146.   width: 150px;
  147.   opacity: 0.6;
  148. }
  150. </style>
  151. <div class="main_box_g">
  152.     <div class="box_ga">
  153.         <div class="box_g">
  154.             <p class="pexample_g1"><font color="red">灯油ヒーター</font></p>
  155.             <div class="box_g5">
  156.             <a href="https://www.nakatomishop.com/products/detail/534">
  157.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/POP_KH-30D_150_300.png"></a>
  158.             <p class="pexample_g2">KH-30D</p>    
  159.             </div>
  160.             <div class="box_g5">
  161.             <a href="https://www.nakatomishop.com/products/detail/705">
  162.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/POP_SH-17D_150_300.png"></a>
  163.             <p class="pexample_g2">SH-17D</p>    
  164.             </div>
  165.             <div class="box_g2">  
  166.             <a href="https://www.nakatomishop.com/products/list?category_id=3">
  167.             <p class="pexample_g4">【灯油ヒーター】一覧へ移動</p></a>
  168.             </div>   
  169.         </div>
  170.         <div class="box_g">
  171.             <p class="pexample_g1">遠赤外線ヒーター【100V】</p>
  172.             <div class="box_g5">
  173.             <a href="https://www.nakatomishop.com/products/list?category_id=3">
  174.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-POP_150_300.png"></a>    
  175.             <p class="pexample_g2">FIHシリーズ</p>    
  176.             </div>
  177.             <div class="box_g1">
  178.             <a href="https://www.nakatomishop.com/products/detail/1400">
  179.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RS_150_150.png"></a>    
  180.             <p class="pexample_g2">FIH-10RS</p>    
  181.             </div>       
  182.             <div class="box_g1">
  183.             <a href="https://www.nakatomishop.com/products/detail/1401">
  184.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RC_150_150.png"></a>    
  185.             <p class="pexample_g2">FIH-10RC</p>    
  186.             </div>   
  187.             <div class="box_g2">  
  188.             <a href="https://www.nakatomishop.com/products/list?category_id=35">
  189.             <p class="pexample_g4">【遠赤外線ヒーター】一覧へ移動</p></a>
  190.             </div>      
  191.         </div>   
  192.         <div class="box_g">
  193.             <p class="pexample_g1">遠赤外線ヒーター【200V】</p>
  194.             <div class="box_g1">
  195.             <a href="https://www.nakatomishop.com/products/detail/245">
  196.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-20TP_150_150.png"></a>    
  197.             <p class="pexample_g2">IFH-20TP<font color="#0000cd"><b>【三相200V】</b></font></p>    
  198.             </div>       
  199.             <div class="box_g1">
  200.             <a href="https://www.nakatomishop.com/products/detail/246">
  201.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-30TP_150_150.png"></a>    
  202.             <p class="pexample_g2">IFH-30TP<font color="#0000cd"><b>【三相200V】</b></font></p>    
  203.             </div>   
  204.             <div class="box_g1">
  205.             <a href="https://www.nakatomishop.com/products/detail/1402">
  206.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RS_150_150.png"></a>    
  207.             <p class="pexample_g2">FIH-15RS<font color="#4b0082"><b>【単相200V】</b></font></p>    
  208.             </div>
  209.             <div class="box_g1">
  210.             <a href="https://www.nakatomishop.com/products/detail/1403">
  211.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RC_150_150.png"></a>    
  212.             <p class="pexample_g2">FIH-15RC<font color="#4b0082"><b>【単相200V】</b></font></p>    
  213.             </div>       
  214.             <div class="box_g2">  
  215.             <a href="https://www.nakatomishop.com/products/list?category_id=35">
  216.             <p class="pexample_g4">【遠赤外線ヒーター】一覧へ移動</p></a>
  217.             </div>      
  218.         </div>           
  219.         <div class="box_g">
  220.             <p class="pexample_g1">電気ファンヒーター【200V】</p>
  221.             <div class="box_g1">
  222.             <a href="https://www.nakatomishop.com/products/detail/247">
  223.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/TEH-50_150_150.png"></a>
  224.             <p class="pexample_g2">TEH-50<font color="#0000cd"><b>【三相200V】</b></font></p>    
  225.             </div>
  226.             <div class="box_g1">
  227.             <a href="https://www.nakatomishop.com/products/detail/248">
  228.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/TEH-100_150_150.png"></a>
  229.             <p class="pexample_g2">TEH-100<font color="#0000cd"><b>【三相200V】</b></font></p>    
  230.             </div>       
  231.             <div class="box_g1">
  232.             <a href="https://www.nakatomishop.com/products/detail/250">
  233.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/ISH-10KT_150_150.png"></a>    
  234.             <p class="pexample_g2">ISH-10KT<font color="#0000cd"><b>【三相200V】</b></font></p>    
  235.             </div>       
  236.             <div class="box_g1">
  237.             <a href="https://www.nakatomishop.com/products/list?category_id=9">
  238.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_etc_300_300.png"></a>    
  239.             <p class="pexample_g2">【その他】一覧へ移動</p>    
  240.             </div>   
  241.             <div class="box_g2">  
  242.             <a href="https://www.nakatomishop.com/products/list?category_id=75">
  243.             <p class="pexample_g4">【電気ファンヒーター】一覧へ移動</p></a>
  244.             </div>      
  245.         </div>           
  246.     </div>   
  247. </div>
  249. {% endblock %}