<!---
OKIE DOKIE / by cati/dogboy
NOTES
accent: #E7A0AF
(use ctrl+f + replace for accent replacement)
custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:url(https://64.media.tumblr.com/be80e9731f222bd442316c083749902b/tumblr_inline_ml2hblU7t31rfdbtm.jpg) repeat fixed;padding:10px;max-width:70%;margin:30px auto 5px;border:4px double #E7A0AF;">
<div class="row">
<div class="col-md-4 ml-5 my-4 p-2">
<!--- left image --->
<img class="mx-auto p-2" style="transform: rotate(-5deg);max-width:90%;border:3px dashed #E7A0AF;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/27158975_CcVp64X0cw3U13p.png">
</div>
<div class="col-lg-5 p-2">
<div class="card my-3 col-12" style="background-color:#FFFFFF;height:350px;overflow:auto;width:92%;border-radius:10px;border:4px double #E7A0AF;">
<div class="tab-content">
<div class="tab-pane fade active show" id="first">
<div class="mx-auto my-4" style="border-radius:0px;background-color:#E7A0AF;border:4px double #FFFFFF;"><p class="text-lowercase m-3 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:1px;" align="center">
<!--- quote/title/etc, keep it short! --->
<i class="far fa-quote-left" style="color:#FFFFFF" /> okie dokie! <i class="far fa-quote-right" style="color:#FFFFFF" /></p></div>
<div align="center">
<!--- traits --->
<span class="p-2 text-lowercase font-italic" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#E7A0AF;border-radius:30px;border:4px double #FFFFFF;">trait</span>
<i class="p-2 fas fa-heart-circle m-auto" style="color:#E7A0AF"></i>
<span class="p-2 text-lowercase font-italic" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#E7A0AF;border-radius:30px;border:4px double #FFFFFF;">trait</span>
<i class="p-2 fas fa-heart-circle m-auto" style="color:#E7A0AF"></i>
<span class="p-2 text-lowercase font-italic" style="color:#FFFFFF;font-size:12px;letter-spacing:1px;background:#E7A0AF;border-radius:30px;border:4px double #FFFFFF;">trait</span>
<!--- summary --->
<p class="text-center p-3 font-italic" style="color:#E7A0AF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<!--- color palette --->
<center>
<i class="fas fa-heart fa-2x" style="color: #F3ECDF;"></i>
<i class="fas fa-heart fa-2x" style="color: #EE8FB9;"></i>
<i class="fas fa-heart fa-2x" style="color: #F6C1D7;"></i>
<i class="fas fa-heart fa-2x" style="color: #FEEDD9;"></i>
<i class="fas fa-heart fa-2x" style="color: #7E53D5;"></i></center>
<!--- stamps --->
<img class="m-2 p-2"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e1eebc5d-4031-4800-9e7b-7880dc2cb9e3/daeh4u7-42311786-d7e4-48cc-a4fd-22741e873608.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZTFlZWJjNWQtNDAzMS00ODAwLTllN2ItNzg4MGRjMmNiOWUzXC9kYWVoNHU3LTQyMzExNzg2LWQ3ZTQtNDhjYy1hNGZkLTIyNzQxZTg3MzYwOC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.EISYuv8E_LBbEX10XXOxsat3voZBG5UYhBMitDbIJlo">
<img class="m-2 p-2"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b0fb4ead-dc38-4951-adc0-7741dfbff33c/dapd57u-f1baf7c9-7c0c-468a-a833-5d6ce1a743be.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYjBmYjRlYWQtZGMzOC00OTUxLWFkYzAtNzc0MWRmYmZmMzNjXC9kYXBkNTd1LWYxYmFmN2M5LTdjMGMtNDY4YS1hODMzLTVkNmNlMWE3NDNiZS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Jj7FAZI01yK-ZCQGGJnBvmv9VrlZzxBkeLs3OfzHTLA"><br></div>
</div>
<!--- NEXT PANEL fade, if you don't need this then highlight this part until "END PANEL" and delete! --->
<div class="tab-pane fade" id="more">
<h3 class="text-uppercase font-weight-bold my-3 p-0 pull-left" style="color:#E7A0AF;font-size:20px;letter-spacing:3px;" align="center">Backstory</h3>
<hr class="my-1" style="width:90%;background-color:#E7A0AF;">
<!--- backstory --->
<p class="p-3 font-italic" style="color:#E7A0AF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
<h3 class="text-uppercase font-weight-bold p-0 pull-left" style="color:#E7A0AF;font-size:20px;letter-spacing:3px;" align="center">Trivia</h3>
<!--- trivia --->
<hr class="my-1" style="width:90%;background-color:#E7A0AF;">
<ul class="p-2" style="color:#E7A0AF;margin-left:10%;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--- back button --->
<center><a data-toggle="pill" href="#first"><i class="fas fa-arrow-circle-left fa-2x" style="color:#E7A0AF;"></i></a></center><br>
</div>
<!--- END PANEL --->
</div>
</div>
</div>
<div class="col-md-2 p-0">
<div class="card my-5 col-12 p-3" style="background-color:#FFFFFF;max-height:130%;border-radius:10px;border:4px double #E7A0AF;">
<!--- name --->
<h3 class="text-uppercase font-italic font-weight-bold" style="color:#E7A0AF;font-size:20px;letter-spacing:3px;" align="center">name</h3><hr style="width:55%;background-color:#E7A0AF;">
<!--- third column info --->
<div class="justify-content-between my-2">
<div><span class="font-weight-bold" style="color:#E7A0AF;font-size:12px;letter-spacing:1px;">age</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><span class="font-weight-bold" style="color:#E7A0AF;font-size:12px;letter-spacing:1px;">gender</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><span class="font-weight-bold" style="color:#E7A0AF;font-size:12px;letter-spacing:1px;">height</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><span class="font-weight-bold" style="color:#E7A0AF;font-size:12px;letter-spacing:1px;">specie</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><span class="font-weight-bold" style="color:#E7A0AF;font-size:12px;letter-spacing:1px;">status</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8455171.okie-dokie-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
<!--- fontawesome icon in the third panel --->
<a data-toggle="pill" href="#more"><i class="fas fa-camera-retro fa-6x pull-left" style="transform: rotate(5deg);margin-left:77%;margin-top:-8%;color: #E7A0AF;"></i></a>
<!--- diamond image --->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27206756_dGm.gif" style="transform: rotate(7deg);margin-top:-64%;margin-left:77%;max-width:150px;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
