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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_common {
  4.   /*background-image:  url("https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/wi2025_top_h250.png");*/
  5.   background-color: ;
  6.   width: 100%;
  7.   height: auto;
  8.   margin-top: 30px;
  9.   margin-left: auto;
  10.   margin-right: auto;
  11.   background-size: cover;
  12.   overflow: hidden;
  13. }
  14. .box_common {
  15.   background-color: #fff;
  16.   width: 150px;
  17.   height: 180px;
  18.   text-align: center;
  19.   border: ;
  20.   margin-bottom: px;
  21. }
  22. .box_common1 {
  23.   background-color: ;
  24.   width: 150px;
  25.   height: 150px;
  26.   cursor: pointer;
  27. }
  28. .box_common2 {
  29.   background-color: ;
  30.   width: 310px;
  31.   height: 180px;
  32.   cursor: pointer;
  33. }
  34. .box_common3 {
  35.   background-color: ;
  36.   width: 310px;
  37.   height: 360px;
  38.   cursor: pointer;
  39. }
  40. .box_common4 {
  41.   background-color: ; 
  42.   display: flex;
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;
  45.   width: 320px;
  46.   height: auto;
  47.   padding-top: 10px;
  48.   padding-bottom: px;
  49.   text-align: center;
  50.   margin-left: 5px;
  51.   margin-right: 5px;
  52.   border: solid 1px;
  53.   margin-bottom: 10px
  54. }
  55. .box_common5 {
  56.   background-color: ;
  57.   display: flex;
  58.   justify-content: space-around;
  59.   flex-wrap: wrap;
  60.   margin-left: auto;
  61.   margin-right: auto;
  62. }
  63. .box_common6 {
  64.   display: flex;
  65.   flex-wrap: wrap;
  66.   justify-content: space-around;
  67.   max-width: 1330px;
  68.   margin-left: auto;
  69.   margin-right: auto;
  70.   text-align: center;
  71. }
  72. .pexample_common {
  73.   line-height: 20px;
  74.   margin-top: 0.1px;
  75.   font-size: 14px; 
  76.   color: #000000;
  77.   text-align: center;
  78.   font-weight: 500;
  79.   background-color: ;
  80. }
  81. .pexample_common1 {
  82.   line-height: 20px;
  83.   margin-top: 180px;
  84.   font-size: 14px; 
  85.   color: #000000;
  86.   text-align: center;
  87.   font-weight: 500;
  88.   background-color: ;
  89. }
  90. .pexample_common2 {
  91.   width: 320px;
  92.   font-size: 16px;
  93.   margin-top: -0.1%;
  94.   margin-bottom: 2%; 
  95.   color: #000000;
  96.   text-align: center;
  97.   font-weight: 500;
  98.   background-color: ;
  99. }
  100. .pexample_common3 {
  101.   width: 320px;
  102.   font-size: 12px;
  103.   margin-top: -0.1%;
  104.   margin-bottom: 2%; 
  105.   color: blue;
  106.   text-align: center;
  107.   font-weight: 400;
  108.   cursor: pointer;
  109.   background-color:;
  110. }
  111. .fit-picture_common {
  112.   width: 150px;
  113.   height: 150px;
  114. }
  115. .fit-picture_common2 {
  116.   width: 310px;
  117.   height: 150px;
  118. }
  119. .fit-picture_common3 {
  120.   width: 310px;
  121.   height: 330px;
  122. }
  123. </style>
  124. <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  125. <div class="main_box_common">
  126.   <div class="box_common6">
  127.     <div class="box_common5">
  128.       <div class="box_common4">
  129.         <p class="pexample_common2">大型送風機</p>
  130.         <div class="box_common">
  131.           <div class="box_common1">
  132.             <a href="https://www.nakatomishop.com/products/detail/1361">
  133.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>    
  134.           </div>
  135.           <p class="pexample_common">MAC-10</p>                  
  136.         </div>
  137.         <div class="box_common">
  138.           <div class="box_common1">
  139.             <a href="https://www.nakatomishop.com/products/detail/1361">
  140.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>    
  141.           </div>
  142.           <p class="pexample_common">MAC-10</p>                  
  143.         </div>
  144.         <div class="box_common">
  145.           <div class="box_common1">
  146.             <a href="https://www.nakatomishop.com/products/detail/1361">
  147.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>    
  148.           </div>
  149.           <p class="pexample_common">MAC-10</p>                  
  150.         </div>
  151.         <div class="box_common">
  152.           <div class="box_common1">
  153.             <a href="https://www.nakatomishop.com/products/detail/1361">
  154.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  155.           </div>
  156.           <p class="pexample_common">MAC-10</p>                  
  157.         </div>
  158.         <a href="https://www.nakatomishop.com/products/detail/1361">
  159.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  160.       </div>
  161.       <div class="box_common4">
  162.         <p class="pexample_common2">大型送風機</p>        
  163.         <div class="box_common">
  164.           <div class="box_common1">
  165.             <a href="https://www.nakatomishop.com/products/detail/1361">
  166.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  167.           </div>
  168.           <p class="pexample_common">MAC-10</p>                  
  169.         </div>
  170.         <div class="box_common">
  171.           <div class="box_common1">
  172.             <a href="https://www.nakatomishop.com/products/detail/1361">
  173.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  174.           </div>
  175.           <p class="pexample_common">MAC-10</p>                  
  176.         </div>
  177.         <div class="box_common">
  178.           <div class="box_common1">
  179.             <a href="https://www.nakatomishop.com/products/detail/1361">
  180.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  181.           </div>
  182.           <p class="pexample_common">MAC-10</p>                  
  183.         </div>
  184.         <div class="box_common">
  185.           <div class="box_common1">
  186.             <a href="https://www.nakatomishop.com/products/detail/1361">
  187.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  188.           </div>
  189.           <p class="pexample_common">MAC-10</p>                  
  190.         </div>
  191.         <a href="https://www.nakatomishop.com/products/detail/1361">
  192.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  193.       </div> 
  194.     </div>
  195.     <div class="box_common6">
  196.     <div class="box_common5">
  197.       <div class="box_common4">
  198.         <p class="pexample_common2">大型送風機</p>        
  199.         <div class="box_common">
  200.           <div class="box_common1">
  201.             <a href="https://www.nakatomishop.com/products/detail/1361">
  202.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  203.           </div>
  204.           <p class="pexample_common">MAC-10</p>                  
  205.         </div>
  206.         <div class="box_common">
  207.           <div class="box_common1">
  208.             <a href="https://www.nakatomishop.com/products/detail/1361">
  209.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  210.           </div>
  211.           <p class="pexample_common">MAC-10</p>                  
  212.         </div>
  213.         <div class="box_common">
  214.           <div class="box_common1">
  215.             <a href="https://www.nakatomishop.com/products/detail/1361">
  216.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  217.           </div>
  218.           <p class="pexample_common">MAC-10</p>                  
  219.         </div>
  220.         <div class="box_common">
  221.           <div class="box_common1">
  222.             <a href="https://www.nakatomishop.com/products/detail/1361">
  223.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  224.           </div>
  225.           <p class="pexample_common">MAC-10</p>                  
  226.         </div>
  227.         <a href="https://www.nakatomishop.com/products/detail/1361">
  228.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  229.       </div> 
  230.     </div>
  231.     <div class="box_common4">
  232.       <p class="pexample_common2">大型送風機</p>        
  233.       <div class="box_common">
  234.         <div class="box_common1">
  235.           <a href="https://www.nakatomishop.com/products/detail/1361">
  236.           <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  237.         </div>
  238.         <p class="pexample_common">MAC-10</p>                  
  239.       </div>
  240.       <div class="box_common">
  241.         <div class="box_common1">
  242.           <a href="https://www.nakatomishop.com/products/detail/1361">
  243.           <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  244.         </div>
  245.         <p class="pexample_common">MAC-10</p>                  
  246.       </div>
  247.       <div class="box_common">
  248.         <div class="box_common1">
  249.           <a href="https://www.nakatomishop.com/products/detail/1361">
  250.           <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  251.         </div>
  252.         <p class="pexample_common">MAC-10</p>                  
  253.       </div>
  254.       <div class="box_common">
  255.         <div class="box_common1">
  256.           <a href="https://www.nakatomishop.com/products/detail/1361">
  257.           <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  258.         </div>
  259.           <p class="pexample_common">MAC-10</p>                  
  260.       </div>
  261.         <a href="https://www.nakatomishop.com/products/detail/1361">
  262.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  263.       </div> 
  264.     </div>
  265.   </div>
  267. <div class="main_box_common">
  268.   <div class="box_common6">
  269.     <div class="box_common5">
  270.       <div class="box_common4">
  271.         <p class="pexample_common2">大型送風機</p>
  272.         <div class="box_common2">
  273.           <div class="box_common1">
  274.             <a href="https://www.nakatomishop.com/products/detail/1361">
  275.             <img class="fit-picture_common2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_310_150.png"></a>    
  276.           </div>
  277.           <p class="pexample_common">MAC-10</p>                  
  278.         </div>
  279.         <div class="box_common">
  280.           <div class="box_common1">
  281.             <a href="https://www.nakatomishop.com/products/detail/1361">
  282.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  283.           </div>
  284.           <p class="pexample_common">MAC-10</p>                  
  285.         </div>
  286.         <div class="box_common">
  287.           <div class="box_common1">
  288.             <a href="https://www.nakatomishop.com/products/detail/1361">
  289.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  290.           </div>
  291.           <p class="pexample_common">MAC-10</p>                  
  292.         </div>
  293.         <a href="https://www.nakatomishop.com/products/detail/1361">
  294.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  295.       </div>
  296.       <div class="box_common4">
  297.         <p class="pexample_common2">大型送風機</p>        
  298.         <div class="box_common2">
  299.           <div class="box_common1">
  300.             <a href="https://www.nakatomishop.com/products/detail/1361">
  301.             <img class="fit-picture_common2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  302.           </div>
  303.           <p class="pexample_common">MAC-10</p>                  
  304.         </div>
  305.         <div class="box_common">
  306.           <div class="box_common1">
  307.             <a href="https://www.nakatomishop.com/products/detail/1361">
  308.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_150_150.png"></a>                
  309.           </div>
  310.           <p class="pexample_common">MAC-10</p>                  
  311.         </div>
  312.         <div class="box_common">
  313.           <div class="box_common1">
  314.             <a href="https://www.nakatomishop.com/products/detail/1361">
  315.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_150_150.png"></a>                
  316.           </div>
  317.           <p class="pexample_common">MAC-10</p>                  
  318.         </div>
  319.         <a href="https://www.nakatomishop.com/products/detail/1361">
  320.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  321.       </div> 
  322.     </div>
  323.     <div class="box_common5">
  324.       <div class="box_common4">
  325.         <p class="pexample_common2">大型送風機</p>        
  326.         <div class="box_common">
  327.           <div class="box_common1">
  328.             <a href="https://www.nakatomishop.com/products/detail/1361">
  329.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  330.           </div>
  331.           <p class="pexample_common">MAC-10</p>                  
  332.         </div>
  333.         <div class="box_common">
  334.           <div class="box_common1">
  335.             <a href="https://www.nakatomishop.com/products/detail/1361">
  336.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  337.           </div>
  338.           <p class="pexample_common">MAC-10</p>                  
  339.         </div>
  340.         <div class="box_common">
  341.           <div class="box_common1">
  342.             <a href="https://www.nakatomishop.com/products/detail/1361">
  343.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  344.           </div>
  345.           <p class="pexample_common">MAC-10</p>                  
  346.         </div>
  347.         <div class="box_common">
  348.           <div class="box_common1">
  349.             <a href="https://www.nakatomishop.com/products/detail/1361">
  350.             <img class="fit-picture_common" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BF-60JZ_300_300.png"></a>                
  351.           </div>
  352.           <p class="pexample_common">MAC-10</p>                  
  353.         </div>
  354.         <a href="https://www.nakatomishop.com/products/detail/1361">
  355.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  356.       </div>
  357.       <div class="box_common4">
  358.         <p class="pexample_common2">大型送風機</p>        
  359.         <div class="box_common3">
  360.           <div class="box_common1">
  361.             <a href="https://www.nakatomishop.com/products/detail/1361">
  362.             <img class="fit-picture_common3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_310_330.png"></a>                
  363.           </div>
  364.           <p class="pexample_common1">MAC-10</p>                  
  365.         </div>
  366.         <a href="https://www.nakatomishop.com/products/detail/1361">
  367.         <p class="pexample_common3">大型送風機一覧へ</p></a>
  368.       </div> 
  369.     </div>
  370.   </div>
  371. </div>
  372. {% endblock %}