Thank You and Farewell


by Jeremy Caudle
code

The world was told today that Kentarou Miura passed away on May 6, 2021. I’m sad he is gone, but grateful to have experienced the world of Berserk. Thank you Miura-san, may you rest in peace. The English lyrics for this song can be found via the link provided. This post is more of a reminder to create a proper homage.

Forces

by Susumu Hirasawa

時は雲をつくような波をたて襲うよ
消されて夜道を這う声たちに答えて

忘れはしない　キミのことは
かなわぬ道に　なおひとり立ち

撃たれた鳥のような　優雅さで雨に耐え

癒えない地上の血に洗われて眠る
星よ壮絶に　物語れ　この夜を

忘れはしない　キミのことは
凍えて夜を　ただひとり生き

消えない声よ今　蘇れ力へと

Hai Yai Forces Hai Yai Forces

聞けよ　風さえ泣き　そびえ立つ影の塔
撃たれて夜道を這うキミに灯をともせよ

忘れはしない　キミのことは
かなわぬ道に　なおひとり立ち

行けよ饒舌の　影よ来て導け

Hai Yai Forces Hai Yai Forces

View the code:

HTML and JS 
<div class="code-block">
            <h2>Forces</h2>
            <p>by Susumu Hirasawa</p>
            <aside>Lyrics from <a href="https://www.animelyrics.com/anime/berserk/forces.htm">Anime Lyrics dot com</a></aside>
            <p>時は雲をつくような波をたて襲うよ<br />
            消されて夜道を這う声たちに答えて<br />
            <br />
                忘れはしない　キミのことは<br />
                かなわぬ道に　なおひとり立ち<br />
                <br />
                撃たれた鳥のような　優雅さで雨に耐え<br />
                <br />
                癒えない地上の血に洗われて眠る<br />
                星よ壮絶に　物語れ　この夜を<br />
                <br />
                忘れはしない　キミのことは<br />
                凍えて夜を　ただひとり生き<br />
                <br />
                消えない声よ今　蘇れ力へと<br />
                <br />
                Hai Yai Forces Hai Yai Forces<br />
                <br />
                聞けよ　風さえ泣き　そびえ立つ影の塔<br />
                撃たれて夜道を這うキミに灯をともせよ<br />
                <br />
                忘れはしない　キミのことは<br />
                かなわぬ道に　なおひとり立ち<br />
                <br />
                行けよ饒舌の　影よ来て導け<br />
                <br />
                Hai Yai Forces Hai Yai Forces</p>
        </div>
CSS 
/* Variables */

            :root {
                --forces-red: #c71f14;
                --ray-white: #fafbff;
                --ray-light-yellow: #edf86b;
                --ray-yellow: #f6df43;
                --ray-yellow-orange: #f3d042;
                --ray-orange: #f7b638;
                --ray-dark-orange: #fa9f2a;
            }

.code-block {
                padding: 1rem;
                display: flex;
                flex-direction: column;
                min-height: 100vh;
                width: 300px;
                margin: 1rem auto;
                justify-content: center;
                align-content: center;
                background-image: linear-gradient(var(--ray-white), var(--ray-light-yellow), var(--ray-yellow), var(--ray-yellow-orange), var(--ray-orange), var(--ray-dark-orange));
                font-family: 'Helvetica', Arial, Helvetica, sans-serif;
            }

            .code-block h2 {
                color: var(--forces-red);
                margin: 0 auto;
                font-size: 3rem;
                text-align: center;
            }

            .code-block p {
                text-shadow: 1px 2px rgba(255, 255, 255, 0.4);
                font-weight: bold;
                color: #010101;
            }

            .code-block p:first-of-type {
                margin-top: 0;
                text-align: center;
            }

            .code-block aside {
                text-align: center;
                opacity: .3;
            }

            

            .code-block aside {
                color: #00000099;
            }

Tags