<!-------------------------------------------------
Surprise — Bootstrap version.
(code by jiko)
------------------------------
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
ACCENTS
→ set to [-primary]
use control/command + f to quickly change the colours!
------------------------------------------------->
<!--
→ don't like the lowercase? delete [text-lowercase]!
-->
<div class="mx-auto text-justify text-lowercase" style="font-size:90%; letter-spacing:0.35px; line-height:17px; max-width:768px;">
<!-------------------------------------------------
LEFT FLOATING ICON
------------------------------------------------->
<div class="hidden-md-down">
<div style="z-index:-1; position:absolute; margin-top:80px; margin-left:-100px; transform:rotate(340deg)">
<!--
→ change [moon-stars] to a different icon
→ check out [fontawesome.com] for the options!
-->
<i class="faded fad fa-moon-stars fa-fw fa-9x text-primary"></i>
</div>
</div>
<!-------------------------------------------------
NAME
------------------------------------------------->
<div class="card p-3 bg-primary border-0 rounded-0 h-100" style="border-top-left-radius:20px">
<div class="text-uppercase text-center font-weight-bold" style="font-size:18px; letter-spacing:4px; color:#fff;">
<span>Name</span>
</div>
</div>
<!-------------------------------------------------
BASIC INFO
------------------------------------------------->
<div class="card bg-faded border-0 rounded-0 p-3" style="border-bottom-right-radius:20px">
<div class="row no-gutters p-1">
<!--------------------------------------------
CHARACTER IMAGE
--------------------------------------------->
<!--
→ best that the image is squared or 200x200!
-->
<div class="col-lg-4 p-1 d-flex my-auto">
<div class="mx-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="rounded-circle border-0 img-thumbnail p-2" style="max-width:190px">
</div>
</div>
<!--------------------------------------------
BASIC INFO
--------------------------------------------->
<div class="col-lg-8 p-1">
<div class="row no-gutters">
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">Alias</span><br>
<span>content</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">Age</span><br>
<span>content</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">Gender</span><br>
<span>content (prn/prns)</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">Species</span><br>
<span>content</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">Orientation</span><br>
<span>content</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">height</span><br>
<span>content</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">designer</span><br>
<span>username</span>
</div>
<div class="col-6 p-1 pb-2">
<span class="text-muted font-weight-bold" style="letter-spacing:1px">worth</span><br>
<span>$$$</span>
</div>
<!-- add/delete more above THIS line! -->
</div>
</div>
</div><hr class="mx-2 my-3 w-100">
<!-------------------------------------------------
BASIC INFO
------------------------------------------------->
<div class="row no-gutters p-1">
<!--------------------------------------------
SUMMARY
--------------------------------------------->
<!--
→ this does not scroll
→ looks best if kept relatively short
-->
<div class="col-lg-8 p-1">
<div class="text-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nunc faucibus a pellentesque sit. Non blandit massa enim nec dui.</p>
<p>Donec condimentum blandit congue. Vivamus sodales porta sem at vulputate. Ut a ex elit. Sed vel lacus vitae nisi consequat finibus. Fusce eu tempus arcu. Nulla placerat dapibus dolor non molestie. Vivamus a pellentesque purus. Donec maximus, enim ac vehicula convallis, diam nunc tempus erat, malesuada scelerisque augue neque eu nunc.</p>
</div>
</div>
<!--------------------------------------------
FUN FACT
--------------------------------------------->
<div class="col-lg-4 p-1">
<div class="pt-lg-0 pt-3 text-muted text-center d-flex h-100">
<span class="m-auto fa-stack fa-2x tooltipster" style="font-size:15px;"
title="Fun fact: write any outstanding fact about the character!!">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="far fa-question-circle text-white fa-stack-1x"></i>
</span>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
RIGHT FLOATING ICON
------------------------------------------------->
<div class="hidden-md-down">
<div style="z-index:-1; position:absolute; margin-top:-200px; margin-left:720px; transform:rotate(30deg)">
<!--
→ change [star] to a different icon
→ check out [fontawesome.com] for the options!
-->
<i class="text-primary faded fad fa-star fa-fw fa-9x"></i>
</div>
</div>
<!-------------------------------------------------
CREDITS
------------------------------------------------->
<div class="text-right p-1 mt-1 small" style="letter-spacing:3px">
<a href="https://toyhou.se/11412463.-f2u-surprise" class="text-muted tooltipster"
title="code by jiko" style="text-decoration:none">
<i class="far fa-code"></i>
</a>
<span class="faded">.</span>
<a href="LINK_TO_ARTIST" class="text-muted tooltipster"
title="art by ARTIST" style="text-decoration:none">
<i class="far fa-image"></i>
</a>
</div>
</div>
