Appearance Details
created by:dragon-heist
HTMLBootstrapCharacter
Copy
<div class="row no-gutters flex-wrap justify-content-center mx-auto" style="max-width:1200px;">
<div class="col-xl-2 col-sm-4 p-1 flex-column">
<!-- INFO BOX --------------------------------------------------------->
<div class="card mb-2">
<!-- ROW (odd) -->
<div class="row no-gutters flex-wrap p-2">
<span class="col text-secondary font-weight-bold">Info</span>
<span class="col-auto text-right">content</span>
</div>
<!-- ROW (even) -->
<div class="row no-gutters flex-wrap bg-faded p-2">
<span class="col text-secondary font-weight-bold">Info</span>
<span class="col-auto text-right">content</span>
</div>
<!-- ROW (odd) -->
<div class="row no-gutters flex-wrap p-2">
<span class="col text-secondary font-weight-bold">Info</span>
<span class="col-auto text-right">content</span>
</div>
<!-- ROW (even) -->
<div class="row no-gutters flex-wrap bg-faded p-2">
<span class="col text-secondary font-weight-bold">Info</span>
<span class="col-auto text-right">content</span>
</div>
<!-- ROW (odd) -->
<div class="row no-gutters flex-wrap p-2">
<span class="col text-secondary font-weight-bold">Info</span>
<span class="col-auto text-right">content</span>
</div>
<!-- ROW (even) -->
<div class="row no-gutters flex-wrap bg-faded p-2">
<span class="col text-secondary font-weight-bold">Info</span>
<span class="col-auto text-right">content</span>
</div>
</div> <!-- info box end -->
<!-- NOTES BOX -------------------------------------------------------->
<div class="card p-2 bg-faded">
<!-- title -->
<div class="text-uppercase text-center text-secondary mt-n1 mb-2" style="font-size:1.2em;">Notes</div>
<div class="card border-0 p-sm-1 p-2 h-100" style="overflow:auto; max-height:250px; scrollbar-width:thin;">
<!-- List Item ---------------------->
<div class="row no-gutters mb-2">
<!-- bullet --> <div class="col-auto"><i class="fas fa-angle-right fa-fw fa-sm mr-1 text-secondary"></i></div>
<!-- note -->
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div> <!-- list item end -->
<!-- List Item ---------------------->
<div class="row no-gutters mb-2">
<!-- bullet --> <div class="col-auto"><i class="fas fa-angle-right fa-fw fa-sm mr-1 text-secondary"></i></div>
<!-- note -->
<div class="col">Vivamus efficitur nibh eu sollicitudin feugiat.</div>
</div> <!-- list item end -->
<!-- List Item ---------------------->
<div class="row no-gutters mb-2">
<!-- bullet --> <div class="col-auto"><i class="fas fa-angle-right fa-fw fa-sm mr-1 text-secondary"></i></div>
<!-- note -->
<div class="col">Aenean et sapien ut nisl placerat vulputate.</div>
</div> <!-- list item end -->
<!-- List Item ---------------------->
<div class="row no-gutters mb-2">
<!-- bullet --> <div class="col-auto"><i class="fas fa-angle-right fa-fw fa-sm mr-1 text-secondary"></i></div>
<!-- note -->
<div class="col">Donec pellentesque metus in fermentum rhoncus.</div>
</div> <!-- list item end -->
<!-- List Item ---------------------->
<div class="row no-gutters mb-2">
<!-- bullet --> <div class="col-auto"><i class="fas fa-angle-right fa-fw fa-sm mr-1 text-secondary"></i></div>
<!-- note -->
<div class="col">Morbi id ligula id diam varius lacinia sollicitudin nec quam.</div>
</div> <!-- list item end -->
<!-- List Item ---------------------->
<div class="row no-gutters mb-2">
<!-- bullet --> <div class="col-auto"><i class="fas fa-angle-right fa-fw fa-sm mr-1 text-secondary"></i></div>
<!-- note -->
<div class="col">Aenean molestie tortor vitae ultricies ullamcorper.</div>
</div> <!-- list item end -->
<!--------------------------------------------------------------------->
<!-- add more list items above this line! ----------------------------->
</div>
</div> <!-- notes box end -->
<!-- CREDIT; please do not remove! ------------------------------------>
<div class="text-center">
<a href="https://toyhou.se/41428924." class="text-secondary" data-toggle="tooltip" data-placement="bottom" title="code by dragon-heist"><i class="fa-regular fa-code"></i></a>
</div>
</div>
<div class="col-xl-4 col-sm d-flex p-1" style="min-height:400px;">
<!-- OUTFIT BOX ------------------------------------------------------->
<div class="card col bg-faded p-2">
<!-- title -->
<div class="text-uppercase text-center text-secondary mt-n1 mb-2" style="font-size:1.2em;">Outfits</div>
<!-- main outfit display -->
<div class="card border-0 p-3 h-100" style="position:relative;">
<!-- WARDROBE MENU -->
<div style="position:absolute; bottom:0; left:0; z-index:10;">
<div style="position:absolute; bottom:0; left:0; width:120px;">
<!-- TOGGLE BUTTON -->
<a href="#" data-toggle="collapse" data-target="#WARDROBE" class="card bg-faded border-0" style="margin-bottom:-1px; position:relative; z-index:1; width:45px; height:40px; border-radius:0 50% 0 0; text-decoration:none;">
<i class="fas fa-clothes-hanger fa-lg my-auto ml-2"></i>
</a> <!-- toggle button end -->
<!-- WARDROBE LIST -->
<div class="collapse" id="WARDROBE">
<div class="card bg-faded border-0 pt-1" style="border-radius:0 .5em 0 0;">
<ul class="nav flex-column border-0">
<!-- Outfit Tab -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" data-target="#outfit1" href="#">Outfit 1</a>
</li> <!-- outfit tab end -->
<!-- Outfit Tab -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#outfit2" href="#">Outfit 2</a>
</li> <!-- outfit tab end -->
<!-- Outfit Tab -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#outfit3" href="#">Outfit 3</a>
</li> <!-- outfit tab end -->
<!-- Outfit Tab -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#outfit4" href="#">Outfit 4</a>
</li> <!-- outfit tab end -->
<!-- Outfit Tab -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#outfit5" href="#">Outfit 5</a>
</li> <!-- outfit tab end -->
<!-- Outfit Tab -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#outfit6" href="#">Outfit 6</a>
</li> <!-- outfit tab end -->
<!--------------------------------------------------------------------->
<!-- add more outfits above this line! -------------------------------->
</ul>
</div>
</div> <!-- wardrobe list end -->
</div>
</div> <!-- wardrobe menu end-->
<!-- WARDROBE DISPLAY -->
<div class="tab-content h-100">
<!-- Outfit Display -->
<div class="tab-pane fade show active h-100" id="outfit1" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706316_d29UfRpzwQ43LML.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div> <!-- outfit display end -->
<!-- Outfit Display -->
<div class="tab-pane fade h-100" id="outfit2" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706312_1pSjHjyTuoZdxrI.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div> <!-- outfit display end -->
<!-- Outfit Display -->
<div class="tab-pane fade h-100" id="outfit3" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706308_UJD2rwYn1iSYhRH.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div> <!-- outfit display end -->
<!-- Outfit Display -->
<div class="tab-pane fade h-100" id="outfit4" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706322_4F3IXAaPFXCWQRO.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div> <!-- outfit display end -->
<!-- Outfit Display -->
<div class="tab-pane fade h-100" id="outfit5" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706319_WNgBhpSFfjw9lFk.png'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div> <!-- outfit display end -->
<!-- Outfit Display -->
<div class="tab-pane fade h-100" id="outfit6" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706325_znKXFPxjHRkHI4t.png?1696468167'); background-size:contain; background-position:center; background-repeat:no-repeat;">
</div> <!-- outfit display end -->
<!--------------------------------------------------------------------->
<!-- add more outfits above this line! -------------------------------->
</div>
</div>
<!-- color swatches -->
<div class="mb-n2">
<!-- COLOR SWATCHES --------------------------------------------------->
<div class="col-lg-auto row no-gutters flex-nowrap justify-content-start align-items-center p-0" style="overflow:auto; scrollbar-width:thin;">
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right" title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right"title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right"title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!-- Color -->
<div class="col-auto m-md-2 m-1" data-toggle="tooltip" data-placement="right"title="#817a7a" style="height:25px; width:25px; border-radius:.5em; background:#817a7a;"></div>
<!--------------------------------------------------------------------->
<!-- add more colors above this line! --------------------------------->
</div>
</div>
</div> <!-- outfit box end -->
</div>
<div class="col-xl d-flex flex-column p-1" style="height:auto;">
<div class="row no-gutters w-100">
<!-- ACESSORIES BOX --------------------------------------------------->
<div class="col-sm-6">
<div class="card bg-faded p-2">
<!-- title -->
<div class="text-uppercase text-center text-secondary mt-n1 mb-2" style="font-size:1.2em;">Accessories</div>
<div class="card border-0">
<!-- accesory icons; change the URLs here to change the image for each item! -->
<div class="accordion row no-gutters align-content-start p-1" id="ACCESSORIES-ACCORDION" style="max-height:275px; overflow:auto; scrollbar-width:thin;
--item-icon1: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon2: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon3: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon4: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon5: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon6: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon7: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon8: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');
--item-icon9: url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808528_K7vSzxCE2QRc9sr.gif');">
<!-- Accessory Icon 1 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES1">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon1);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 1 -->
<div class="collapse w-100 ACCESSORIES1" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES1">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 2 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES2">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon2);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 2 -->
<div class="collapse w-100 ACCESSORIES2" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 2
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES2">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 3 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES3">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon3);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 3 -->
<div class="collapse w-100 ACCESSORIES3" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 3
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES3">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 4 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES4">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon4);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 4 -->
<div class="collapse w-100 ACCESSORIES4" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 4
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES4">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 5 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES5">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon5);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 5 -->
<div class="collapse w-100 ACCESSORIES5" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 5
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES5">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 6 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES6">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon6);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 6 -->
<div class="collapse w-100 ACCESSORIES6" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 6
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES6">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 7 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES7">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon7);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 7 -->
<div class="collapse w-100 ACCESSORIES7" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 7
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES7">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 8 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES7">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon8);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 8 -->
<div class="collapse w-100 ACCESSORIES8" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 8
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES8">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
<!-- Accessory Icon 9 -->
<div class="col-4 p-2">
<a class="h-100 w-100 d-flex btn btn-primary card-outline-secondary bg-faded p-0 mx-auto" style="overflow:hidden;"
data-toggle="collapse" href="#" data-target=".ACCESSORIES9">
<span class="w-100" style="padding:50%;
background-size:contain; background-repeat:no-repeat; background-position:center;
background-image:var(--item-icon6);"></span>
</a>
</div> <!-- accessory icon end -->
<!-- Accessory Popup 9 -->
<div class="collapse w-100 ACCESSORIES9" style="position:absolute; right:0; bottom:-1px; z-index:5;" data-parent="#ACCESSORIES-ACCORDION">
<div class="card bg-faded p-3 border-bottom-0 border-left-0 border-right-0" style="position:relative;">
<div class="mb-1">
<!-- Item Info Name -->
<span class="float-left">
ACCESSORY 9
</span>
</div>
<!-- Item Info Description -->
<span class="text-secondary">Description of the accessory can go in here, and the box will expand as you write more into it!</span>
<!-- Item Info Close Button -->
<span style="position:absolute; top:-1px; right:12px;">
<a class="text-secondary" href="#" data-toggle="collapse" data-target=".ACCESSORIES9">
<i class="fa-sharp fa-bookmark fa-xl"></i>
</a>
</span>
</div>
</div> <!-- accessory popup end -->
</div>
</div>
</div>
</div> <!-- accessories box end -->
<!-- EXTRA IMAGES BOX ------------------------------------------------->
<div class="col-xl col-sm-6 pl-sm-2 mt-sm-0 mt-2">
<div class="card bg-faded p-0">
<ul class="nav nav-pills d-flex flex-wrap border-0">
<!-- Image Tab 1-->
<li class="nav-item p-2 col-4 order-1">
<a class="nav-link btn btn-secondary active" data-toggle="tab" data-target="#img1" href="#">1</a>
</li>
<!-- Image Tab 2-->
<li class="nav-item p-2 col-4 order-2">
<a class="nav-link btn btn-secondary" data-toggle="tab" data-target="#img2" href="#">2</a>
</li>
<!-- Image Tab 3-->
<li class="nav-item p-2 col-4 order-3">
<a class="nav-link btn btn-secondary" data-toggle="tab" data-target="#img3" href="#">3</a>
</li>
<!-- Image Tab 4-->
<li class="nav-item p-2 col-4 order-5">
<a class="nav-link btn btn-secondary" data-toggle="tab" data-target="#img4" href="#">4</a>
</li>
<!-- Image Tab 5-->
<li class="nav-item p-2 col-4 order-6">
<a class="nav-link btn btn-secondary" data-toggle="tab" data-target="#img5" href="#">5</a>
</li>
<!-- Image Tab 6-->
<li class="nav-item p-2 col-4 order-7">
<a class="nav-link btn btn-secondary" data-toggle="tab" data-target="#img6" href="#">6</a>
</li>
<!--------------------------------------------------------------------->
<!-- Image Tabs ------------------------------------------------------->
<li class="col-12 px-2 order-4" style="min-height:220px;">
<div class="card border-0 h-100">
<div class="h-100 d-flex">
<div class="tab-content w-100">
<!-- Image Tab 1 -->
<div class="tab-pane fade show active h-100" id="img1">
<div class="p-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46703395_Dpa8o7kqTOb3PAB.gif'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- image tab end -->
<!-- Image Tab 2 -->
<div class="tab-pane fade h-100" id="img2">
<div class="p-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/48896767_94K5Q0eLFA0izWM.gif'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- image tab end -->
<!-- Image Tab 3 -->
<div class="tab-pane fade h-100" id="img3">
<div class="p-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46808536_l0JsKrJrjMEcPPG.gif'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- image tab end -->
<!-- Image Tab 4 -->
<div class="tab-pane fade h-100" id="img4">
<div class="p-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46728955_X9S8XTErbEzYmf4.gif'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- image tab end -->
<!-- Image Tab 5 -->
<div class="tab-pane fade h-100" id="img5">
<div class="p-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46703423_bNZYWKx8T7c085N.gif'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- image tab end -->
<!-- Image Tab 6 -->
<div class="tab-pane fade h-100" id="img6">
<div class="p-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46703416_2pvXLyWCIP5FHoT.gif'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- image tab end -->
</div>
</div>
</div>
</li> <!-- image tabs end -->
</ul>
</div>
</div> <!-- extra images box end -->
</div>
<div class="row no-gutters flex-wrap pt-2">
<div class="card col-lg-5 bg-faded p-2" style="max-height:300px;">
<!-- title -->
<div class="text-uppercase text-center text-secondary mt-n1 mb-2" style="font-size:1.2em;">Close-ups</div>
<!-- CLOSE-UPS CAROUSEL ----------------------------------------------->
<div class="card border-0" style="min-height:200px;">
<div id="carousel" class="h-100 carousel slide" data-pause="true">
<div class="carousel-inner h-100">
<!-- Carousel Slide 1 -->
<div class="carousel-item active h-100">
<div class="p-2 mx-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61498251_uoPuvWOa4z8Kkky.png'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div> <!-- carousel slide end -->
<!-- Carousel Slide 2 -->
<div class="carousel-item h-100">
<div class="p-2 mx-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/61498238_X10NaEuaMJuJjhO.png'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div> <!-- carousel slide end -->
<!-- Carousel Slide 3 -->
<div class="carousel-item h-100">
<div class="p-2 mx-3 h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46778913_oQCHOF3ah56bkS6.gif'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div> <!-- carousel slide end -->
<!-- Carousel Previous/Next Buttons-->
<a class="carousel-control-prev ml-n1" href="#carousel" data-slide="prev">
<i class="fas fa-chevron-left fa-lg text-secondary"></i>
</a>
<a class="carousel-control-next mr-n1" href="#carousel" data-slide="next">
<i class="fas fa-chevron-right fa-lg text-secondary"></i>
</a>
</div>
</div>
</div> <!-- carousel end -->
</div>
<div class="col-lg pl-md-2 mt-md-0 mt-2">
<!-- INJURIES BOX ----------------------------------------------------->
<div class="card bg-faded p-2">
<div class="row no-gutters flex-wrap">
<!-- Injuries Information -->
<div class="col-sm text-center pl-2 pr-3">
<!-- title -->
<div class="text-uppercase text-secondary mt-n1 mb-2" style="font-size:1.2em;">Injuries</div>
<!-- Info Item -->
<div>
<p class="text-secondary text-uppercase mb-0">Label</p>
<p>content</p>
</div>
<!-- divider --> <hr class="my-2">
<!-- Info Item -->
<div>
<p class="text-secondary text-uppercase mb-0">Label</p>
<p>content</p>
</div>
<!-- divider --> <hr class="my-2">
<!-- Info Item -->
<div>
<p class="text-secondary text-uppercase mb-0">Label</p>
<p>content</p>
</div>
<!-- divider --> <hr class="my-2">
<!-- Info Item -->
<div>
<p class="text-secondary text-uppercase mb-0">Label</p>
<p>content</p>
</div>
</div> <!-- injuries info end -->
<!-- Injuries Image -->
<div class="card col-sm mt-sm-0 mt-3 border-0 p-2" style="min-height:200px;">
<div class="h-100" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706305_X0attYGyFVzrQHM.png'); background-size:contain; background-position:center; background-repeat:no-repeat;"></div>
</div> <!-- injuries image end -->
</div>
</div> <!-- injuries box end -->
</div>
</div>
</div>
</div>