<!---
========================================================
code by Lullah
colors used:
> bg-primary (bootstrap) (header, hr)
> bg-faded (bootstrap) (boxes containing the texts)
> btn-primary (bootstrap) (carousel corner buttons)
> badge-primary (bootstrap) (key items)
NOTE:
> Everyone's style of proportions is different; if you want to change the height of the
carousels to match your drawing/art better, please CTRL+F and replace these heights:
> max-height:552px (left and right columns)
> height: 552px (all the carousel images)
> And as always, everything in this code is completely optional! Edit it to suit your needs!
You may...
> Edit this code to oblivion!
> Recycle parts for your own use!
You may not...
> Remove my watermark!
========================================================
--->
<div class="container" style="max-width:850px;font-size:0.9em;">
<div class="rounded bg-primary px-2 py-1 text-center text-white" style="font-size:1.2em;letter-spacing:1px;;">
<div>
<!--- TITLE --->
<i class="fas fa-dove"></i>Canary's Wardrobe</div>
</div>
<div class="row no-gutters">
<!--- DESCRIPTIVE (LEFT) COLUMN --->
<!--- this entire box scrolls after you've hit a certain height! --->
<div class="col-md-4 mt-1" style="max-height:552px;;overflow:auto;">
<div class="bg-faded rounded px-2 py-1">
<!--- PHYSICAL INFORMATION --->
<div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Physical Information</div><hr class="bg-primary mb-0 mt-1">
<div style=";">
<!--- PHYSICAL INFORMATION CONTENT --->
<div class="justify-content-between mt-1">
<span>Height</span>
<span>165cm</span>
</div>
<div class="justify-content-between mt-1">
<span>Weight</span>
<span>55kg</span>
</div>
<div class="justify-content-between mt-1">
<span>Body Type</span>
<span>Slim</span>
</div>
<!--- ADD MORE ABOVE HERE --->
</div>
</div>
<div class="bg-faded rounded px-2 py-1 mt-1">
<!--- STYLE PREFERENCE --->
<div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Style Preference</div><hr class="bg-primary mb-0 mt-1">
<div style=";">
<!--- STYLE PREFERENCE CONTENT --->
<!--- Key items --->
<!--- these take up a lot of space so keep that in mind! --->
<div>Key Items</div>
<div style="font-size:1.25em;">
<span class="badge badge-primary badge-pill">item 1</span>
<span class="badge badge-primary badge-pill">item 2</span>
<span class="badge badge-primary badge-pill">item 3</span>
<span class="badge badge-primary badge-pill">item 4</span>
</div>
<!--- LIKES --->
<div class="mt-1">Likes</div>
<ul class="m-0">
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
<!--- DISLIKES --->
<div class="mt-1">Dislikes</div>
<ul class="m-0">
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div></div>
<div class="bg-faded rounded px-2 py-1 mt-1">
<!--- COLOR SCHEME --->
<div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Color Scheme</div><hr class="bg-primary mb-0 mt-1">
<div class="row no-gutters mt-1">
<!--- COLOR SCHEME BARS --->
<!--- the first and last col should always be rounded-left and rounded-right!! --->
<!--- copy and paste the divs with plain col classes! it'll automatically adjust itself! --->
<div class="col rounded-left" style="height:40px;background-color:#fff;"></div>
<div class="col" style="height:40px;background-color:#c9c9c9;"></div>
<div class="col" style="height:40px;background-color:#7f7f7f;"></div>
<div class="col" style="height:40px;background-color:#262626;"></div>
<div class="col rounded-right" style="height:40px;background-color:#000;"></div>
<!--- add more above here! --->
</div>
</div>
<div class="bg-faded rounded px-2 py-1 mt-1">
<!--- NOTES --->
<div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Notes</div><hr class="bg-primary mb-0 mt-1">
<div style=";">
<!--- NOTES CONTENT --->
<ul class="m-0">
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
</div>
</div>
<!--- CAROUSEL (MIDDLE) COLUMN) --->
<div class="col-md-4 mt-1 px-md-1">
<div id="outfit-carousel" class="carousel slide" data-ride="carousel">
<!--- CAROUSEL --->
<!--- please don't write too much on the buttons, they will break! --->
<div class="carousel-inner">
<!--- FIRST CAROUSEL --->
<div class="carousel-item active">
<!--- FOCAL IMAGE --->
<div class="rounded" style="height:552px;
background-image:url(https://via.placeholder.com/550);
background-size:cover;background-position:center;"></div>
<div class="" style="position:absolute;bottom:5px;right:5px;opacity:90%;"><a class="btn btn-primary px-4 py-1" data-toggle="tooltip" style="max-width:100%;overflow:auto;"
title="add additional notes here!"
href="#url">
main outfit</a>
</div>
</div>
<!--- SECOND CAROUSEL --->
<div class="carousel-item">
<!--- FOCAL IMAGE --->
<div class="rounded" style="height:552px;
background-image:url(https://via.placeholder.com/550);
background-size:cover;background-position:center;"></div>
<div class="" style="position:absolute;bottom:5px;right:5px;opacity:90%;"><a class="btn btn-primary px-4 py-1" data-toggle="tooltip" style="max-width:100%;overflow:auto;"
title="add additional notes here!"
href="#URL">
secondary outfit</a>
</div>
</div>
<!--- THIRD CAROUSEL --->
<div class="carousel-item">
<!--- FOCAL IMAGE --->
<div class="rounded" style="height:552px;
background-image:url(https://via.placeholder.com/550);
background-size:cover;background-position:center;"></div>
<div class="" style="position:absolute;bottom:5px;right:5px;opacity:90%;"><a class="btn btn-primary px-4 py-1" data-toggle="tooltip" style="max-width:100%;overflow:auto;"
title="add additional notes here!"
href="#URL">
tertiary outfit</a>
</div>
</div>
<!--- add more above here! --->
</div>
<!--- carousel controls! don't touch! --->
<a class="carousel-control-prev" href="#outfit-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#outfit-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--- MOODBOARD (RIGHT) COLUMN --->
<!--- this entire box scrolls after you've hit a certain height! --->
<div class="col-md-4 mt-1" style="max-height:552px;overflow:auto;">
<div class="row no-gutters">
<!--- MOODBOARD / OUTFIT INSPOS --->
<div class="col-6">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<div class="col-6 pl-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);background-size:cover;
background-position:center;"></div>
</div>
<div class="col-6 mt-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<div class="col-6 pl-1 mt-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<div class="col-6 mt-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<div class="col-6 pl-1 mt-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<div class="col-6 mt-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<div class="col-6 pl-1 mt-1">
<!--- IMAGE --->
<div class="rounded" style="height:135px;
background-image:url(https://via.placeholder.com/150);
background-size:cover;background-position:center;"></div>
</div>
<!--- ADD MORE IMAGES ABOVE HERE!! --->
</div>
</div>
</div>
<!--- credits dont touch pls thx --->
<div class="text-right" style="font-size:0.9em"><a class="tooltipster" title="code by lullah" href="lullah"><i class="fas fa-paw"></i></a></div>
</div>