<!-------------------------------------------------
F2U Quiet — Bootstrap Version
(code by jiko)
------------------------------
RULES
> Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
> turn OFF WYSIWYG (in display settings)
> turn ON Code Editor
------------------------------
TIPPY TIPS
> insert your img links INSIDE or quotation marks!!
> looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
PALETTE
> accent --------------- [-primary]
you can use -secondary, -warning, -success, -info or -danger!
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto my-5 py-5" style="max-width:800px; font-family:georgia; font-size:90%; letter-spacing:0.5px; line-height:17px">
<div class="row no-gutters m-n1 text-muted">
<!-------------------------------------------------
LEFT SIDE
------------------------------------------------->
<div class="col-lg-3 col-sm-6 col p-2 order-lg-1 order-1">
<div class="card border-0 p-3 h-100 flex-column bg-primary" style="border-radius:15px">
<!-- ICONS
---------------------------------------------->
<div class="flex-grow-1 text-center mb-2">
<!-- IMAGE -->
<!--
> best if squared or 200x200 !
-->
<img src="IMG_URL_HERE"
class="h-100 p-2 border-0 bg-faded"
style="height:180px; width:100%; object-fit:cover; border-radius:10px;">
<!-- FONTAWESOME ICONS -->
<!--
> you can replace [fa-spider-web] with any icon found on [fontawesome.com]!
> some icons may look very strange because of their different propotions so you're welcome to delete one or both of them ^^
-->
<i class="fa-thin fa-spider-web fa-6x"
style="color:#ffffff; position:absolute; top:5px; left:5px"></i>
<i class="fa-duotone fa-spider-web fa-6x faded"
style="color:#ffffff; position:absolute; top:5px; left:5px;"></i>
</div>
<!-- SHORT BLURB
---------------------------------------------->
<div class="flex-grow-3 my-2">
<p class="text-center font-italic faded text-white" style="letter-spacing:1px">
a short blurb here... but like, the longer, the smaller the image above will be.
</p>
</div>
<!-- TAB LINKS
---------------------------------------------->
<div class="flex-grow-2 text-white">
<div class="d-flex align-items-center">
<hr class="flex-fill my-1 mr-2 faded" style="border-top:1px solid white">
<a href="#carousel" data-slide-to="0" class="text-reset d-block" style="letter-spacing:1px;">
basics.
</a>
</div>
<div class="d-flex align-items-center">
<hr class="flex-fill my-1 mr-2 faded" style="border-top:1px solid white">
<a href="#carousel" data-slide-to="1" class="text-reset d-block" style="letter-spacing:1px;">
personality.
</a>
</div>
<div class="d-flex align-items-center">
<hr class="flex-fill my-1 mr-2 faded" style="border-top:1px solid white">
<a href="#carousel" data-slide-to="2" class="text-reset d-block" style="letter-spacing:1px;">
trivia.
</a>
</div>
<div class="d-flex align-items-center">
<hr class="flex-fill my-1 mr-2 faded" style="border-top:1px solid white">
<a href="#carousel" data-slide-to="3" class="text-reset d-block" style="letter-spacing:1px;">
lore.
</a>
</div>
<div class="d-flex align-items-center">
<hr class="flex-fill my-1 mr-2 faded" style="border-top:1px solid white">
<a href="#carousel" data-slide-to="4" class="text-reset d-block" style="letter-spacing:1px;">
links.
</a>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
MAIN CONTENT BOX
------------------------------------------------->
<div class="col-lg p-2 flex-column order-lg-2 order-3">
<div class="flex-grow-2 mb-2">
<p class="text-primary font-weight-bold font-italic text-lg-left text-right" style="font-size:25px; letter-spacing:3px; line-height:22px">
#name here
</p>
</div>
<div class="flex-grow-1">
<div id="carousel" class="card bg-faded p-3 border-0 carousel slide carousel-fade h-100" style="border-radius:15px;" data-pause="false">
<div class="carousel-inner">
<!-------------------------------------------------
BASICS
------------------------------------------------->
<div class="carousel-item active" style="height:350px; overflow-y:auto; overflow-x:hidden;">
<!-- HEADER
---------------------------------------------->
<div class="d-flex align-items-center mb-2">
<span class="font-weight-bold font-italic text-body" style="letter-spacing:1px;">basics.</span>
<hr class="flex-fill mx-2 my-0">
<i class="fa-solid text-body fa-acorn fa-fw"></i>
</div>
<!-- BASIC INFOS
---------------------------------------------->
<div class="row no-gutters m-n1">
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
name.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
age.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
gender.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
pronouns.
</div>
<div class="faded">
con / tent
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">species.</div>
<div class="faded">
and/or race
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
designer.
</div>
<a href="LINK_HERE" class="text-reset faded">
username
</a>
</div>
</div>
<!-- add more above this line! -->
</div>
<hr>
<!-- SUMMARY BLURB
---------------------------------------------->
<div class="text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p>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>
<!-------------------------------------------------
PERSONALITY
------------------------------------------------->
<div class="carousel-item" style="height:350px; overflow-y:auto; overflow-x:hidden;">
<!-- HEADER
---------------------------------------------->
<div class="d-flex align-items-center mb-2">
<span class="font-weight-bold font-italic text-body" style="letter-spacing:1px;">personality.</span>
<hr class="flex-fill mx-2 my-0">
<i class="fa-solid text-body fa-wheat fa-fw"></i>
</div>
<!-- TRAITS (CAN BE MORE THAN THREE)
---------------------------------------------->
<div class="card border-0 p-2 text-body font-italic text-center mb-2">
trait . trait . trait
</div>
<!-- SUMMARY
---------------------------------------------->
<div class="text-justify">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p>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>
<hr>
<!-- PREFERENCES
---------------------------------------------->
<div class="text-left">
<!-- LIKES -->
<p class="mb-2"><i class="fa-solid fa-check-circle fa-fw mr-1"></i>
content, content, content, content, content, content, content, content. this is likes.
</p>
<!-- DISLIKES -->
<p><i class="fa-solid fa-times-circle fa-fw mr-1"></i>
content, content, content, content, content, content, content, content. this is dislikes.
</p>
</div>
<hr>
<!-- STATS
---------------------------------------------->
<!--
> this is a score out of 5 !
> fa-solid fa-circle ============== full
> fa-solid fa-circle-half-stroke == half
> fa-regular fa-circle ============ empty
-->
<div class="row no-gutters m-n1">
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
intelligence.
</div>
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
wisdom.
</div>
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
charisma.
</div>
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
confidence.
</div>
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
honesty.
</div>
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
social battery.
</div>
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!-- add more stats above this line if you like -->
</div>
</div>
<!-------------------------------------------------
TRIVIA
------------------------------------------------->
<div class="carousel-item" style="height:350px; overflow-y:auto; overflow-x:hidden;">
<!-- HEADER
---------------------------------------------->
<div class="d-flex align-items-center mb-2">
<span class="font-weight-bold font-italic text-body" style="letter-spacing:1px;">trivia.</span>
<hr class="flex-fill mx-2 my-0">
<i class="fa-solid text-body fa-trees fa-fw"></i>
</div>
<!-- MISC. STUFF
---------------------------------------------->
<div class="row no-gutters m-n1">
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
sin.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
virtue.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
mbti.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!---------------------------------------->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3 text-body" style="border-radius:15px;">
<div class="font-italic" style="letter-spacing:1px;">
alignment.
</div>
<div class="faded">
content
</div>
</div>
</div>
<!-- add more trivial things above this line -->
</div>
<!-- COLOUR PALETTE
---------------------------------------------->
<div class="row no-gutters mt-3 mb-2" style="border-radius:10px; overflow:hidden">
<div class="col" style="height:20px; background:#936639"></div>
<div class="col" style="height:20px; background:#a68a64"></div>
<div class="col" style="height:20px; background:#b6ad90"></div>
<div class="col" style="height:20px; background:#c2c5aa"></div>
<!-- add more above this line! -->
</div>
<!-- TRIVIA/FUN FACTS/DESIGN NOTES LIST
---------------------------------------------->
<ul class="mb-0 pl-3">
<li>content.</li>
<li>content.</li>
<li>content.</li>
<li>content.</li>
<li>content.</li>
</ul>
</div>
<!-------------------------------------------------
LORE
------------------------------------------------->
<div class="carousel-item" style="height:350px; overflow-y:auto; overflow-x:hidden;">
<!-- HEADER
---------------------------------------------->
<div class="d-flex align-items-center mb-2">
<span class="font-weight-bold font-italic text-body" style="letter-spacing:1px;">lore.</span>
<hr class="flex-fill mx-2 my-0">
<i class="fa-solid text-body fa-pen-nib fa-fw"></i>
</div>
<!-- SECTION 1
---------------------------------------------->
<div>
<!-- TITLE + WARNING -------------------->
<div class="card border-0 p-2 font-italic text-body mb-2">
<div>
subtitle.
</div>
<div class="faded">
warning: this contains this and that.
</div>
</div>
<!-- CONTENT ---------------------------->
<div class="text-justify">
<p>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.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- SECTION 2
---------------------------------------------->
<div><hr>
<!-- TITLE + WARNING -------------------->
<div class="card border-0 p-2 font-italic text-body mb-2">
<div>
subtitle.
</div>
<div class="faded">
no warnings apply.
</div>
</div>
<!-- CONTENT ---------------------------->
<div class="text-justify">
<p>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.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- add more sections above this line! -->
</div>
<!-------------------------------------------------
LINKS
------------------------------------------------->
<div class="carousel-item" style="height:350px; overflow-y:auto; overflow-x:hidden;">
<!-- HEADER
---------------------------------------------->
<div class="d-flex align-items-center mb-2">
<span class="font-weight-bold font-italic text-body" style="letter-spacing:1px;">links.</span>
<hr class="flex-fill mx-2 my-0">
<i class="fa-solid text-body fa-signs-post fa-fw"></i>
</div>
<!-- RELATION 1
---------------------------------------------->
<div class="row no-gutters m-n1">
<!-- ICON -------------------------------->
<!--
> best if squared or 200x200 !
-->
<div class="col-3 p-1 flex-column">
<div class="flex-grow-1">
<div class="h-100 bg-primary" style="border-radius:10px;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- CHARACTER GLANCE -------------------->
<div class="col p-1 pl-2">
<!-- LINK ----->
<a href="LINK_TO_CHARACTER"
class="font-weight-bold font-italic text-lg-left text-center"
style="letter-spacing:3px;">
name.
</a>
<!-- RELATION STATUS ----->
<div class="mt-1 card border-0 p-2 px-3" style="border-radius:15px;">
<div class="font-italic text-body" style="letter-spacing:1px;">
relation.
</div>
<!--
> this is a score out of 5 !
> fa-solid fa-circle ============== full
> fa-solid fa-circle-half-stroke == half
> fa-regular fa-circle ============ empty
-->
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!-- SUMMARY ----------------------------->
<div class="col-12 p-1 text-justify">
<p>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.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- RELATION 2
---------------------------------------------->
<div class="row no-gutters m-n1">
<div class="col-12 p-1"><hr></div>
<!-- ICON -------------------------------->
<!--
> best if squared or 200x200 !
-->
<div class="col-3 p-1 flex-column">
<div class="flex-grow-1">
<div class="h-100 bg-primary" style="border-radius:10px;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- CHARACTER GLANCE -------------------->
<div class="col p-1 pl-2">
<!-- LINK ----->
<a href="LINK_TO_CHARACTER"
class="font-weight-bold font-italic text-lg-left text-center"
style="letter-spacing:3px;">
name.
</a>
<!-- RELATION STATUS ----->
<div class="mt-1 card border-0 p-2 px-3" style="border-radius:15px;">
<div class="font-italic text-body" style="letter-spacing:1px;">
relation.
</div>
<!--
> this is a score out of 5 !
> fa-solid fa-circle ============== full
> fa-solid fa-circle-half-stroke == half
> fa-regular fa-circle ============ empty
-->
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!-- SUMMARY ----------------------------->
<div class="col-12 p-1 text-justify">
<p>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.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- RELATION 3
---------------------------------------------->
<div class="row no-gutters m-n1">
<div class="col-12 p-1"><hr></div>
<!-- ICON -------------------------------->
<!--
> best if squared or 200x200 !
-->
<div class="col-3 p-1 flex-column">
<div class="flex-grow-1">
<div class="h-100 bg-primary" style="border-radius:10px;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- CHARACTER GLANCE -------------------->
<div class="col p-1 pl-2">
<!-- LINK ----->
<a href="LINK_TO_CHARACTER"
class="font-weight-bold font-italic text-lg-left text-center"
style="letter-spacing:3px;">
name.
</a>
<!-- RELATION STATUS ----->
<div class="mt-1 card border-0 p-2 px-3" style="border-radius:15px;">
<div class="font-italic text-body" style="letter-spacing:1px;">
relation.
</div>
<!--
> this is a score out of 5 !
> fa-solid fa-circle ============== full
> fa-solid fa-circle-half-stroke == half
> fa-regular fa-circle ============ empty
-->
<span class="text-primary">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
</div>
<!-- SUMMARY ----------------------------->
<div class="col-12 p-1 text-justify">
<p>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.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- add more relations above this line! -->
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
TINY BITS AND BOPS
------------------------------------------------->
<div class="col-lg-3 col-sm col p-2 order-lg-3 order-2">
<div class="card border-0 h-100 justify-content-center align-items-start" style="overflow:hidden">
<!-- FONTAWESOME ICON
---------------------------------------------->
<!--
> find more icons here!
[ https://fontawesome.com/ ]
-->
<div class="text-primary">
<i class="fa-duotone fa-tombstone fa-6x ml-n3"></i>
</div>
<!-- EXTREMELY SHORT QUOTE
---------------------------------------------->
<p class="font-italic mt-3 text-body" style="letter-spacing:1px">
"quote."
</p>
<!-- EXTREMELY SHORT QUOTE 2 (OPTIONAL)
---------------------------------------------->
<p class="font-italic text-right text-body faded" style="letter-spacing:1px">
"reply to quote."
</p>
</div>
</div>
<!-------------------------------------------------
JIKO CREDITS
------------------------------------------------->
<div class="col-12 p-2 order-4">
<div class="text-center mt-n2">
<a href="https://toyhou.se/19733045." class="text-muted font-italic faded tooltipster" title="code by jiko">
<i class="fa-regular fa-code fa-fw"></i>
</a>
</div>
</div></div></div>
<!-- CODE ENDS -->
hi hi! if you like my f2u codes, pls consider supporting with a kofi!