Dress Up
created by:HTMLobster
HTMLBootstrapMiscellaneous
Copy
<!----------------------------------------------------------------
DRESS UP
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. It may be edited or moved, but must be accessible on the page.
You may edit code/frankenstein with others as long as their TOS/Rules allows.
Turn off WYSIWYG and turn on Code Editor in settings. WYSIWYG will break the code. DO NOT USE IT AT ALL.
Do not redistribute (reupload, reshare, etc.). Do not redistribute edits.
By using this code you agree to these rules.
------------------------------------------------------------------>
<div class="container" style="max-width:900px;">
<div>
<!-- Header Bar -->
<div class="bg-faded p-2 rounded mb-2">
<!-- Item Tabs -->
<ul class="nav nav-tabs row no-gutters border-0 align-items-center">
<!-- Title -->
<li class="col-sm justify-content-sm-end text-center mb-2 mb-sm-0 mr-sm-2">
<h1 class="m-0 bg-secondary text-white rounded p-2">Wardrobe</h1>
</li>
<!-- Tops -->
<li class="col-auto nav-item pr-2">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center active" data-toggle="tab" href="#Tops"><i class="fas fa-tshirt"></i></a>
</li>
<!-- Bottoms -->
<li class="col-auto nav-item pr-2">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Btm"><i class="fas fa-socks"></i></a>
</li>
<!-- Hats/Head -->
<li class="col-auto nav-item pr-2">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Hat"><i class="fas fa-hat-cowboy"></i></a>
</li>
<!-- Accessories -->
<li class="col-auto nav-item pr-2">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Acc"><i class="fas fa-scarf"></i></a>
</li>
<!-- Shoes -->
<li class="col-auto nav-item pr-2">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Shoe"><i class="fas fa-boot"></i></a>
</li>
<!-- Jewelry -->
<li class="col-auto nav-item pr-2 mt-2 mt-sm-0">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Jewelry"><i class="fas fa-gem"></i></a>
</li>
<!-- Hairstyles -->
<li class="col-auto nav-item pr-2 mt-2 mt-sm-0">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Hair"><i class="fas fa-cut"></i></a>
</li>
<!-- Scenery -->
<li class="col-auto nav-item mt-2 mt-sm-0">
<a class="btn btn-block btn-outline-primary align-items-center justify-content-center" data-toggle="tab" href="#Bg"><i class="fas fa-image"></i></a>
</li>
</ul>
</div>
<!-- Dress Up Content -->
<div class="rounded row no-gutters">
<!-- Left Column -->
<!-- Clothing - adjust z-index to fix any layering issues. Larger numbers will layer on top. Items further down will be on top unless specified otherwise. -->
<div class="col-sm bg-faded rounded text-center mb-2 mb-md-0">
<!-- Base -->
<!-- Dimensions used: 1000px x 1500px - you can use any but I recommend 425px width or larger. -->
<div class="h-100" style="position:relative; width:100%; z-index:2;">
<img src="IMG_URL">
</div>
<!-- Make sure IDs match the HREF and ARIA-CONTROLS of the buttons later!! Each item needs a unique ID -->
<!-- Item - showing (adding "show" to a class makes item appear by default) -->
<div id="item1" class="h-100 text-center collapse show" style="width:100%; position:absolute; top:0; left:0; z-index:2;">
<img src="IMG_URL">
</div>
<!-- Item - hidden -->
<div id="item2" class="h-100 text-center collapse" style="width:100%; position:absolute; top:0; left:0; z-index:3;">
<img src="IMG_URL">
</div>
<!-- Mutli Layer Item -->
<div id="item3" class="h-100 text-center collapse" style="width:100%; position:absolute; top:0; left:0;">
<!-- Top Layer -->
<img style="position:absolute; top:0; left:0; z-index:3;" src="IMG_URL">
<!-- Bottom Layer -->
<img style="position:absolute; top:0; left:0; z-index:1;" src="IMG_URL">
</div>
<!-- Image background - default is primary color with animated stripes -->
<div class="h-100 bg-primary progress-bar-striped progress-bar-animated rounded" style="position:absolute; top:0; width:100%; z-index:0;">
</div>
<!-- Scenery -->
<div id="item8" class="h-100 text-center collapse" style="width:100%; position:absolute; top:0; left:0; z-index:0;">
<img src="IMG_URL">
</div>
</div>
<!-- Left Column end -->
<!-- Right Column -->
<div class="col-sm bg-faded rounded ml-sm-2 p-2">
<div>
<!-- Design notes -->
<h1 class="bg-secondary text-white p-2 rounded">Design</h1>
<!-- Color palette -->
<!-- Please do text-dark on light colors -->
<div class="mb-2">
<span class="badge badge-pill" style="background:#000;">#000000</span>
<span class="badge badge-pill" style="background:#333;">#333333</span>
<span class="badge badge-pill" style="background:#666;">#666666</span>
<span class="badge badge-pill" style="background:#808080;">#808080</span>
<span class="badge badge-pill text-dark" style="background:#ccc;">#cccccc</span>
<span class="badge badge-pill text-dark" style="background:#fff;">#ffffff</span>
</div>
<!-- Character fashion likes and dislikes -->
<div class="mb-2">
<!-- Likes -->
<span class="badge badge-primary badge-pill"><i class="fas fa-check"></i> like</span>
<span class="badge badge-primary badge-pill"><i class="fas fa-check"></i> like</span>
<span class="badge badge-primary badge-pill"><i class="fas fa-check"></i> like</span>
<span class="badge badge-primary badge-pill"><i class="fas fa-check"></i> like</span>
<!-- Dislikes -->
<span class="badge badge-danger badge-pill"><i class="fas fa-times"></i> dislike</span>
<span class="badge badge-danger badge-pill"><i class="fas fa-times"></i> dislike</span>
<span class="badge badge-danger badge-pill"><i class="fas fa-times"></i> dislike</span>
<span class="badge badge-danger badge-pill"><i class="fas fa-times"></i> dislike</span>
</div>
<!-- Wardrobe tab content -->
<div class="tab-content">
<!-- Tops -->
<div class="tab-pane fade active show" id="Tops">
<!-- Heading -->
<h1 class="bg-secondary text-white p-2 rounded">Tops</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value. if an item is SHOWING by default, make aria-expanded TRUE. if it is hidden, aria-expanded is FALSE -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item1" data-toggle="collapse" aria-controls="item1" aria-expanded="true">Item 1</a>
</span>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item2" data-toggle="collapse" aria-controls="item2" aria-expanded="false">Item 2</a>
</span>
</div>
</div>
<!-- Bottoms -->
<div class="tab-pane fade" id="Btm">
<!-- Heading -->
<h1 class="bg-secondary text-white p-2 rounded">Bottoms</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item3" data-toggle="collapse" aria-controls="item3" aria-expanded="false">Item 3</a>
</span>
</div>
</div>
<!-- Hats/Head -->
<div class="tab-pane fade" id="Hat">
<!-- Heading -->
<h1 class="bg-secondary text-white p-2 rounded">Head</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item4" data-toggle="collapse" aria-controls="item4" aria-expanded="false">Item 4</a>
</span>
</div>
</div>
<!-- Accessories -->
<div class="tab-pane fade" id="Acc">
<!-- Heading -->
<h1 class="bg-secondary text-white p-2 rounded">Accessories</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item5" data-toggle="collapse" aria-controls="item5" aria-expanded="false">Item 5</a>
</span>
</div>
</div>
<!-- Shoes -->
<div class="tab-pane fade" id="Shoe">
<!-- Heading -->
<h1 class="bg-secondary text-white p-2 rounded">Shoes</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item6" data-toggle="collapse" aria-controls="item6" aria-expanded="false">Item 6</a>
</span>
</div>
</div>
<!-- Jewelry -->
<div class="tab-pane fade" id="Jewelry">
<!-- Heading -->
<h1 class="bg-secondary text-white p-2 rounded">Jewelry</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item7" data-toggle="collapse" aria-controls="item7" aria-expanded="false">Item 7</a>
</span>
</div>
</div>
<!-- Hairstyles -->
<div class="tab-pane fade" id="Hair">
<!-- Heading-->
<h1 class="bg-secondary text-white p-2 rounded">Hairstyles</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item8" data-toggle="collapse" aria-controls="item8" aria-expanded="false">Item 8</a>
</span>
</div>
</div>
<!-- Scenery -->
<div class="tab-pane fade" id="Bg">
<!-- Heading-->
<h1 class="bg-secondary text-white p-2 rounded">Scenery</h1>
<!-- Buttons - make sure HREF and ARIA-CONTROLS have the same value -->
<div>
<!-- Item -->
<span>
<a class="btn btn-outline-primary text-uppercase my-1" href="#item9" data-toggle="collapse" aria-controls="item8" aria-expanded="false">Item 9</a>
</span>
</div>
</div>
</div>
<!-- Reset button -->
<div class="row no-gutters mt-2">
<div class="col">
<a class="w-100 btn btn-secondary bg-secondary text-white" href="">
Reset
</a>
</div>
</div>
<!-- Reset button end -->
</div>
</div>
<!-- Right Column end -->
</div>
<!-- Dress Up Content end -->
</div>
<div class="text-right">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="layout by noll"><i class="fas fa-code"></i></a>
</div>
</div>