[F2U HTML] simple (code)

owlhari

Info


Created
1 year, 5 months ago
Creator
owlhari
Favorites
1

Profile


<!-- 
SIMPLE CHARACTER HTML
F2U BY OWLHARÌ
DO NOT REMOVE CREDIT
-->

<div class="container">
<!-- BACKGROUND: to change the color, change the "gray" in "background-color:gray;" to a color name or hex code -->
<div class="text-body row container p-3 m-auto text-break" style="border:0; border-radius:20px;
        background-color:gray;">

    <div class="col-sm-4">
        <!-- IMAGE -->
        <div class="card m-2 p-3 bg-body" style="border:0; border-radius:20px;">
        <div class="card-body">
                <img src="IMAGE URL" style="border-radius:20px;" class="card-img-top">
                <div class="card-text text-center">caption or <a href="">artist</a></div>
        </div>
        </div>
        
        <!-- STATS -->
        <div class="card m-2 mt-3 px-3 py-4 bg-body" style="border:0; border-radius:20px;">
        <div class="card-body">
            <table class="table m-0" style="border:0;"><tbody>
                <tr>
                    <td class="w-50"><b>FULL NAME</b></td>
                    <td class="w-50">name</td>
                </tr>
                <tr>
                    <td><b>NICKNAME(S)</b></td>
                    <td>nicknames</td>
                </tr>
                <tr>
                    <td><b>GENDER</b></td>
                    <td>gender</td>
                </tr>
                <tr>
                    <td><b>PRONOUNS</b></td>
                    <td>pro/nouns</td>
                </tr>
                <tr>
                    <td><b>ORIENTATION</b></td>
                    <td>orientation</td>
                </tr>
                <tr>
                    <td><b>AGE</b></td>
                    <td>age</td>
                </tr>
                <tr>
                    <td><b>OCCUPATION</b></td>
                    <td>occupation</td>
                </tr>
                <tr>
                    <td><b>RESIDENCE</b></td>
                    <td>residence</td>
                </tr>
                <tr>
                    <td><b>STATUS</b></td>
                    <td>status</td>
                </tr>
                <tr>
                    <td><b>THEME</b></td>
                    <td><a href="">song link</a></td>
                </tr>
                
            </tbody></table>
        </div>
        </div>
        
        <!-- RIBBONS -->
        <div class="card m-2 mt-3 p-3 bg-body" style="border:0; border-radius:20px;">
        <div class="card-body text-center">
                <div class="d-inline p-2" data-toggle="tooltip" title="desc">
                  <img src="https://file.toyhou.se/images/15986423_VWgwxgMTmNxkkVu.png?1565834541" /></div>
                <div class="d-inline p-2" data-toggle="tooltip" title="desc">
                    <img src="https://file.toyhou.se/images/15986423_VWgwxgMTmNxkkVu.png?1565834541" /></div>
                <div class="d-inline p-2" data-toggle="tooltip" title="desc">
                  <img src="https://file.toyhou.se/images/15986423_VWgwxgMTmNxkkVu.png?1565834541" /></div>
                  
                <div><a href="https://toyhou.se/4739396.-ribbons">ribbons</a></div>
        </div>
        </div>
    </div>
    
    <div class="col-sm">
        
        <!-- TEXT -->
        <div class="card m-2 p-4 bg-body" style="border:0; border-radius:20px;">
        <div class="card-body">
            <h1 class="text-center text-uppercase">character name <i class="fa-solid fa-star"></i> extra info</h1>
            <p>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>
            <h3 class="text-center text-uppercase">subheader</h3>
            <p>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>
            <h3 class="text-center text-uppercase">subheader</h3>
            <p>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>
        </div>
        
        <!-- DESIGN NOTES -->
        <div class="card m-2 mt-3 p-4 bg-body" style="border:0; border-radius:20px;">
        <div class="card-body">
            <h3 class="text-center text-uppercase">design notes</h3>
                <ul class="list-unstyled ml-5">
                    <!-- to add more items, copy and paste from <li> to </li> on a new line -->
                    <li><i class="fa-solid fa-star"></i> one</li>
                    <li><i class="fa-solid fa-star"></i> two</li>
                    <li><i class="fa-solid fa-star"></i> three</li>
                </ul>
        </div>
        </div>
        
        <!-- RELATIONSHIPS -->
        <div class="card m-2 mt-3 p-4 bg-body" style="border:0; border-radius:20px;">
        <div class="card-body">
            <h3 class="text-center text-uppercase">relationships</h3>
                <!-- to add more items, copy and paste from <p> to </p> on a new line -->
                <p><a href="LINK"><b>NAME</b></a> <i class="fa-solid fa-star"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
                <p><a href="LINK"><b>NAME</b></a> <i class="fa-solid fa-star"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
                <p><a href="LINK"><b>NAME</b></a> <i class="fa-solid fa-star"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
        </div>
        </div>
    </div>
    
    <!-- ART STATS: to remove, delete from here to the next comment -->
    <div class="row container mx-auto">
        <div class="card m-2 mt-3 p-4 bg-body w-100" style="border:0; border-radius:20px;">
        <div class="card-body">
            <h3 class="text-center text-uppercase">art stats</h3>
            <div class="row">
                <div class="col-sm"><b>DESIGN</b>
                    <ul class="list-unstyled">
                        <li><b>creator:</b> <a href="">username</a></li>
                        <li><b>designer:</b> <a href="">username</a></li>
                        <li><b>made on:</b> <a href="">website</a></li>
                        <li><b>created:</b> date</li>
                        <li><b>acquired:</b> date</li>
                        <li><b>redesigned:</b> date</li>
                    </ul>
                </div>
                <div class="col-sm"><b>WORTH</b>
                    <ul class="list-unstyled">
                        <li><b>purchased for:</b> $0.00</li>
                        <li><b>personal art:</b> $0.00</li>
                        <li><b>commissions:</b> $0.00</li>
                        <li><b>total:</b> $0.00</li>
                    </ul>
                </div>
                <div class="col-sm"><b>ART</b>
                    <ul class="list-unstyled">
                        <li><b>personal:</b> 0</li>
                        <li><b>comic pages:</b> 0</li>
                        <li><b>animations:</b> 0</li>
                        <li><b>trades/gifts:</b> 0</li>
                        <li><b>commissions:</b> 0</li>
                        <li><b>total:</b> 0</li>
                    </ul>
                </div>
                <div class="col-sm"><b>WRITING</b>
                    <ul class="list-unstyled">
                        <li><a href="">story link</a></li>
                        <li><a href="">story link</a></li>
                        <li><a href="">story link</a></li>
                        <li><b>total:</b> 0</li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
    </div> <!-- ART STATS: stop deleting here to remove -->
    
</div>
<div class="pull-right">
    <a href="https://toyhou.se/19073293.-f2u-html-simple" data-toggle="tooltip" data-placement="left" title="get the code!"><i class="fa-solid fa-code"></i></a>
    <a href="/owlhari" data-toggle="tooltip" data-placement="left" title="code by owlharì"><i class="fa-solid fa-crow"></i></a>
</div>
</div>