harukin/harukin
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add some html and css

Browse Source
This commit is contained in:
harukin
2019-01-13 17:35:14 +09:00
parent 89a4db7858
commit 36ef9ca3cb
3 changed files with 182 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MinecraftServer.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>Minecraft BE Server</title>
<title>haruk.in Server</title>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(function () {
@@ -16,7 +16,7 @@
<div class="box" style="background-color: rgba(255, 255, 255, 0.726);">
<div class="br22"></div>
<h1>Minecraft BE Server</h1>
<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>
otopsite.css
+78
View File
@@ -0,0 +1,78 @@
main h1,
main h2 {
text-align: center;
}
.signup,
.login {
width: 30vw;
margin-top: 10px;
margin-bottom: 10px;
/*font-size: 40px;*/
}
.pubstream {
width: 60vw;
margin-top: 10px;
margin-bottom: 10px;
/*font-size: 40px;*/
}
.button {
display: inline-table;
margin: 5px;
background-color: rgb(85, 85, 85);
border-style: ridge;
border-color: rgb(93, 94, 95);
}
.position {
text-align: center;
}
body {
/*background: rgba(236, 106, 241, 0.747);*/
color: azure;
margin: 0px;
width: 100%;
height: 100%;
}
a:link {
color: azure;
text-decoration: none;
}
.br10 {
height: 10px;
clear: left;
}
/*box*/
.mainbox {
transform: skewY(-5deg);
width: 100%;
}
.mainbox div {
position: relative;
}
.mainbox .picturearea {
transform: skewY(5deg);
height: 50vw;
width: 100%;
}
.mainbox .textarea {
transform: skewY(5deg);
}
@media screen and (min-width: 700px) {
.mainbox {
transform: skewY(-5deg);
width: 100%;
overflow: hidden;
}
.mainbox div {
display: table-cell;
}
.mainbox .picturearea {
width: 50vw;
transform: skewY(5deg);
height: unset;
}
.mainbox .textarea {
transform: skewY(5deg);
width: 50vw;
}
}
otopsite.html
+102
View File
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<title>Harukin+!</title>
<script src="jquery-3.3.1.min.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="topsite.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<header>
</header>
<main>
<p class="br10"></p>
<div style="margin: auto; width:100%;text-align: center;position: absolute;z-index: 100;">
<img src="./picture/icon.png" width="200vw" alt="">
</div>
<p class="br10"></p>
<p class="br10"></p>
<p class="br10"></p>
<p class="br10"></p>
<p class="br10"></p>
<p class="br10"></p>
<div class="mainbox" style="background: repeating-linear-gradient(60deg, #4fd434, #5fad2b 3px,#81be1e 3px, #3ddf1d 7px);">
<p class="br10"></p>
<p class="br10"></p>
<div class="textarea">
<h1>hello.Harukin+! from hubzilla</h1>
</div>
<div class="textarea">
<p class="br10"></p>
<h2>お待たせしました。分散型という選択肢。</h2>
<div class="position">
<a class="button" href="https://plus.haruk.in/register">
<div class="signup">登録</div>
</a>
<a class="button" href="https://plus.haruk.in/login">
<div class="login">ログイン</div>
</a>
</div>
</div>
<p class="br10"></p>
</div>
<p class="br10"></p>
<div class="mainbox" style="background: repeating-linear-gradient(-60deg, #34c9d4, #2ba4ad 3px,#1ebea3 3px, #1d51df 7px);">
<div class="picturearea" style="background: url('./picture/P&C.png') right center / cover no-repeat;"></div>
<div class="textarea">
<p class="br10"></p>
<h1>ポスト/コメントのバランスのよい配置</h1>
<p class="br20"></p>
<h3>hubzillaはFacebookやGoogle+と同じポスト＋コメントのスタイルを継承しています。</h3>
<h3>投稿の主従関係を明確にし、話題の脱線を防ぎ有意義な会話を実現します。</h3>
<p class="br20"></p>
</div>
</div>
<p class="br10"></p>
<div class="mainbox" style="background: repeating-linear-gradient(45deg, #d4d434, #ada52b 3px,#bea11e 3px, #d2df1d 7px);">
<div class="picturearea" style="background: url('./picture/category.png') right center / cover no-repeat;"></div>
<div class="textarea">
<p class="br10"></p>
<h1>豊富な、豊富すぎる機能たち</h1>
<p class="br20"></p>
<h3>Google+で人気なサークル概念やコレクション機能を独自名にて内包しており、投稿andフォロワーの整理ができます。</h3>
<h3>もちろん特定人物（複数）に送信することやサークルの仲間全員に送信などをすることもできます。</h3>
<h3>ファイルフォーマットに限度は無し、BBcodeで自分の投稿内容に装飾を加えることができます。</h3>
<p class="br10"></p>
</div>
</div>
<p class="br10"></p>
<div class="mainbox" style="background: repeating-linear-gradient(-45deg, #4c4d4e, #73787c 3px,#4e565e 3px, #494f55 7px);">
<div class="picturearea" style="background: url('./picture/Activitypub.png') right center / cover no-repeat;"></div>
<div class="textarea">
<p class="br10"></p>
<h1>繋がりを求めて</h1>
<p class="br20"></p>
<h3>hubzillaでは独自開発の協力な分散プロトコルZotをはじめ、MastodonやMisskey,Pleromaでお馴染みのActivityPub、Diaspora、OStatusのクアッドチャンネルを持ちます。</h3>
<h3>この協力な連合ネットワークによってここに居るだけで他の大量のサーバーと通信ができます。(Zot以外は任意なので意図せず公開されることはありません)</h3>
<h3>対象サービス(リストはマストドンwikiより転載) : GNU Social Friendica diaspora Misskey Hubzilla Mastodon postActiv
Sosialhome
Aardwolf Pleroma GangGo PixelFed</h3>
<p class="br10"></p>
<div class="position">
<a class="button" href="https://plus.haruk.in/pubstream">
<div class="pubstream">繋ってる仲間を見てみる</div>
</a>
</div>
<p class="br10"></p>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>