<!-- —————◜ ◝
/// STRAWBERRY PAWS | F2U USER CODE ///
Code made by GhostyF0x
Feel free to share this code in the comments if you use it ! I would love to see it <3
———————————————
/// PLEASE READ MY TOS BEFORE USING THIS CODE, THANK YOU ///
[ https://toyhou.se/~bulletins/1546806.coding-tos ]
———————————————
/// HELPFUL TIPS ///
Looking for a live coding editor? Try Circlejourney's Editor !
[https://th.circlejourney.net/#]
Looking for more " Fas " Icons? Try FontAwesome !
[https://fontawesome.com/search]
Trying to replace colors quickly? Try [ CTRL + H ] !
———————————————
/// COLORS ///
Main Accent ; #eb7777
Background Color ; #fff
Text Color ; #ea5c5c / #f5abab [Icons / Links]
———————————————
◟ ◞————— -->
<!-- —————— ◜ ◝
// BACKGROUND COLOR & PATTERN //
◟ ◞—————— -->
<!-- —————— ◜ BACKGROUND OVERLAY PATTERN, FIND MORE AT [ https://www.transparenttextures.com/ ] ◝ —————— -->
<div class="container-fluid" style="background-color:#fff;
background-image: url(https://cdn.discordapp.com/attachments/796817900405129250/1176946768051716227/grid-me.png?ex=6570b818&is=655e4318&hm=3afe9f4d98a96caebf8a6a1738327b9d63951c14121fa23572e9fd01687915f0&);
background-attachment: fixed;">
<!-- —————— ◜ TEXT COLOR & FONT TYPE ◝ —————— -->
<div class="mx-auto rounded-0 my-5 p-3" style="max-width:780px; color:#ea5c5c; font-family:'Times New Roman', Times, serif;">
<!-- —————— ◜ ◝
// MAIN CODE //
◟ ◞—————— -->
<!-- —————— ◜ MAIN BOX ◝ —————— -->
<div class="card bg-transparent p-3" style="border: double 5px #eb7777; border-radius: 2em">
<!-- —————— ◜ ◝
// TOP BARS //
◟ ◞—————— -->
<div class="row no-gutters">
<!-- —————— ◜ SOCIALS BAR ◝ —————— -->
<div class="card col-md-5 mb-2 p-1" style="border: double 5px #eb7777; background-color: #fff; border-radius: 2em">
<div class="text-center font-weight-bold font-italic py-1" style="font-size: 17px">
<!-- —————— ◜ SOCIAL LINK I. ◝ —————— -->
<a href="CARRD_LINK_HERE" style="color:#f5abab">
<i class="fal fa-id-card fa-lg mr-2"></i>
</a>
<!-- —————— ◜ SOCIAL LINK II. ◝ —————— -->
<a href="TWITTER_LINK_HERE" style="color:#f5abab">
<i class="fab fa-twitter fa-lg mr-2"></i>
</a>
<!-- —————— ◜ SOCIAL LINK III. ◝ —————— -->
<a href="INSTA_LINK_HERE" style="color:#f5abab">
<i class="fab fa-instagram fa-lg mr-2"></i>
</a>
<!-- —————— ◜ SOCIAL LINK IV. ◝ —————— -->
<a href="DA_LINK_HERE" style="color:#f5abab">
<i class="fab fa-deviantart fa-lg mr-2"></i>
</a>
<!-- —————— ◜ SOCIAL LINK V. ◝ —————— -->
<a href="KO-FI_LINK_HERE" style="color:#f5abab">
<i class="fal fa-coffee fa-lg mr-2"></i>
</a>
<!-- —————— ◜ DISCORD LINK ◝ —————— -->
<span class="tooltipster"
title="DISCORD_USERNAME"
data-placement="bottom" style="color:#f5abab">
<i class="fab fa-discord"></i>
</span>
</div>
</div>
<!-- —————— ◟ SOCIAL BAR END ◞ —————— -->
<!-- —————— ◜ QUTOE & ICONS BAR ◝ —————— -->
<div class="card col-md mb-2 ml-md-2 p-1" style="border: double 5px #eb7777; background-color:#fff; border-radius: 2em">
<!-- —————— ◜ QUTOE ◝ —————— -->
<div class="text-center font-italic align-items-center ml-3" style="font-size: 15px">
" Welcome ! What can I get ya ? "
<hr class="flex-fill mx-1" style="border-color: #eb7777">
<!-- —————— ◜ ICONS ◝ —————— -->
<i class="fal fa-wine-bottle fa-shake fa-lg" style="animation-duration: 3s"></i>
<i class="fal fa-strawberry fa-lg mr-3"></i>
</div>
</div>
</div>
<!-- —————— ◟ QUTOE & ICONS BAR END ◞ —————— -->
<!-- —————— ◜ ◝
// MIDDLE CODE //
◟ ◞—————— -->
<!-- —————— ◜ BANNER IMAGE ◝ —————— -->
<div class="card bg-transparent" style="height:100px; border-radius: 1em;
background-image:url(https://img.freepik.com/premium-vector/watercolor-strawberry-seamless-pattern_528213-1026.jpg);
background-size: cover;
background-position: center">
</div>
<!-- —————— ◜ MIDDLE AVATAR ◝ —————— -->
<div class="justify-content-center mb-2" style="margin-top:-80px; z-index: 1;">
<!-- —————— ◜ IMAGE ◝ —————— -->
<img src="https://i.pinimg.com/564x/0b/f8/f2/0bf8f201ea8f7b0e8d406a8312b6ab38.jpg"
class="rounded-circle" style="height:140px; width:140px; object-fit:cover; border: solid 7px #fff">
</div>
<div class="row no-gutters" style="margin-top: -20px">
<!-- —————— ◜ LEFT IMAGE DECO, HIDDEN ON MOBILE ◝ —————— -->
<div class="card col-md-1 ml-2 m-2 d-none d-md-inline" style="border: double 5px #eb7777; background-color: #fff; border-radius: 1em">
<!-- —————— ◜ IMAGE ◝ —————— -->
<div class="h-100 w-100" style="border-radius: 1em;
background-image:url(https://i.pinimg.com/564x/ce/67/5f/ce675f47e0816b8df107679806bb8a19.jpg);
background-size: cover;
background-position: center">
</div>
</div>
<!-- —————— ◟ LEFT DECO IMAGE END ◞ —————— -->
<!-- —————— ◜ ABOUT ME CARD ◝ —————— -->
<div class="card bg-transparent col-md-4 mr-md-1 p-2" style="border: double 5px #eb7777; border-radius: 3em">
<div class="col-md rounded-0 p-2">
<div class="pr-lg-4 mr-lg-n5" style="height: 200px; overflow-y:scroll">
<p class="text-center font-weight-bold font-italic" style="font-size: 17px">
About Me
</p>
<!-- —————— ◜ BACKGROUND COLOR ◝ —————— -->
<ul class="fa-ul ml-1 mb-n1 p-2" style="background-color: #fff">
<li>
<i class="fal fa-strawberry fa-lg"></i>
Name
<p class="pull-right">
Content
</p>
</li>
<li>
<i class="fas fa-strawberry fa-lg"></i>
Age
<p class="pull-right">
Content
</p>
</li>
<li>
<i class="fal fa-strawberry fa-lg"></i>
Pronouns
<p class="pull-right">
Content
</p>
</li>
<li>
<i class="fas fa-strawberry fa-lg"></i>
Timezone
<p class="pull-right">
Content
</p>
</li>
<li>
<i class="fal fa-strawberry fa-lg"></i>
Feeling?
<p class="pull-right">
Content
</p>
</li>
<!-- —————— ◟ ADD MORE ABOVE IF YOU'D LIKE ◞ —————— -->
</ul>
<!-- —————— ◜ DIVIDER ◝ —————— -->
<hr class="flex-fill mx-1 mb-1" style="border-color: #eb7777">
<!-- —————— ◜ ABOUT YOU ◝ —————— -->
<div class="p-2" style="background-color: #fff">
<p class="font-italic">
Write about youself here! This whole box scrolls so write as much as you'd like :,3 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>
</div>
</div>
<!-- —————— ◟ ABOUT ME CARD END ◞ —————— -->
<!-- —————— ◜ MIDDLE IMAGE ◝ —————— -->
<div class="col-md rounded-0 bg-transparent" style="border: double 5px #eb7777; border-radius: 3em">
<!-- —————— ◜ IMAGE ◝ —————— -->
<div class="h-100" style=" border-radius: 3em;
background-image:url(https://i.pinimg.com/564x/ce/67/5f/ce675f47e0816b8df107679806bb8a19.jpg);
background-position: right;
background-size: cover;
padding: 10px">
</div>
</div>
<!-- —————— ◟ MIDDLE IMAGE END ◞ —————— -->
<!-- —————— ◜ COMMS & OTHER CARD ◝ —————— -->
<div class="card bg-transparent col-md-4 ml-md-1 p-2" style="border: double 5px #eb7777; border-radius: 3em">
<div class="col-md rounded-0 p-2">
<div class="pr-lg-4 mr-lg-n5" style="height: 200px; overflow-y:scroll">
<!-- —————— ◜ COMM STATUS ◝ —————— -->
<p class="text-center font-weight-bold font-italic" style="font-size: 17px">
Artwork Status
</p>
<ul class="fa-ul ml-1 mb-n1 p-2" style="background-color: #fff">
<li>
<i class="fal fa-strawberry fa-lg"></i>
Comms
<p class="pull-right">
<a href="COMMISSION_LINK_HERE" style="color: #f5abab">
Open/Closed
</a>
</p>
</li>
<li>
<i class="fas fa-strawberry fa-lg"></i>
Trades
<p class="pull-right">
Open/Closed
</p>
</li>
<li>
<i class="fal fa-strawberry fa-lg"></i>
Requests
<p class="pull-right">
Open/closed
</p>
</li>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
</ul>
<hr class="flex-fill mx-1 mb-1" style="border-color: #eb7777">
<!-- —————— ◜ MIDDLE FOLDER LINKS, REMOVE THIS SECTION IF YOU WANT ◝ —————— -->
<!-- —————— ◜ LINKS ◝ —————— -->
<p class="text-center">
<a href="FOLDER_LINK_HERE" class="tooltipster" title="FOLDER_NAME_HERE">
<i class="fal fa-strawberry fa-lg mr-1"></i>
</a>
<a href="FOLDER_LINK_HERE" class="tooltipster" title="FOLDER_NAME_HERE">
<i class="fal fa-strawberry fa-lg mr-1"></i>
</a>
<a href="FOLDER_LINK_HERE" class="tooltipster" title="FOLDER_NAME_HERE">
<i class="fal fa-strawberry fa-lg mr-1"></i>
</a>
<a href="FOLDER_LINK_HERE" class="tooltipster" title="FOLDER_NAME_HERE">
<i class="fal fa-strawberry fa-lg"></i>
</a>
<hr class="flex-fill mx-1 my-n3" style="border-color: #eb7777">
</p>
<!-- —————— ◟ MIDDLE FOLDER LINKS END ◞ —————— -->
<!-- —————— ◜ INTERESTS, DNI, OR BYI LIST HERE, PUT WHATEVER YOU SEE FIT ◝ —————— -->
<p class="text-center font-weight-bold font-italic my-4" style="font-size: 17px">
Interests / Dni
</p>
<ul class="fa-ul ml-1 my-n4 p-2" style="background-color: #fff">
<li>
<i class="fal fa-strawberry fa-lg"></i>
Content
</li>
<li>
<i class="fas fa-strawberry fa-lg"></i>
Content
</li>
<li>
<i class="fal fa-strawberry fa-lg"></i>
Content
</li>
<li>
<i class="fas fa-strawberry fa-lg"></i>
Content
</li>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
</ul>
</div>
</div>
</div>
<!-- —————— ◟ COMMS & OTHER CARD END ◞ —————— -->
<!-- —————— ◜ RIGHT DECO IMAGE, HIDDEN ON MOBILE ◝ —————— -->
<div class="card col-md-1 ml-2 m-2 d-none d-md-inline" style="border: double 5px #eb7777; background-color: #fff; border-radius: 1em">
<!-- —————— ◜ IMAGE ◝ —————— -->
<div class="h-100 w-100" style="border-radius: 1em;
background-image:url(https://i.pinimg.com/564x/ce/67/5f/ce675f47e0816b8df107679806bb8a19.jpg);
background-size: cover;
background-position: center">
</div>
</div>
</div>
<!-- —————— ◟ RIGHT DECO IMAGE END ◞ —————— -->
<!-- —————— ◟ MIDDLE CODE END ◞ —————— -->
<!-- —————— ◜ ◝
// BOTTOM CODE //
◟ ◞—————— -->
<!-- —————— ◜ FRIENDS OR FEATURED CHARACTER LIST ◝ —————— -->
<div class="align-items-center justify-content-center">
<!-- —————— ◜ CHAR / FRIEND I. ◝ —————— -->
<a href="CHAR_OR_FRIEND_LINK">
<img src="https://i.pinimg.com/564x/89/d9/1a/89d91a7832751306773b7862432839e1.jpg"
style="width:80px; object-fit:cover; border: double 5px #eb7777; border-radius: 2em"
class="rounded-square h-100 my-3 mb-n2 mr-2 tooltipster"
title="CHARACTER_OR_FRIEND_NAME">
</a>
<!-- —————— ◜ CHAR / FRIEND II. ◝ —————— -->
<a href="CHAR_OR_FRIEND_LINK">
<img src="https://i.pinimg.com/564x/89/d9/1a/89d91a7832751306773b7862432839e1.jpg"
style="width:80px; object-fit:cover; border: double 5px #eb7777; border-radius: 2em"
class="rounded-square h-100 my-3 mb-n2 mr-2 tooltipster"
title="CHARACTER_OR_FRIEND_NAME">
</a>
<!-- —————— ◜ CHAR / FRIEND III. ◝ —————— -->
<a href="CHAR_OR_FRIEND_LINK">
<img src="https://i.pinimg.com/564x/89/d9/1a/89d91a7832751306773b7862432839e1.jpg"
style="width:80px; object-fit:cover; border: double 5px #eb7777; border-radius: 2em"
class="rounded-square h-100 my-3 mb-n2 mr-2 tooltipster"
title="CHARACTER_OR_FRIEND_NAME">
</a>
<!-- —————— ◜ CHAR / FRIEND IV. ◝ —————— -->
<a href="CHAR_OR_FRIEND_LINK">
<img src="https://i.pinimg.com/564x/89/d9/1a/89d91a7832751306773b7862432839e1.jpg"
style="width:80px; object-fit:cover; border: double 5px #eb7777; border-radius: 2em"
class="rounded-square h-100 my-3 mb-n2 mr-2 tooltipster"
title="CHARACTER_OR_FRIEND_NAME">
</a>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
</div>
</div>
<!-- —————— ◜ ◝
// CREDIT, DO NOT REMOVE //
◟ ◞—————— -->
<div class="text-center my-1">
<a href="https://toyhou.se/GhostyF0x" class="tooltipster faded" title="Code by GhostyF0x" data-placement="bottom">
<i class="fal fa-cassette-betamax fa-fade"></i>
</a>
</div>
</div>
</div>
