<!---
GUCCI AND GREED / by cati/dogboy
NOTES
accent: #CE9931
fontawesome icon: fas fa-money-bill-wave-alt
(use ctrl+f + replace for accent/icon replacement)
custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:url(https://64.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o6_250.png) repeat fixed;padding:10px;border:2px solid;max-height:;max-width:50%;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-lg-4 p-3">
<!--- avatar --->
<img class="mx-auto d-block img-thumbnail m-2" style="max-width:110%;border:2px solid;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26814667_2Cm_8280112.png?1601014637">
<div class="mx-auto my-3" style="width:115px;height:60px;background:#FFFFFF;border:2px solid;">
<a class="btn w-20 h-60 mt-0" data-toggle="collapse" href="#more">
<i class="fas fa-money-bill-wave-alt fa-3x" style="color:#CE9931;margin-left:13px;"></i>
</a>
</div>
<div class="p-3" style="background-color:#FFFFFF;max-height:50%;overflow:auto;border:2px solid;">
<!--- column info --->
<div class="justify-content-between">
<div><i class="far fa-user m-auto" style="color:#CE9931"></i></div>
<div><span class="text-muted font-italic" style="color:#CE9931;font-size:12px;letter-spacing:2px;">name</span></div>
</div>
<hr class="my-3" style="width:85%;background-color:#CE9931;">
<div class="justify-content-between">
<div><i class="fas fa-venus-mars m-auto" style="color:#CE9931"></i></div>
<div><span class="text-muted font-italic" style="color:#CE9931;font-size:12px;letter-spacing:2px;">gender</span></div>
</div>
<hr class="my-3" style="width:85%;background-color:#CE9931;">
<div class="justify-content-between">
<div><i class="far fa-suitcase m-auto" style="color:#CE9931"></i></div>
<div><span class="text-muted font-italic" style="color:#CE9931;font-size:12px;letter-spacing:2px;">occupation</span></div>
</div>
</div>
</div>
<div class="col-lg-8 p-3">
<!--- title --->
<div class="mt-0 py-1 px-3 m-3" style="border:2px solid;background-color:#CE9931;"><h3 class="text-uppercase m-2 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:4px;" align="center">gucci &. greed</h3></div>
<div class="p-2" style="background-color:#FFFFFF;max-height:400px;overflow:auto;border:2px solid;">
<div align="center">
<!--- body image, any image should work! --->
<center><img class="mx-auto p-4" style="width:300px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/26843336_4NenvMDup8Thqvx.png"></center>
<!--- traits --->
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">trait</span>
<i class="p-2 fas fa-money-bill-wave-alt m-auto" style="color:#CE9931"></i>
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">trait</span>
<i class="p-2 fas fa-money-bill-wave-alt m-auto" style="color:#CE9931"></i>
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">trait</span></div>
<hr class="my-3" style="width:85%;background-color:#CE9931;">
<!--- personality, history, etc... --->
<p class="text-center p-3 font-italic" style="color:#CE9931;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
<br><br>Sed malesuada ultricies tincidunt. Sed odio turpis, bibendum nec justo sed, lacinia sagittis nunc. Mauris facilisis purus neque, id feugiat sem malesuada vel. Aenean id nisl quis nulla vehicula iaculis quis sit amet sapien. Vestibulum faucibus lectus sit amet justo tempus hendrerit. Praesent ut lacus neque. Curabitur vitae sem at sapien rutrum dictum.</p>
<center>
<!--- color palette --->
<i class="fas fa-diamond fa-2x m-2" style="color: #2A2A38;"></i>
<i class="fas fa-diamond fa-2x m-2" style="color: #754B3A;"></i>
<i class="fas fa-diamond fa-2x m-2" style="color: #BA7726;"></i>
<i class="fas fa-diamond fa-2x m-2" style="color: #D79C25;"></i>
<i class="fas fa-diamond fa-2x m-2" style="color: #ECC894;"></i></center>
<!--- stat bars, higher percentage = closer to the right! credit to Eggy for this concept --->
<div class="row px-sm-4 mx-auto m-3">
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">extrovert</span>
<span class="p-1 text-uppercase font-italic font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">introvert</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#CE9931;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">realistic</span>
<span class="p-1 text-uppercase font-italic font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">intuitive</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#CE9931;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">logical</span>
<span class="p-1 text-uppercase font-italic font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">emotional</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#CE9931;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
<div class="col-12 mb-3">
<span class="p-1 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">organized</span>
<span class="p-1 text-uppercase font-italic font-weight-bold pull-right" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">impulsive</span>
<div class="progress rounded-0 m-2">
<div class="progress-bar" style="color:#CE9931;background:none;border-right-width:8px;border-right-style:solid;
width:50%">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 p-2" style="background-color:#FFFFFF;max-width:95%;overflow:auto;border:2px solid;margin-left:2%;">
<div class="justify-content-between mx-2 p-2">
<!--- music player, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
<span>
<iframe class="flex-fill" style="height:1em;width:1em;opacity:0;position:absolute;margin-top:5.5px;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="fas fa-play fa-2x" style="color: #CE9931;"></i></span>
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#CE9931;">song name • <span class="text-muted font-italic" style="color:#CE9931;font-size:12px;letter-spacing:2px;">artist</span></span></span>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8445363.gucci-and-greed-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
<!--- pop up image --->
<div class="my-2 fade" id="more">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/27016630_CyUWAnHHuyPsLox.png" style="margin-top:-15%;margin-left:70%;max-width:18%;">
</div>
