<!-- ------------------------------
FOGGY — Bootstrap 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 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
→ set to -primary
view other bootstrap colours if you're interested!
------------------------------- -->
<div class="mx-auto mt-3" style="font-size:85%; letter-spacing:0.2px; max-width:756px;">
<!-- ------------------------------
BACKGROUND
→ change the background to whatever you want, the original request was for a foggy background so i left it as it is! ^^
------------------------------- -->
<div class="card-block border-0 p-3" style="border-radius:15px;
background-image:url(https://images.unsplash.com/photo-1608806875874-b4837ec38f88?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1411&q=80);
background-size: cover;
background-position: center;
background-attachment: scroll;
/* GREYSCALE BUT OPTIONAL FILTER
====================================== */;
background-color: #656b67;
background-blend-mode: luminosity;">
<!-- ------------------------------------
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;"
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;"
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;"
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">
<!-- ------------------------------------
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">
</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="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 anim 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">
<i class="fab fa-deviantart fa-2x"></i>
</a>
</div>
<div class="col">
<a href="LINK TO MEDIA">
<i class="fab fa-twitter fa-2x"></i>
</a>
</div>
<div class="col">
<a href="LINK TO MEDIA">
<i class="fab fa-trello fa-2x"></i>
</a>
</div>
<div class="col">
<a class="text-primary tooltipster" 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">
<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">
<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">
<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">
<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 / 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">(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">(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">(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">(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 !important">
<i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/ArabicaBean"
class="tooltipster" title="layout by ArabicaBean">
<i class="far fa-lightbulb"></i>
</a>
</div>
</div>
