7. Lil Holder (Code)

somnibear

Profile


    <div class="container" style="max-width: 850px">
    <div class="row">
        <div class="col-md-12 p-0 mb-2">
            <div class="bg-faded px-3 pt-3 pb-1" style="border-radius: 15px;">
                <h2 style="letter-spacing: 5px">TITLE<i class="fad fa-user-circle fa-fw pull-right text-primary"></i></h2>
                <hr class="my-2 bg-primary">
                <div class="row">
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Full Name</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Nicknames</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Gender</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Age (and/or birthday)</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Species</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Height</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Sexuality</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Occupation</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Voice Claim</span>
                        <span class="pull-right">Content</span>
                        <hr class="mt-1 mb-0 hidden-md-up">
                    </div>
                    <div class="col-12 col-md-6 my-1">
                        <span class="text-uppercase text-muted">Significant Other</span>
                        <span class="pull-right">Content</span>

                    </div>
                </div>
                
                <!-- PARAGRAPH SECTION -->
                <hr class="my-2 bg-primary">
                   <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>
                 <!-- PARAGRAPH SECTION END -->
                
                <!-- LIST SECTION - you can delete this if you want -->
                <hr class="mb-3 mt-2 bg-primary">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                </ul>
                <!-- LIST SECTION END -->
                
                <!-- RELATIONSHIP SECTION - will grows you add more, you can also delete it if you want - I recommend keeping it 4-6, as it looks best.  -->
                <hr class="mb-3 mt-2 bg-primary">
                <div class="d-flex flex-wrap justify-content-around">
                    
                    <!-- single relationship block-->
                    <div class="text-center mb-2 col-lg-2 col-md-3 col-6">
                        <img class="mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png" style="max-height: 70px; border-radius: 10px;">
                        <p class="mb-0"><a href="URL_HERE">Name Lastname</a></p>
                        <hr class="my-0"/>
                        <p class="text-muted">Relationship</p>
                    </div>
                    <!-- single relationship block end-->
                    
                    <!-- single relationship block-->
                    <div class="text-center mb-2 col-lg-2 col-md-3 col-6">
                        <img class="mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png" style="max-height: 70px; border-radius: 10px;">
                        <p class="mb-0"><a href="URL_HERE">Name Lastname</a></p>
                        <hr class="my-0"/>
                        <p class="text-muted">Relationship</p>
                    </div>
                    <!-- single relationship block end-->
                    
                    <!-- single relationship block-->
                    <div class="text-center mb-2 col-lg-2 col-md-3 col-6">
                        <img class="mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png" style="max-height: 70px; border-radius: 10px;">
                        <p class="mb-0"><a href="URL_HERE">Name Lastname</a></p>
                        <hr class="my-0"/>
                        <p class="text-muted">Relationship</p>
                    </div>
                    <!-- single relationship block end-->
                    
                    <!-- single relationship block-->
                    <div class="text-center mb-2 col-lg-2 col-md-3 col-6">
                        <img class="mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png" style="max-height: 70px; border-radius: 10px;">
                        <p class="mb-0"><a href="URL_HERE">Name Lastname</a></p>
                        <hr class="my-0"/>
                        <p class="text-muted">Relationship</p>
                    </div>
                    <!-- single relationship block end-->
                    
                    <!-- single relationship block-->
                    <div class="text-center mb-2 col-lg-2 col-md-3 col-6">
                        <img class="mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png" style="max-height: 70px; border-radius: 10px;">
                        <p class="mb-0"><a href="URL_HERE">Name Lastname</a></p>
                        <hr class="my-0"/>
                        <p class="text-muted">Relationship</p>
                    </div>
                    <!-- single relationship block end-->
                    
                    <!-- single relationship block-->
                    <div class="text-center mb-2 col-lg-2 col-md-3 col-6">
                        <img class="mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png" style="max-height: 70px; border-radius: 10px;">
                        <p class="mb-0"><a href="URL_HERE">Name Lastname</a></p>
                        <hr class="my-0"/>
                        <p class="text-muted">Relationship</p>
                    </div>
                    <!-- single relationship block end-->
                    
                </div>
                <!-- RELATIONSHIP SECTION END -->
            </div>    
        </div>
    </div>
    <p class="pull-right" style="border-radius: 10px; font-size: 10px; margin-top: -5px;"><a href="https://toyhou.se/somnibear"><i class="fad fa-code text-primary"></i><span class="text-muted"> somnibear</span></a></p>
</div>