<!--------------------------------
Free to use Christmas User Profile Code
By LeafJelly
Colors
Use ctrl+f to replace the Hex Codes with the color you want
Santa Hats: #c90011
Other Red Icons: #C00020
Background: #216D0C
Background Accent: #004C00
DNI Background: #820000
Font: #FFF
---------------------------------->
<div class="col-12 card progress-bar-striped progress-bar-animated mx-auto mt-4 p-2" style="width:800px;border:2px dashed #FFF; border-radius:15px; background-color:#216D0C; color:#FFF; font-weight:300;"><div class="row no-gutters">
<div class="col-md- p-1 py-4 my-auto mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/34089538_AQq33inqrIW2Teo.png
" width="150" height="150" class="mx-auto rounded-circle border-0" style="background:#004C00">
<!-----Icon Decorations ---->
<div>
<i class="fad fa-hat-santa fa-4x" style="position:absolute; transform:rotate(35deg); margin:-170px 30px;
color:white"></i>
<i class="fad fa-hat-santa fa-swap-opacity fa-4x" style="position:absolute; transform:rotate(35deg); margin:-170px 30px;
color:#ad0000"></i>
<i class="fad fa-gifts fa-swap-opacity fa-3x" style="position:absolute; margin:-40px -80px;
color:white"></i>
<i class="fad fa-gifts fa-3x" style="position:absolute; margin:-40px -80px;
color:#C00020"></i>
</div>
<!---------- Username ---------->
<h2 class="pt-3 m-0" style="font-weight:400">Username</h2>
<i>Age · Pro/Nouns · Gender</i>
<div class="py-2 m-0">
<!----------Icon Buttons for Social Links ------------
Replace URL_HERE with the link to your socila media.
Change the name of icon button using title="NAME_HERE".
This appears only when you HOVER over the icon
Change the ICON of your buttion with the fa-icon-name-here using https://fontawesome.com/
fad means font awesome duotone. if you want it in the other weights, change the d in fad to the first letter of the other weight.
The avaliable weights from thicknest to thinnest are below (except duotone is 2 tones)
fas - solid far - regular fal - light fat - thin fad- duotone
fab - brands is only for brand icons, these don't have weights. aka, all social media icons!
--------------------->
<a href="URL_HERE" title="ArtFight" class="tooltipster text-light m-1">
<i class="fas fa-paintbrush-pencil fa-lg"></i></a>
<a href="URL_HERE" title="Deviantart" class="tooltipster text-light m-1">
<i class="fab fa-deviantart fa-lg"></i></a>
<a href="URL_HERE" title="Twitter" class="tooltipster text-light m-1">
<i class="fab fa-twitter fa-lg"></i></a>
<a href="URL_HERE" title="Instagram" class="tooltipster text-light m-1">
<i class="fab fa-instagram fa-lg"></i></a>
<a href="URL_HERE" title="Twitch" class="tooltipster text-light m-1">
<i class="fab fa-twitch fa-lg"></i></a>
<a href="URL_HERE" title="Carrd" class="tooltipster text-light m-1">
<i class="far fa-id-card fa-lg"></i></a>
<!----------- Copy and Paste Above here for more ------------>
</div>
<!---------Pixel Flags or Badges--------
You can find ribbons to use here https://toyhou.se/4739396.-ribbons
pixel pridge flags here https://toyhou.se/15017403.-f2u-pixel-pride-flags
Replace the URLS inside the quotes src="URL_HERE" with a image url/address
--------------------------------------->
<div class="pt-2 text-center mx-auto">
<img src="https://file.toyhou.se/images/16001026_2JNFhneUGwtKHyf.png">
<img src="https://file.toyhou.se/images/16001039_JHOm94saV2DZjfw.png">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/16755605_GGd.png?1569131982">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23964771_S7kjomBeufTZAHx.png">
</div>
</div>
<div class="col-md-9 row no-gutters m-0 h-100 my-auto">
<div class="col-md-8 p-1 my-auto text-center">
<div class="card p-3 pr-4 align-items-center" style="border-radius:10px; background:#004C00">
<p>
Write a bit about yourself here! This doesn't scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</p>
</div>
</div>
<!------------ Page Doll -------------
Replace the URL with a img URL/Address
The Pagedoll looks better if you have a tightly cropped image
------------------------------------->
<div class="col-md-4 align-items-center m-0">
<img src="
https://blogclan.katecary.co.uk/wp-content/uploads/2018/12/Misty-Moors-4.gif
" style="max-height:250px; max-width:210px; margin:0 -30px">
</div>
<div class="col-md-12 align-items-center text-center row no-gutters">
<div class="col-12 col-md-6 p-1"><div class="card p-2 m-0" style="border-radius:10px; background:#004C00">
<!---------- Title ----------->
<h4 class="pb-1 m-0 text-center text-uppercase" style="font-weight:400">
Status
</h4>
<hr class="col-0 m-0 mb-1 p-0" style="border-bottom:1px dashed #FFF">
<!------Delete or Add the Sections!------------>
<div class="justify-content-between pb-1">
<p><i class="fal fa-paintbrush fa-sm"></i>
Commissions
</p>
<div class="col mb-2 mx-1" style="border-bottom:1px solid #FFF"></div>
<!----Link---->
<a href="URL_HERE" class="text-light"><i>
Link
</i></a>
</div>
<div class="justify-content-between pb-1">
<p><i class="fal fa-right-left fa-sm"></i>
Character Trades
</p>
<div class="col mb-2 mx-1" style="border-bottom:1px solid #FFF"></div>
<i>Open</i>
</div>
<div class="justify-content-between pb-1">
<p><i class="fal fa-people-arrows fa-sm"></i>
Art Trades
</p>
<div class="col mb-2 mx-1" style="border-bottom:1px solid #FFF"></div>
<i>Mutuals Only</i>
</div>
<div class="justify-content-between pb-1">
<p><i class="fal fa-gift fa-sm"></i>
Requests
</p>
<div class="col mb-2 mx-1" style="border-bottom:1px solid #FFF"></div>
<i>Closed</i>
</div>
<!-------Copy and Paste above here for more-------->
</div></div>
<!-------------- Do Not Interact Section ----------------
Delete this if you don't want it
-------------------------------------------------------->
<div class="col-12 col-md-6 p-1 h-100"><div class="card p-2" style="height:150px; border-radius:10px; background:#820000">
<!---------- Title ----------->
<h4 class="pb-1 m-0 text-center text-uppercase" style="font-weight:400">
<i class="fad fa-warning"></i>
Dni
<i class="fad fa-warning"></i></h4>
<hr class="col-0 m-0 mb-1 p-0" style="border-bottom:1px dashed #FFF">
<!------ DNI text ------->
<p style="overflow:auto">
This scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div></div>
<!------ DNI end -------->
</div>
</div>
<!------ Featured Characters or Friends! -----------
Copy and paste the individual sections for more.
Delete the individual sections if you want less.
Change the symbol on the icons using https://fontawesome.com/
and changing the symbol name. Such as fa-hat-santa the icon name for this one is hat-santa.
--------------------------------->
<div class="col-12 pt-1 text-center">
<!---------- Title ----------->
<h4 class="col-11 mx-auto pb-1 mb-4 text-uppercase" style="font-weight:300; border-bottom:1px dashed #FFF">
Friends or Featured Characters
</h4>
<div class="row no-gutters">
<!--------- Character/User 1 start ---------->
<div class="col-4 col-md-2 p-1 mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" width="80" style="border-radius:10px">
<!-----Symbol: Hat------->
<i class="fad fa-hat-santa fa-2x" style="position:absolute; margin:-20px -54px;
color:white"></i>
<i class="fad fa-hat-santa fa-swap-opacity fa-2x" style="position:absolute; margin:-20px -54px;
color:#c90011"></i>
<p><a href="URL_HERE" class="text-light">
Character Name or Username
</a></p>
</div>
<!-------- Chara/User 1 end ----------->
<!--------- Character/User 2 start ---------->
<div class="col-4 col-md-2 p-1 mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" width="80" style="border-radius:10px">
<!-----Symbol: Ornament------->
<i class="fad fa-ornament fa-2x" style="position:absolute; margin:-20px -50px;
color:#C00020"></i>
<p><a href="URL_HERE" class="text-light">
Name
</a></p>
</div>
<!-------- Chara/User 2 end ----------->
<!--------- Character/User 3 start ---------->
<div class="col-4 col-md-2 p-1 mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" width="80" style="border-radius:10px">
<!-----Symbol: Mistletoe------->
<i class="fad fa-mistletoe fa-2x" style="position:absolute; margin:-20px -54px;
color:#FFF"></i>
<p><a href="URL_HERE" class="text-light">
Name
</a></p>
</div>
<!-------- Chara/User 3 end ----------->
<!--------- Character/User 4 start ---------->
<div class="col-4 col-md-2 p-1 mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" width="80" style="border-radius:10px">
<!----- Symbol: Lights ------->
<i class="fad fa-lights-holiday fa-2x" style="position:absolute; margin:0 -75px;
color:#C00020"></i>
<i class="fad fa-lights-holiday fa-2x" style="position:absolute; margin:0 -40px;
color:#C00020"></i>
<p><a href="URL_HERE" class="text-light">
Name
</a></p>
</div>
<!-------- Chara/User 4 end ----------->
<!--------- Character/User 5 start ---------->
<div class="col-4 col-md-2 p-1 mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" width="80" style="border-radius:10px">
<!-----Symbol: Hat but on the side------->
<i class="fad fa-hat-santa fa-2x" style="position:absolute; transform:rotate(30deg); margin:-15px -20px;
color:white"></i>
<i class="fad fa-hat-santa fa-swap-opacity fa-2x" style="position:absolute; transform:rotate(30deg); margin:-15px -20px;
color:#c90011"></i>
<p><a href="URL_HERE" class="text-light">
Name
</a></p>
</div>
<!-------- Chara/User 5 end ----------->
<!--------- Character/User 6 start ---------->
<div class="col-4 col-md-2 p-1 mx-auto text-center">
<!----------- Icon --------------
Replace the URL with a IMG url/address. Your image must be square.
--------------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" width="80" style="border-radius:10px">
<!-----Symbol: Hat but on the side------->
<i class="fad fa-hat-santa fa-2x" style="position:absolute; transform:rotate(30deg); margin:-15px -20px;
color:white"></i>
<i class="fad fa-hat-santa fa-swap-opacity fa-2x" style="position:absolute; transform:rotate(30deg); margin:-15px -20px;
color:#c90011"></i>
<p><a href="URL_HERE" class="text-light">
Name
</a></p>
</div>
<!-------- Chara/User 6 end ----------->
<!---------------- Copy and Paste above Here for More --------------------->
</div></div>
</div></div>
<!---------- Credit DO NOT REMOVE ------------>
<div class="text-center col-12">
<a href="/LeafJelly" class="tooltipster text-muted" title="HTML by LeafJelly"><i class="far fa-code fa-sm"></i></a>
</div>
