code

アイコンはicooon mono様にて保存してください。
# シンプルなヒゲのアイコン

HEAD

/* Template & Designed by Towako. */
/* https://ninawas.me */

/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive|M+PLUS+Rounded+1c|Staatliches&display=swap');

/* 全体に適用する */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* 共通設定 */
body {
    background-color: #fff;
    text-align: justify;
    word-break: break-all;
    line-height: 1.7;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: #000;
}

/* リンク */
a {
    text-decoration: none;
    color: #000;
    transition: color .5s;
}

/* ホバ */
a:hover {
    color: #000;
}

/* ヘッダー */
header {
    position: relative;
    min-height: 100vh;
    background: url('画像URL') center top/cover;
}

/* ヘッダー見出し */
header h1 {
    position: absolute;
    top: 5%;
    right: 5%;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    letter-spacing: 0.3em;
    font-family: 'Staatliches', 'M PLUS Rounded 1c', sans-serif;
    font-size: 55px;
    color: rgba(0, 0, 0, 0.5);
}

/* ナビゲーション */
header nav ul {
    display: inline-block;
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    list-style-type: none;
}

header nav ul li {
    width: 50%;
    margin: 1em 2.5em;
    padding-left: 1.5em;
    background-color: rgba(0, 0, 0, 0.5);
}

header nav ul li a {
    display: inline-block;
    width: 100%;
    letter-spacing: 0;
    font-family: 'Cedarville Cursive', 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.3em;
    color: #fff;
}

/* セクション */
section {
    margin: 0 auto;
    padding: 3em;
}

/* セクション見出し */
section h2 {
    position: relative;
    margin: 1em auto;
    text-align: center;
    letter-spacing: 0.2em;
    background-color: #3f3f3f;
    font-family: 'Staatliches', 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.5em;
    color: #fff;
}

section h2,
section h3 {
    font-weight: normal;
}

/* セクションリンク */
section a {
    padding: 0 0.3em;
    font-weight: bold;
    color: #fa8072;
}

/* ホバー */
section a:hover {
    background-color: #fa8072;
    color: #fff;
}

/* セクション内共通 */
section p {
    margin: 1em auto 1.5em;
}

section p span {
    border-bottom: dashed thin #000;
}

section mark {
    padding: 0.2em;
    background: linear-gradient(transparent 80%, #7f7f7f 30%);
}

section strong {
    color: #ff0000;
}

/* リスト系 */
section dl {
    margin-bottom: 1em;
}

section dd {
    margin: 0.2em auto 0.5em;
    padding-left: 2em;
    color: #404040;
}

section ul {
    list-style-type: none;
    margin: 0.3em auto 1em 1em;
    border-left: thin dotted #000;
}

section ul li {
    padding-left: 1em;
}

section ol {
    margin: 0.3em auto 1em 1em;
}

section ol li {
    list-style-position: inside;
    margin-right: 1em;
}

.float li {
    float: left;
}

.float::after {
    display: block;
    content: '';
    clear: both;
}

/* アーティクル */
article {
    margin-bottom: 2em;
}

/* フッター */
footer {
    margin: 1.5em auto;
    text-align: center;
}

/* フッターフォント */
footer,
footer a,
.en {
    font-family: 'Cedarville Cursive', 'M PLUS Rounded 1c', sans-serif;
}

/* スクロールボックス */
.scroll {
    overflow-y: scroll;
    padding: 0.5em;
    height: 80px;
    border: dashed thin #000;
}

.scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll::-webkit-scrollbar-track {
    border-radius: 50px;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: #3f3f3f;
    border-radius: 50px;
}

/* 右揃え */
.right {
    text-align: right;
}

/* 枠線リンク */
.link {
    margin: 0.3em auto;
    padding: 0 0.5em;
    border-top: 2px solid #fa8072;
    border-bottom: 2px solid #fa8072;
}

/* 上に戻るボタン */
#Top {
    height: 1px;
}

