Puffkin Dream V 1.1

<!--Puffkin Time

Code by CivilEngideer. Species by Credit + Weeping Angel
Don't remove either credit!
Comment when you use this code! I love seeing it used!

  USE NOTES
+ Haven't tried editing in WYSIWYG, try at your own risk.
- Change your color palette sections before the rest, it's a lot easier.
+ Ctrl+F Replace All is your friend!
- My personal fave fontawesome resource is here: https://www.w3schools.com/icons/fontawesome5_intro.asp

  COLORS
+ Outer Box: #FFE499
- Main Font Color: #774717
+ Bonus Font Color: #4C2906
- Inner Box Headers: #FFF490
+ Inner Box: #FFFFEC
- Glow: #FFFFFF
+ Color Palette Font: #E8CBA7-->


<!--Outer Box-->
<div class="card mx-auto"
  style="background:url('https://file.toyhou.se/images/15652782_2lR3vvhxmaXfwOR.png?1564620716') #FFE499;
  color: #774717;
padding:15px 15px; box-shadow: 0 0 3px 3px #FFFFFF; max-width:700px;">

<!--Title Box-->
<div class="row mb-2">
<div class="col-lg-12 col-xs-12 col-md-12 col-12 mb-2">
<div class="ui-accordion card" style="background: #FFFFEC; border: 1px solid #FFFFEC; box-shadow: 0 0 3px 3px #FFFFFF;">
<h2 class="card-inverse card-header" style="background: #FFF490; border: 1px solid #FFF490;">
<!--Name/Other
If your troop name is super long you should nix the rank.-->
      <span style="color: #4C2906;">name</span></h2>
      <div class="ui-accordion-content card-block"><span style="color: #774717;">troop | rank</span>
</div></div>
<!--Crest-->
      <a href="#trooplink"><img src="https://file.toyhou.se/images/15647555_cEV2uuHtVs3YMgt.png" class="float-right p-1" style="height:180px;margin-top:-90px;"></a></div>

<!-- Colors
  Add or remove as desired, max 6-->
<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-3">
<table style="height:75px; width:100%; border:none; box-shadow: 0 0 3px 3px #FFFFFF;">
<tr>
  <td style="height: 100%; background-color: #464646; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#464646</td>
  <td style="height: 100%; background-color: #929292; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#929292</td>
  <td style="height: 100%; background-color: #B8B8B8; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#B8B8B8</td>
  <td style="height: 100%; background-color: #FFFFFF; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#FFFFFF</td>
  <td style="height: 100%; background-color: #278F9C; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#278F9C</td>
</tr>
   </table>

  </div>

<!--Details
Add or remove sections as you desire.-->
<div class="col-lg-12 col-xs-12 col-md-12 col-12 mb-2">
<div class="ui-accordion card" style="background: #FFFFEC; border: 1px solid #FFFFEC; box-shadow: 0 0 3px 3px #FFFFFF;">
<h2 class="card-inverse card-header" style="background: #FFF490; border: 1px solid #FFF490;">
      <span style="color: #4C2906;">details</span></h2>
<div class="ui-accordion-content card-block" style="max-height:500px;">
<div class="row">
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> name</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> age</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> gender</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> pronouns</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> orientation</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> s/o</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> rank</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> birthday</span>
  <span>-</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> origin</span>
  <span>starter/myo/custom</span></div>
<div class="col-lg-6 col-xs-12 col-md-12 col-12 p-1 d-flex justify-content-between">
  <span class="text-uppercase" style="color: #4C2906;"> designer</span>
  <span><a href="#">-</a></span></div>

      			</div></div></div>
    				</div>

<!-- Colors 2
  Add or remove as desired, max 6
  Feel free to delete if you don't have too many colors.-->
<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-3">
<table style="height:75px; width:100%; border:none; box-shadow: 0 0 3px 3px #FFFFFF;">
<tr>
  <td style="height: 100%; background-color: #464646; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#464646</td>
  <td style="height: 100%; background-color: #929292; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#929292</td>
  <td style="height: 100%; background-color: #B8B8B8; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#B8B8B8</td>
  <td style="height: 100%; background-color: #FFFFFF; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#FFFFFF</td>
  <td style="height: 100%; background-color: #278F9C; text-align: right; vertical-align: bottom; font-size: 9px; color: #E8CBA7;">#278F9C</td>
