Add game descriptions

index.html

@@ -25,6 +25,7 @@
     <div class="flex-1"></div>
 <!--    <p><a href="https://www.youtube.com/channel/UCzCqJL3-RdhTw9WHYDbPO4Q">YouTube</a></p>-->
   </div>
+  <h1 class="midashi-text">東大生がお送りするプログラミング・ライブ!!</h1>
   <h1 class="title">スケジュール</h1>
   <div class="schedule">
     <div class="card">
@@ -46,6 +47,31 @@ <h1><span class="deemphasize">ライブ</span>競技プログラミング</h1>
       <a href="https://www.youtube.com/live/v0CtaToTVtk" class="button">視聴する</a>
     </div>
   </div>
+  <h1 class="title">競技紹介</h1>
+  <div class="intro-box">
+    <div class="intro">
+      <h1>CTF</h1>
+      <p>CTFは、プログラムの脆弱性をついて攻撃を成功させる技術、いわゆるハッキング技術を競う競技です。<br/>
+        今回のライブCTFでは競技者の画面もリアルタイムで配信されるため、競技者がプログラムを解析して、攻撃コードを構築する様子を見ることができます。解析ツールを駆使し、画面に現れる大量の情報を適切に処理しながら攻撃していく様子を、臨場感とともにお楽しみください!</p>
+    </div>
+    <div class="intro">
+      <h1>コードゴルフ</h1>
+      <p>プログラムの実行時間も読みやすさも気にせず、ただひたすら文字数の少なさを追求します!<br/>
+        改行やスペースを切り詰めたり、変数名をすべて一文字に変えたり、ドキュメントを読み込み謎の言語機能を活用したり、アルゴリズムを限界まで最適化したり……<br/>
+        様々なテクニックを駆使して究極に短いプログラムを作り上げる様子にぜひご注目ください!</p>
+    </div>
+    <div class="intro">
+      <h1>競技プログラミング</h1>
+      <p>今回のライブ競技プログラミングでは4人の作問陣による計10個の問題に2人の競技者が挑みます。<br/>
+        簡単な問題はスピードが命となります。素早く問題文を理解し、一瞬でコードを書き上げる様子は必見です。<br/>
+        難しい問題は限られた時間内で試行錯誤しひらめく力が求められます。競技者たちが奮闘する様子を実況解説とともにお楽しみください!</p>
+    </div>
+  </div>
+  <h1 class="title">アンケート</h1>
+  <div class="questionnare">
+    <p><a href="https://docs.google.com/forms/d/e/1FAIpQLSe6H_rQkR-rieZmGrkvVRkY8_re0F8F0UbnubP-19rYOPUTaQ/viewform" target="_blank" rel="noopener noreferrer">アンケート</a>
+      回答へのご協力お願いします。</p>
+  </div>
 </div>
 </body>
 </html>

style.css

@@ -110,15 +110,22 @@ a:active, a:active:visited, a:active:visited:hover {
     flex: 1 1 0;
 }
 
+.midashi-text {
+    font-size: 40px;
+    font-weight: 500;
+    margin: 100px 0;
+    text-align: center;
+}
+
 .title {
     font-size: 32px;
-    margin-bottom: 24px;
+    margin: 24px 0;
 }
 
 .schedule {
     display: flex;
     gap: 16px;
-    margin: 0 -16px;
+    margin: 0 -16px 50px -16px;
 }
 
 @media screen and (max-width: 1056px) {
@@ -174,3 +181,30 @@ a:active, a:active:visited, a:active:visited:hover {
     color: inherit;
     background-color: #750e13;
 }
+
+.intro-box {
+    margin: 0 -16px 50px -16px;
+}
+
+.intro {
+    background-color: #262626;
+    padding: 16px;
+    margin-bottom: 16px;
+}
+
+.intro h1 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+.intro p {
+    font-size: 18px;
+    line-height: normal;
+}
+
+.questionnare {
+    margin: 0 -16px 50px -16px;
+    background-color: #262626;
+    padding: 16px;
+}