[08] a walk in the woods user
created by:Skysong
Custom ColorsHTMLUser
Copy
<!--------------------------------------------------------------------------------------
A W A L K I N T H E W O O D S
> user version / recode
f2u code by skysong
c o l o r p a l e t t e
main bg #382e2e
dark bg #292222
text #dfcfcf
accent #c09090 / transparent: rgba(192,144,144, 0.5)
accent2 #d78b75 / transparent: rgba(215,139,117, 0.5)
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
TH fonts https://toyhou.se/23372355.fonts
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/32573189
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
<!------------------------------------------------------------ [ CONTENT CONTAINER ] -->
<div class="row m-auto" style="max-width:850px; font-family:serif; color:#dfcfcf;">
<!-------------------------------------------------------------------- [ LEFT SIDE ] -->
<div class="col-sm-5 p-0 d-flex flex-column">
<!--PROFILE IMAGE-->
<div class="m-2" style="position:relative; height:0; padding-bottom:100%; background-image:url(https://iili.io/dQgoAk7.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:5px 5px rgba(192,144,144, 0.5); ">
<!--[ background-image:url(EDITHERE) / replace with your image url ]-->
<!--TOGGLE ICON-->
<div class="m-3" style="position:absolute; bottom:0; right:0; z-index:1;">
<a href="#info" class="tooltipster" title="click for quick info" data-placement="left" data-toggle="collapse" role="button" style="font-size:35px;">
<!--ICON-->
<i class="fal fa-moon" style="color:#c09090; text-shadow:0px 0px 5px #d78b75"></i>
<!--[ class="fal fa-moon" / change fa-moon to the icon of your choice ]-->
</a></div>
<!------------------------------------------------------------------- [ QUICK INFO ] -->
<div class="h-100 w-100" style="position:absolute; top:0; overflow-y:scroll; scrollbar-width:none;">
<div class="collapse" id="info">
<div class="p-2" style="background:#382e2e">
<!--MUSIC PLAYER-->
<div class="mt-3 text-center" style="position:relative;">
<!--EMBED-->
<iframe frameborder="0" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; width:16px; height:16px; opacity:0.001"></iframe>
<!--[ https://www.youtube-nocookie.com/embed/EDITHERE / replace with just the part after v= in your video url]-->
<!--ICON-->
<img src="https://iili.io/dQbnSpe.png" style="width:35px; height:35px;">
</div> <!--end music player-->
<!--THE ACTUAL INFO-->
<div class="row mx-0 mt-4">
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-signature fa-fw mr-2" style="opacity:0.5"></i>
nickname(s)</span>
<span class="pull-right">something</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-calendar fa-fw mr-2" style="opacity:0.5"></i>
age</span>
<span class="pull-right">0 years</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-cake fa-fw mr-2" style="opacity:0.5"></i>
birthday</span>
<span class="pull-right">0.0.0000</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-comments fa-fw mr-2" style="opacity:0.5"></i>
pronouns</span>
<span class="pull-right">any/all</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-heart fa-fw mr-2" style="opacity:0.5"></i>
orientation</span>
<span class="pull-right">ramen</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-compact-disc fa-fw mr-2" style="opacity:0.5"></i>
song</span>
<span class="pull-right">title - artist</span></div>
<!--blank template------------------------>
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-tree fa-fw mr-2" style="opacity:0.5"></i>
template</span>
<span class="pull-right">blank</span></div>
<!--blank template w/ link---------------->
<div class="col-12">
<span style="color:#c09090">
<!--ICON-->
<i class="fa fa-tree fa-fw mr-2" style="opacity:0.5"></i>
template + link</span>
<span class="pull-right">
<a href="https://artfight.net" style="color:#d78b75;">blank</a>
</span></div>
</div>
<!--SPACER DIV / CREDITS-->
<!--[ do not edit! ]-->
<div class="align-items-end px-3" style="height:100px">
<!--LINK-->
<a href="https://toyhou.se" class="align-items-center" style="color:#d78b75; opacity:0.5; text-decoration:none;">
<!--ICON-->
<i class="fal fa-code mr-2"></i>
skysong
</a></div>
<!--[ this is to ensure the info box covers the entire image. sorry, couldn't figure out how to make it cover the whole thing while not setting a height so that the collapse animation would be smooth ]-->
</div></div></div> <!--end collapse-->
</div> <!--end profile image area-->
<!--FEATURED CHARACTERS-->
<div class="h-100 row m-2 " style="min-height:130px;">
<!--LEFT SIDE-->
<div class="col p-0 mr-2 d-flex flex-column">
<!--CHARACTER 1-->
<div class="mb-2" style="flex:1; background-image:url(https://iili.io/dQgx5ap.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:3px 3px rgba(215,139,117, 0.5); filter:brightness(0.6);">
<!--[ background-image:url(EDITHERE) / replace with your image url ]-->
<!--[ filter:brightness(0.6) / remove if you don't want the dark filter ]-->
</div>
<!--CHARACTER 2-->
<div style="flex:1; background-image:url(https://iili.io/dQgxtVa.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:3px 5px rgba(215,139,117, 0.5); filter:brightness(0.6);">
</div>
</div>
<!--CHARACTER 3-->
<div class="col" style="background:url(https://iili.io/dQgRmfn.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:5px 5px rgba(215,139,117, 0.5); filter:brightness(0.6);">
</div>
</div>
</div> <!--end left side-->
<!------------------------------------------------------------------- [ RIGHT SIDE ] -->
<div class="col-sm p-2">
<div class="row w-100 m-0" style="box-shadow:5px 5px rgba(192,144,144, 0.5);">
<!---------------------------------------------------------------------- [ SOCIALS ] -->
<div class="col-sm-auto py-3 d-flex flex-sm-column" style="background:#292222;">
<!--LINK 1-->
<div class="justify-content-center align-items-center" style="flex:1;">
<!--LINK / TOOLTIP-->
<a href="https://toyhou.se/" class="btn p-0" style="font-size:20px; box-shadow:none" data-toggle="tooltip" data-placement="right" title="social">
<!--[ href="EDITHERE" / replace with your link ]-->
<!--[ title="EDITHERE" / replace to edit the tooltip ]-->
<!--ICON-->
<i class="fal fa-leaf-maple" style="color:#c09090;"></i></a>
<!--[ fa-EDITHERE / replace with the icon of your choice ]-->
</div>
<!--LINK 2-->
<div class="justify-content-center align-items-center" style="flex:1;">
<!--LINK / TOOLTIP-->
<a href="https://toyhou.se/" class="btn p-0" style="font-size:20px; box-shadow:none" data-toggle="tooltip" data-placement="right" title="social">
<!--ICON-->
<i class="fal fa-holly-berry" style="color:#c09090;"></i>
</a></div>
<!--LINK 3-->
<div class="justify-content-center align-items-center" style="flex:1;">
<!--LINK / TOOLTIP-->
<a href="https://toyhou.se/" class="btn p-0" style="font-size:20px; box-shadow:none" data-toggle="tooltip" data-placement="right" title="social">
<!--ICON-->
<i class="fal fa-leaf" style="color:#c09090;"></i></a>
</div>
<!--LINK 4-->
<div class="justify-content-center align-items-center" style="flex:1;">
<!--LINK / TOOLTIP-->
<a href="https://toyhou.se/" class="btn p-0" style="font-size:20px; box-shadow:none" data-toggle="tooltip" data-placement="right" title="social">
<!--ICON-->
<i class="fal fa-mistletoe" style="color:#c09090;"></i></a>
</div>
</div> <!--end socials-->
<!---------------------------------------------------------------------- [ CONTENT ] -->
<div class="p-3 col-sm" style="background:#382e2e; height:500px; overflow:scroll; scrollbar-width:none;">
<!--USERNAME-->
<h1 style="font-family: monospace; font-size:25px; letter-spacing:5px; color:#c09090;">
<span style="opacity:0.5;;">@</span>
name
<span style="font-size:15px; letter-spacing:3px;">𖤣𖥧𓋼𖡼𓍊𖥧⋆ </span>
</h1>
<!--QUOTE-->
<div class="p-2 my-4 row mx-0" style="background-color:#292222;">
<!--LEFT ICON-->
<div class="col-auto p-0 align-items-start">
<i class="fa fa-mushroom" style="color:#c09090"></i>
</div>
<!--WORDS-->
<div class="col text-justify" style="text-transform:lowercase;">
a status, warning, short message, or something like that
</div>
<!--RIGHT ICON-->
<div class="col-auto p-0 align-items-end">
<i class="fa fa-mushroom" style="color:#c09090"></i>
</div>
</div>
<!--ABOUT TITLE-->
<div class="d-flex align-items-center">
<!--DIVIDER-->
<div class="mr-3" style="flex:1">
<hr style="border-color:rgba(215,139,117, 0.5); border-style:dotted;">
</div>
<!--TITLE-->
<h3 class="text-right mb-0" style="font-family:monospace; letter-spacing:5px; color:#d78b75">
about
</h3>
</div>
<!--ABOUT-->
<!--PARAGRAPH-->
<p> And here's where you +ﾟ･ yap ･ﾟ+</p>
<!--PARAGRAPH-->
<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.</p>
<!--PARAGRAPH-->
<p> Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--QUOTE-->
<div class="p-2 my-4 row mx-0" style="background-color:#292222;">
<!--LEFT QUOTATION-->
<div class="col-auto p-0 align-items-start">
<i class="fa fa-quote-left" style="color:#c09090"></i>
</div>
<!--WORDS-->
<div class="col text-justify" style="text-transform:lowercase;">
a quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!--RIGHT QUOTATION-->
<div class="col-auto p-0 align-items-end">
<i class="fa fa-quote-right" style="color:#c09090"></i>
</div>
</div>
<!--FEATURED TITLE-->
<div class="d-flex align-items-center">
<!--DIVIDER-->
<div class="mr-3" style="flex:1">
<hr style="border-color:rgba(215,139,117, 0.5); border-style:dotted;">
</div>
<!--TITLE-->
<h3 class="text-right mb-0" style="font-family:monospace; letter-spacing:5px; color:#d78b75">
featured
</h3>
</div>
<!--FEATURED 1-->
<div class="row m-0">
<!--ICON-->
<div class="col-auto" style="height:100px; width:100px; background:url(https://iili.io/dZuqJnt.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 0 5px #292222 inset"></div>
<!--TEXT-->
<div class="col">
<!--TITLE-->
<h4 style="font-family:monospace; color:#c09090;">
name
<!--LINK-->
<a href="https://toyhou.se/LINK_HERE" style="text-decoration:none; opacity:0.5; color:#d78b75;">
<!--[ href="EDITHERE" / replace with your OC's link ]-->
<i class="fal fa-link"></i></a>
</h4>
<!--DESCRIPTION-->
<p>A short description!</p>
</div>
</div>
<!--DIVIDER-->
<div class="mr-3" style="flex:1">
<hr style="border-color:rgba(215,139,117, 0.5); border-style:dotted; opacity:0.5;">
</div>
<!--FEATURED 2-->
<div class="row m-0 text-right">
<!--TEXT-->
<div class="col">
<!--TITLE-->
<h4 style="font-family:monospace; color:#c09090;">
<!--LINK-->
<a href="https://toyhou.se/LINK_HERE" style="text-decoration:none; opacity:0.5; color:#d78b75;">
<i class="fal fa-link"></i></a>
name
</h4>
<!--DESCRIPTION-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--ICON-->
<div class="col-auto" style="height:100px; width:100px; background:url(https://iili.io/dZuqJnt.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 0 5px #292222 inset"></div>
</div>
<!--DIVIDER-->
<div class="mr-3" style="flex:1">
<hr style="border-color:rgba(215,139,117, 0.5); border-style:dotted; opacity:0.5;">
</div>
<!--FEATURED 3-->
<div class="row m-0">
<!--ICON-->
<div class="col-auto" style="height:100px; width:100px; background:url(https://iili.io/dZuqJnt.png); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 0 5px #292222 inset"></div>
<!--TEXT-->
<div class="col">
<!--TITLE-->
<h4 style="font-family:monospace; color:#c09090;">
name
<!--LINK-->
<a href="https://toyhou.se/LINK_HERE" style="text-decoration:none; opacity:0.5; color:#d78b75;">
<i class="fal fa-link"></i></a>
</h4>
<!--DESCRIPTION-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!------------------------------------------------------------------------------------->
</div> <!--end content-->
</div> <!--end right content-->
</div> <!--end right side-->
<!------------------------------------------------------------------------------------->
</div> <!--end content container-->