<!--
THIS CODE USES CUSTOM COLORS!!! If you want to change them here they are:
MAIN ACCENT - #745F8D
MIDDLE FRIEND BUTTON - #2F2E34
I am also BEGGING YOU to turn off WYSIWYG, or this code will not work for you.
-->
<!--CONTAINER-->
<div class="container mx-auto my-5" style="max-width:1100px;">
<div class="row no-gutters flex-row-reverse mb-0">
<!--RIGHT IMAGE-->
<div class="col-lg-4 mb-3 pl-2">
<div class="card p-2" style="height:650px; border-radius:0 50px 50px 0; background-image:url(
https://images.unsplash.com/photo-1607773709367-06b7a91f7e4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3798&q=80
); background-position:center; background-size:cover; background-repeat:no-repeat; border:none;">
<!--RIGHT IMAGE CREDIT - Do NOT remove this (Toyhou.se requires aesthetic images you did not create to be credited). Replace the link with the credit for the image above.-->
<a href="
https://unsplash.com/photos/6uSUUyjTwSM
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:7px; right:10px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000; Recommended: #745F8D; OR use custom color-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#745F8D;" title="Image Credit"></i>
</a>
</div>
</div>
<!--HEADER ICON - Use a SQUARE image to prevent this being squished! Your PFP is a good idea here.-->
<div class="col-8 pr-2 pr-md-0">
<div class="d-inline-flex pl-2 bg-faded" style="width:100%; border-radius:50px 0 0 0;">
<img src="
IMG URL
" class="fr-rounded bg-faded p-2" style="height:150px; margin-top:-50px;">
<!--HEADER INFO-->
<div class="ml-2">
<span style="font-size:2.7em; font-family: georgia, serif; letter-spacing:4px;"><i>
user
</i></span>
<div><span style="font-size:0.9em; letter-spacing:2px; color:#745F8D;">
Pronouns ⟡ Age ⟡ Etc
</span>
</div>
</div>
</div>
<!--DIVIDER IMAGE - Please note this is extremely narrow and will crop to the center of your chosen image!-->
<div class="card p-2" style="height:50px; background: url(
https://images.unsplash.com/photo-1607851673372-d3a481942bf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3870&q=80
); background-position:center; background-size:cover; background-repeat:no-repeat; border:none; border-radius:0;">
<!--DIVIDER IMAGE CREDIT - Do NOT remove this (Toyhou.se requires aesthetic images you did not create to be credited). Replace the link with the credit for the image above.-->
<a href="
https://unsplash.com/photos/cBkHr5RuooA
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:2px; right:5px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000; Recommended: #745F8D; OR use custom color-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#745F8D;" title="Image Credit"></i>
</a>
</div>
<!--SMALL TEXT/NOTICE - Try to keep it short!-->
<div class="mt-2 pr-2 pr-md-0 justify-content-center">
<i class="fal fa-flask-round-poison p-3" style="color:#745F8D; font-size:18px;"></i>
<hr class="flex-fill my-auto mx-2">
<p class="p-3 text-muted" style="font-size:0.9em;">Bit of text goes here.</p>
</div>
<!--INTRO BLOCK - This scrolls, so don't worry about taking up too much space!-->
<div class="pr-2 pr-md-0" style="overflow: auto; height: 130px;">
<p class="text-center p-2">
<span style="font-size:1.6em; font-family: georgia, serif; color:#745F8D;"><b>T</b></span>he first letter or word can go in the span brackets to make things fancy.
<br><br>
To make a new paragraph, copy and paste the two line breaks (above in the code). I don't recommend making it long, though--that's a lot of scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis in eu mi bibendum neque egestas congue.
<!-------ADD MORE ABOVE THIS LINE------->
</p>
</div>
<!--FRIENDS SECTION-->
<!--FIRST FRIEND-->
<div class="row no-gutters my-3">
<div class="col card border-0 py-3 mx-1 justify-content-center" style="background: #745F8D;">
<a href="FRIEND URL" style="color:#fff;">
<p class="text-center"><i class="fal fa-hand-holding-magic p-1"></i>
name
</p>
</a>
</div>
<!--SECOND FRIEND-->
<div class="col card border-0 py-3 mx-1 justify-content-center" style="background: #2F2E34;">
<a href="FRIEND URL" style="color:#fff;">
<p class="text-center"><i class="fal fa-candle-holder p-1"></i>
name
</p>
</a>
</div>
<!--THIRD FRIEND-->
<div class="col card border-0 py-3 mx-1 justify-content-center" style="background: #745F8D;">
<a href="FRIEND URL" style="color:#fff;">
<p class="text-center"><i class="fal fa-wand-sparkles p-1"></i>
name
</p>
</a>
</div>
</div>
<!--LOWER LEFT IMAGE-->
<div class="row no-gutters my-3">
<div class="col-sm-4 pr-2">
<div class="card p-2" style="height:218px; border-radius:0 0 0 50px; background-image:url(
https://images.unsplash.com/photo-1590725142982-75df9e332f75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3872&q=80
); background-position:center; background-size:cover; background-repeat:no-repeat; border:none;">
<!--LOWER LEFT IMAGE CREDIT - Do NOT remove this (Toyhou.se requires aesthetic images you did not create to be credited). Replace the link with the credit for the image above.-->
<a href="
https://unsplash.com/photos/5cKtwturr3g
"
class="d-block text-white" target="_BLANK" style="position:absolute; bottom:7px; right:10px;">
<!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000; Recommended: #745F8D; OR use custom color-->
<i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#745F8D;" title="Image Credit"></i>
</a>
</div>
</div>
<!--COMMISSION INFO - "success" indicates open, "warning" indicates ask or friends only, and "danger" indicates no/closed.-->
<div class="col-8 bg-faded p-2" style="height: 218px; overflow: auto;">
<div class="p-2" style="font-size:0.9em;">
<div class="d-flex justify-content-between mb-2">
<i class="fad fa-dollar-sign float-left m-1 text-muted"/>
<span style="letter-spacing:1px;"><i>
commissions
</i></span>
<hr class="flex-fill my-auto mx-2">
<span class="text-right text-success">
OPEN
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<i class="fad fa-right-left float-left m-1 text-muted"/>
<span style="letter-spacing:1px;"><i>
art trades
</i></span>
<hr class="flex-fill my-auto mx-2">
<span class="text-right text-warning">
ASK
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<i class="fad fa-paintbrush-pencil float-left m-1 text-muted"/>
<span style="letter-spacing:1px;"><i>
collabs
</i></span>
<hr class="flex-fill my-auto mx-2">
<span class="text-right text-warning">
FRIENDS ONLY
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<i class="fad fa-gift float-left m-1 text-muted"/>
<span style="letter-spacing:1px;"><i>
requests
</i></span>
<hr class="flex-fill my-auto mx-2">
<span class="text-right text-danger">
NEVER
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<i class="fad fa-tags float-left m-1 text-muted"/>
<span style="letter-spacing:1px;"><i>
character offers
</i></span>
<hr class="flex-fill my-auto mx-2">
<span class="text-right text-danger">
CLOSED
</span>
</div>
<!--SOCIAL MEDIA LINKS - Icons are taken off https://fontawesome.com/icons. To replace, brand icons use fab at the beginning, and others use fas.-->
<p>
<div class="p-1 text-center">
<span class="text-muted" style="font-size:1.5em;">
<!--TO ADD MORE - Copy and paste a marked section above the line!-->
<!------BEGIN COPY HERE----->
<a class="fas fa-address-card tooltipster" style="color:#745F8D;" title="carrd"
href="SITE URL"></a>
|
<!-----END COPY HERE----->
<a class="fab fa-instagram tooltipster" style="color:#745F8D;" title="instagram"
href="SITE URL"></a>
|
<a class="fab fa-tumblr tooltipster" style="color:#745F8D;" title="tumblr"
href="SITE URL"></a>
|
<a class="fas fa-paintbrush-pencil tooltipster" style="color:#745F8D;" title="art fight"
href="SITE URL"></a>
|
<!-----ADD MORE ABOVE THIS LINE----->
<!--DISCORD - This one is a little different in the sense that it is not a link and instead will display your username when you hover your mouse over it.
Please note if you choose to remove this section, you will have to remove the last line of the above section!-->
<span class="fab fa-discord tooltipster" style="color:#745F8D;" title="discord user"></span>
</span>
</div>
</p>
</div>
</div>
</div>
</div>
<!--CONTAINER END + CREDIT - DO NOT REMOVE.-->
</div>
<div class="text-center mt-0">
<a href="/Kork" class="tooltipster" title="Code by Kork" style="color:#745F8D;"><i class="fal fa-syringe" ></i></a>
</div>
</div>