[F2U] camera shy (CODE (bootstrap))

      
      <!--- camera shy by onethird
      thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
      
      --->
<div class="container p-0" style="max-width:650px; font-size:13px;">
    
<!--- basic info --->
    <div class="card rounded-0 overflow-auto bg-faded" style="height:100px;">
        <div class="row no-gutters p-1 my-auto">
            
            <!--- first column --->
            <div class="col-6 px-1">
                <div class="justify-content-between py-1">
                    <p class="text-primary font-weight-bold m-0">NAME</p>
                    <p>content</p>
                </div>
                <div class="justify-content-between py-1">
                    <p class="text-primary font-weight-bold m-0">AGE</p>
                    <p>content</p>
                </div>
                <div class="justify-content-between py-1">
                    <p class="text-primary font-weight-bold m-0">GENDER</p>
                    <p>content</p>
                </div>
            </div>
            
            <!---second column --->
            <div class="col-6 px-1">
                <div class="justify-content-between py-1">
                    <p class="text-primary font-weight-bold m-0">ORIENTATION</p>
                    <p>content</p>
                </div>
                <div class="justify-content-between py-1">
                    <p class="text-primary font-weight-bold m-0">RACE</p>
                    <p>content</p>
                </div>
                <div class="justify-content-between py-1">
                    <p class="text-primary font-weight-bold m-0">THEME</p>
                    <a href="SONG_LINK"><i class="fa-solid fa-play pr-3"></i></a>
                </div>
            </div>
        </div>
    </div>
    
<!--- other info --->
    <div class="card mt-3 rounded-0 bg-faded overflow-auto p-2" style="height:500px;">
        
<!--- likes & dislikes --->
        <div class="row no-gutters">
            
            <!--- likes --->
            <div class="col-6">
                <h2>LIKES</h2>
                <ul class="list-unstyled">
                    <li><i class="fa-solid fa-check text-primary p-1"></i>content</li>
                    <li><i class="fa-solid fa-check text-primary p-1"></i>content</li>
                    <li><i class="fa-solid fa-check text-primary p-1"></i>content</li>
                </ul>
            </div>
            
            <!--- dislikes --->
            <div class="col-6">
                <h2>DISLIKES</h2>
                <ul class="list-unstyled">
                    <li><i class="fa-solid fa-times text-primary p-1"></i>content</li>
                    <li><i class="fa-solid fa-times text-primary p-1"></i>content</li>
                    <li><i class="fa-solid fa-times text-primary p-1"></i>content</li>
                </ul>
            </div>
        </div>
        
<!--- trivia --->
        <div class="row no-gutters">
            <div class="col-12">
                <h2><i class="fa-solid fa-pen-to-square fa-sm px-2"></i>TRIVIA</h2>
                <ul class="list-unstyled">
                    <li><i class="fa-solid fa-chevron-right pr-1 text-primary">
                    </i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                    <li><i class="fa-solid fa-chevron-right pr-1 text-primary">
                    </i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                    <li><i class="fa-solid fa-chevron-right pr-1 text-primary">
                    </i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                </ul>
            </div>
        </div>
        
<!--- personality --->
        <div class="row no-gutters">
            <div class="col-12">
                <h2><i class="fa-solid fa-user fa-sm px-2"></i>PERSONALITY</h2>
                <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>
        
<!--- appearance --->
        <div class="row no-gutters mt-3">
            <div class="col-12">
                <h2><i class="fa-solid fa-shirt fa-sm px-2"></i>APPEARANCE</h2>
                <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>
        
<!--- history --->
        <div class="row no-gutters mt-3">
            <div class="col-12">
                <h2><i class="fa-solid fa-book fa-sm px-2"></i>HISTORY</h2>
                <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>
                <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>
        
<!--- relationships --->
        <h2 class="mt-3"><i class="fa-solid fa-user-group fa-sm px-2"></i>RELATIONSHIPS</h2>
        
        <!--- relationship 1 --->
            <div class="card rounded-0 border-0 text-center mb-2" style="background:transparent">
                <a href="#"><h3 class="m-0">NAME</h3></a>
                <p class="m-0 text-muted">relationship</p>
                <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.</p>
            </div>
        <!--- relationship 2 --->
            <div class="card rounded-0 border-0 text-center mb-2" style="background:transparent">
                <a href="#"><h3 class="m-0">NAME</h3></a>
                <p class="m-0 text-muted">relationship</p>
                <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.</p>
            </div>
        <!--- relationship 3 --->
            <div class="card rounded-0 border-0 text-center mb-2" style="background:transparent">
                <a href="#"><h3 class="m-0">NAME</h3></a>
                <p class="m-0 text-muted">relationship</p>
                <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.</p>
            </div>
    </div>
</div>

<!--- credit, do not remove --->
<div class="col-12 p-0 mx-auto text-right" style="max-width:650px;">
            <a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code fa-xs"></i></a>
</div>