f2u artfight wl

<div class="container" style="max-width:800px">
    <div class="card">
        <div class="card-header bg-faded" style="font-size:20px">ARTFIGHT WISHLIST / SHIP LIST <i class="fad fa-stars pull-right"></i></div>
        <div class="row">
            <div class="col-sm-8">
                <div class="card-header">BASIC INFO :</div>
                <ul class="m-2">
                    <li>artfight username : <a href="https://artfight.net/~yourname">username</a></li>
                    <li>team :</li>
                    <li>other thing</li>
                    <li>another thing</li>
                </ul>
<!--main ships (the ones w images)-->
                <div class="card-header">OC SHIPS</div>
                <div class="row m-2">
                    <div class="col-sm-6">
                        <div class="card-header" style="text-align:center"><a href="link">CHAR1</a> AND <a href="link">CHAR2</a></div>
                        <div class="card mx-auto" style="background:url(IMAGE URL); max-width:125px; height:125px; background-repeat:no-repeat; background-size:cover; background-position:center"></div>
                        <p style="text-align:center">brief relationship description! this doesn't scroll so keep it short</p>
                    </div>
                    <div class="col-sm-6">
                        <div class="card-header" style="text-align:center"><a href="link">CHAR1</a> AND <a href="link">CHAR2</a></div>
                        <div class="card mx-auto" style="background:url(IMAGE URL); max-width:125px; height:125px; background-repeat:no-repeat; background-size:cover; background-position:center"></div>
                        <p style="text-align:center">brief relationship description! this doesn't scroll so keep it short</p>
                    </div>
                    <div class="col-sm-6">
                        <div class="card-header" style="text-align:center"><a href="link">CHAR1</a> AND <a href="link">CHAR2</a></div>
                        <div class="card mx-auto" style="background:url(IMAGE URL); max-width:125px; height:125px; background-repeat:no-repeat; background-size:cover; background-position:center"></div>
                        <p style="text-align:center">brief relationship description! this doesn't scroll so keep it short</p>
                    </div>
                    <div class="col-sm-6">
                        <div class="card-header" style="text-align:center"><a href="link">CHAR1</a> AND <a href="link">CHAR2</a></div>
                        <div class="card mx-auto" style="background:url(IMAGE URL); max-width:125px; height:125px; background-repeat:no-repeat; background-size:cover; background-position:center"></div>
                        <p style="text-align:center">brief relationship description! this doesn't scroll so keep it short</p>
                    </div>



                    <div class="card-header">OTHER RELATIONSHIPS:</div>
<!--other relationships: making more of these should be relatively straightforward!-->
                    <p class="m-2"><a href="link">character</a> and <a href="link">character</a> / <a href="link">character</a> and <a href="link">character</a></p>

                </div>
<!--general wishlist stuff-->
                <div class="card-header">GENERAL WISHLIST</div>
                <ul class="m-2">
                    <li>thing</li>
                    <li>thing</li>
                    <li>thing</li>

                </ul>
            </div>

            <div class="col-sm-4">
<!--featured ocs section-->
                <div class="card-header">FAVOURITE OCS:</div>
                <div class="card m-3" style="background:url(IMAGE URL); height:200px; background-repeat:no-repeat"><p class="p-1 px-3" style="background-color:rgba(0,0,0,0.75); line-height:40px; width:100%;  position:absolute; top: 0; color:#FFFFFF; font-size:20px"><a href="LINK" style="color:#FFFFFF">NAME</a></p></div>

                <div class="card m-3" style="background:url(IMAGE URL); height:200px; background-repeat:no-repeat"><p class="p-1 px-3" style="background-color:rgba(0,0,0,0.75); line-height:40px; width:100%;  position:absolute; top: 0; color:#FFFFFF; font-size:20px"><a href="LINK" style="color:#FFFFFF">NAME</a></p></div>

                <div class="card m-3" style="background:url(IMAGE URL); height:200px; background-repeat:no-repeat"><p class="p-1 px-3" style="background-color:rgba(0,0,0,0.75); line-height:40px; width:100%;  position:absolute; top: 0; color:#FFFFFF; font-size:20px"><a href="LINK" style="color:#FFFFFF">NAME</a></p></div>

                <div class="card m-3" style="background:url(IMAGE URL); height:200px; background-repeat:no-repeat"><p class="p-1 px-3" style="background-color:rgba(0,0,0,0.75); line-height:40px; width:100%;  position:absolute; top: 0; color:#FFFFFF; font-size:20px"><a href="LINK" style="color:#FFFFFF">NAME</a></p></div>

            </div>

        </div>
<!--CREDITS!! DONT TOUCH PLS-->
    </div>
    <a href="/hanyu">code by hanyu</a>
</div>