Profile
| <center> <div style="border-radius: 1em; max-width: 800px;"> <div class="col-lg-12 pl-lg-4"> <div class="justify-content-center"> <ul class="nav row no-gutters">   <!-- TABS--> <li class="nav-item col-md col-auto mr-1" style="background:#cde454;border-bottom:5px solid #90a03b;"> <a class="btn border-0 text-white nav-link active" style="mix-blend-mode:luminosity;box-shadow:none;" data-toggle="tab" href="#ONE"> <i class="fa-solid fa-head-side-goggles" style="font-size:50px; color:#2d6d25"></i></a></li> <li class="nav-item col-md col-auto mr-1" style="background:#83b036;border-bottom:5px solid #5c7b26;"> <a class="btn border-0 text-white nav-link" style="mix-blend-mode:luminosity;box-shadow:none;" data-toggle="tab" href="#TWO"> <i class="fa-solid fa-radar" style="font-size:50px; color:#2d6d25"></i></a></li> <li class="nav-item col-md col-auto mr-1" style="background:#67bf70;border-bottom:5px solid #48864e;"> <a class="btn border-0 text-white nav-link" style="mix-blend-mode:luminosity;box-shadow:none;" data-toggle="tab" href="#THREE"> <span class="fa-stack fa-2x">  <i class="fal fa-gear fa-stack-2x"  style="font-size:60px; color:#2d6d25"></i>  <i class="fas fa-brain fa-stack-1x "style="font-size:40px; color:#2d6d25"></i> </span></a></li> <li class="nav-item col-md col-auto mr-1" style="background:#95be43;border-bottom:5px solid #68852f;"> <a class="btn border-0 text-white nav-link" style="mix-blend-mode:luminosity;box-shadow:none;" data-toggle="tab" href="#FOUR"> <i class="fa-solid fa-check" style="font-size:50px; color:#2d6d25"></i></a></li> <li class="nav-item col-md col-auto mr-1" style="background:#d7d466;border-bottom:5px solid #979447;"> <a class="btn border-0 text-white nav-link" style="mix-blend-mode:luminosity;box-shadow:none;" data-toggle="tab" href="#FIVE"> <span class="fa-stack fa-2x">  <i class="fas fa-gear fa-stack-2x"  style="font-size:60px; color:#2d6d25"></i>  <i class="fal fa-tire-rugged fa-stack-1x "style="font-size:40px; color:#578a51"></i> </span></a></li> <li class="nav-item col-md col-auto mr-1" style="background:#97c941;border-bottom:5px solid #6a8d2e;"> <a class="btn border-0 text-white nav-link" style="mix-blend-mode:luminosity;box-shadow:none;" data-toggle="tab" href="#SIX"> <i class="fa-solid fa-compass" style="font-size:50px; color:#2d6d25"></i></a></li> </div>   <!-- TABS END--> <div class="tab-content" style=";">   <!-- TAB ONE BASICS--> <div class="tab-pane fade in active show" id="ONE"> <div class="img-rounded text-center " style="background-color:#5c9886; background-image:url(https://st2.depositphotos.com/2448349/11219/v/450/depositphotos_112190864-stock-illustration-notebook-background-paper-in-line.jpg); background-size:cover;background-blend-mode:multiply; height:410px;overflow:auto"> <div class="px-2 pt-3 p-3">     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Name</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Gender & Pronouns</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Birthday & Age</b></span> <span style="color:#105241; font-family:bookman"><b>00/00/0000 | 18 years</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Ethnicity</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Romantic Orientation</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Sexual Orientation</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Occupation</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Status</b></span> <span style="color:#105241; font-family:bookman"><b>Alive</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Voice</b></span> <span style="color:#105241; font-family:bookman"><b><a href="">Content</a></b></span></div> </div> <div class="p-2" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41350710_BODX42p9RE2FKOz.png); background-size:cover;"> <div class="row">    <!-- Begin object -->    <div class="col p-1">     <a href="https://toyhou.se/10760914.f2u-page-decor/gallery">      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/38482930_SoTP8X9qvMrrE6G.png" style="height: 80px; width: 80px">     </a><br>     <span style="font-size:.9em; color:#105241;">      <a class="tooltipster" data-toggle="tooltip" data-placement="bottom" title="HOVERDESCRIPTIONHERE">       Badge Here      </a>     </span>    </div>    <!-- End object -->     <!-- Begin object -->    <div class="col p-1">     <a href="https://toyhou.se/10760914.f2u-page-decor/gallery">      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/38482934_3BxwxGriwbTe4i8.png" style="height: 80px; width: 80px">     </a><br>     <span style="font-size:.9em; color:#105241;">      <a class="tooltipster" data-toggle="tooltip" data-placement="bottom" title="HOVERDESCRIPTIONHERE">       Ribbon Here      </a>     </span>    </div>    <!-- End object -->    <!-- Begin object -->    <div class="col p-1">     <a href="https://toyhou.se/10760914.f2u-page-decor/gallery">      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/38482963_CjOa85XeZE29wwg.png" style="height: 80px; width: 80px">     </a><br>     <span style="font-size:.9em; color:#105241;">      <a class="tooltipster" data-toggle="tooltip" data-placement="bottom" title="HOVERDESCRIPTIONHERE">       Ribbon Here      </a>     </span>    </div>    <!-- End object -->    <!-- Begin object -->    <div class="col p-1">     <a href="https://toyhou.se/10760914.f2u-page-decor/gallery">      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/38482952_kUBQhEu4QuFpps3.png" style="height: 80px; width: 80px">     </a><br>     <span style="font-size:.9em; color:#105241;">      <a class="tooltipster" data-toggle="tooltip" data-placement="bottom" title="HOVERDESCRIPTIONHERE">       Ribbon Here      </a>     </span>    </div>    <!-- End object --> </div></div>     </div></div>   <!-- TAB ONE BASICS END-->   <!-- TAB TWO ABILITIES--> <div class="tab-pane fade" id="TWO"> <div class="img-rounded text-center " style="background-color:#5c9886; background-image:url(https://st2.depositphotos.com/2448349/11219/v/450/depositphotos_112190864-stock-illustration-notebook-background-paper-in-line.jpg); background-size:cover;background-blend-mode:multiply; height:410px;overflow:auto"> <div class="px-2 pt-3 p-3"> <h2 style="color:#105241; font-family:bookman;" class="text-right"><b>Psychic Abilities</b></h2> <br> <div class="mb-3"> <!--power one--> <div class="col-lg-12 w-100 row no-gutters">    <div class="col-lg-9 col-xs-9 col-md-9 col-9 p-2"> <div class="p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px; background-color: rgba(242, 238, 203,.7)"> <p class="mb-2 font-bold" style="font-size: 18px; letter-spacing: 1px; color:#105241; font-family:bookman">  PSI-Punch </p>   <p style="color:#105241; font-family:bookman"> PSI-Punch is the psychic ability to generate a large fist of energy to punch, poke, or slap enemies.   </p> </div></div>   <div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2 "> <i class="fa-solid fa-hand-fist" style="font-size: 120px; transform: rotate(10deg);color: #F28C28; opacity: .6;"></i> </div></div> <br> <!--power two--> <div class="col-lg-12 w-100 row no-gutters">    <div class="col-lg-9 col-xs-9 col-md-9 col-9 p-2"> <div class="p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px; background-color: rgba(242, 238, 203,.7)"> <p class="mb-2 font-bold" style="font-size: 18px; letter-spacing: 1px; color:#105241; font-family:bookman"> Clairvoyance </p>   <p style="color:#105241; font-family:bookman"> Clairvoyance is the psychic ability to see through the eyes of others. It can connect to a person's mind even from great distances if channeled through a precious item connected to the target. It can also be used to see through security cameras.   </p> </div></div>   <div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2 "> <i class="fa-solid fa-eye" style="font-size: 120px; transform: rotate(10deg);color: #F28C28; opacity: .6;"></i> </div></div> <br> <!--power two--> <div class="col-lg-12 w-100 row no-gutters">    <div class="col-lg-9 col-xs-9 col-md-9 col-9 p-2"> <div class="p-1 pl-3 rounded-0" style="border-width: 0 0 0 3px; background-color: rgba(242, 238, 203,.7)"> <p class="mb-2 font-bold" style="font-size: 18px; letter-spacing: 1px; color:#105241; font-family:bookman"> Time Bubble </p>   <p style="color:#105241; font-family:bookman"> Time Bubble is the psychic ability to control time.   </p> </div></div>   <div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2 "> <i class="fa-solid fa-hourglass-half" style="font-size: 120px; transform: rotate(10deg);color: #F28C28; opacity: .6;"></i> </div></div>     </div></div></div></div>   <!-- TAB TWO ABILITIES END-->   <!-- TAB THREE PERSONALITY--> <div class="tab-pane fade" id="THREE"> <div class="img-rounded text-center " style="background-color:#5c9886; background-image:url(https://st2.depositphotos.com/2448349/11219/v/450/depositphotos_112190864-stock-illustration-notebook-background-paper-in-line.jpg); background-size:cover;background-blend-mode:multiply; height:410px;overflow:auto"> <div class="px-2 pt-3 p-3">     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Sun Zodiac</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Moon Zodiac</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Chinese Zodiac</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Tarot</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Birthstone</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div> <br> <div class="row"> <div class="col-lg-6 mb-lg-0 mb-4"> <div class="p-2" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41350719_AbCsO3fd5C0fnD7.png); background-size:cover;"> <p class="text-uppercase mt-3 mb-1" style="font-style:italic;font-weight:500;letter-spacing:.5px; color:#105241; font-family:bookman"><b>Likes</b></p> <ul class="mb-0 pl-4" style="color:#105241; font-family:bookman; height:197px;overflow:auto;"> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> </ul> <br> </div></div> <div class="col-lg-6 mb-lg-0 mb-4"> <div class="p-2" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41350719_AbCsO3fd5C0fnD7.png); background-size:cover;"> <p class="text-uppercase mt-3 mb-1" style="font-style:italic;font-weight:500;letter-spacing:.5px; color:#105241; font-family:bookman"><b>Dislikes</b></p> <ul class="mb-0 pl-4" style="color:#105241; font-family:bookman; height:197px;overflow:auto;"> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> </ul> <br> </div></div></div>     </div></div></div>   <!-- TAB THREE PERSONALITY END-->   <!-- TAB FOUR STORY--> <div class="tab-pane fade" id="FOUR"> <div class="img-rounded text-center " style="background-color:#5c9886; background-image:url(https://st2.depositphotos.com/2448349/11219/v/450/depositphotos_112190864-stock-illustration-notebook-background-paper-in-line.jpg); background-size:cover;background-blend-mode:multiply; height:410px;overflow:auto"> <div class="px-2 pt-3 p-3"> <center> <h3 style="color:#105241; font-family:bookman" class="p-2">Event One<h3> </center> <div class="p-2" style=" background-color: rgba(242, 238, 203,.5)"> <p style="text-align: justify; color:#105241; font-family:bookman;" class="p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod lacus eget suscipit facilisis. Donec et nisi ac odio molestie dapibus. Morbi erat massa, iaculis sit amet aliquam vel, viverra bibendum tortor. Proin vehicula ligula purus, quis suscipit urna feugiat eget. Nulla facilisi. Donec efficitur mattis massa a lobortis. Nulla lobortis ante ut facilisis efficitur. Sed eu leo vulputate, ornare mi non, mattis tortor. Duis et tellus ullamcorper, vestibulum purus in, auctor mauris. Phasellus et convallis enim. Curabitur id risus ut magna rutrum convallis vitae sed nibh. Nulla mollis, est vitae viverra fringilla, leo lorem lacinia odio, id pellentesque eros velit id purus. Phasellus hendrerit in risus eget dictum. </p> </div> <br> <center> <h3 style="color:#105241; font-family:bookman" class="p-2">Event Two<h3> </center> <div class="p-2" style=" background-color: rgba(242, 238, 203,.5)"> <p style="text-align: justify; color:#105241; font-family:bookman;" class="p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod lacus eget suscipit facilisis. Donec et nisi ac odio molestie dapibus. Morbi erat massa, iaculis sit amet aliquam vel, viverra bibendum tortor. Proin vehicula ligula purus, quis suscipit urna feugiat eget. Nulla facilisi. Donec efficitur mattis massa a lobortis. Nulla lobortis ante ut facilisis efficitur. Sed eu leo vulputate, ornare mi non, mattis tortor. Duis et tellus ullamcorper, vestibulum purus in, auctor mauris. Phasellus et convallis enim. Curabitur id risus ut magna rutrum convallis vitae sed nibh. Nulla mollis, est vitae viverra fringilla, leo lorem lacinia odio, id pellentesque eros velit id purus. Phasellus hendrerit in risus eget dictum. </p> </div>     </div></div></div>   <!-- TAB FOUR STORY END-->   <!-- TAB FIVE RELATIONSHIPS--> <div class="tab-pane fade" id="FIVE"> <div class="img-rounded text-center " style="background-color:#5c9886; background-image:url(https://st2.depositphotos.com/2448349/11219/v/450/depositphotos_112190864-stock-illustration-notebook-background-paper-in-line.jpg); background-size:cover;background-blend-mode:multiply; height:410px;overflow:auto"> <!-- 01 --> <div class="col-lg-12 w-100 row no-gutters">   <div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2 my-auto">     <img src="https://images.unsplash.com/photo-1534330207526-8e81f10ec6fc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="height: 150px; width: 150px; border-style: solid; border-color: #ffffff; border-width: 3px; position: relative;"></div>     <div class="col-lg-9 col-xs-9 col-md-9 col-9 p-2"> <div class="p-4" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41350728_DmXKQk4dgg9cs9n.png); background-size:cover;">     <div class="col-xl-12 col-sm-12 p-2 d-flex justify-content-between" style="border-bottom: 1px solid;">     <span class="text-uppercase"><a style="color:#D800A6" href="#">name</a></span><span style="color: #502A1D">relation</span></div>  <div style="overflow:auto; max-height:150px;">     <p style="text-align: justify; color: #B12952"> <font size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero. </p></font> </div></div></div></div> <!-- 02 --> <div class="col-lg-12 w-100 row no-gutters">   <div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2 my-auto">     <img src="https://images.unsplash.com/photo-1534330207526-8e81f10ec6fc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="height: 150px; width: 150px; border-style: solid; border-color: #ffffff; border-width: 3px; position: relative;"></div>     <div class="col-lg-9 col-xs-9 col-md-9 col-9 p-2"> <div class="p-4" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41350728_DmXKQk4dgg9cs9n.png); background-size:cover;">     <div class="col-xl-12 col-sm-12 p-2 d-flex justify-content-between" style="border-bottom: 1px solid;">     <span class="text-uppercase"><a style="color:#D800A6" href="#">name</a></span><span style="color: #502A1D">relation</span></div>  <div style="overflow:auto; max-height:150px;">     <p style="text-align: justify; color: #B12952"> <font size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero. </p></font> </div></div></div></div> <!-- 03 --> <div class="col-lg-12 w-100 row no-gutters">   <div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2 my-auto">     <img src="https://images.unsplash.com/photo-1534330207526-8e81f10ec6fc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="height: 150px; width: 150px; border-style: solid; border-color: #ffffff; border-width: 3px; position: relative;"></div>     <div class="col-lg-9 col-xs-9 col-md-9 col-9 p-2"> <div class="p-4" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41350728_DmXKQk4dgg9cs9n.png); background-size:cover;">     <div class="col-xl-12 col-sm-12 p-2 d-flex justify-content-between" style="border-bottom: 1px solid;">     <span class="text-uppercase"><a style="color:#D800A6" href="#">name</a></span><span style="color: #502A1D">relation</span></div>  <div style="overflow:auto; max-height:150px;">     <p style="text-align: justify; color: #B12952"> <font size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero. </p></font> </div></div></div></div>     </div></div>   <!-- TAB FIVE RELATIONSHIPS END-->   <!-- TAB SIX DESIGN--> <div class="tab-pane fade" id="SIX"> <div class="img-rounded text-center " style="background-color:#5c9886; background-image:url(https://st2.depositphotos.com/2448349/11219/v/450/depositphotos_112190864-stock-illustration-notebook-background-paper-in-line.jpg); background-size:cover;background-blend-mode:multiply; height:410px;overflow:auto"> <div class="row"> <div class="col-lg-4 mb-lg-0 mb-4"> <div style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/56229283_LNjk175Xmfs2xX3.png);background-size:cover;background-position:center;background-repeat:no-repeat;min-height:150px;" class="h-100"></div> </div> <div class="col-lg-5 mb-lg-0 mb-4">     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Height</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Build</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div>     <div class="col-lg-12 col-xs-12 col-md-6 col-12 d-flex justify-content-between"><span class="text-uppercase" style="color:#105241; font-family:bookman">       <b>Aesthetic</b></span> <span style="color:#105241; font-family:bookman"><b>Content</b></span></div> <p class="text-uppercase mt-3 mb-1" style="font-style:italic;font-weight:500;letter-spacing:.5px; color:#105241; font-family:bookman"><b>Notes</b></p> <ul class="mb-0 pl-4" style="color:#105241; font-family:bookman; height:250px;overflow:auto;"> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> <li class="mb-2"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></li> </ul> </div> <div class="col-lg-3 mb-lg-0 mb-4"> <div class="p-3" style="height:410px;overflow:auto; background-color: rgba(242, 238, 203,.7)"> <div class="mb-0"> <div class="mb-2" style="color:#105241; font-family:bookman"> Hair</div> <div class="p-1 text-dark" style="font-family:'courier new';background-color:#c1c1c1"> #c1c1c1</div> <div class="p-1 text-dark" style="font-family:'courier new';background-color:#8d949a;"> #8d949a</div> <div class="p-1 text-light" style="font-family:'courier new';background-color:#5c6a74;"> #5c6a74</div> <div class="p-1 text-light" style="font-family:'courier new';background-color:#2c4251;"> #2c4251</div> </div> <div class="mb-0"><hr /> <div class="mb-2" style="color:#105241; font-family:bookman"> Eyes </div> <div class="p-1 text-dark" style="font-family:'courier new';background-color:#D16666;"> #D16666</div> </div> <div class="mb-0"><hr /> <div class="mb-2" style="color:#105241; font-family:bookman"> Skin </div> <div class="p-1 text-light" style="font-family:'courier new';background-color:#561D25;"> #561D25</div> </div> <div class="mb-0"><hr /> <div class="mb-2" style="color:#105241; font-family:bookman"> Clothing </div> <div class="p-1 text-light" style="font-family:'courier new';background-color:#9d2655;"> #9d2655 </div> <div class="p-1 text-light" style="font-family:'courier new';background-color:#feace2;"> #feace2 </div> </div></div></div>   <!-- TAB SIX DESIGN END-->     </div></div></div>   <!-- END OF TABBED CONTENT-->   <!-- CREDIT PLEASE DONT DELETE--> <center>  <span data-toggle="tooltip" title="Code by CheeseSatan" ><a href="https://toyhou.se/CheeseSatan"><i class="fas fa-cheese-swiss fa-fw text-info"></i></a></span> </center>   <!-- CREDIT PLEASE DONT DELETE--> |
