<!---
ORPHEUS / by cati/dogboy
NOTES
accent: #A7576C
(use ctrl+f + replace for accent replacement)
mobile friendly + 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!!
--->
<!-- background, if you don't want it to do the scroll thingie, remove the "repeat fixed" -->
<div class="container-fluid shadow-sm" style="background:url(
https://64.media.tumblr.com/f39d80e18fbf9a8542d8ba27eddc38e6/tumblr_inline_ml9e2sgrgR1qz4rgp.gif
) repeat fixed;padding:20px;border-radius:10px;max-width:600px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card my-2 ml-2" style="height:155px;background:#FFFFFF;border-radius:10px;border:0px;overflow:auto;">
<!--- content warning --->
<p class="text-center my-3 font-weight-bold" style="letter-spacing:1px;font-size:20px;color:#A7576C;">
<i class="fas fa-exclamation-triangle"></i> CONTENT WARNING <i class="fas fa-exclamation-triangle"></i></p>
<p class="text-center font-italic" style="color:#A7576C;">content content content</p>
<!--- quote --->
<p class="text-center font-italic" style="letter-spacing:1px;color:#A7576C;">
<i class="fas fa-quote-left" style="color:#A7576C" />
quote from your character
<i class="fas fa-quote-right" style="color:#A7576C" /></p>
</div>
<!--- quote box tick, feel free to remove this if you don't want it! --->
<div class="hidden-xs-down pull-right" style="margin-top:-40px;margin-right:-18px;">
<span style="display:block; border-left:20px solid #FFFFFF;
border-top:15px solid transparent; border-bottom:0px solid transparent;"></span>
</div>
<div class="justify-content-center">
<div class="card p-2 h-100 text-center" style="border-radius:10px;background-color:#A7576C;height:40px;color:#FFFFFF;">
<!--- quote toggle --->
<a data-toggle="collapse" href="#more" style="color:#FFFFFF;"><p class="text-uppercase font-italic" style="font-size:16px;letter-spacing:3px;font-weight:600;">
i feel bored tonight ♥</p></a></div>
</div>
</div>
<div class="col-md-4">
<div class="justify-content-center">
<!--- image, horizontal images work the best here. you'll probably have to play with the 180px value to change it to your liking --->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/26581205_SBs1E7C2CIrCMFD.gif?1601458374" style="width:180px;">
</div>
</div>
</div>
<div class="my-1 collapse" id="more">
<div class="row no-gutters">
<div class="col-md-5" style="padding:10px;">
<div class="card p-3" style="background-color:#FFFFFF;height:335px;overflow:auto;border-radius:10px;">
<!--- name, title, etc --->
<div class="p-2 text-center" style="border-radius:5px;background-color:#A7576C;"><p class="text-uppercase font-italic" style="font-size:14px;letter-spacing:4px;font-weight:600;color:#FFFFFF;">
NAME/TITLE
</p></div>
<hr class="my-2" style="width:90%;background-color:#A7576C;">
<div class="justify-content-between p-2">
<!--- info --->
<div><span class="text-uppercase font-weight-bold font-italic" style="color:#A7576C;font-size:12px;letter-spacing:1px;">age</span></div>
<div><span class="text-muted" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2 p-2">
<div><span class="text-uppercase font-weight-bold font-italic" style="color:#A7576C;font-size:12px;letter-spacing:1px;">gender</span></div>
<div><span class="text-muted" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2 p-2">
<div><span class="text-uppercase font-weight-bold font-italic" style="color:#A7576C;font-size:12px;letter-spacing:1px;">sexuality</span></div>
<div><span class="text-muted" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2 p-2">
<div><span class="text-uppercase font-weight-bold font-italic" style="color:#A7576C;font-size:12px;letter-spacing:1px;">height</span></div>
<div><span class="text-muted" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2 p-2">
<div><span class="text-uppercase font-weight-bold font-italic" style="color:#A7576C;font-size:12px;letter-spacing:1px;">specie</span></div>
<div><span class="text-muted" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
</div>
<div class="col-md-7" style="display:flex;padding:10px;">
<div class="card card-block p-4" style="background-color:#FFFFFF;height:335px;overflow:auto;border-radius:10px;">
<!--- personality --->
<div class="p-2 text-center" style="border-radius:5px;background-color:#A7576C;"><p class="text-uppercase font-italic" style="font-size:14px;letter-spacing:4px;font-weight:600;color:#FFFFFF;">
personality
</p></div>
<hr class="my-3" style="width:90%;background-color:#A7576C;">
<p class="text-center p-2" style="color:#A7576C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris diam, ultricies a vehicula eget, rutrum sit amet dolor. Donec eleifend vulputate tempus. Aenean faucibus leo ut sodales aliquam. Fusce eget pellentesque libero. Nullam vehicula at nibh sit amet semper. Nullam dictum est id arcu interdum viverra. Vestibulum lacinia orci sit amet dapibus ultrices. Maecenas in enim id augue fermentum cursus eget in turpis. Nulla id erat quis felis sollicitudin sollicitudin ut non dolor. Duis vitae est non nibh auctor imperdiet quis ut enim.</p>
<!--- history --->
<div class="p-2 text-center" style="border-radius:5px;background-color:#A7576C;"><p class="text-uppercase font-italic" style="font-size:14px;letter-spacing:4px;font-weight:600;color:#FFFFFF;">
history
</p></div>
<hr class="my-3" style="width:90%;background-color:#A7576C;">
<p class="text-center p-3" style="color:#A7576C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris diam, ultricies a vehicula eget, rutrum sit amet dolor. Donec eleifend vulputate tempus. Aenean faucibus leo ut sodales aliquam. Fusce eget pellentesque libero. Nullam vehicula at nibh sit amet semper. Nullam dictum est id arcu interdum viverra. Vestibulum lacinia orci sit amet dapibus ultrices. Maecenas in enim id augue fermentum cursus eget in turpis. Nulla id erat quis felis sollicitudin sollicitudin ut non dolor. Duis vitae est non nibh auctor imperdiet quis ut enim.</p>
<!--- trivia --->
<div class="p-2 text-center" style="border-radius:5px;background-color:#A7576C;"><p class="text-uppercase font-italic" style="font-size:14px;letter-spacing:4px;font-weight:600;color:#FFFFFF;">
trivia
</p></div>
<hr class="my-3" style="width:90%;background-color:#A7576C;">
<ul style="color:#A7576C;margin-left:3%;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8511715" style="font-size:0.6em;">code by dogboy <i class="fad fa-rainbow"></i></a>
