<!-- ------------------------------
Advanced Neopets — Bootstrap 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
------------------------------- -->
<div class="mx-auto" style="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;">
<a href="#one" data-toggle="tab" class="active btn btn-default btn-outline-secondary text-uppercase w-100 rounded-0 border-0"
style="letter-spacing:2.5px; border-top-left-radius:10px;">
<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">
<a href="#two" data-toggle="tab" class="btn btn-default btn-outline-secondary text-uppercase w-100 rounded-0 border-0"
style="letter-spacing:2.5px;">
<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;">
<a href="#three" data-toggle="tab" class="btn btn-default btn-outline-secondary text-uppercase w-100 rounded-0 border-0"
style="letter-spacing:2.5px; border-top-right-radius:10px;">
<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 bg-faded" style="height:595px;">
<!-- ------------------------------------
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 ------------------------------ -->
<!--
→ you need to write the name in twice! there is a header for desktop view and a header for mobile view!
there's two because of alignment issues when using fa-rotate-# lol
→ visit [fontawesome.com] for more icons to suit your character!
-->
<div class="col-lg-1 order-lg-3 order-1">
<div class="bg-dark text-light h-100 p-3">
<h1 class="p-md-1">
<!-- --- 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;">
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;">
<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;">
<blockquote class="card rounded-0 m-0" style="font-size:18px; letter-spacing:3px; border-width:0px 0px 0px 3px;">
<div class="justify-content-between">
<span>Summary</span>
<span><i class="far fa-user fa-fw my-auto"></i></span>
</div>
</blockquote>
</div>
<div class="p-3 pt-4 bg-faded text-muted">
<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">
<div class="card rounded-0 border-0 text-uppercase p-1 px-3 w-100 d-flex" style="font-size:1rem; letter-spacing:3px;">
Likes
</div>
<div class="p-1">
<ul class="fa-ul text-muted 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">
<div class="card rounded-0 border-0 text-uppercase p-1 px-3 w-100 d-flex" style="font-size:1rem; letter-spacing:3px;">
Disikes
</div>
<div class="p-1">
<ul class="fa-ul text-muted 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;">
<blockquote class="card rounded-0 m-0" style="font-size:18px; letter-spacing:3px; border-width:0px 0px 0px 3px;">
<div class="justify-content-between">
<span>Notes</span>
<span><i class="far fa-star fa-fw my-auto"></i></span>
</div>
</blockquote>
</div>
<div class="p-1">
<ul class="fa-ul text-muted 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>
</div>
</div>
</div>
</div>
<!-- ------------------------------------
1.2 || INVENTORY
------------------------------------- -->
<!--
→ this code assumes you're using the neopet's item's description, which is very short.
however, there are instructions on how to add a scrolling feature if the description is long.
-->
<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: cover;
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; z-index:2">
<blockquote class="card rounded-0 m-0" style="font-size:18px; letter-spacing:3px; border-width:0px 0px 0px 3px;">
<div class="justify-content-between">
<span>Inventory</span>
<span><i class="far fa-treasure-chest fa-fw my-auto"></i></span>
</div>
</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
→ if using regular images from the web, you don't need to worry about this!
------------------------------------------------------------ -->
<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 text-muted p-3" style="height:470px; overflow:auto;">
<!-- 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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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 text-muted p-3" style="height:470px; overflow:auto;">
<!-- 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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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">
<!-- 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;">
</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 bg-dark justify-content-between">
<!-- --- PREV --- -->
<a class="my-auto text-light" data-slide="prev" href="#inventorycarousel" aria-hidden="true">
<i class="far fa-angle-left fa-fw fa-lg"></i>
</a>
<!-- --- NEXT --- -->
<a class="my-auto text-light" data-slide="next" href="#inventorycarousel" aria-hidden="true">
<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 all around : 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 bg-dark text-light justify-content-between">
<!-- --- PREV --- -->
<a class="my-auto text-light" data-slide="prev" href="#wardrobecarousel" aria-hidden="true">
<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 text-light" data-slide="next" href="#wardrobecarousel" aria-hidden="true">
<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="card rounded-0 border-0 text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px;">
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="card rounded-0 border-0 p-3 text-muted text-justify" style="height:110px; overflow:auto;">
<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="card rounded-0 border-0 text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px;">
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="card rounded-0 border-0 p-3 text-muted text-justify" style="height:110px; overflow:auto;">
<p>This is a short descrip!</p>
</div>
</div>
<!-- OUTFIT THREE -->
<div class="col-lg-4 p-2">
<!-- NAME -->
<div class="card rounded-0 border-0 text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px;">
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="card rounded-0 border-0 p-3 text-muted text-justify" style="height:110px; overflow:auto;">
<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">
<!-- NAME -->
<div class="card rounded-0 border-0 text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px;">
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="card rounded-0 border-0 p-3 text-muted text-justify" style="height:110px; overflow:auto;">
<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="card rounded-0 border-0 text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px;">
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="card rounded-0 border-0 p-3 text-muted text-justify" style="height:110px; overflow:auto;">
<p>This is a short descrip!</p>
</div>
</div>
<!-- OUTFIT THREE -->
<div class="col-lg-4 p-2">
<!-- NAME -->
<div class="card rounded-0 border-0 text-uppercase text-center p-3" style="font-size:18px; letter-spacing:1.5px;">
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="card rounded-0 border-0 p-3 text-muted text-justify" style="height:110px; overflow:auto;">
<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 bg-dark text-right mt-2 p-2" style="letter-spacing:0.5px;">
<a href="https://toyhou.se/10716365.-f2u-advanced-neopets" class="small px-1 tooltipster text-light" title="code by jiko" style="text-decoration:none;">
<i class="far fa-code"></i>
</a>
</div>
</div>
</div>
