<!-------------------------------------------------
User Onigiri — Custom Coloured version.
(code by jiko, layout by Togo)
------------------------------
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 (in display settings)
→ 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
→ accent 1 ----------- #8dbda3
→ accent 2 ----------- #d1cba9
→ accent 3 ----------- #47a491
→ bg-1 ----------- #f5f5f5
→ text ------ #3a4b5f
→ hr ------------- #ffffff
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="container-fluid shadow p-3" style="font-size:95%; background-image:url(https://static.tumblr.com/d40eae727a79de74c5b3c4cb5c8e9fd5/2pnwama/HC7pfqdws/tumblr_static_e6k5mmnyclc0c488gcsk00wgo.png);">
<div class="row no-gutters mx-auto" style="color:#3a4b5f; max-width:1000px">
<!-------------------------------------------------
FEATURED CHARACTERS OR FRIENDS
------------------------------------------------->
<div class="col-lg-3 my-auto">
<div class="row no-gutters ml-lg-4">
<!-- if the names are long and it looks broken on mobile, substitute it for a nickname or make the make smaller! -->
<!-- ONE
------------------------------------------>
<div class="col-lg-12 col-4 p-2">
<div class="p-2" style="background-color:#47a491; box-shadow:-8px 8px 0px #d1cba9;max-width:200px">
<div style="padding-bottom:100%;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
<div class="mt-2 text-center text-monospace">
<a href="link_here_pls" style="color:#f5f5f5; text-decoration:none">
Name
</a>
</div>
</div>
</div>
<!-- TWO
------------------------------------------>
<div class="col-lg-12 col-4 p-2">
<div class="p-2" style="background-color:#8dbda3; box-shadow:-8px 8px 0px #47a491; max-width:200px">
<div style="padding-bottom:100%;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
<div class="mt-2 text-center text-monospace">
<a href="link_here_pls" style="color:#f5f5f5; text-decoration:none;">
Long Name
</a>
</div>
</div>
</div>
<!-- THREE
------------------------------------------>
<div class="col-lg-12 col-4 p-2">
<div class="p-2" style="background-color:#d1cba9; box-shadow:-8px 8px 0px #8dbda3; max-width:200px">
<div style="padding-bottom:100%;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
<div class="mt-2 text-center text-monospace">
<a href="link_here_pls" style="color:#f5f5f5; text-decoration:none">
Longer Name
</a>
</div>
</div>
</div>
<!-- without extensive editing, this only supports THREE! -->
</div>
</div>
<!-------------------------------------------------
PROFILE CONTENT
------------------------------------------------->
<div class="col-lg-9">
<div class="row no-gutters p-0">
<!-- ABOUT YOU
------------------------------------------>
<div class="col-lg-7 p-2">
<div class="p-3 mb-3 font-italic text-monospace lead text-lg-left text-center" style="color:#47a491; background-color:#f5f5f5">
(user)name !!
</div>
<div class="row no-gutters">
<!-- SUMMARY -------------------------------------->
<div class="col-9">
<div class="p-3 pr-5" style="background-color:#f5f5f5;">
<p class="text-monospace faded" style="color:#47a491">pro / nouns / here</p>
<div class="table-responsive mb-2" style="height:206px">
<p>This scrolls!</p>
<p>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>boo!</p>
</div>
<p class="text-center" style="letter-spacing:0.5em">
<!-- view more icons at fontawesome.com -->
<a href="LINK_TO_SOCIAL" style="color:#47a491; text-decoration:none">
<i class="fas fa-id-card fa-lg"></i>
</a>
<a href="LINK_TO_SOCIAL" style="color:#47a491; text-decoration:none">
<i class="fab fa-deviantart fa-lg"></i>
</a>
<a href="LINK_TO_SOCIAL" style="color:#47a491; text-decoration:none">
<i class="fab fa-twitter fa-lg"></i>
</a>
<a href="LINK_TO_SOCIAL" style="color:#47a491; text-decoration:none">
<i class="fab fa-instagram-square fa-lg"></i>
</a>
<a class="tooltipster" title="DISCORD#0000"style="color:#47a491; text-decoration:none">
<i class="fab fa-discord fa-lg"></i>
</a>
<!-- add/delete links above THIS line! -->
</p>
</div>
</div>
<!-- PAGEDOLL (OPT.) -------------------------------------->
<div class="col-3" style="z-index:420; position:relative;">
<div class="ml-n5 mr-lg-n3 mr-n4 h-100" style="min-height:300px; background-repeat:no-repeat;
background-image:url(IMG_LINK_HERE);
/* SIZING
----------------------------------------
→ default is [contain] or [cover]
→ if you need to zoom in a pagedoll, use [#px] and adjust when appropricate!
(higher number, more zoomed in)
---------------------------------------- */;
background-size:contain;
/* POSITIONING
----------------------------------------
→ if using [top center/left/right] does not work, use numbers [#px #px]!
→ first value controls the horizontal positioning, second value controls the vertical positioning
(tip: it can be negative hehe)
---------------------------------------- */;
background-position:center;">
</div>
</div>
</div>
</div>
<!-- WARNING + PREFERENCES
------------------------------------------>
<!--
→ preferences could be replaced with a byi (before you interact) or dni (do not interact)!
-->
<div class="col-lg-5 p-2">
<div class="p-3 table-responsive" style="height:381px; background-color:#f5f5f5">
<!-- WARNING BOX -------------------------------------->
<!--
→ keep the warning roughly a paragraph long for a nicer look :]
-->
<div class="p-3 mb-3" style="color:#f5f5f5; background-color:#47a491">
<b><i class="fas fa-exclamation-triangle"></i> WARNING!</b>
<hr class="my-2" style="border-color:#f5f5f5; opacity:0.2">
<p>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.</p>
</div>
<!-- LIKES -------------------------------------->
<p>
<i class="far fa-heart fa-fw mr-1"></i> thing, thing, thing, thing, MANY things, can't go wrong here thing
</p>
<!-- DISLIKES -------------------------------------->
<p>
<i class="far fa-times fa-fw mr-1"></i> thing, thing, thing, thing, MANY things, can't go wrong here thing
</p>
</div>
</div>
<!-- MISC. INFO
------------------------------------------>
<div class="col-12 p-2">
<div class="p-3" style="min-height:320px; background-color:#f5f5f5;">
<div class="row no-gutters mb-3">
<!-- ART STATUS -------------------------------------->
<div class="col-lg-4 p-2">
<div class="justify-content-between text-monospace">
<span>commissions</span>
<span>status</span>
</div><hr class="my-2" style="border-color:#3a4b5f; opacity:0.1">
<div class="justify-content-between text-monospace">
<span>art trades</span>
<span>status</span>
</div><hr class="my-2" style="border-color:#3a4b5f; opacity:0.1">
<div class="justify-content-between text-monospace">
<span>requests</span>
<span>status</span>
</div><hr class="mt-2" style="border-color:#3a4b5f; opacity:0.1">
<ul class="ml-3 mb-0 fa-ul">
<li class="my-1"><span class="fa-li"><i class="far fa-pencil fa-sm my-auto"></i></span>
<a href="LINK_HERE" class="text-reset">link to tos</a>
</li>
<li class="my-1"><span class="fa-li"><i class="far fa-dollar fa-sm my-auto"></i></span>
currency you take
</li>
<li class="my-1"><span class="fa-li"><i class="far fa-globe fa-sm my-auto"></i></span>
your timezone?
</li>
<!-- add a few more here if you like! -->
</ul>
</div>
<!-- MUSIC BOX -------------------------------------->
<div class="col-lg-7 ml-auto p-2">
<div class="text-monospace text-center font-italic mb-3">
artist - song title
</div>
<div class="w-100" style="position:relative; top:0; height:220px; overflow:hidden; box-shadow:10px 10px 0px #47a491">
<!--
→ replace [ ElkuSVwNx_o ] with your youtube id (found after https://www.youtube.com/watch?v=)
→ keep the [ ?controls=0 ] at the end for a nicer preformance !!
-->
<iframe class="w-100" frameborder="0"
src="https://www.youtube.com/embed/ElkuSVwNx_o?controls=0"
style="height:340px; position:absolute; top:-60px; left:0;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
ME CREDITS
(do not remove ty!)
------------------------------------------------->
<div class="col-12 p-2">
<div class="text-right small p-2 px-3 ml-lg-4" style="background-color:#f5f5f5; color:#8dbda3">
<a href="https://toyhou.se/14408501.-f2u-user-onigiri" class="text-monospace font-italic" style="color:#47a491; text-decoration:none">code by jiko</a>
<span class="mx-1">|</span>
<a href="https://toyhou.se/togo" class="text-monospace font-italic" style="color:#47a491; text-decoration:none">layout by togo</a>
</div>
</div>
</div>
</div>
<!-- code ends -->
