Merge pull request #137 from coderdojo-japan/add-count-down-dojocon-section

カウントダウンDojoConのセクションを追加

Author: Fukusan64

_includes/top/sections/countdown-dojocon.html

@@ -0,0 +1,42 @@
+<div class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-12 mb-12">
+  <div class="text-center">
+    <h2 class="text-3xl lg:text-4xl mb-3">
+      ライブ配信
+      <span class="block mt-2 text-2xl">COUNTDOWN DojoCon Japan 2025</span>
+    </h2>
+    <p class="leading-6 mb-4 max-w-2xl mx-auto">DojoCon Japan 2025 の内容を紹介するライブ配信です。</p>
+  </div>
+
+  <div class="mt-6">
+    <ul
+      class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-2 gap-y-6 md:gap-y-4 justify-items-center mx-auto md:max-w-[860px] xl:max-w-[1280px]">
+      <li class="w-full md:max-w-[420px] md:mx-auto px-1">
+        <div class="aspect-video w-full">
+          <iframe class="w-full h-full" src="https://www.youtube-nocookie.com/embed/KfiRC5swop8?si=432madC2qknsIGa7"
+            title="DojoCon video 1" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </div>
+        <p class="mt-2 text-xs sm:text-base text-center">#1 - 今年のテーマ・参加方法について</p>
+      </li>
+      <li class="w-full md:max-w-[420px] md:mx-auto px-1">
+        <div class="aspect-video w-full">
+          <iframe class="w-full h-full" src="https://www.youtube-nocookie.com/embed/Ov-4sxywPrM?si=RUHGbK_uhB5ZA-A9"
+            title="DojoCon video 2" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </div>
+        <p class="mt-2 text-xs sm:text-base text-center">#2 - 企画・セッション情報の紹介</p>
+      </li>
+      <li class="w-full md:max-w-[420px] md:mx-auto px-1">
+        <div class="aspect-video w-full">
+          <iframe class="w-full h-full" src="https://www.youtube-nocookie.com/embed/KJkSd2Tm4BA?si=TZI4xAh1K4Yz6IrK"
+            title="DojoCon video 3" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </div>
+        <p class="mt-2 text-xs sm:text-base text-center">#3 - 開催直前！</p>
+      </li>
+    </ul>
+  </div>
+</div>

index.md

@@ -30,6 +30,7 @@ layout: top
 {% include top/sections/session.html %}
 
 {% include top/sections/event.html %}
+{% include top/sections/countdown-dojocon.html %}
 
 <div class="-mx-4">
   <img class="w-full" src="/img/top/background3.webp" alt="鉄道模型を動かしている様子"/>