Stor8

<!--
    
    cloudy
    by sunxrice
    
    accent colors: #8c92a7 (primary), #f1f3f9 (secondary)
    use find and replace!
    
-->

<div class="container" style="max-width:700px">
    <div class="row">
        
        <!-- side image - for best results, image should be a fullbody of the character with transparent bg and enough margin around it -->
        <div class="col-sm-5 p-3 mb-n4" style="min-height:240px; background-size:contain; background-position:top right; background-repeat:no-repeat;
        background-image:url()
        ">
        </div>
        <!-- /side -->
        
        <!-- profile -->
        <div class="col-sm-7">
            
            <div class="mb-n3" style="position:relative; z-index:1">
                <span class="ml-4 mr-3" style="font-size:2em; font-style:italic; font-family:georgia; font-weight:600; text-transform:uppercase">
                    name
                </span>
                <span style="font-size:1.2em; font-style:italic; font-family:georgia; font-weight:400; text-transform:lowercase">
                    prns / age / species
                </span>
            </div>
            
            <!-- content -->
            <div class="m-2 p-3 text-justify" style="border:5px solid #8c92a7; border-radius:20px">
                <div class="tab-content" style="height:200px; overflow-y:auto; scrollbar-width:thin">
                    
                    <!-- tab 1 - main -->
                    <div class="tab-pane fade show active" id="basic">
                        <p><b class="text-muted">character</b> is ... explain about your character here. this section is intended for basic description of identity and personality. as always this placeholder text is only a suggestion.</p>
                        
                        <p>scrolls, but keep short for best results. or don't, i don't care.</p>
                    </div>
                    <!-- /tab -->
                    
                    <!-- tab 2 - relationships -->
                    <div class="tab-pane fade" id="relations">
                        <p>explain personality: how are they perceived by others, reputation, etc.</p>
                        
                        <hr>
                        
                        <p><a class="font-weight-bold" style="color:#8c92a7" href="charlink">other character</a> is ... explain about their relationship with other characters. this is mostly text so there's no real format for how you "should" do it</p>
                    </div>
                    <!-- /tab -->
                    
                    <!-- tab 3 - backstory -->
                    <div class="tab-pane fade" id="backstory">
                        <p><b class="text-muted">in the beginning</b> ... character backstory and stuff.</p>
                        
                        <hr>
                        
                        <p><b class="text-muted">second part</b> of character backstory. 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.</p>
                        
                        <hr>
                        
                        <p><b class="text-muted">third part</b> of character backstory. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    </div>
                    <!-- /tab -->
                    
                    <!-- tab 4 - design -->
                    <div class="tab-pane fade" id="design">
                        
                        <!-- appearance-->
                        
                        <p>describe character's appearance here. or completely remove this and just use the list below if you don't want to.</p>
                        
                        <!-- /appearance -->
                        
                        <hr>
                        
                        <!-- design notes -->
                        <ul class="ml-n3">
                            <li>height</li>
                            <li>important features</li>
                            <li>other design notes</li>
                            <li>content</li>
                        </ul>
                        <!-- /design -->
                        
                    </div>
                    <!-- /tab -->
                    
                    <!-- tab 5 - other -->
                    <div class="tab-pane fade" id="other">
                        
                        <!-- trivia -->
                        <ul class="ml-n3">
                            <li>trivia or something.</li>
                            <li>content</li>
                            <li>content</li>
                        </ul>
                        <!-- /trivia -->
                        
                        <hr>
                        
                        <!-- links -->
                        <ul class="ml-n3">
                            <li>link to some random place <a class="font-weight-bold" style="color:#8c92a7" href="randomlink">here</a>.</li>
                            <li>other <a class="font-weight-bold" style="color:#8c92a7" href="randomlink">link</a>.</li>
                        </ul>
                        <!-- /links -->
                        
                    </div>
                    <!-- /tab -->
                    
                </div>
            </div>
            <!-- /content -->
            
            <!-- nav -->
            <div class="px-3 py-2 m-2" style="border-width:5px; border-radius:20px; background-color:#8c92a7">
                <ul class="nav justify-content-between">
                    
                    <!-- tab -->
                    <li class="nav-item">
                        <a class="nav-link active border-0 fas fa-sun" style="color:#f1f3f9"
                        data-toggle="tab" href="#basic"></a>
                    </li>
                    <!-- /tab -->
                    
                    <!-- tab -->
                    <li class="nav-item">
                        <a class="nav-link border-0 fas fa-stars" style="color:#f1f3f9"
                        data-toggle="tab" href="#relations"></a>
                    </li>
                    <!-- /tab -->
                    
                    <!-- tab -->
                    <li class="nav-item">
                        <a class="nav-link border-0 fas fa-moon" style="color:#f1f3f9"
                        data-toggle="tab" href="#backstory"></a>
                    </li>
                    <!-- /tab -->
                    
                    <!-- tab -->
                    <li class="nav-item">
                        <a class="nav-link border-0 fas fa-clouds" style="color:#f1f3f9"
                        data-toggle="tab" href="#design"></a>
                    </li>
                    <!-- /tab -->
                    
                    <!-- tab -->
                    <li class="nav-item">
                        <a class="nav-link border-0 fas fa-bolt-lightning" style="color:#f1f3f9"
                        data-toggle="tab" href="#other"></a>
                    </li>
                    <!-- /tab -->
                    
                </ul>
            </div>
            <!-- /nav -->
            
        </div>
        <!-- /profile -->
        
    </div>
    
    <p class="text-right">
        <a class="fas fa-sun-haze tooltipster" style="color:#8c92a7; text-decoration:none" title="code by sunxrice" href="https://toyhou.se/30754085.cloudy"></a>
    </p>
</div>
<!-- end -->