voltage html

<!---voltage by onethird
    thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-

    background: black
    header/footer, title, buttons, border: #8AB2FF
    main text: white
    header text, button text, footer text/links: #000000
    --->
<div class="container bg-faded p-0 mt-3" style="max-width:500px; background:black; border: 1px solid #8AB2FF;">

    <!--- header --->
    <div class="card rounded-0 border-0 m-1" style="height:30px; background:#8AB2FF;">
        <p class="text-right p-1 font-weight-bold font-italic" style="color:#000000;"> NAME. AGE. PRNS</p>
    </div>
    <div class="row no-gutters">

        <!--- main image --->
        <div class="col-lg-4 p-1">
            <div class="card m-auto rounded-0 border-0" style="height:120px; width:150px; background:url(IMGLINK); background-size:cover; background-position:center;">

            </div>
        </div>

        <!--- main text --->
        <div class="col-lg-8 p-1">
            <h3 class="text-center font-italic font-weight-bold p-1" style="color: #8AB2FF; text-shadow: 0px 0px 8px #8AB2FF"><i class="fa-solid fa-bolt"></i> VOLTAGE <i class="fa-solid fa-bolt"></i></h3>
            <div class="card rounded-0 border-0" style="height:90px; background:transparent">

                <p class="text-center m-auto" style="font-size:12px; color:white;">doesn't scroll. good for 5 lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
            </div>
        </div>
    </div>

    <h3 class="text-center font-italic font-weight-bold p-1" style="color: #8AB2FF; text-shadow: 0px 0px 8px #8AB2FF"><i class="fa-solid fa-fire-flame-curved"></i> BURNING UP! <i class="fa-solid fa-fire-flame-curved"></i></h3>
    <div class="row no-gutters">

        <!--- character 1 --->
        <div class="col-sm-4 p-1">
            <div class="card rounded-0 border-0 m-auto" style="height:120px; width:150px; background:url(IMGLINK); background-size:cover; background-position:center;">
                <p class="p-1 font-italic" style="text-shadow: 0px 0px 3px white; color:white;">1.</p>
            </div>
            <div class="row justify-content-center">
                <a class="btn m-2 font-weight-bold" style="background:#8AB2FF; font-size:12px; color:#000000;" href="URLLINK">NAME</a>
            </div>
        </div>

        <!--- character 2 --->
        <div class="col-sm-4 p-1">
            <div class="card rounded-0 border-0 m-auto" style="height:120px; width:150px; background:url(IMGLINK); background-size:cover; background-position:center;">
                <p class="p-1 font-italic" style="text-shadow: 0px 0px 3px white; color:white;">2.</p>
            </div>
            <div class="row justify-content-center">
                <a class="btn m-2 font-weight-bold" style="background:#8AB2FF; font-size:12px; color:#000000;" href="URLLINK">NAME</a>
            </div>
        </div>

        <!--- character 3 --->
        <div class="col-sm-4 p-1">
            <div class="card rounded-0 border-0 m-auto" style="height:120px; width:150px; background:url(IMGLINK); background-size:cover; background-position:center;">
                <p class="p-1 font-italic" style="text-shadow: 0px 0px 3px white; color:white">3.</p>
            </div>
            <div class="row justify-content-center">
                <a class="btn m-2 font-weight-bold" style="background:#8AB2FF; font-size:12px; color:#000000;" href="URLLINK">NAME</a>
            </div>
        </div>
    </div>


    <div class="row no-gutters">

        <!--- character 4 --->
        <div class="col-sm-6 p-1">
            <div class="card rounded-0 border-0 m-auto" style="height:120px; width:150px; background:url(IMGLINK); background-size:cover; background-position:center;">
                <p class="p-1 font-italic" style="text-shadow: 0px 0px 3px white; color:white">4.</p>
            </div>
            <div class="row justify-content-center">
                <a class="btn m-2 font-weight-bold" style="background:#8AB2FF; font-size:12px; color:#000000;" href="URLLINK">NAME</a>
            </div>
        </div>

        <!--- character 5 --->
        <div class="col-sm-6 p-1">
            <div class="card rounded-0 border-0 m-auto" style="height:120px; width:150px; background:url(IMGLINK); background-size:cover; background-position:center;">
                <p class="p-1 font-italic" style="text-shadow: 0px 0px 3px white; color:white;">5.</p>
            </div>
            <div class="row justify-content-center">
                <a class="btn m-2 font-weight-bold" style="background:#8AB2FF; font-size:12px; color:#000000;" href="URLLINK">NAME</a>
            </div>
        </div>
    </div>

    <!--- links --->
    <div class="card rounded-0 border-0 m-1" style="height:30px; background:#8AB2FF;">
        <p class="text-right p-1 font-weight-bold font-italic" style="color:#000000;">
            <a href="URLLINK" class="text-reset">LINK NAME.</a>
            <a href="URLLINK" class="text-reset">LINK NAME.</a>
            <a href="URLLINK" class="text-reset">LINK NAME</a>
            </p>
    </div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 mt-1 text-right">
            <a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code" style="color:#8AB2FF"></i></a>
</div>