harukin/連絡先.html

<!DOCTYPE html>
<html>

<head>
    <title>連絡先</title>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#frame").load("frame.html");
        });
    </script>
</head>

<body>
    <main>
        <h1>連絡先一覧</h1>
        <div class="box" style="background: url('./picture/connectwork.png'); color: aliceblue;">
            <div class="br22"></div>
            <h1>Hubzilla</h1>
            <div class="box-line">
                <div class="box-half">
                    <a href="https://plus.haruk.in/channel/harukin" class="box-4" style="background-color: rgba(136, 136, 136, 0.685);">
                        <h3>[email protected]</h3>
                        <img src="https://plus.haruk.in/photo/profile/l/2" width=30%>
                        <p>harukin</p>
                    </a>
                    <a href="https://plus.haruk.in/channel/info-server" class="box-4" style="background-color: rgba(104, 221, 250, 0.39);">
                        <h3>[email protected]</h3>
                        <img src="https://plus.haruk.in/photo/profile/l/39" width=30%>
                        <p>サーバー運営情報</p>
                    </a>
                </div>
                <div class="box-half">
                    <a href="https://start.hubzilla.org/channel/harukin6323" class="box-4" style="background-color: rgba(136, 136, 136, 0.685);">
                        <h3>[email protected]</h3>
                        <img src="https://start.hubzilla.org/photo/profile/l/741" width=30%>
                        <p>harukin(mirror:start.hubzilla.org)</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="box" style="background: url('./picture/connectwork.png'); color: aliceblue;">
            <div class="br22"></div>
            <h1>Mastodon</h1>
            <div class="box-line">
                <div class="box-half">
                    <a href="https://mstdn.y-zu.org/@_" class="box-4" style="background-color: rgba(114, 252, 50, 0.685);">
                        <h3>[email protected]</h3>
                        <img src="https://mstdn.y-zu.org/system/accounts/avatars/000/000/366/original/16519f044f7.png"
                            width=30%>
                        <p>Yづドン</p>
                    </a>
                    <a href="https://itabashi.0j0.jp/@_" class="box-4" style="background-color: rgba(142, 255, 113, 0.39);">
                        <h3>[email protected]</h3>
                        <img src="https://itabashi.0j0.jp/avatars/original/missing.png" width=30%>
                        <p>板橋丼</p>
                    </a>
                </div>
                <div class="box-half">
                    <a href="https://mstdn.jp/@harukin0731" class="box-4" style="background-color: rgba(243, 160, 105, 0.685);">
                        <h3>[email protected]</h3>
                        <img src="https://media.mstdn.jp/accounts/avatars/000/028/933/original/1ae1ec65dcfd8867.jpg"
                            width=30%>
                        <p>mstdn.jp</p>
                    </a>
                    <a href="https://mstdn.maud.io/@harukin0731" class="box-4" style="background-color: rgba(173, 173, 173, 0.685);">
                        <h3>[email protected]</h3>
                        <img src="https://mstdn.maud.io/system/accounts/avatars/000/046/275/original/pnc__picked_media_2a5674ec-5c08-49d1-8c62-a044a3b02272.jpeg"
                            width=30%>
                        <p>末代 :don:</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="box" style="background: url('./picture/connectwork.png'); color: aliceblue;">
            <div class="br22"></div>
            <h1>その他SNS</h1>
            <div class="box-line">
                <div class="box-half">
                    <a href="https://twitter.com/@mhkai00731" class="box-4" style="background-color: rgba(0, 217, 255, 0.767);">
                        <h3>Hairs UK Intelligent</h3>
                        <img src="https://pbs.twimg.com/profile_images/1047659033375600640/1qRIEyiu_400x400.jpg" width=30%>
                        <p>Twitter</p>
                    </a>
                    <a href="https://plus.google.com/114801278289524675913" class="box-4" style="background-color: rgb(255, 0, 0, 0.767);">
                        <h3>向井晴紀</h3>
                        <img src="https://lh3.googleusercontent.com/IBc5NU0m9hBZuYQyBoYc1nSf0aA94LFW4SuQV-ls4NDDqvxfKwrGms7BotjAOO2WBW15LgmDsqV6y5U=w905-h906-no"
                            width=30%>
                        <p>Google+</p>
                    </a>
                </div>
                <div class="box-half">
                    <a href="https://www.instagram.com/harukin0731/" class="box-4" style="background-color: rgb(243, 105, 209, 0.767);">
                        <h3>harukin0731</h3>
                        <img src="./picture/21819937_118392865525629_2711145633984544768_n.jpg"
                            width=30%>
                        <p>Instagram</p>
                    </a>
                    <a href="http://line.me/ti/p/ReFcvM1O-3" class="box-4" style="background-color: rgb(0, 255, 34, 0.767);">
                        <h3>Hairs UK Intelligent</h3>
                        <img src="https://scontent-nrt1-1.cdninstagram.com/vp/c6310c87407f42ab2f2bda2df3aa9ab0/5C40B0FB/t51.2885-19/s150x150/21819937_118392865525629_2711145633984544768_n.jpg"
                            width=30%>
                        <p>LINE</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>