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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_ltd_a {
  4.   display: flex;    
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;    
  7.   width: 100%;
  8.   height: auto;
  9.   background: linear-gradient(180deg, #87cafa 5%, #add8e6 95%);
  10.   position: relative;
  11.   
  12. }
  13. .box_ltd_a{
  14.   display: flex;
  15.   flex-wrap: wrap;
  16.   justify-content: space-around;
  17.   width: auto;
  18.   margin-left: auto;
  19.   margin-right: auto;
  20. }
  21. .box_ltd_a2{
  22.   display: flex;
  23.   flex-wrap: wrap;
  24.   justify-content: space-around;
  25.   width: auto;
  26.   height: 120px;
  27.   border-radius: 6px;
  28.   margin-top: 4px;
  29.   margin-bottom: 4px;
  30.   margin-left: 20px;
  31.   margin-right: 20px;
  32.   color: #ffffff;
  33. }
  34. .box_ltd_a3{
  35.   background-color: #fff;
  36.   width: 120px;
  37.   height: 120px;
  38.   border-radius: 0px 6px 6px 0px ;
  39.   color: #ffffff;
  40. }
  41. .box_ltd_b4 {
  42.   display: flex;
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;
  45.   text-align: center;
  46.   margin-left: auto;
  47.   margin-right: auto;
  48.   width: 100%;
  49.   height: 30px;
  50.   width: auto;
  51. }
  52. .fit-picture_ltd_a {  
  53.   width: 85%;
  54.   border-radius: 6px ;
  55.   margin-left: 8px;
  56.   margin-top: 2px;
  57.   margin-right: auto;
  58. }
  59. .pexample_ltd_a {
  60.   font-size: 12px;
  61.   text-align: center;
  62.   margin-top: -2px;
  63.   margin-left: px;
  64. }
  65. .pexample_ltd_b2 {
  66.   font-size: 18px;
  67.   Color : red;
  68.   margin-top: 6px;
  69. }
  70. </style>
  71. <div class="box_ltd_b4">
  72.     <p class="pexample_ltd_b2"><b>NAKATOMI　YouTube　公式チャンネル</b></p>
  73. </div>
  74. <div class="main_box_ltd_a">
  75.     <div class="box_ltd_a">
  76.         <div class="box_ltd_a2">
  77.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  78.             <iframe width="200" height="120" src="https://www.youtube.com/embed/lffCGePRrhM" 
  79.                 title="ナカトミ NAKATOMI スポットクーラー【プレミアム】SAC-30/SAC-30S(自動首振り付き)" 
  80.                 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  81.                 referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  82.             </iframe>
  83.             <div class="box_ltd_a3">            
  84.                 <a href="https://www.nakatomishop.com/products/detail/1351">
  85.                 <img class="fit-picture_ltd_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30_300_300.png"><p class="pexample_ltd_a">SAC-30 購入ページ</p></a>    
  86.             </div>    
  87.         </div>    
  88.         <div class="box_ltd_a2">
  89.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  90.             <iframe width="200" height="120" src="https://www.youtube.com/embed/xoPzFABbfc4" 
  91.                 title="ナカトミ NAKATOMI ツインダクトスポットクーラー自動首振り【プレミアム】SPC-48S" 
  92.                 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  93.                 referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  94.             </iframe>
  95.             <div class="box_ltd_a3">            
  96.                 <a href="https://www.nakatomishop.com/products/detail/1355">
  97.                 <img class="fit-picture_ltd_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-48S_300_300.png"><p class="pexample_ltd_a">SPC-48S 購入ページ</p></a>    
  98.             </div>    
  99.         </div>    
  100.         <div class="box_ltd_a2">
  101.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  102.             <iframe width="200" height="120" src="https://www.youtube.com/embed/GuIBMpK0qNA" 
  103.                 title="NAKATOMI　小型DCクーラー　SDC-033(エンジン式車両専用)/SDC-034(電気式車両専用)　ナカトミ" 
  104.                 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  105.                 referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  106.             </iframe>
  107.             <div class="box_ltd_a3">            
  108.                 <a href="https://www.nakatomishop.com/products/detail/695">
  109.                 <img class="fit-picture_ltd_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SDC-034_300_300.png"><p class="pexample_ltd_a">SDC-034 購入ページ</p></a>    
  110.             </div>    
  111.         </div>                  
  112.     </div>    
  113. </div>        
  114. {% endblock %}