118 lines
3.6 KiB
HTML
118 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>haruk.in 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>haruk.in 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> |