</tr>
   </table>

  </div>
<!--End Colors 2-->

<!--Fullbody Reference-->
<div class="col-lg-12 col-xs-12 col-md-12 col-12 mb-2">
   <div class="text-center"><img src="https://file.toyhou.se/images/15647584_adQjTpf5KL34bR2.png"></div></div>


<!--About
Feel free to go big! Will scroll.-->
<div class="col-lg-12 col-xs-12 col-md-12 col-12 mb-2">
<div class="ui-accordion card" style="background: #FFFFEC; border: 1px solid #FFFFEC; box-shadow: 0 0 3px 3px #FFFFFF;">
<h2 class="card-inverse card-header" style="background: #FFF490; border: 1px solid #FFF490;">
      <span style="color: #4C2906;">about</span></h2>
<div class="ui-accordion-content card-block" style="max-height:600px;">
<p>A fairly simple layout for your puffkins.</p>
<p>This is the dream version of course.</p>
<p>Comment if you use, I wanna see!</p>
<p>Don't remove credit or I will Take You Down.</p>
<p><a href="https://pastebin.com/janqfFyA">Code Here</a> | <a href="https://www.chickensmoothie.com/Forum/viewtopic.php?t=4100681">Species Here</a></p>

      			</div></div></div>

<!--Images
Probably don't add more.

If you want 4 images: All cols should be 3
If you want 3: All cols should be 4
If you want 2: All cols should be 6-->

<div class="col-lg-3 col-xs-3 col-md-3 col-3 mx-auto rounded-circle">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle fr-fil fr-dib"></div>
<div class="col-lg-3 col-xs-3 col-md-3 col-3 mx-auto rounded-circle">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle fr-fil fr-dib"></div>
<div class="col-lg-3 col-xs-3 col-md-3 col-3 mx-auto rounded-circle">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle fr-fil fr-dib"></div>
<div class="col-lg-3 col-xs-3 col-md-3 col-3 mx-auto rounded-circle">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle fr-fil fr-dib"></div>

</div>
<!--Relationships
Add as many as you like.-->
<div id="profiles">
<div class="col-lg-12 col-xs-12 col-md-12 col-12 mb-2">
<div class="ui-accordion card" style="background: #FFFFEC; border: 1px solid #FFFFEC; box-shadow: 0 0 3px 3px #FFFFFF;">
<h2 class="card-inverse card-header" style="background: #FFF490; border: 1px solid #FFF490;">
      <span style="color: #4C2906;">friends</span></h2>
<div class="ui-accordion-content card-block text-center" style="max-height:600px;">

<!--Profile 1-->
  <a href="#profiles" title="Name" data-toggle="popover" data-trigger="focus" data-placement="bottom"
  data-content="Some basic description of the relationship.">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle" width="150"></a>
<!--1 End-->

<!--Profile 2-->
  <a href="#profiles" title="Name" data-toggle="popover" data-trigger="focus" data-placement="bottom"
  data-content="Some basic description of the relationship.">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle" width="150"></a>
<!--2 End-->

<!--Profile 3-->
  <a href="#profiles" title="Name" data-toggle="popover" data-trigger="focus" data-placement="bottom"
  data-content="Some basic description of the relationship.">
  <img src="https://78.media.tumblr.com/9e1038c150c923205dd2c70288963186/tumblr_oiif841Tyc1ve5rdyo3_r3_250.png" class="rounded-circle" width="150"></a>
<!--3 End-->

      			</div></div></div>

<!--Credit! Don't touchy-->
<div class="p-3 text-uppercase" style="text-align: right;">
<a href="https://toyhou.se/CivilEngideer" class="text-white" title="coder" data-toggle="popover" data-trigger="hover"><i class="fas fa-cloud-sun"></i></a>
<a href="https://www.chickensmoothie.com/Forum/viewtopic.php?t=4100681" class="text-white" title="species" data-toggle="popover" data-trigger="hover"><i class="fas fa-cloud-moon"></i></a>
</div></div></div>
<!--Clan Banner
Just delete if you don't want it lol.-->
              <p><br></p><p><img src="https://file.toyhou.se/images/15647534_VewfsNEX41lgX0H.png" class="fr-fir fr-dii"></p>