harukin/index.html

<!DOCTYPE html>
<html>

<head>
    <title>harukinトップページ</title>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#frame").load("frame.html");
        });
    </script>
    <meta name="flattr:id" content="xjd3yw">
</head>

<body>
    <main>
        <div class="circle">
            <img src="./picture/28 - 1.png" class="circleimage" alt="">
        </div>
        <h1>haruk.inはharukinによる趣味のためのサイトです。</h1>
        <iframe src="https://duckduckgo.com/search.html?prefill=Search on DuckDuckGo" style="overflow:hidden;margin:0;padding:0;width:80%;height:40px;" frameborder="0"></iframe>
        <h2>倉庫です。</h2>
        <div class="box" style="background: url('./picture/connectwork.png'); color: aliceblue;">
            <div class="br22"></div>
            <h1>OSSを活かしたサービス（遊び）</h1>
            <div class="box-line">
                <div class="box-half">
                    <a href="https://plus.haruk.in" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>Hubzilla</h1>
                        <img src="https://plus.haruk.in/picture/icon.png" width=30%>
                        <p>phpで動くFacebook似なSNSです。</p>
                    </a>
                    <a href="https://gitlab.haruk.in" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>Gitlab</h1>
                        <img src="https://png.icons8.com/color/1600/gitlab.png" width=30%>
                        <p>Githubのフォークを目指したGitソフトウェアです。</p>
                    </a>
                </div>
                <div class="box-half">
                    <a href="https://mattermost.haruk.in" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>mattermost</h1>
                        <img src="./picture/logoVertical_WS.png" width=30%>
                        <p>Slackのフォークを目指したソフトウェアです。Gitlabアカウントを接続して利用します。</p>
                    </a>
                    <a href="https://nexcloud.haruk.in" target="_blank" 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>
                    </a>
                </div>
            </div>
            <!-- <div class="box-line">
                <div class="box-half">
                    <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>
                    </a>
                </div>
            </div> -->
        </div>
        <div class="box" style="background: url('./picture/connectwork.png'); color: aliceblue;">
            <div class="br22"></div>
            <h1>製作ソフトウェア</h1>
            <div class="box-line">
                <div class="box-half">
                    <a href="https://harukin0731.github.io/Atsumori" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>熱盛タイム</h1>
                        <p style="margin-bottom: 0px;">(published by Xprocess)</p>
                        <img src="https://lh3.googleusercontent.com/iiFmIE16v-F38t1R03ug-nesApZsnH0eLl4Oyfr0HKaKukl6m5WPzPyOs8YY_W7dhw=s180"
                            width=50%>
                        <p style="margin-top: 0px;">貴方のスマホが突zアツモリィィィッッッ！！</p>
                    </a>
                    <a href="https://harukin0731.github.io/qsqt.html" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>QSQT</h1>
                        <p>(published by Xprocess)</p>
                        <img src="https://lh3.googleusercontent.com/rrT3G1Xthe3Ypr9RfVVwgadFh7vY9tpTksrglgozvaG2nnDFpaOLzNREZxDlaM8o4w=s180"
                            width=40%>
                        <p>痒いとこに手が届くメモツール</p>
                    </a>
                </div>
                <div class="box-half">
                    <a href="https://play.google.com/store/apps/details?id=familymart_toolkit.xprocess.hrkn" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>ファミマ揚げ物支援アプリ</h1>
                        <p>(published by Xprocess)</p>
                        <img src="https://www.haruk.in/img/Apps/fmlogo.png"
                            width=40%>
                        <p>悩める初心者ファミマ店員へ告ぐ</p>
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=jrshikokuinfo.xprocess.hrkn" target="_blank" class="box-4" style="background-color: rgba(255, 255, 255, 0.39);">
                        <h1>JR四国列車運行情報/位置情報表示アプリ(非公式)</h1>
                        <p>(published by Xprocess)</p>
                        <img src="https://www.haruk.in/img/Apps/icon.png"
                            width=40%>
                        <p>JR四国の列車運行に関する情報を効率的に！</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="br20"></div>
        <div class="br20"></div>
        <div class="br20"></div>
        <div class="br20"></div>
    </main>
    <div id="frame"></div>
</body>

</html>