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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_ltd_b {
  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.   margin-bottom: 50px;
  12. }
  13. .box_ltd_b {
  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_b2 {
  22.   display: flex;
  23.   flex-wrap: wrap;
  24.   justify-content: space-around;
  25.   width: auto;
  26.   height: 220px;
  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_b3 {
  35.   background-color: #fff;
  36.   width: 280px;
  37.   height: 280px;
  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: 50px;
  50.   width: auto;
  51. }
  52. .fit-picture_ltd_b {  
  53.   width: 85%;
  54.   border-radius: 6px ;
  55.   margin-top: 2px;
  56.   margin-right: auto;
  57. }
  58. .fit-picture_ltd_b2 {  
  59.   width: 70%;
  60.   border-radius: 50% ;
  61.   margin-top: 2px;
  62.   margin-right: auto;
  63.   margin-top: 18%;
  64.   margin-bottom: -40px;
  65. }
  66. .pexample_ltd_b {
  67.   font-size: 12px;
  68.   text-align: center;
  69.   margin-top: -2px;
  70.   margin-bottom: -2px;
  71. }
  72. .pexample_ltd_b2 {
  73.   font-size: 18px;
  74.   Color : red;
  75.   margin-top: 20px;
  76. }
  77. .pexample_ltd_b3 {
  78.   width: 200px;
  79.   height: 200px;
  80.   font-size: 12px;
  81.   text-align: center;
  82. }
  83. </style>
  84. <div class="box_ltd_b4">
  85.     <p class="pexample_ltd_b2"><b>NAKATOMI　ショート動画</b></p>
  86. </div>
  87. <div class="main_box_ltd_b">
  88.     <div class="box_ltd_b">
  89.         <div class="box_ltd_b2">
  90.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  91.             <iframe width="140" height="200" src="https://www.youtube.com/embed/qqw84fbB92s" 
  92.               title="ナカトミ NAKATOMI 45㎝ツインジェットファン SJF-450TW" 
  93.               frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  94.               referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  95.             </iframe>
  96.             <p class="pexample_ltd_b">SJF-450TW</p></a>
  97.         </div>    
  98.         <div class="box_ltd_b2">
  99.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  100.               <iframe width="140" height="200" src="https://www.youtube.com/embed/LGJVFr34woI" 
  101.               title="ナカトミ NAKATOMI 75㎝首振りビッグファン BF-75ZS" 
  102.               frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  103.               referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  104.             </iframe>
  105.             <p class="pexample_ltd_b">BF-75ZS</p></a>
  106.         </div>    
  107.         <div class="box_ltd_b2">
  108.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  109.             <iframe width="140" height="200" src="https://www.youtube.com/embed/334yQJIWHso" 
  110.               title="AIRTEC DC式エアーコンプレッサー　DCP-12BC/DCP-24BC" 
  111.               frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  112.               referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  113.             </iframe>
  114.             <p class="pexample_ltd_b">DCP-12/24BC</p></a>
  115.         </div>
  116.         <div class="box_ltd_b2">
  117.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  118.             <iframe width="140" height="200" src="https://www.youtube.com/embed/8C14wpfO-R8" 
  119.               title="AIRTEC ベルト式エアーコンプレッサー〈エンジン式〉ECP-39" 
  120.               frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  121.               referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  122.             </iframe>
  123.             <p class="pexample_ltd_b">ECP-39</p></a>
  124.         </div>             
  125.         <div class="box_ltd_b2">
  126.             <a href="https://www.youtube.com/channel/UChSrmFAoNpVRtPGgvB9DJgQ/videos">
  127.             <iframe width="140" height="200" src="https://www.youtube.com/embed/87cxc2NmmzY" 
  128.               title="AIRTEC エアーコンプレッサー CP-251" 
  129.               frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  130.               referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  131.             </iframe>
  132.             <p class="pexample_ltd_b">CP-251</p></a>
  133.         </div>     
  134.         <p class="pexample_ltd_b3">      
  135.             <a href="https://www.youtube.com/@nakatomi5898">
  136.             <img  class="fit-picture_ltd_b2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/Nakatomi LOGO.png"><b><br>公式チャンネル</b></a>
  137.         </p>
  138.     </div>    
  139. </div>       
  140. {% endblock %}