<!-- ------------------------------
Advanced Neopets — Custom Colours Version
(commissioned code by jiko, layout by vehemourn)
--
RULES
→ [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
--
TIPPY TIPS
→ insert your img links INSIDE 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
(feel free to mix and match things with other colours!)
→ main background : #e1e1e1
→ bg-faded : #b0b0b0
→ header bg 2 : #4b4b4b
→ header bg 1 : #1e1e1e
→ normal text : #242424
→ text-muted : #b0b0b0
→ tab bg : #1e1e1e
→ tab text color : #fff
use control + f in the code editor to easily change them all!
------------------------------- -->
<div class="mx-auto" style="color:#242424; font-size:95%; max-width:840px">
<div class="row no-gutters">
<!-- -----------------------------------
00 || NAVIGATION TABS
------------------------------------ -->
<!--
→ delete [border-top-left-radius:10px] and [border-top-right-radius:10px] if
you want squared corners
-->
<div class="col-lg-7 col-9">
<ul class="nav row no-gutters text-center">
<!-- ------------------------------------
0.1 || PROFILE
------------------------------------- -->
<li class="nav-item col mr-2" style="border-top-left-radius:10px; background:#1e1e1e">
<a href="#one" data-toggle="tab" class="active btn btn-outline-secondary text-uppercase w-100 rounded-0 border-0"
style="letter-spacing:2.5px; border-top-left-radius:10px; color:#fff">
<span class="hidden-sm-down">Profile</span>
<span class="hidden-md-up"><i class="fas fa-user fa-fw m-2"></i></span>
</a>
</li>
<!-- ------------------------------------
0.2 || INVENTORY
------------------------------------- -->
<li class="nav-item col" style="background:#1e1e1e">
<a href="#two" data-toggle="tab" class="btn btn-outline-secondary text-uppercase w-100 rounded-0 border-0"
style="letter-spacing:2.5px; color:#fff">
<span class="hidden-sm-down">Inventory</span>
<span class="hidden-md-up"><i class="fas fa-treasure-chest fa-fw m-2"></i></span>
</a>
</li>
<!-- ------------------------------------
0.3 || WARDROBE
------------------------------------- -->
<li class="nav-item col ml-2" style="border-top-right-radius:10px; background:#1e1e1e">
<a href="#three" data-toggle="tab" class="btn btn-outline-secondary text-uppercase w-100 rounded-0 border-0"
style="letter-spacing:2.5px; border-top-right-radius:10px; color:#fff">
<span class="hidden-sm-down">Wardrobe</span>
<span class="hidden-md-up"><i class="fas fa-tshirt fa-fw m-2"></i></span>
</a>
</li>
</ul>
</div>
<!-- ------------------------------
01 || TAB CONTENT
------------------------------- -->
<div class="col-lg-12">
<div class="tab-content table-responsive" style="height:595px; background:#e1e1e1">
<!-- ------------------------------------
1.1 || PROFILE
------------------------------------- -->
<div class="tab-pane fade active show" id="one">
<div class="row no-gutters">
<!-- ------ IMAGE ------------------------------ -->
<!--
→ for best looks, use an image in portrait mode!
-->
<div class="col-lg-4 p-3 pr-lg-0 order-lg-1 order-2">
<div class="h-100 w-100" style="min-height:350px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat">
</div>
</div>
<!-- ------ NAME / DIVIDER ------------------------------ -->
<!--
→ you need to write the name in twice! there is a header for desktop view and a header for mobile view!
→ visit [fontawesome.com] for more icons to suit your character
-->
<div class="col-lg-1 order-lg-3 order-1">
<div class="h-100 p-3" style="background:#1e1e1e">
<h1 class="p-md-1" style="color:#b0b0b0">
<!-- --- NAME FOR DESKTOP VIEW --- -->
<i class="far fa-seedling fa-fw mb-md-3 hidden-md-down"></i>
<h1 class="display-4 font-weight-bold text-uppercase fa-rotate-90 hidden-md-down" style="font-size:20px; letter-spacing:4px; color:#b0b0b0;">
Name
</h1>
<!-- --- NAME FOR MOBILE VIEW --- -->
<h1 class="display-4 font-weight-bold text-uppercase hidden-lg-up" style="font-size:20px; letter-spacing:4px; color:#b0b0b0;">
<i class="far fa-seedling fa-fw mr-md-3"></i>
Name
</h1>
</h1>
</div>
</div>
<!-- ------ BASIC INFO ------------------------------ -->
<div class="col-lg p-3 order-lg-2 order-3">
<div class="row no-gutters">
<!-- --- SUMMARY --- -->
<div class="col-lg-12 py-1 mb-2">
<div class="text-uppercase p-2 px-3 mb-0 w-100" style="position:relative; bottom:-20px; left:-25px; margin-top:-30px; color:#b0b0b0">
<blockquote class="m-0 justify-content-between" style="font-size:18px; letter-spacing:3px; border-width:3px; border-color:#b0b0b0; background:#4b4b4b">
Summary
<i class="far fa-user fa-fw my-auto"></i>
</blockquote>
</div>
<div class="p-3 pt-4" style="background:#b0b0b0">
<p>Everything on this tab does not scroll! Donec condimentum blandit congue. Vivamus sodales porta sem at vulputate. Ut a ex elit. Sed vel lacus vitae nisi consequat finibus. Fusce eu tempus arcu.</p>
<p>Nulla placerat dapibus dolor non molestie. Vivamus a pellentesque purus. Donec maximus, enim ac vehicula convallis, diam nunc tempus erat, malesuada scelerisque augue neque eu nunc!</p>
</div>
</div>
<!-- --- PREFERENCES --- -->
<!--
→ could be replaced with likes, dislikes, hobbies, traits or
anything you want!
-->
<div class="col-lg-12 py-1">
<div class="row no-gutters">
<div class="col-6 pr-2">
<div class="h-100" style="background:#b0b0b0">
<div class="text-uppercase p-1 px-3 w-100 d-flex" style="font-size:1rem; letter-spacing:3px; background:#4b4b4b; color:#b0b0b0">
Likes
</div>
<div class="p-1">
<ul class="fa-ul mt-2">
<li class="my-1"><span class="fa-li">
<i class="far fa-heart fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-heart fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-heart fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-heart fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-heart fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<!-- add / delete more above THIS line! -->
</ul>
</div>
</div>
</div>
<div class="col-6 pl-2">
<div class="h-100" style="background:#b0b0b0">
<div class="text-uppercase p-1 px-3 w-100 d-flex" style="font-size:1rem; letter-spacing:3px; background:#4b4b4b; color:#b0b0b0">
Disikes
</div>
<div class="p-1">
<ul class="fa-ul mt-2">
<li class="my-1"><span class="fa-li">
<i class="far fa-times fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-times fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-times fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-times fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-times fa-fw fa-sm"></i></span>
<p>content</p>
</li>
<!-- add / delete more above THIS line! -->
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- --- NOTES --- -->
<div class="col-lg-12 py-1">
<div class="text-uppercase p-2 px-3 mb-0 w-100" style="position:relative; bottom:-20px; left:-25px; margin-top:-20px; color:#b0b0b0">
<blockquote class="m-0 justify-content-between" style="font-size:18px; letter-spacing:3px; border-width:3px; border-color:#b0b0b0; background:#4b4b4b">
Notes
<i class="far fa-star fa-fw my-auto"></i>
</blockquote>
</div>
<div class="p-1" style="background:#b0b0b0">
<ul class="fa-ul pt-3">
<li class="my-1"><span class="fa-li">
<i class="far fa-angle-right fa-fw fa-sm"></i></span>
<p>Vestibulum a rutrum dolor.</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-angle-right fa-fw fa-sm"></i></span>
<p>Integer venenatis suscipit magna.</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-angle-right fa-fw fa-sm"></i></span>
<p>sed tincidunt dolor tempor in.</p>
</li>
<li class="my-1"><span class="fa-li">
<i class="far fa-angle-right fa-fw fa-sm"></i></span>
<p>Donec facilisis erat vel efficitur mattis.</p>
</li>
<!-- add / delete more above THIS line! -->
</ul>
</div>
</div>
<!-- add / delete more sections above THIS line! -->
</div>
</div>
</div>
</div>
<!-- ------------------------------------
1.2 || INVENTORY
------------------------------------- -->
<!--
→ this code assumes you're using the neopet's item's description.
however, there are instructions on how to add a scrolling feature if needed.
-->
<div class="tab-pane fade" id="two">
<div class="row no-gutters">
<!-- ------ IMAGE ------------------------------ -->
<!--
→ make sure the focus is in the (top) center!
otherwise, change the [background-position:center] to: top, bottom, left, right
you can combine values as well (e.g. left top, right center, etc.)!
-->
<div class="col-lg-5 p-3 order-lg-1 order-1">
<div class="h-100 w-100" style="min-height:350px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat">
</div>
</div>
<!-- ------ INVENTORY ------------------------------ -->
<div class="col-lg-7 p-3 order-lg-2 order-2">
<div class="text-uppercase px-3 mb-2 w-100" style="position:relative; bottom:-20px; left:-25px; margin-top:-20px; color:#b0b0b0; z-index:2">
<blockquote class="m-0 justify-content-between" style="font-size:18px; letter-spacing:3px; border-width:3px; border-color:#b0b0b0; background:#4b4b4b;">
Inventory
<i class="far fa-treasure-chest fa-fw my-auto"></i>
</blockquote>
</div>
<!-- ------------------------------------------------------------
HOW TO INSERT IMAGES (FROM NEOPETS)
→ go to the website [https://items.jellyneo.net/] and click on the item
→ when you are on that item's profile, scroll down until you see a header that says IMAGE under STATUS
→ copy the IMAGE link and paste it wherever appropriate (using Copy Image/Address DOES NOT work!)
→ general note that: to check if you got the right link, it should NOT have numbers!
NO : https://items.jellyneo.net/assets/imgs/items/69385.gif?797
YES : https://images.neopets.com/items/mall_acc_pastelrainbowwig.gif
------------------------------------------------------------ -->
<div id="inventorycarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<div class="carousel-inner">
<!--------- SLIDE ONE --------->
<div class="carousel-item active">
<div class="row no-gutters p-3" style="height:470px; overflow:auto; background:#b0b0b0">
<!-- ITEM ONE -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px;">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- ITEM IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail h-100 rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<!--
→ if you want a scrolling feature,
add [style="height:100px; overflow:auto"] next to div
-->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM TWO -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- ITEM IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail h-100 rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM THREE -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM FOUR -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM FIVE -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM SIX -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
</div>
</div>
<!-- --- SLIDE ONE END --- -->
<!-- --- SLIDE TWO --- -->
<div class="carousel-item">
<div class="row no-gutters p-3" style="height:470px; overflow:auto; background:#b0b0b0">
<!-- ITEM ONE -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM TWO -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM THREE -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM FOUR -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM FIVE -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
<!-- ITEM SIX -->
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-lg-12">
<div class="text-uppercase" style="letter-spacing:1px">
Item Name
</div>
</div><hr class="w-100 mt-1 mb-2" style="border-color:#242424; opacity:0.2">
<!-- IMAGE -->
<div class="col-lg-5 col-auto">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 border-0 p-2"
style="max-height:80px; max-width:80px; background:#e1e1e1">
</div>
<!-- DESCRIPTION -->
<div class="col pl-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>
</div>
</div>
</div>
</div>
<!-- --- SLIDE TWO END --- -->
<!-- add / delete more slides above THIS line! -->
</div>
<!-- ------ CAROUSEL BUTTONS ------------------------------ -->
<div class="p-3 w-100 justify-content-between" style="background:#1e1e1e">
<!-- --- PREV --- -->
<a class="my-auto" data-slide="prev" href="#inventorycarousel" aria-hidden="true" style="color:#b0b0b0">
<i class="far fa-angle-left fa-fw fa-lg"></i>
</a>
<!-- --- NEXT --- -->
<a class="my-auto" data-slide="next" href="#inventorycarousel" aria-hidden="true" style="color:#b0b0b0">
<i class="far fa-angle-right fa-fw fa-lg"></i>
</a>
</div>
</div>
</div>
<!-- INVENTORY end -->
</div>
</div>
<!-- -----------------------------
1.3 || WARDROBE
------------------------------ -->
<!--
→ depending on the image, you may need to change [background-size:cover] to [background-size:contain] for a cleaner look!
for a general guide...
images with transparent backgrounds : contain
images with coloured backgrounds OR shorter than 300px : cover
-->
<div class="tab-pane fade" id="three">
<div id="wardrobecarousel" class="carousel slide p-3" data-interval="false" data-ride="carousel">
<!-- ------ CAROUSEL BUTTONS ------------------------------ -->
<div class="p-3 w-100 justify-content-between" style="background:#1e1e1e; color:#b0b0b0">
<!-- --- PREV --- -->
<a class="my-auto" data-slide="prev" href="#wardrobecarousel" aria-hidden="true" style="color:#b0b0b0">
<i class="far fa-angle-left fa-fw fa-lg"></i>
</a>
<!-- --- HEADER --- -->
<span><div class="text-center text-uppercase w-100" style="font-size:18px; letter-spacing:3px;">
Wardrobe
</div></span>
<!-- --- NEXT --- -->
<a class="my-auto" data-slide="next" href="#wardrobecarousel" aria-hidden="true" style="color:#b0b0b0">
<i class="far fa-angle-right fa-fw fa-lg"></i>
</a>
</div>
<!-- ------ WARDROBE ------------------------------ -->
<div class="carousel-inner">
<!-- --- SLIDE ONE --- -->
<div class="carousel-item active" style="height:500px; overflow:auto;">
<div class="row no-gutters pt-2 px-3 pb-0" >
<!-- OUTFIT ONE -->
<div class="col-lg-4 p-2">
<!-- NAME -->
<div class="text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px; color:#b0b0b0; background:#4b4b4b">
Outfit Name
</div>
<!-- IMAGE -->
<div class="w-100" style="min-height:300px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
<!-- DESCRIPTION -->
<div class="p-3 text-justify" style="height:110px; overflow:auto; background:#b0b0b0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- OUTFIT TWO -->
<div class="col-lg-4 p-2">
<!-- NAME -->
<div class="text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px; color:#b0b0b0; background:#4b4b4b">
Outfit Name
</div>
<!-- IMAGE -->
<div class="w-100" style="min-height:300px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
<!-- DESCRIPTION -->
<div class="p-3 text-justify" style="height:110px; overflow:auto; background:#b0b0b0">
<p>This is a short descrip!</p>
</div>
</div>
<!-- OUTFIT THREE -->
<div class="col-lg-4 p-2">
<!-- NAME -->
<div class="text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px; color:#b0b0b0; background:#4b4b4b">
Outfit Name
</div>
<!-- IMAGE -->
<div class="w-100" style="min-height:300px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
<!-- DESCRIPTION -->
<div class="p-3 text-justify" style="height:110px; overflow:auto; background:#b0b0b0">
<p>This is a SUPER long descip!</p>
<p>Arcu cursus vitae congue mauris rhoncus aenean vel elit. Tristique nulla aliquet enim tortor. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque vitae tempus quam pellentesque nec nam aliquam sem. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.</p>
</div>
</div>
</div>
</div>
<!-- --- SLIDE TWO --- -->
<div class="carousel-item" style="height:500px; overflow:auto;">
<div class="row no-gutters pt-2 px-3 pb-0" >
<!-- OUTFIT ONE -->
<div class="col-lg-4 p-2">
<div class="text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px; color:#b0b0b0; background:#4b4b4b">
Outfit Name
</div>
<div class="w-100" style="min-height:300px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
<div class="p-3 text-justify" style="height:110px; overflow:auto; background:#b0b0b0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<!-- OUTFIT TWO -->
<div class="col-lg-4 p-2">
<div class="text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px; color:#b0b0b0; background:#4b4b4b">
Outfit Name
</div>
<div class="w-100" style="min-height:300px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
<div class="p-3 text-justify" style="height:110px; overflow:auto; background:#b0b0b0">
This is a short descrip!
</div>
</div>
<!-- OUTFIT THREE -->
<div class="col-lg-4 p-2">
<div class="text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px; color:#b0b0b0; background:#4b4b4b">
Outfit Name
</div>
<div class="w-100" style="min-height:300px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
<div class="p-3 text-justify" style="height:110px; overflow:auto; background:#b0b0b0">
<p>This is a SUPER long descip!</p>
<p>Arcu cursus vitae congue mauris rhoncus aenean vel elit. Tristique nulla aliquet enim tortor. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque vitae tempus quam pellentesque nec nam aliquam sem. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.</p>
</div>
</div>
</div>
</div>
<!-- add / delete more slides above THIS line! -->
</div>
<!-- WARDROBE end -->
</div>
</div>
<!-- tab content end -->
</div>
</div>
<!-- ------------------------------
02 || CREDITS
→ please keep credits somewhere on
the profile if you decide to move it!
------------------------------- -->
<div class="col-lg-12 text-right mt-2 p-2" style="letter-spacing:0.5px; background:#1e1e1e">
<a href="https://toyhou.se/10716365.-f2u-advanced-neopets" class="small px-1 tooltipster" title="code by jiko" style="text-decoration:none; color:#b0b0b0">
<i class="far fa-code"></i>
</a>
</div>
</div>
</div>
