<!---- ◜ ◝
||| KITTY WEB ! | F2U CODE |||
Code made by GhostyF0x, thank you so much for using this template!
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 |||
-------
||| COLORS |||
Background Color ; #f9e4c1
Main Color ; #fff
Accent Color ; #f6cf8d
Text Color ; #b2807e
Shadow Color ; #ba758f
-------
◟ ◞---->
<!----◜ BACKGROUND COLOR, TRANSPARENT PATTERN, & TEXT COLOR ◝---->
<div class="container-fluid py-5" style="
background-color:#f9e4c1;
background-image:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/21383375_Qh0zTUGUCrjLJVH.png
);
font-family: Arial Black, sans-serif;
color:#b2807e">
<div class="mx-auto" style="max-width: 600px;">
<!----◜ TOP BAR ◝---->
<div class="p-2 rounded-0 align-items-center" style="background-color:#f6cf8d; box-shadow: 6px 7px 0px #ba758f">
<!----◜ ICON COLOR ◝---->
<p class="mt-2 mb-2" style="color:#fff">
<!----◜ TOP BAR ICONS ◝---->
<i class="fa fa-lg fa-left"></i>
<i class="fa fa-lg fa-right"></i>
<i class="fa fa-lg fa-rotate mr-1 ml-1 hidden-md-down"></i>
<!----◟ LAST ICON IS HIDDEN ON MOBILE :( ◞---->
</p>
<div class="mx-auto mr-2 ml-2 card border-0 p-2" style="background-color:#fff; border-radius:3em; width:250px">
<!----◜ USERNAME, CHANGE HERE ↴ ◝---->
<p class="text-center">
www.USERNAME.com
</p>
</div>
<!----◜ RIGHT ANIMATED ICON ◝---->
<p class="mr-2" style="color:#fff">
<i class="fa fa-lg fa-paw-simple fa-bounce"></i>
</p>
</div>
<!---- ◜ ◝
// MAIN CODE //
◟ ◞---->
<!----◜ MAIN CODE, BORDER, AND SHADOW COLORS ◝---->
<div class="card rounded-0 p-3" style="background-color:#fff;
border-left: solid 3px #f6cf8d;
border-right: solid 5px #f6cf8d;
border-bottom: solid 5px #f6cf8d;
border-top: solid 5px #f6cf8d;
box-shadow: 6px 6px 0px #ba758f">
<div class="row no-gutters">
<div class="col-lg-5 col-md col-sm align-items-center justify-content-center">
<!----◜ LEFT IMAGE, USE A SMALL BG-LESS IMAGE FOR A BETTER LOOK! IF IT LOOKS TOO SMALL / BIG, ADJUST THE WIDTH PX SIZE UNTIL IT LOOKS RIGHT ◝---->
<img src="
https://64.media.tumblr.com/26a1106556855a33e0da211064a892b0/b52a3f42ece6a182-36/s250x400/6bb009bcde3d62eed4cd1e9fb1edf85916bff812.pnj
" style="object-fit:cover; width:160px">
</div>
<!----◜ ABOUT ME SECTION ◝---->
<div class="col-lg-7 col-sm py-2 text-left">
<span class="text-uppercase font-italic font-weight-bold" style="color: #f6cf8d; font-size:1.5em; text-shadow: 3px 2px 0px #ba758f; letter-spacing:2px"> about me !! </span>
<div class="text-justify">
<!----◜ NAME, PRONOUNS, ETC ◝---->
<span class="font-italic" style="color:#f6cf8d"> Name // Pro/nouns // Age // Current Mood :3
</span>
<!----◜ WRITE ABOUT YOURSELF HERE! REMOVE THE SECOND "<br>" IF YOU DON'T WANT A SPACE BETWEEN THE TOP & BOTTOM SENTENCES ◝---->
<br> Tiny desc about yourself! Keep it 3-4 lines short since this doesn't scroll ! <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus
</div>
<!----◜ SOCIAL MEDIAS ◝---->
<div class="text-center my-1" style="font-size:12px">
<a href="SOCIAL_LINK">
<i class="fab fa-instagram"></i>
</a>
//
<a href="SOCIAL_LINK">
<i class="fab fa-deviantart"></i>
</a>
//
<a href="SOCIAL_LINK">
<i class="fab fa-twitter"></i>
</a>
//
<a href="SOCIAL_LINK">
<i class="fa fa-coffee"></i>
</a>
//
<a href="SOCIAL_LINK">
<i class="fa fa-id-card"></i>
</a>
//
<span class="tooltipster" title="DISCORD_USERNAME" data-placement="right">
<i class="fab fa-discord"></i>
</span>
</div>
</div>
</div>
<!----◜ BOTTOM LINE ◝---->
<hr class="flex-fill mx-2" style="border: dotted 3px rgba(255,193,102,0.3);">
<!----◟ ABOUT ME END ◞---->
<!---- ◜ ◝
// LEFT BOTTOM LIST START //
◟ ◞---->
<div class="row no-gutters">
<!----◜ RIGHT DOTTED BORDER ◝---->
<div class="col-lg col-sm py-2 text-left" style="border-right: dotted 4px rgba(255,193,102,0.3);">
<!----◟ ◞---->
<!----◜ DNI TITLE, YOU CAN CHANGE THIS TO CWS, INTERESTS, OR FUN FACTS! JUST KEEP IT SMALL ◝---->
<span class="text-uppercase font-italic font-weight-bold" style="color: #f6cf8d; font-size:1.5em; text-shadow: 3px 2px 0px #ba758f; letter-spacing:2px"> Dni !! </span>
<!----◜ CONTENT ◝---->
<ul class="fa-ul my-3">
<li>
<i class="fa-li fas fa-angle-right"></i> Content
</li>
<li>
<i class="fa-li fas fa-angle-right"></i> Content
</li>
<li>
<i class="fa-li fas fa-angle-right"></i> Content
</li>
<li>
<i class="fa-li fas fa-angle-right"></i> Content
</li>
<li>
<i class="fa-li fas fa-angle-right"></i> Content
</li>
<li>
<i class="fa-li fas fa-angle-right"></i> Content
</li>
<!----◟ ADD MORE ABOVE ◞---->
</ul>
</div>
<!----◟ BOTTOM LEFT LIST END ◞---->
<!---- ◜ ◝
// BOTTOM RIGHT USER / CHARACTER LIST //
◟ ◞---->
<div class="col-md col-lg">
<!----◜ FRIENDS LIST! YOU CAN REPLACE THE TITLE WITH " FEATURED CHARACTERS " IF YOU WANT ◝---->
<div class="text-right text-uppercase font-italic font-weight-bold" style="color: #f6cf8d; font-size:1.5em; text-shadow: 3px 2px 0px #ba758f; letter-spacing:2px"> Awesome People! </div>
<br>
<div class="row no-gutters">
<!----◜ USER ONE ◝---->
<a href="#LINK_HERE">
<!----◜ IMAGE HERE, ADJUST THE " HEIGHT " & " WIDTH " PX IF IT LOOKS OFF ◝---->
<img src="
https://64.media.tumblr.com/5ca75b97a26ba78cf8cdb0e9de563541/b52a3f42ece6a182-af/s250x400/baea444d62174a1b314fdc4c1b555719f8eaf932.pnj
" style="height:50px; width:70px; object-fit:cover">
</a>
<!----◜ USER TWO ◝---->
<a href="#LINK_HERE">
<!----◜ IMAGE HERE ◝---->
<img src="
https://64.media.tumblr.com/bebc6ca83b9492afb19d966bf7e3db65/b52a3f42ece6a182-60/s250x400/205429401ab906b86acdae4293050305529b2ecf.pnj
" style="height:50px; width:70px; object-fit:cover">
</a>
<!----◜ USER THREE ◝---->
<a href="#LINK_HERE">
<!----◜ IMAGE HERE ◝---->
<img src="
https://64.media.tumblr.com/5ca75b97a26ba78cf8cdb0e9de563541/b52a3f42ece6a182-af/s250x400/baea444d62174a1b314fdc4c1b555719f8eaf932.pnj
" style="height:50px; width:70px; object-fit:cover">
</a>
<!----◜ USER FOUR ◝---->
<a href="#LINK_HERE">
<!----◜ IMAGE HERE ◝---->
<img src="
https://64.media.tumblr.com/bebc6ca83b9492afb19d966bf7e3db65/b52a3f42ece6a182-60/s250x400/205429401ab906b86acdae4293050305529b2ecf.pnj
" style="height:50px; width:70px; object-fit:cover">
</a>
</div>
<!----◟ ADD MORE ABOVE, 6 MAX IS RECOMMENDED ◞---->
<!----◟ FRIEND LIST END ◞---->
<!----◜ BOTTOM LINE ◝---->
<hr class="flex-fill mx-2" style="border: dotted 3px rgba(255,193,102,0.3);">
<!---- ◜ ◝
// COMMS, TRADES, & REQUEST STATUS //
◟ ◞---->
<div class="ml-2" style="font-size:14px;">
<b>Commissions</b>
<p class="pull-right">
<a href="
LINK_HERE
" style="color:#f0a27e">
Content
</a>
</div>
<div class="ml-2" style="font-size:14px;">
<b>Art Trades</b>
<span class="pull-right">
Content
</span>
</div>
<div class="ml-2" style="font-size:14px;">
<b>Requests</b>
<span class="pull-right">
Content
</span>
</div>
<!----◟ ADD MORE ABOVE ◞---->
<!----◟ COMM, TRADE, & REQUEST STATUS END ◞---->
</div>
</div>
</div>
</div>
<!---- ◜ ◝
// CREDITS, DO NOT REMOVE //
◟ ◞---->
<div class="text-center py-4">
<!----◜ BACKGROUND PATTERN IMAGE CREDIT ◝---->
<a href="IMAGE_CREDIT_HERE" class="tooltipster faded" title="Background Pattern / Image" data-placement="bottom">
<i class="fal fa-image"></i>
</a>
<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>
