character wardrobe

<!---

  ========================================================

  code by Lullah
  colors used:
    > bg-primary (bootstrap) (header, hr)
    > 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>