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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_l {
  4.   display: flex;    
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;    
  7.   width: 100%;
  8.   height: auto;
  9.   position: relative;
  10.   margin-top: 25px;
  11.   margin-bottom: 0px;
  12. }
  13. .box_l {
  14.   display: flex;
  15.   flex-wrap: wrap;
  16.   background-color: #fff;
  17.   width:calc(100% / 4 - 20px);  
  18.   width: 315px;
  19.   height: auto; 
  20.   {#border: solid 1px #dcdcdc;#}
  21.   margin-left: 10px;
  22.   margin-right: 10px;
  23.   margin-top: 10px;
  24.   margin-bottom: 10px;
  25.   {#position: relative;#}/*sliderに重ねる場合使用*/
  26.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  27. }
  28. .box_la {
  29.     display: flex;
  30.     flex-wrap: wrap;
  31.     justify-content: space-around;    
  32.     background-color: bule;
  33.     width: auto;  
  34.     height: auto; 
  35.     text-align: center;
  36.     padding-left: auto;
  37.     padding-right: auto;
  38.     {#position: relative;#}/*sliderに重ねる場合使用*/
  39.     {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  40.   }
  41. .box_l1 { 
  42.   display: flex;    
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;      
  45.   width: 150px;
  46.   height: 150px;
  47.   background-color: ;    
  48.   margin-top: 20px;
  49.   margin-bottom: 10px;
  50.   margin-left: 6px;
  51. }
  52. .box_l2 {
  53.   width: 100%;
  54.   height: auto;
  55.   text-align: left;
  56. }
  57. .box_l3 { 
  58.   background-color: ;    
  59.   display: flex;
  60.   flex-wrap: wrap;
  61.   width: 300px;    
  62.   height: 300px;    
  63.   margin-top: 20px;
  64.   margin-right: auto; 
  65.   margin-left: auto;
  66. }
  67. }
  68. .box_l4 { 
  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_l5 { 
  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_l1 {
  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_l2 {
  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_l3 {
  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_l4 {
  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: 160px;
  134. }
  135. .fit-picture_o {
  136.   width: 150px;
  137.   opacity: 0.5;
  138. }
  139. .fit-picture_n {
  140.   width: 40px;
  141.   margin-top: -2px;
  142. }
  143. </style>
  144. <div class="main_box_l">
  145.     <div class="box_la">
  146.         <div class="box_l">
  147.             <p class="pexample_l1">設置環境に応じて選べる２タイプ</p>
  148.             <div class="box_l1">
  149.             <a href="https://www.nakatomishop.com/products/detail/1405">
  150.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF20_150_150.png"></a>    
  151.             <p class="pexample_l2">N-VF20</p> 
  152.             </div>
  153.             <div class="box_l1">
  154.             <a href="https://www.nakatomishop.com/products/detail/1406">
  155.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF25_150_150.png"></a>    
  156.             <p class="pexample_l2">N-VF25</p> 
  157.             </div>
  158.             <div class="box_l1">
  159.             <a href="https://www.nakatomishop.com/products/detail/1407">
  160.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF20F_150_150.png"></a>    
  161.             <p class="pexample_l2">N-VF20F</p>  
  162.             </div>
  163.             <div class="box_l1">
  164.             <a href="https://www.nakatomishop.com/products/detail/1408">
  165.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF25F_150_150.png"></a>    
  166.             <p class="pexample_l2">N-VF25F</p>  
  167.             </div>    
  168.             <div class="box_l2">  
  169.             <a href="https://www.nakatomishop.com/products/list?category_id=101">
  170.             <p class="pexample_l4">【一般（台所）用換気扇】一覧へ移動</p></a>
  171.             </div>   
  172.         </div>
  173.         <div class="box_l">
  174.             <p class="pexample_l1">サーキュレーターで直進性の風を</p>
  175.             <div class="box_l5">
  176.             <a href="https://www.nakatomishop.com/products/list?category_id=100">
  177.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/CIRCULATING_POP_150_300.png"></a>    
  178.             <p class="pexample_l2">サーキュレーター</p> 
  179.             </div>
  180.             <div class="box_l1">
  181.             <a href="https://www.nakatomishop.com/products/detail/93">
  182.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/CV-3510_300_300.png"></a>    
  183.             <p class="pexample_l2">CV-3510</p>  
  184.             </div>
  185.             <div class="box_l1">
  186.             <a href="https://www.nakatomishop.com/products/detail/94">
  187.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/CV-3530_300_300.png"></a>    
  188.             <p class="pexample_l2">CV-3530</p>  
  189.             </div>    
  190.             <div class="box_l2">  
  191.             <a href="https://www.nakatomishop.com/products/list?category_id=100">
  192.             <p class="pexample_l4">【サーキュレーター】一覧へ移動</p></a>
  193.             </div>   
  194.         </div>
  195.         <div class="box_l">
  196.             <p class="pexample_l1">大型・ＤＣ首振りサーキュレーター</p>
  197.             <div class="box_l3">
  198.             <a href="https://www.nakatomishop.com/products/detail/1373">
  199.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DCS-600C_300_300.png"></a>    
  200.             <p class="pexample_l2">DCS-600C</p> 
  201.             </div>
  202.             <div class="box_l2">  
  203.             <a href="https://www.nakatomishop.com/products/list?category_id=100">
  204.             <p class="pexample_l4">【サーキュレーター】一覧へ移動</p></a>
  205.             </div>   
  206.         </div>   
  207.         <div class="box_l">
  208.             <p class="pexample_l1">まっすぐ強力な風を送る</p>
  209.             <div class="box_l1">
  210.             <a href="https://www.nakatomishop.com/products/detail/1374">
  211.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SJF-450TW_300_300.png"></a>    
  212.             <p class="pexample_l2">SJF-450TW</p>  
  213.             </div>
  214.             <div class="box_l1">
  215.             <a href="https://www.nakatomishop.com/products/detail/1375">
  216.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/NJF-560S_300_300.png"></a>    
  217.             <p class="pexample_l2">NJF-560S</p>  
  218.             </div>           
  219.             <div class="box_l5">
  220.             <a href="https://www.nakatomishop.com/products/list?category_id=29">
  221.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/JETFAN_POP_150_300.png"></a>    
  222.             <p class="pexample_l2">ジェットファン</p> 
  223.             </div>
  224.             <div class="box_l2">  
  225.             <a href="https://www.nakatomishop.com/products/list?category_id=29">
  226.             <p class="pexample_l4">【循環送風機】一覧へ移動</p></a>
  227.             </div>   
  228.         </div>    
  229.     </div>   
  230. </div>
  231. {% endblock %}