[F2U] ♱ STARJIRO
created by:Beelzebunn
Custom ColorsHTMLCharacter
Copy
<!-- ✦✦ 【F2U】Starjiro by Diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
=============== ✧✧ Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~
୨୧ BG: #ddd / #8b8b8b
୨୧ Borders + Dividers: #fff (some text)
୨୧ Main Text: #000
୨୧ Accent text: #e5e5e5
୨୧ Font: Monospace
✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
꒰ა໒꒱ Container Setup
------------------------------------------------------------->
<div class="container col-md-6 p-2" style="
border: 2px solid #fff;
background:#9e9e9e">
<!------------------------------------------------------------
꒰ა໒꒱ Character banner
[ quote included ]
------------------------------------------------------------->
<div class="col justify-content-center" style="
border-left:2px solid #fff;
border-right:2px solid #fff;
border-top:2px solid #fff;
height:80px;
background-image:url('IMG_URL');
background-size:cover;
background-position:center">
<!------------------------- quote below -------------------->
<p class="text-center" style="margin:auto;
color:#fff;
font-family:monospace;
text-shadow:0 0 5px #fff, 0 0 8px #fff;
letter-spacing:2px">
Something tells me you're new here.
</p>
<!----------------- small quote end ------------------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Song card
------------------------------------------------------------->
<div class="row no-gutters p-2 col-auto mb-1" style="
border: 2px solid #fff;
background:#8b8b8b">
<div class="col-auto p-1" style="font-size:16px">
<iframe class="flex-fill" style="height:1em;width:1em;opacity:0;position:absolute;margin-top:6px;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/VIDEOIDHERE"></iframe>
<i class="far fa-circle-play" style="color:#fff"></i>
</div>
<div class="col my-auto p-1">
<hr class="my-1" style="background:#fff">
</div>
<div class="col-auto p-1" style="font-size:12px; font-family:monospace; color:#fff">
song name (artist)
</div>
<!--------------------- end of song card -------------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Basic intro
------------------------------------------------------------->
<div class="row no-gutters justify-content-between" style="column-gap:15px; margin:auto">
<!---------------------- 01 name ------------------------->
<div class="row no gutters p-1" style="color:#000;
font-family:monospace; font-size:9px;">
<div class="col-auto">
<u>name</u>
</div>
<div class="col my-auto">
<hr class="my-1" style="background:#eee">
</div>
<div class="col-auto">
<span style="color:#e5e5e5">content content</span>
</div>
</div>
<!---------------------- 02 age ------------------------->
<div class="row no gutters p-1" style="color:#000;
font-family:monospace; font-size:9px;">
<div class="col-auto">
<u>age</u>
</div>
<div class="col my-auto ">
<hr class="my-1" style="background:#fff">
</div>
<div class="col-auto">
<span style="color:#e5e5e5">00 | 0000XX</span>
</div>
</div>
<!---------------------- 03 prns ------------------------->
<div class="row no gutters p-1" style="color:#000;
font-family:monospace; font-size:9px;">
<div class="col-auto">
<u>prns</u>
</div>
<div class="col my-auto">
<hr class="my-1" style="background:#fff">
</div>
<div class="col-auto">
<span style="color:#e5e5e5">prn/noun</span>
</div>
</div>
<!---------------------- 04 orient ------------------------->
<div class="row no gutters p-1" style="color:#000;
font-family:monospace; font-size:9px;">
<div class="col-auto">
<u>orient</u>
</div>
<div class="col my-auto">
<hr class="my-1" style="background:#fff">
</div>
<div class="col-auto">
<span style="color:#e5e5e5">content</span>
</div>
</div>
<!---------------------- 04 status ------------------------->
<div class="row no gutters p-1" style="color:#000;
font-family:monospace; font-size:9px;">
<div class="col-auto">
<u>status</u>
</div>
<div class="col my-auto">
<hr class="my-1" style="background:#fff">
</div>
<div class="col-auto">
<span style="color:#e5e5e5">alive/dead</span>
</div>
</div>
<!---------------------- 05 occup ------------------------->
<div class="row no gutters p-1" style="color:#000;
font-family:monospace; font-size:9px;">
<div class="col-auto">
<u>occup</u>
</div>
<div class="col my-auto">
<hr class="my-1" style="background:#fff">
</div>
<div class="col-auto">
<span style="color:#e5e5e5">content</span>
</div>
</div>
<!------------------- end of basic intro ------------------>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Like / dislike
[non scrollable]
------------------------------------------------------------->
<div class="row no-gutters mb-1" style="column-gap:20px">
<div class="col-md-6 p-2" style="background:#ddd">
<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col mb-1"><a class="btn bg-faded btn-block active" style="background:#ddd; border:1px solid #fff; color:#fff;" data-toggle="tab" href="#likes"><i class="far fa-heart"></i></a></li>
<li class="col mb-1"><a class="btn bg-faded btn-block" style="background:#ddd; border:1px solid #000; color:#000;" data-toggle="tab" href="#dislikes"><i class="far fa-heart-crack"></i></a></li>
</ul>
<!---------------------- 01 Likes -------------------------->
<div class="tab-content">
<div class="tab-pane fade active show" id="likes">
<div class="card p-1 mb-0" style="
background:#ddd; border:2px solid #fff;
color:#000; font-family:monospace; font-size:9px ">
<div class="p-3">
<ul class="text-left mb-0" style="list-style-type:none; padding-left:0">
<li><i class="fal fa-sparkle"></i> content</li>
<li><i class="fal fa-sparkle"></i> content</li>
<li><i class="fal fa-sparkle"></i> content</li>
<li><i class="fal fa-sparkle"></i> content</li>
</ul>
</div>
</div>
</div>
<!---------------------- 02 Dislikes ------------------------>
<div class="tab-pane fade" id="dislikes">
<div class="card p-1" style="
background:#ddd; border:2px solid #000;
color:#000; font-family:monospace; font-size:9px ">
<div class="p-3">
<ul class="text-left mb-0" style="list-style-type:none; padding-left:0">
<li><i class="fal fa-xmark"></i> content</li>
<li><i class="fal fa-xmark"></i> content</li>
<li><i class="fal fa-xmark"></i> content</li>
<li><i class="fal fa-xmark"></i> content</li>
</ul>
</div>
</div>
</div>
<!-------------------- end of dis/like --------------------->
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Character img
[hidden on mobile devices]
------------------------------------------------------------->
<div class="col p-2 hidden-sm-down" style="
background-image:url(IMG_URL);
background-size:cover;
background-position:center">
<!------------------ Decor / remove if desired -------------->
<div class="col p-1" style="height:100%;
border:2px solid rgba(255,255,255,0.4980392156862745)">
<i class="fa-solid fa-xmark pull-right" style="color:#fff"></i>
</div>
</div>
<!-------------------- End of Dis/Likes row ----------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Story Box
[ scrollable ]
------------------------------------------------------------->
<div class="col p-3 mb-1" style="
border:2px solid #fff;
background-image:url(IMG_URL);
background-size:auto;
background-repeat:repeat;
background-attachment:fixed
">
<p class="mb-0 text-right" style="color#fff; font-family:monospace; font-size:8px"> scroll to read </p>
<div class="col p-2" style="
background:#ddd; box-shadow:0 3px 0 #000; color:#000; font-size:9px; font-family:monospace">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 110px; padding: 0px 20px 0px 10px;">
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.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.
<br><br>
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.
<br><br>
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.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.
</div>
<!----------------- end of decor / story box --------------->
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Aesthetic boxes
[or just your oc hehe]
------------------------------------------------------------->
<div class="row no-gutters mb-1" style="column-gap:12px">
<!------------------------ 01 image ------------------------>
<div class="col p-2" style="
min-height:200px;
background-image:url(IMG_URL);
background-size:cover;
background-positon:center">
<div class="col p-1" style="
height:100%;border:2px solid #fff; color:#fff">
<i class="fa-solid fa-xmark pull-right tooltipster" title="artist credit" data-toggle="tooltip"></i>
</div>
</div>
<!------------------------ 02 FA symb ---------------------->
<div class="col p-2" style="
min-height:200px;
background:#ddd">
<div class="col p-1" style="
height:100%;border:2px solid #fff">
<i class="fa-solid fa-xmark pull-right" style="color:#fff"></i>
<p class="text-center" style="
margin-top:57px; font-size:40px; color:#fff">
<i class="fa-sharp fa-solid fa-star fa-flip" style="animation-duration:3s; text-shadow:0 0 9px #fff"></i>
</p>
</div>
</div>
<!------------------------ 03 image ------------------------>
<div class="col p-2" style="
min-height:200px;
background-image:url(IMG_URL);
background-size:cover;
background-positon:center">
<div class="col p-1" style="
height:100%;border:2px solid #fff; color:#fff">
<i class="fa-solid fa-xmark pull-right tooltipster" title="artist credit" data-toggle="tooltip"></i></div>
</div>
<!-------------------- End of aesthetic boxes -------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Design Notes
[ scrollable ]
------------------------------------------------------------->
<div class="row no-gutters mb-1">
<div class="col-2 p-2 text-center" style="background:#ddd; font-size:30px">
<i class="fa-sharp fas fa-paint-roller" style="color:#fff; margin-top:25px"></i>
</div>
<div class="col p-2" style="height:100px; background:#8b8b8b">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 83px; padding: 0px 20px 0px 10px;">
<ul class="text-left" style="list-style-type:none; padding-left:0; color:#fff; font-family:monospace; font-size:9px">
<li><i class="fas fa-paintbrush-fine fa-flip-horizontal" style="transform:rotate(-137deg);"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span style="color:#000">[REQ]</span></li>
<li><i class="fas fa-paintbrush-fine fa-flip-horizontal" style="transform:rotate(-137deg)"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span style="color:#000">[REQ]</span></li>
<li><i class="fas fa-paintbrush-fine fa-flip-horizontal" style="transform:rotate(-137deg)"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-paintbrush-fine fa-flip-horizontal" style="transform:rotate(-137deg)"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-paintbrush-fine fa-flip-horizontal" style="transform:rotate(-137deg)"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!---------------- Add more above this line if you like ----->
</ul>
</div>
</div>
</div>
<!--------------------- end of design notes ---------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Final Quote
------------------------------------------------------------->
<!--------------------- bg box ------------------------------>
<div class="col p-2 mb-0 " style="
height:30px;
background-image:url(IMG_URL);
background-size:auto;
background-position:center;
background-attachment:fixed;">
<div class="w-100 h-100 container" style="
position:absolute; bottom:0; right:0; background: linear-gradient(to bottom, rgba(2,0,0,0.48),rgba(2,0,0,0.48));">
</div>
<div class="row no-gutters mb-0">
<!------------- Actual Quote / not too long ---------------->
<div class="col my-auto p-1" style="margin:auto">
<hr class="my-1 mb-0" style="background:#fff">
</div>
<div class="col-auto" style="color:#fff; font-family:monospace; font-size:9px; margin:auto; text-shadow:0 0 9px #fff, 0 0 8px #fff">
Its not as bad as you think. Promise.
</div>
<!------------------------------------------------------------
꒰ა໒꒱ End of code
------------------------------------------------------------->
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Credits
[ do not remove ]
------------------------------------------------------------->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; color:#000; font-size:9px; font-family:monospace">✦✦✦</a></p>
</div>