<!-- [F2U] bloom by macroura
- YES YES I KNOW I KNOW "naoto did u actually make a yuzuru hanyu themed code much less a haru yo koi themed one" AND THE ANSWER IS YES UNFORTUNATELY
- drag me off the stage by the neck with a cane this instant before i start getting annoying ab this. im so terribly sorry in advance for being cringe. orz.
- ANYWAYS
notes
- bootstrap colors with a custom color accent! im not making a full bs color version y'all can figure that one out urselves
> accent: #f29ca6
- ya just a rlly simple run of the mill TH user code...not much else to say... except of course stream haru yo k-- [CAR CRASH NOISES]
- need a live code editor? try [ https://th.circlejourney.net/# ]
- need an easy palette generator? try [ https://coolors.co ]
- need free-to-use vector icons? try [ https://fontawesome.com ]
-->
<div class="container py-3" style="max-width:400px; font-size:12px; font-family:; line-height:1.2; letter-spacing:0.6px">
<div class="card w-100 rounded-0 p-1" style="min-height:350px">
<!-- username header w/ icon -->
<div class="justify-content-between mt-n4" style="font-size:2.4em; font-family:georgia">
<p class="font-italic font-weight-bold">
<span style="color:#f29ca6">u</span>sername / <span style="color:#f29ca6">t</span>itle
</p>
<!-- fontawesome icon; remove "fa-flip" to get rid of the animation or check this for more effects! : [ https://fontawesome.com/docs/web/style/styling ] -->
<i class="fas fa-ribbon align-self-center fa-flip" style="animation-duration:3.5s; color:#f29ca6"></i>
</div>
<!-- FIRST ROW OF CONTENT;
> includes image and basic info
-->
<div class="row no-gutters my-2">
<div class="col-6 pr-1">
<!-- image div; remember to replace IMG_LINK with the link to the image!
> this will grow depending on how many info slots there are to the right (more than 4) and will remain this size if there are less!
-->
<div class="h-100 bg-primary ml-n2" style="min-height:150px; border-radius:0px 50px; box-shadow: -4px 3px #f29ca6;
background-image:url(IMG_LINK);
background-position:top;
background-size:cover"> </div>
</div>
<!-- basic info -->
<div class="col-6 pl-1 align-self-center" style="font-weight:lighter">
<div class="justify-content-between align-items-center bg-faded p-1 my-1 mr-n3" style="border-radius:0px 50px 50px 0px">
<span class="card rounded-0 px-2 py-1" style="border-radius:0px 50px 50px 0px"> <i class="fas fa-signature fa-fw" style="color:#f29ca6"></i> </span>
<span class="pr-2"> pro/noun/s </span>
</div>
<div class="justify-content-between align-items-center bg-faded p-1 mb-1 mr-n3" style="border-radius:0px 50px 50px 0px">
<span class="card rounded-0 px-2 py-1" style="border-radius:0px 50px 50px 0px"> <i class="fas fa-cake fa-fw" style="color:#f29ca6"></i> </span>
<span class="pr-2"> age / birthday </span>
</div>
<div class="justify-content-between align-items-center bg-faded p-1 mb-1 mr-n3" style="border-radius:0px 50px 50px 0px">
<span class="card rounded-0 px-2 py-1" style="border-radius:0px 50px 50px 0px"> <i class="fas fa-globe fa-fw" style="color:#f29ca6"></i> </span>
<span class="pr-2"> location or languages </span>
</div>
<div class="justify-content-between align-items-center bg-faded p-1 mb-1 mr-n3" style="border-radius:0px 50px 50px 0px">
<span class="card rounded-0 px-2 py-1" style="border-radius:0px 50px 50px 0px"> <i class="fas fa-clock fa-fw" style="color:#f29ca6"></i> </span>
<span class="pr-2"> timezone (+UTC) </span>
</div>
<!-- add more info slots above this comment! -->
</div>
</div>
<!-- divider! -->
<div class="my-2 px-3 justify-content-center align-items-center">
<hr class="mx-1 flex-fill">
<p style="font-size:1.4em; font-weight:700; color:#f29ca6">
春よ、こい...
</p>
<hr class="mx-1 flex-fill">
</div>
<div class="row no-gutters">
<div class="col-9 px-1 align-self-center mb-2">
<div class="h-100 bg-faded text-justify" style="padding:15px 17px; border-radius:0px px; font-weight:lighter; font-size:0.95em">
write in here! the box will expand when filled with text! ( doesn't scroll this time im afraid :[ )
</div>
</div>
<div class="col-3 my-2">
<div class="h-100 mx-n2" style="min-height:120px; box-shadow: 4px 3px #f29ca6; border-radius:0px 50px;
background-image:url(IMG_LINK);
background-position:center;
background-size:cover"></div>
</div>
<!-- LINKS -->
<div class="col-12 my-2">
<div class="flex-row flex-wrap justify-content-between">
<div class="col mx-1 px-0" style="border-radius:50px; background:#f29ca6">
<a href="#" title="username#1234" class="btn btn-outline-secondary w-100 border-0 p-1 tooltipster" style="border-radius:inherit"> <i class="fab fa-discord fa-fw text-white"></i> </a>
</div>
<div class="col mx-1 px-0" style="border-radius:50px; background:#f29ca6">
<a href="TWITTER_LINK" class="btn btn-outline-secondary w-100 border-0 p-1" style="border-radius:inherit"> <i class="fab fa-twitter fa-fw text-white"></i> </a>
</div>
<div class="col mx-1 px-0" style="border-radius:50px; background:#f29ca6">
<a href="TUMBLR_LINK" class="btn btn-outline-secondary w-100 border-0 p-1" style="border-radius:inherit"> <i class="fab fa-tumblr fa-fw text-white"></i> </a>
</div>
<div class="col mx-1 px-0" style="border-radius:50px; background:#f29ca6">
<a href="DA_LINK" class="btn btn-outline-secondary w-100 border-0 p-1" style="border-radius:inherit"> <i class="fab fa-deviantart fa-fw text-white"></i> </a>
</div>
<div class="col mx-1 px-0" style="border-radius:50px; background:#f29ca6">
<a href="YT_LINK" class="btn btn-outline-secondary w-100 border-0 p-1" style="border-radius:inherit"> <i class="fab fa-youtube fa-fw text-white"></i> </a>
</div>
<div class="col mx-1 px-0" style="border-radius:50px; background:#f29ca6">
<a href="LINK" class="btn btn-outline-secondary w-100 border-0 p-1" style="border-radius:inherit"> <i class="fas fa-link fa-fw text-white"></i> </a>
</div>
<!-- add more links above this comment! -->
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE! -->
<span class="pull-right mt-1">
<a href="https://toyhou.se/sharkadelic" style="font-size:0.8em; color:#f29ca6"> by sharkadelic </a>
</span>
</div>