<!--- deer by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
accents: #fcb8dd
name, icons: black
main text: white
background: #000000
--->
<div class="container p-0" style="max-width:320px; font-size:13px; background:#000000; color:white;">
<div class="card border-0 rounded-0" style="background:transparent;">
<div class="row no-gutters">
<!--- main img --->
<div class="col-5">
<div class="card border-0 rounded-circle my-1 mx-auto" style="height:120px; width:120px; background:url(IMGURL); background-size:cover; background-position:center;"></div>
</div>
<!--- basic info --->
<div class="col-7">
<div class="card border-0" style="background:transparent">
<h5 class="text-center" style="background:#fcb8dd; color:black;">name</h5>
<p class="m-0"><i class="fas fa-birthday-cake fa-fw mr-1" style="color:#fcb8dd;"></i>age</p>
<p class="m-0"><i class="fas fa-venus-mars fa-fw mr-1" style="color:#fcb8dd;"></i>gender/prns</p>
<p class="m-0"><i class="fas fa-heart fa-fw mr-1" style="color:#fcb8dd;"></i>orient.</p>
<p class="m-0"><i class="fas fa-address-card fa-fw mr-1" style="color:#fcb8dd;"></i>race</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0 border-0" style="height:20px; background:#fcb8dd">
<!--- nav buttons --->
<ul class="nav mx-auto">
<li class="nav-item"><a class="show" data-toggle="tab" href="#home"><i class="fas fa-user px-1" style="color:black;"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" href="#likedislike"><i class="fas fa-comment-dots px-1" style="color:black;"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" href="#history"><i class="fas fa-book px-1" style="color:black;"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" href="#relationships"><i class="fas fa-users px-1" style="color:black;"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" href="#trivia"><i class="fas fa-check-square px-1" style="color:black;"></i></a></li>
</ul>
</div>
<div class="tab-content">
<!--- personality --->
<div class="card rounded-0 border-0 overflow-auto px-2 tab-pane fade active show" id="home" style="height:120px; font-size:12px; background:transparent;">
<h5 class="my-0 py-1 text-center"><em>. . . personality . . .</em></h5>
<p class="text-center mb-1">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>
<!--- likes dislikes --->
<div class="card rounded-0 border-0 overflow-auto px-2 tab-pane fade" id="likedislike" style="height:120px; font-size:12px; background:transparent;">
<h5 class="my-0 pt-1 text-center"><em>. . . likes & dislikes . . .</em></h5>
<p><i class="fas fa-check pr-1" style="color:#fcb8dd;"></i>content, content, content</p>
<p class="text-right">content, content, content<i class="fas fa-times pl-1" style="color:#fcb8dd;"></i></p>
</div>
<!--- history --->
<div class="card rounded-0 border-0 overflow-auto px-2 tab-pane fade" id="history" style="height:120px; font-size:12px; background:transparent;">
<h5 class="my-0 py-1 text-center"><em>. . . history . . .</em></h5>
<p class="text-center mb-1">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 class="text-center mb-1">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>
<!--- relationships --->
<div class="card rounded-0 border-0 overflow-auto px-2 tab-pane fade" id="relationships" style="height:120px; font-size:12px; background:transparent;">
<h5 class="my-0 py-1 text-center"><em>. . . relationships . . .</em></h5>
<div class="row no-gutters">
<!--- relationship 1 --->
<div class="col-8">
<h5 class="text-center" style="background:#fcb8dd; color:black;">name</h5>
<div class="card overflow-auto rounded-0 border-0" style="height:60px; background:transparent;">
<p class="text-center mb-1"><span class="pr-1 font-weight-bold" style="color:#fcb8dd">FRIEND</span>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>
<!--- relationship 1 img --->
<div class="col-4">
<div class="card border-0 rounded-circle my-1 mx-auto" style="height:85px; width:85px; background:url(IMGURL); background-size:cover; background-position:center;"></div>
</div>
</div>
<div class="row no-gutters">
<!--- relationship 2 --->
<div class="col-8">
<h5 class="text-center" style="background:#fcb8dd; color:black;">name</h5>
<div class="card overflow-auto rounded-0 border-0" style="height:60px; background:transparent;">
<p class="text-center mb-1"><span class="pr-1 font-weight-bold" style="color:#fcb8dd">FRIEND</span>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>
<!--- relationship 2 img --->
<div class="col-4">
<div class="card border-0 rounded-circle my-1 mx-auto" style="height:85px; width:85px; background:url(IMGURL); background-size:cover; background-position:center;"></div>
</div>
</div>
<div class="row no-gutters">
<!--- relationship 3 --->
<div class="col-8">
<h5 class="text-center" style="background:#fcb8dd; color:black;">name</h5>
<div class="card overflow-auto rounded-0 border-0" style="height:60px; background:transparent;">
<p class="text-center mb-1"><span class="pr-1 font-weight-bold" style="color:#fcb8dd">FRIEND</span>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>
<!--- relationship 3 img --->
<div class="col-4">
<div class="card border-0 rounded-circle my-1 mx-auto" style="height:85px; width:85px; background:url(IMGURL); background-size:cover; background-position:center;"></div>
</div>
</div>
</div>
<!--- trivia --->
<div class="card rounded-0 border-0 overflow-auto px-2 tab-pane fade" id="trivia" style="height:120px; font-size:12px; background:transparent;">
<h5 class="my-0 py-1 text-center"><em>. . . trivia . . .</em></h5>
<ul class="list-unstyled">
<li><i class="fas fa-chevron-right px-1" style="color:#fcb8dd"></i>content</li>
<li><i class="fas fa-chevron-right px-1" style="color:#fcb8dd"></i>content</li>
<li><i class="fas fa-chevron-right px-1" style="color:#fcb8dd"></i>content</li>
<li><i class="fas fa-chevron-right px-1" style="color:#fcb8dd"></i>content</li>
</ul>
</div>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 text-right">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code" style="color:#fcb8dd"></i></a>
</div>