#PageTop {
    position: fixed;
    bottom: 4%;
    right: 5%;
}

#PageTop a {
    display: block;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fa8072;
}

#PageTop img {
    margin: 10%;
    width: 80%;
    height: auto;
}

/* フォーム系 */
textarea,
input[type] {
    -webkit-appearance: none;
    padding: 0.2em 0.5em;
    background-color: #fff;
    border: thin solid #000;
    border-radius: 0;
}

textarea {
    width: 200px;
    height: 80px;
}

textarea::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

textarea::-webkit-scrollbar-track {
    border-radius: 50px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: #3f3f3f;
    border-radius: 50px;
}

input[type=text] {
    width: 100px;
}

input[type=submit] {
    width: auto;
}

/* 横幅768px以上で読み込む */
@media screen and (min-width:768px) {

/* フレックスボックス */
    #wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

header {
        flex-basis: 100%;
    }

header h1 {
        font-size: 65px;
    }

header nav ul {
        bottom: 8%;
    }

section {
        flex-basis: 50%;
    }

/*セクション内自動2カラム */
    .columns {
        columns: 2 auto;
        flex-basis: 100%;
    }

/* カラムを横切って見出しを表示させる */
    .columns h2 {
        column-span: all;
    }
}

/* 横幅1024px以上で読み込む */
@media screen and (min-width:1024px) {

/* フレックスコンテナの表示順を変える */
    #wrap {
        flex-direction: row-reverse;
    }

header,
    section {
        flex-basis: 33%;
    }
}
</style>

BODY

<div id="wrap">
    <header>
        <h1>splinters</h1>
        <nav>
            <ul>
                <li><a href="#info">information</a></li>
                <li><a href="#main">main contents</a></li>
                <li><a href="#note">notebook</a></li>
                <li><a href="#code">source code</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2 id="info">Information</h2>
        <p>
            <span>spanで下線</span><br>
            <mark>markでマーカー</mark><br>
            <strong>strongで重要事項</strong><br>
            <a href="#">セクション内リンク</a><br>
            <a href="#" class="link">class="link"</a><br>
            <span class="en">class="en"で英字</span><br>
            section class="columns"セクション内自動2カラム
        </p>
        <div class="right">class="right"で右揃え</div>
        <h2 id="main">Main contents</h2>
        <dl>
            <dt><mark>記述リスト</mark></dt>
            <dd>ここに説明</dd>
            <dt><a href="#" class="link">リンク</a></dt>
            <dd>ここに説明</dd>
        </dl>
        <ul>
            <li><a href="#">リスト</a></li>
            <li><a href="#">リスト</a></li>
        </ul>
        <ul class="float">
            <li><a href="#">class="float"で</a></li>
            <li><a href="#">横並び</a></li>
        </ul>
        <ol>
            <li><a href="#">リスト</a></li>
            <li><a href="#">リスト</a></li>
        </ol>
        <ol class="float">
            <li><a href="#">class="float"で</a></li>
            <li><a href="#">横並び</a></li>
        </ol>
    </section>
    <section>
        <h2 id="note">Notebook</h2>
        <article>
            <h3 class="en">April 28, 2019</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <div class="right"><a href="#" class="link">Read More</a></div>
        </article>
        <article>
            <h3 class="en">Scroll</h3>
            <p class="scroll">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>
        </article>
    </section>
</div>

<footer>Template by <a href="https://ninawas.me" target="_blank">Nina</a>.</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function() {
        $('a[href^="#"]').click(function() {
            var speed = 1000;
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            $('body,html').animate({
                scrollTop: position
            }, speed, 'swing');
            return false;
        });
    });
    $(function() {
        var topBtn = $('#PageTop');
        topBtn.hide();
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                topBtn.fadeIn();
            } else {

topBtn.fadeOut();

}
        });
        topBtn.click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });

</script>