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