微調整＆マイクラページ追加

MinecraftServer.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Minecraft BE Server</title>
+    <script src="./jquery-3.3.1.min.js"></script>
+    <script>
+        $(function () {
+            $("#frame").load("frame.html");
+        });
+    </script>
+</head>
+
+<body>
+    <main>
+
+        <div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
+            <div class="br22"></div>
+            <h1>Minecraft BE Server</h1>
+            <h2>Minecraft BE(スマホ、switch等統合版)で遊べる基本24時間稼動しているサーバーです。</h2>
+            <div class="gallerybase"><img src="./picture/Screenshot_20180915-115730.png" class="gallery"></div>
+            <p>生活の基盤は整っているので新規さんも安心！</p>
+            <div class="gallerybase"><img src="./picture/Screenshot_20180915-115902.png" class="gallery"></div>
+            <p>露天掘りもやってます！</p>
+            <div class="br22"></div>
+        </div>
+        <div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
+            <div class="br22"></div>
+            <h1>ルール</h1>
+            <div class="rule">
+                <h2>共有物以外のものを勝手に使用しない</h2>
+                <p>共有物である人工物は大抵その旨が近くの看板に記されています。そこの決まりに従って共有物を使用してください。</p>
+                <h2>相手が嫌になることをしない</h2>
+                <p>基準は相手です。皆が不快に思うことはしないようにしましょう。</p>
+            </div>
+            <div class="br22"></div>
+        </div>
+        <div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
+            <div class="br22"></div>
+            <h1>サーバー情報</h1>
+            <h3>アドレス : haruk.in</h3>
+            <h3>ポート : 19132(ipv4) or 19133(ipv6)</h3>
+            <div class="br22"></div>
+        </div>
+        <div class="br20"></div>
+        <div class="br20"></div>
+        <div class="br20"></div>
+        <div class="br20"></div>
+    </main>
+    <div id="frame"></div>
+</body>
+
+<head>
+    <style>
+        html {
+            background: url("./picture/45b2b790e19766540371f798f8c136c3.jpg") center right / cover no-repeat fixed;
+        }
+
+        header a {
+            background: rgba(37, 36, 34, 0.466);
+            box-shadow: 0px 0px 5px 0px rgba(206, 206, 206, 0.856) inset;
+            color: rgb(255, 255, 255);
+        }
+
+        header a:hover {
+            box-shadow: 5px 5px 5px 0px rgba(206, 206, 206, 0.856) inset;
+            background: url("./picture/minecraft_icon.png") top / cover;
+        }
+
+        .gallery {
+            width: 100%;
+            margin: auto;
+        }
+
+        .gallery:hover {
+            box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.61);
+            transition: all 300ms 0s;
+        }
+
+        .gallerybase {
+            display: inline-block;
+            position: relative;
+            width: 70%;
+        }
+
+        .gallerybase::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            content: "";
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+            z-index: -1;
+            background: white;
+            transform: rotate(5deg);
+            width: 100%;
+            height: 100%;
+            transition: all 300ms 0s;
+        }
+
+        .gallerybase:hover::after {
+            transform: rotate(0deg);
+        }
+
+        .box>.rule {
+            text-align: left;
+        }
+
+        .rule>h2::before {
+            content: "○";
+        }
+
+        .rule>p::before {
+            content: "*";
+        }
+    </style>
+</head>
+
+</html>

index.html

@@ -40,7 +40,7 @@
                         <img src="./picture/logoVertical_WS.png" width=30%>
                         <p>Slackのフォークを目指したソフトウェアです。Gitlabアカウントを接続して利用します。</p>
                     </a>
-                    <a href="https://nextcloud.haruk.in" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
+                    <a href="https://nexcloud.haruk.in" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                         <h1>nextcloud</h1>
                         <img src="./picture/icon-nextcloud-white.svg" width=30%>
                         <p>DropboxやOneDriveのようなクラウドストレージです。メールや通話機能などもあります。</p>
@@ -49,7 +49,7 @@
             </div>
             <div class="box-line">
                 <div class="box-half">
-                    <a href="" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
+                    <a href="./MinecraftServer.html" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                         <h1>Minecraft BE server</h1>
                         <img src="./picture/73fc5ada842bf9aaaefaf82aac364a31.png.jpg" width=30%>
                         <p>公式サーバーソフトを利用しているきままなサバイバルサーバーです。</p>

style.css

@@ -88,7 +88,7 @@ header a{
     transition: all 300ms 0s;
 }
 .box-4:hover{
-    box-shadow: 5px 5px 5px 5px rgba(105, 105, 105, 0.493);
+    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.658);
 }
 .boxitem{
     margin: auto;