<!-- ------------------------------
FOGGY — Partial Custom Colours version.
(code by jiko, layout by ArabicaBean)
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 the brackets or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
→ need more help with HTML? don't be afraid to PM me <3
ACCENTS : #aaaaaa
→ use contrl + f in the code editor to easily change them all!
------------------------------- -->
<div class="mx-auto mt-3" style="font-size:85%; letter-spacing:0.2px; max-width:756px;">
<!-- ------------------------------
BACKGROUND
------------------------------- -->
<div class="card-block border-0 p-3" style="border-radius:15px;
background-image:url(IMAGE URL INSIDE BRACKETS);
background-size: cover;
background-position: center;
background-attachment: scroll;">
<!-- ------------------------------------
HEADER
------------------------------------- -->
<!--
→ if the background image is bright, delete [text-white]
-->
<div class="card-block p-2 text-white">
<div class="justify-content-between" style="font-size:17px">
<span><i class="far fa-star fa-fw"></i></span>
<span style="letter-spacing:2px">(user)name</span>
</div>
</div>
<div class="tab-content row no-gutters">
<!-- ------------------------------
TAB BUTTONS
------------------------------- -->
<div class="col-lg-12 p-1 order-3">
<ul class="nav nav-pills pull-right">
<!-- ------------------------------------
FRONT PAGE
------------------------------------- -->
<li class="px-1">
<a class="btn bg-faded btn-outline-secondary active" style="font-size:95%; letter-spacing:1px; border-color:#aaaaaa; color:#aaaaaa"
data-toggle="tab" href="#foggyone">
profile
</a>
</li>
<!-- ------------------------------------
PLAYLIST
------------------------------------- -->
<li class="px-1">
<a class="btn bg-faded btn-outline-secondary" style="font-size:95%; letter-spacing:1px; border-color:#aaaaaa; color:#aaaaaa"
data-toggle="tab" href="#foggytwo">
playlist
</a>
</li>
<!-- ------------------------------------
FRIENDS OR CHARACTERS
------------------------------------- -->
<li class="px-1">
<a class="btn bg-faded btn-outline-secondary" style="font-size:95%; letter-spacing:1px; border-color:#aaaaaa; color:#aaaaaa"
data-toggle="tab" href="#foggythree">
friends
</a>
</li>
</ul>
</div>
<!-- ------------------------------------
LEFT SIDE, USER CONTENT
------------------------------------- -->
<div class="col-lg-4 p-2 order-lg-1">
<div class="card bg-faded p-3 w-100 h-100" style="border-color:#aaaaaa;">
<!-- ------------------------------------
IMAGE
------------------------------------- -->
<!--
→ best if squared or 200x200
→ delete [fr-rounded] if you want a square icon
-->
<div class="text-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded img-thumbnail p-2 mb-2" style="max-width:150px; max-height:150px; border-color:#aaaaaa;">
</div>
<!-- ------------------------------------
WORDS TO DESCRIBE YOURSELF
------------------------------------- -->
<!--
→ play around with the [font-size:#% | #px] if it gets too long :]
-->
<div class="text-center p-1 text-muted" style="font-size:88%"><i>
describe <i class="fas fa-angle-right fa-sm px-1"></i>
yourself <i class="fas fa-angle-right fa-sm px-1"></i>
here
</i></div>
<hr class="my-3 w-100">
<!-- ------------------------------------
ARTIST STATS
------------------------------------- -->
<div class="justify-content-between py-1">
<span class="text-muted">requests</span>
<span>status</span>
</div>
<div class="justify-content-between py-1">
<span class="text-muted">trades</span>
<span>status</span>
</div>
<div class="justify-content-between py-1">
<span class="text-muted">commisions</span>
<span>status</span>
</div>
</div>
</div>
<!-- ------------------------------------
RIGHT SIDE, TAB CONTENT
------------------------------------- -->
<div class="col-lg-8 p-2 order-lg-2">
<div class="card table-responsive tab-content bg-faded" style="border-color:#aaaaaa; height:330px">
<!-- ------------------------------------
01 // PROFILE
------------------------------------- -->
<div class="tab-pane fade active show" id="foggyone">
<div class="bg-faded p-3">
<!-- ------ TITLE ------------------------------ -->
<div class="pb-2" style="font-size:15px; letter-spacing:2px">
<i class="fas fa-star fa-sm pr-3"></i>| profile
</div><hr class="my-2 pb-1">
<!-- ------ SUMMARY OF YOURSELF + INTERESTS ------------------------------ -->
<!--
→ keep this somewhat short
-->
<div class="text-justify text-muted" style="height:140px; overflow:auto">
<p>Hi there! I'm (user)name, an artist based in the ancient lands of Palageia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit afoggytwom id est laborum.</p>
</div><hr>
<!-- ------ LINKS TO OTHER SOCIAL MEDIA ------------------------------ -->
<!--
→ for more website icons, head over to fontawesome and have a look!
-->
<div class="row no-gutters pt-3 text-center">
<div class="col">
<a href="LINK TO MEDIA" style="color:#aaaaaa">
<i class="fab fa-deviantart fa-2x"></i>
</a>
</div>
<div class="col">
<a href="LINK TO MEDIA" style="color:#aaaaaa">
<i class="fab fa-twitter fa-2x"></i>
</a>
</div>
<div class="col">
<a href="LINK TO MEDIA" style="color:#aaaaaa">
<i class="fab fa-trello fa-2x"></i>
</a>
</div>
<div class="col">
<a class="tooltipster" style="color:#aaaaaa" title="NAME#0000">
<i class="fab fa-discord fa-2x"></i>
</a>
</div>
<!-- (add/delete above THIS line!) -->
</div>
</div>
</div>
<!-- ------------------------------------
02 // PLAYLIST
------------------------------------- -->
<div class="tab-pane fade" id="foggytwo">
<div class="bg-faded p-3" style="min-height:310px; overflow:auto">
<!-- ------ TITLE ------------------------------ -->
<div class="pb-2" style="font-size:15px; letter-spacing:2px">
<i class="fas fa-music fa-sm pr-3"></i>| my playlist
</div><hr class="my-2 pb-1">
<!-- ------ PLAYLIST ------------------------------ -->
<div class="text-justify px-1" style="max-height:245px; overflow:auto">
<!-- --- SONG ONE --- -->
<div class="justify-content-between">
<span class="my-auto">
<a href="YOUTUBE LINK HERE" style="color:#aaaaaa">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">Song Title</span><br>
<span class="text-muted pull-right">Artist —</span>
</span>
</div><hr class="my-2 mb-3">
<!-- --- SONG TWO --- -->
<div class="justify-content-between">
<span class="my-auto">
<a href="YOUTUBE LINK HERE" style="color:#aaaaaa">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">Song Title</span><br>
<span class="text-muted pull-right">Artist —</span>
</span>
</div><hr class="my-2 mb-3">
<!-- --- SONG THREE --- -->
<div class="justify-content-between">
<span class="my-auto">
<a href="YOUTUBE LINK HERE" style="color:#aaaaaa">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">Song Title</span><br>
<span class="text-muted pull-right">Artist —</span>
</span>
</div><hr class="my-2 mb-3">
<!-- --- SONG FOUR --- -->
<div class="justify-content-between">
<span class="my-auto">
<a href="YOUTUBE LINK HERE" style="color:#aaaaaa">
<i class="fas fa-play-circle"></i>
</a>
</span>
<span>
<span class="font-italic pull-right">Song Title</span><br>
<span class="text-muted pull-right">Artist —</span>
</span>
</div><hr class="my-2 mb-3">
<!-- (add/delete above THIS line!) -->
</div>
</div>
</div>
<!-- ------------------------------------
03 // FRIEND OR CHARACTER LIST
------------------------------------- -->
<div class="tab-pane fade" id="foggythree">
<div class="bg-faded p-3" style="min-height:310px; overflow:auto">
<!-- ------ TITLE ------------------------------ -->
<div class="pb-2" style="font-size:15px; letter-spacing:2px">
<i class="fas fa-heart fa-sm pr-3"></i>| my friends
</div><hr class="my-2 pb-1">
<!-- ------ LIST ------------------------------ -->
<!--
→ best if squared or 200x200
→ delete [fr-rounded] if you want a square icon
-->
<div class="row no-gutters text-justify px-1" style="max-height:245px; overflow:auto">
<!-- --- FRIEND ONE --- -->
<div class="col-4 text-center p-1 pb-3">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded mb-2" style="width:100px; height:100px;">
<p><a href="LINK TO PROFILE" style="color:#aaaaaa">(user)name</a></p>
</div>
<!-- --- FRIEND TWO --- -->
<div class="col-4 text-center p-1 pb-3">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded mb-2" style="width:100px; height:100px;">
<p><a href="LINK TO PROFILE" style="color:#aaaaaa">(user)name</a></p>
</div>
<!-- --- FRIEND THREE --- -->
<div class="col-4 text-center p-1 pb-3">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded mb-2" style="width:100px; height:100px;">
<p><a href="LINK TO PROFILE" style="color:#aaaaaa">(user)name</a></p>
</div>
<!-- --- FRIEND FOUR --- -->
<div class="col-4 text-center p-1 pb-3">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded mb-2" style="width:100px; height:100px;">
<p><a href="LINK TO PROFILE" style="color:#aaaaaa">(user)name</a></p>
</div>
<!-- (add/delete above THIS line!) -->
</div>
</div>
</div>
<!-- add / delete tabs ABOVE this line! -->
</div>
</div>
<!-- don't touch the beloww -->
</div>
</div>
<!-- ------------------------------
CREDIT
------------------------------- -->
<div class="col-12 text-right small py-2" style="letter-spacing:4px">
<a href="https://toyhou.se/9335534.-f2u-user-foggy"
class="tooltipster" title="code by jiko" style="text-decoration:none; color:#aaaaaa">
<i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/ArabicaBean"
class="tooltipster" title="layout by ArabicaBean" style="color:#aaaaaa">
<i class="far fa-lightbulb"></i>
</a>
</div>
</div>
