Static Faux Visual Novel

<!-- black bars / big container -->
<div class="container py-4 px-0 mx-auto" style="background:#000">

<!-- background image -->
    <div class="container p-2 mx-auto text-light" style="max-height:510px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png); background-repeat:none; background-position:bottom;">

<!-- character image, to change where the character is in the scene, add "top:#px; left:#px; right:#px; bottom#px;" to the style section, adjust the numbers [# replace with number] as needed, direction is funny so just mess about until happy if needed -->
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="position-absolute" style="max-height:500px; width:auto;">

<!-- speech box -->
        <div class="container rounded p-2 m-1 mx-auto position-absolute" style="bottom:140px; overflow-y:auto; max-height:100px; background:rgba(0, 0, 0, .8); border:solid; border-width:1px;">
        <h1 class="text-uppercase" style="font-family:helvetica; letter-spacing:3px; font-size:20px"><span style="color:#CE243E;">N</span>AME</h1>
        <hr class="m-0 mb-2">

            <p>Words</p>
            <i class="fa fa-caret-down fa-bounce" style="position:absolute; right:9px; bottom:7px;"></i>
        </div>
<!-- end speech box -->

    </div>
<!-- end background -->

<!-- end all -->
</div>

<!-- credits for the two images used -->
<div class="row mx-1 justify-content-end">
<div style="font-size:10px;"><a href="https://commons.wikimedia.org/wiki/File:Portrait_Placeholder.png" target="_blank" style="color:#edf6f9"><i class="fa fa-image pl-1"></i></a></div>
<div style="font-size:10px;"><a href="https://commons.wikimedia.org/wiki/File:Portrait_Placeholder.png" target="_blank" style="color:#edf6f9"><i class="fa fa-image pl-1"></i></a></div>

<!-- my coding credit, do not remove please ! -->
<div style="font-size:10px;"><a href="https://toyhou.se/TERRIIFIIED" target="_blank" style="color:#edf6f9"><i class="fa fa-code pl-1"></i></a></div>
</div>