xxyx html

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

        --->
<div class="container card bg-faded p-0 mt-2" style="max-width:300px; font-size:13px; color:#000000; border:1px solid black; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-left-radius:15px; border-bottom-right-radius:15px;">
    <!--- basic info and background --->
    <div class="card border-top-0 border-left-0 border-right-0" style="height:30px; background:url(https://img.freepik.com/free-vector/white-background-with-zigzag-pattern-design_1017-33197.jpg?t=st=1652976575~exp=1652977175~hmac=1302f379b3d2a57d8df542a4935c29c21d178442244d190b66a2909b3e717b86&w=1380); background-size:cover; border-bottom-right-radius:0px; border-bottom-left-radius:0px; border:1px solid black; border-top-right-radius:15px; border-top-left-radius:15px;">
        <p class="text-center my-auto font-weight-bold"> <i class="fa-solid fa-heart"></i> name age prns <i class="fa-solid fa-heart"></i></p>
    </div>

    <!--- paragraph --->
    <div class="card border-0 rounded-0" style="height:205px; background:#ffffff; border-bottom-left-radius:15px; border-bottom-right-radius:15px;">
        <div class="card overflow-auto border-0 rounded-0" style="height:80px; background:transparent">
            <p class="text-center">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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
        </div>

        <!--- characters --->
        <div class="row no-gutters p-1">

            <!--- char 1 --->
            <div class="col-3">

                    <div class="card mx-auto" style="width:70px; height:70px; border:1px solid black; background:url(IMGLINK); background-size:cover; background-size:center;">
                    </div>

                <p class="text-center">yves</p>
            </div>

            <!--- char 2 --->
            <div class="col-3">

                    <div class="card mx-auto" style="width:70px; height:70px; border:1px solid black; background:url(IMGLINK); background-size:cover; background-size:center;">
                    </div>

                <p class="text-center">chuu</p>
            </div>

            <!--- char 3 --->
            <div class="col-3">

                    <div class="card mx-auto" style="width:70px; height:70px; border:1px solid black; background:url(IMGLINK); background-size:cover; background-size:center;">
                    </div>

                <p class="text-center">gowon</p>
            </div>

            <!--- char 4 --->
            <div class="col-3">

                <div class="card mx-auto" style="width:70px; height:70px; border:1px solid black; background:url(IMGLINK); background-size:cover; background-size:center;">
                </div>

                <p class="text-center">olivia hye</p>
            </div>
        </div>

        <!--- socials --->
        <div class="card rounded-0 border-0" style="height:25px; background:transparent;">
            <p class="text-center">
                <a href="#" data-toggle="tooltip" title="username"><i class="fa-brands fa-twitter px-1"></i></a> /
                <a href="#" data-toggle="tooltip" title="username"><i class="fa-brands fa-tumblr px-1"></i></a> /
                <a href="#" data-toggle="tooltip" title="username"><i class="fa-brands fa-instagram px-1"></i></a> /
                <a href="#" data-toggle="tooltip" title="username"><i class="fa-brands fa-discord px-1"></i></a> /
                <a href="#" data-toggle="tooltip" title="username"><i class="fa-brands fa-deviantart px-1"></i></a> /

                <!--- credit, do not remove --->
                <a href="#" data-toggle="tooltip" title="code by onethird"><i class="fa-solid fa-code px-1"></i></a>
            </p>
        </div>
    </div>
</div>