Merge pull request #9 from kcs1959/yuitof

Update introduction section styles

Author: yuitof

index.html

@@ -30,8 +30,9 @@ <h1>KCS について</h1>
 
 >>>>>>> 239acb37e1bc92cc5b2a8955e52d315ed998183a
 </body>
-<h1>KCSとは</h1>
-<p><b>KCSは慶應義塾大学で唯一のコンピュータサークルであり、日本で最も歴史の長いコンピュータサークルです。個人やグループで興味のある技術の習得や勉強会や、矢上祭や三田祭の展示物の制作が主な活動です。</b></p>
-<p><b>多くのメンバーがプログラミングを行っていますが、音楽や3Dモデルの製作も行っています。</b></p>
-
+<div id="introduction">
+    <h1>KCSとは</h1>
+    <p><b>KCSは慶應義塾大学で唯一のコンピュータサークルであり、日本で最も歴史の長いコンピュータサークルです。個人やグループで興味のある技術の習得や勉強会や、矢上祭や三田祭の展示物の制作が主な活動です。</b></p>
+    <p><b>多くのメンバーがプログラミングを行っていますが、音楽や3Dモデルの製作も行っています。</b></p>
+</div>
 </html>

style.css

@@ -1,7 +1,42 @@
 * {
     font-family: "ヒラギノ角ゴシック", "游ゴシック", "メイリオ", Arial, Helvetica, sans-serif;
+    color: aliceblue; 
+    background-color: black;
+}
+
+ul.menu {
+    display: flex;
+    justify-content: center;
 }
 
 ul.menu li {
     display: inline;
+    text-align: center;
+    margin: 0 2em ;
+}
+
+h1 {
+    text-align: center;
+}
+
+#introduction {
+    width: 80vw;
+    margin: 0 auto;
+    padding: 30px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px); /* Safari support */
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    color: white;
+    text-align: center;
+}
+
+#introduction h1{
+    background-color: transparent;
+}
+
+#introduction p{
+    background-color: transparent;
 }