Puffkin Nightmare 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: #151621
- Main Font Color: #383151
+ Bonus Font Color: #212235
- Inner Box Headers: #645B85
+ Inner Box: #B2A8E0
- Glow: #3B3456
+ Color Palette Font: #FFFFFF-->


<!--Outer Box-->
<div class="card mx-auto"
  style="background:url('https://file.toyhou.se/images/15654090_nYv32Mh6ne3w2K0.png') #151621;
  color: #383151;
padding:15px 15px; box-shadow: 0 0 3px 3px #3B3456; 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: #B2A8E0; border: 1px solid #B2A8E0; box-shadow: 0 0 3px 3px #3B3456;">
<h2 class="card-inverse card-header" style="background: #645B85; border: 1px solid #645B85;">
<!--Name/Other-->
      <span style="color: #212235;">name</span></h2>
      <div class="ui-accordion-content card-block"><span style="color: #383151;">troop | rank</span>
</div></div>
<!--Crest-->
      <a href="#trooplink"><img src="https://file.toyhou.se/images/15647576_E5aze27zmMqY6T6.png" class="float-right p-1" style="height:180px;margin-top:-90px;"></a></div>

<!-- Colors
  Add or remove as desired, is only so wide though.
  Change width: 100% to height: 100% on the first color for even sections.-->
<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 #3B3456;">
<tr>
  <td style="height: 100%; background-color: #464646; text-align: right; vertical-align: bottom; font-size: 9px; color: #FFFFFF;">#464646</td>
  <td style="height: 100%; background-color: #929292; text-align: right; vertical-align: bottom; font-size: 9px; color: #FFFFFF;">#929292</td>
  <td style="height: 100%; background-color: #B8B8B8; text-align: right; vertical-align: bottom; font-size: 9px; color: #FFFFFF;">#B8B8B8</td>
  <td style="height: 100%; background-color: #3B3456; text-align: right; vertical-align: bottom; font-size: 9px; color: #FFFFFF;">#3B3456</td>
  <td style="height: 100%; background-color: #278F9C; text-align: right; vertical-align: bottom; font-size: 9px; color: #FFFFFF;">#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: #B2A8E0; border: 1px solid #B2A8E0; box-shadow: 0 0 3px 3px #3B3456;">
<h2 class="card-inverse card-header" style="background: #645B85; border: 1px solid #645B85;">
      <span style="color: #212235;">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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> 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: #212235;"> designer</span>
  <span><a class="text-white" href="#">-</a></span></div>

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

<!--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: #B2A8E0; border: 1px solid #B2A8E0; box-shadow: 0 0 3px 3px #3B3456;">
<h2 class="card-inverse card-header" style="background: #645B85; border: 1px solid #645B85;">
      <span style="color: #212235;">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 nightmare 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 class="text-white" href="https://pastebin.com/hfdMLjHd">Code Here</a> | <a class="text-white" href="https://www.chickensmoothie.com/Forum/viewtopic.php?t=4100681">Species Here</a></p>

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

<!--Images-->
<div class="row mb-2">
<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: #B2A8E0; border: 1px solid #B2A8E0; box-shadow: 0 0 3px 3px #3B3456;">
<h2 class="card-inverse card-header" style="background: #645B85; border: 1px solid #645B85;">
      <span style="color: #212235;">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/15647539_SuulrIXUvTDV39r.png" class="fr-fir fr-dii"></p>