hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
F2U Sentiment — Accent 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 --------------- #b59e86
> text in accent ------- #fff
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto my-4" style="max-width:600px; font-size:12px;">
<div class="row no-gutters m-n2">
<!-------------------------------------------------
LEFT DECOR DIVIDER
------------------------------------------------->
<div class="col-auto text-center">
<div class="sticky-top" style="top:50%;">
<div class="card p-1 py-3 rounded-0 border-0 mr-n2">
<i class="fa-duotone fa-feather-alt fa-2x faded fa-flip-horizontal"></i>
<!-- visit [fontawesome.com] for more icon options & replace [fa-feather-alt]! -->
</div>
</div>
<div class="h-100" style="position:absolute; top:0; right:0; left:0">
<div class="card h-100 rounded-0" style="border-width:0 10px 0 0; border-style:double"></div>
</div>
</div>
<!-------------------------------------------------
CODE STARTS
------------------------------------------------->
<div class="col px-4">
<div class="row no-gutters m-n1">
<!-------------------------------------------------
AVATAR
------------------------------------------------->
<div class="col-sm-5 p-1 mb-sm-n4">
<div class="card rounded-0 p-2 bg-faded h-100">
<img src="IMG_URL_HERE"
style="object-fit:cover; height:100%;">
</div>
</div>
<!-------------------------------------------------
MUSIC PLAYER
------------------------------------------------->
<div class="col-sm-7 p-1">
<div class="card rounded-0 border-0 p-4 bg-faded h-100" style="background:#b59e86; overflow:hidden;">
<!-- MUSIC FA-ICON
---------------------------------------------->
<div class="text-center mt-n5">
<i class="fa-duotone fa-compact-disc fa-6x mt-n2 fa-spin" style="color:#fff;"></i>
</div>
<div class="my-auto">
<!-- SONG INFO
---------------------------------------------->
<div class="text-center mt-3" style="color:#fff;">
<div class="font-italic" style="font-weight:900; font-family:georgia; letter-spacing:1px">
Song Name.
</div>
<div class="faded">
artist / band
</div>
</div>
<!-- FAKE ICONS
---------------------------------------------->
<div class="justify-content-between mt-4 mx-auto w-100" style="max-width:150px">
<i class="fa-duotone fa-backward fa-lg" style="color:#fff;"></i>
<i class="fa-duotone fa-play fa-lg" style="color:#fff;"></i>
<i class="fa-duotone fa-forward fa-lg" style="color:#fff;"></i>
</div>
<!-- EMBED YOUTUBE LINK
---------------------------------------------->
<div class="w-100 h-100" style="position:absolute; bottom:0px; left:0px; height:80px; overflow:hidden;">
<!--
> replace [ to_kSMP5xnI ] with your youtube video ID
(found AFTER https://www.youtube.com/watch?v=)
> keep the [ ?controls=0 ] at the end !!
-->
<iframe src="https://www.youtube.com/embed/to_kSMP5xnI?controls=0&start=221"
class="w-100"
style="position:absolute; top:-110px; left:0; height:400px; opacity:0.0001;"
frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
PROFILE
------------------------------------------------->
<div class="col-sm-5 p-1 my-sm-3" style="position:relative; z-index:2">
<!-- BASICS
---------------------------------------------->
<div id="basics">
<!-- HEADER ------------------------------>
<div class="card rounded-0 border-0 mr-sm-n3 py-2 pr-sm-2">
<div class="row no-gutters">
<div class="col-auto">
<div class="h-100 card p-2 rounded-0" style="border-color:#b59e86; color:#b59e86;">
<i class="fa-solid fa-flower fa-fw my-auto"></i>
<!-- visit [fontawesome.com] for more icon options & replace [fa-flower]! -->
</div>
</div>
<div class="col pl-2">
<div class="card p-2 px-3 rounded-0 border-0" style="background:#b59e86; color:#fff;">
<div class="text-uppercase" style="font-weight:900; font-family:georgia; letter-spacing:1px">
Basics
</div>
</div>
</div>
</div>
</div>
<!-- CONTENT ----------------------------->
<div class="card p-3 rounded-0 bg-faded" style="color:#b59e86;">
<div class="justify-content-between">
<em style="font-weight:900; font-family:georgia;">i.</em>
<span class="text-muted">
name.
</span>
</div><hr class="w-100 my-2">
<!------------------------------------>
<div class="justify-content-between">
<em style="font-weight:900; font-family:georgia;">ii.</em>
<span class="text-muted">
age.
</span>
</div><hr class="w-100 my-2">
<!------------------------------------>
<div class="justify-content-between">
<em style="font-weight:900; font-family:georgia;">iii.</em>
<span class="text-muted">
gender.
</span>
</div><hr class="w-100 my-2">
<!------------------------------------>
<div class="justify-content-between">
<em style="font-weight:900; font-family:georgia;">iv.</em>
<span class="text-muted">
pro / nouns.
</span>
</div><hr class="w-100 my-2">
<!------------------------------------>
<div class="justify-content-between">
<em style="font-weight:900; font-family:georgia;">v.</em>
<span class="text-muted">
orient.
</span>
</div><hr class="w-100 my-2">
<!------------------------------------>
<div class="justify-content-between">
<em style="font-weight:900; font-family:georgia;">vi.</em>
<span class="text-muted">
job / role.
</span>
</div>
<!-- add more above this line! don't forget the <hr> as well -->
</div>
</div>
<!-- SUMMARY
---------------------------------------------->
<div id="summary">
<!-- HEADER ------------------------------>
<div class="card rounded-0 border-0 mr-sm-n3 py-2 pr-sm-2">
<div class="row no-gutters">
<div class="col-auto">
<div class="h-100 card p-2 rounded-0" style="border-color:#b59e86; color:#b59e86;">
<i class="fa-solid fa-spa fa-fw my-auto"></i>
<!-- visit [fontawesome.com] for more icon options & replace [fa-spa]! -->
</div>
</div>
<div class="col pl-2">
<div class="card p-2 px-3 rounded-0 border-0" style="background:#b59e86; color:#fff;">
<div class="text-uppercase" style="font-weight:900; font-family:georgia; letter-spacing:1px">
Summary
</div>
</div>
</div>
</div>
</div>
<!-- CONTENT ----------------------------->
<div class="card p-3 rounded-0 bg-faded text-muted text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus.</p>
<p>Blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!-- STATS ------------------------------->
<!--
> full slot ==== fa-solid
> empty slot === fa-light
> feel free to replace fa-rhombus with another fontawesome icon!
> depending on what icon you choose (e.g. fa-circle or fa-star), you might be able to find "half icon" ;3c
-->
<div class="card text-justify text-muted p-3 rounded-0 bg-faded mt-2">
<div class="row no-gutters align-items-center">
<div class="col font-italic text-truncate" style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px">
charisma.
</div>
<div class="col pl-3 text-right" style="font-size:10px">
<i class="fa-solid fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
</div>
</div>
<hr class="w-100 my-2">
<!------------------------------------>
<div class="row no-gutters align-items-center">
<div class="col font-italic text-truncate" style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px">
confidence.
</div>
<div class="col pl-3 text-right" style="font-size:10px">
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
</div>
</div>
<hr class="w-100 my-2">
<!------------------------------------>
<div class="row no-gutters align-items-center">
<div class="col font-italic text-truncate" style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px">
intelligence.
</div>
<div class="col pl-3 text-right" style="font-size:10px">
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
</div>
</div>
<hr class="w-100 my-2">
<!------------------------------------>
<div class="row no-gutters align-items-center">
<div class="col font-italic text-truncate" style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px">
patience.
</div>
<div class="col pl-3 text-right" style="font-size:10px">
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
</div>
</div>
<hr class="w-100 my-2">
<!------------------------------------>
<div class="row no-gutters align-items-center">
<div class="col font-italic text-truncate" style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px">
honesty.
</div>
<div class="col pl-3 text-right" style="font-size:10px">
<i class="fa-solid fa-rhombus"></i>
<i class="fa-solid fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
<i class="fa-light fa-rhombus"></i>
</div>
</div>
<!-- add more above this line! don't forget the <hr> as well -->
</div>
</div>
<!-- DESIGN
---------------------------------------------->
<div id="design">
<!-- HEADER ------------------------------>
<div class="card rounded-0 border-0 mr-sm-n3 py-2 pr-sm-2">
<div class="row no-gutters">
<div class="col-auto">
<div class="h-100 card p-2 rounded-0" style="border-color:#b59e86; color:#b59e86;">
<i class="fa-solid fa-palette fa-fw my-auto"></i>
<!-- visit [fontawesome.com] for more icon options & replace [fa-palette]! -->
</div>
</div>
<div class="col pl-2">
<div class="card p-2 px-3 rounded-0 border-0" style="background:#b59e86; color:#fff;">
<div class="text-uppercase" style="font-weight:900; font-family:georgia; letter-spacing:1px">
Design
</div>
</div>
</div>
</div>
</div>
<!-- NOTES ------------------------------->
<div class="card p-3 rounded-0 bg-faded text-muted">
<ul class="mb-0 pl-3">
<li class="my-1">content</li>
<li class="my-1">content</li>
<li class="my-1">content</li>
<!-- add more above this line! -->
</ul>
</div>
</div>
<!-- LINKS (RELATIONSHIPS)
---------------------------------------------->
<div id="links">
<!-- HEADER ------------------------------>
<div class="card rounded-0 border-0 mr-sm-n3 py-2 pr-sm-2">
<div class="row no-gutters">
<div class="col-auto">
<div class="h-100 card p-2 rounded-0" style="border-color:#b59e86; color:#b59e86;">
<i class="fa-solid fa-link fa-fw my-auto"></i>
<!-- visit [fontawesome.com] for more icon options & replace [fa-link]! -->
</div>
</div>
<div class="col pl-2">
<div class="card p-2 px-3 rounded-0 border-0" style="background:#b59e86; color:#fff;">
<div class="text-uppercase" style="font-weight:900; font-family:georgia; letter-spacing:1px">
Links
</div>
</div>
</div>
</div>
</div>
<!-- LINK 1 ---------------------------->
<div class="card p-3 rounded-0 bg-faded text-muted">
<div class="row no-gutters align-items-center">
<div class="col-4 text-center">
<img src="IMG_URL_HERE">
<!--
> squared or 200x200 image is best!
-->
</div>
<div class="col pl-3 text-right">
<a class="font-italic"
style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px"
href="LINK_TO_CHARACTER">
name.
</a>
<hr class="my-2">
<div>
relation.
</div>
</div>
</div>
</div>
<!-- LINK 2 ---------------------------->
<div class="card p-3 rounded-0 bg-faded text-muted mt-2">
<div class="row no-gutters align-items-center">
<div class="col-4 text-center">
<img src="IMG_URL_HERE">
<!--
> squared or 200x200 image is best!
-->
</div>
<div class="col pl-3 text-right">
<a class="font-italic"
style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px"
href="LINK_TO_CHARACTER">
name.
</a>
<hr class="my-2">
<div>
do not write a lot.
</div>
</div>
</div>
</div>
<!-- LINK 3 ---------------------------->
<div class="card p-3 rounded-0 bg-faded text-muted mt-2">
<div class="row no-gutters align-items-center">
<div class="col-4 text-center">
<img src="IMG_URL_HERE">
<!--
> squared or 200x200 image is best!
-->
</div>
<div class="col pl-3 text-right">
<a class="font-italic"
style="color:#b59e86; font-weight:900; font-family:georgia; letter-spacing:1px"
href="LINK_TO_CHARACTER">
name.
</a>
<hr class="my-2">
<div>
brief relation tags only! otherwise, it'll look like this.
</div>
</div>
</div>
</div>
<!-- add more above this line! -->
</div>
<!-- add more sections above this line! -->
</div>
<!-------------------------------------------------
FOCAL IMAGE
------------------------------------------------->
<div class="col-sm-7 p-1">
<div class="h-100" style="min-height:550px; position:relative; overflow:hidden;">
<!-- BACKGROUND IMAGE
---------------------------------------------->
<div style="position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; transform:scale(1.2, 1.2);
/* BACKGROUND SETTINGS
---------------------------------------- */;
background-image:url(https://images.unsplash.com/photo-1660621742877-c3322c22e585?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size:cover;
background-position:bottom;
/* BLUR SETTING
---------------------------------------- */;
filter:blur(5px);">
</div>
<!-- WORD + DEFINITION
---------------------------------------------->
<!--
> find more transparent textures here [ https://www.transparenttextures.com/ ]
> i use [ https://tophonetics.com/ ] to find the phonetic spelling/puncuation of the word!
-->
<div style="background-image:url(https://www.transparenttextures.com/patterns/light-wool.png); background-color:rgba(255,255,255,0.1);">
<div class="text-right p-3 ml-auto" style="color:#fff; max-width:280px; text-shadow:0px 0px 6px #000">
<div class="text-uppercase" style="font-weight:900; font-family:georgia; letter-spacing:1px">
word
</div>
<div class="mt-n1 mb-2" style="font-family:courier new">
/wɜːd/
</div>
<div class="font-italic">
a definition of that word.
</div>
</div>
</div>
<!-- MESSAGES
---------------------------------------------->
<!--
> can be serious or as silly as u like !
> best if minimal/short, otherwise it may break
-->
<div class="p-3" style="position:absolute; bottom:0px; left:0; right:0;">
<!-- RECIEVER 1
------------------------------------------>
<div class="shadow card border-0 p-2 px-3" style="background:#b59e86; color:#fff; max-width:70%; font-size:10pt; border-radius:20px 20px 20px 0">
first tect
</div>
<!-- SENDER 1
------------------------------------------>
<div class="shadow card text-muted border-0 p-2 px-3 ml-auto mt-2 bg-faded" style="max-width:70%; font-size:10pt; border-radius:20px 20px 0 20px">
second text*
</div>
<!-- RECIEVER 2
------------------------------------------>
<div class="shadow card border-0 p-2 px-3 mt-2" style="background:#b59e86; color:#fff; max-width:70%; font-size:10pt; border-radius:20px 20px 20px 0">
witty remark >:(
</div>
<!-- messages end -->
</div>
</div>
</div>
<!-------------------------------------------------
CODE CREDIT
do not delete ty !
------------------------------------------------->
<div class="col-sm-5 p-1 mt-sm-n3">
<div class="card rounded-0 border-0 p-2 h-100 text-center" style="background:#b59e86;">
<a href="https://toyhou.se/20563576." class="my-auto font-italic" style="color:#fff; font-weight:900; font-family:georgia; letter-spacing:1px">
code by jiko.
</a>
</div>
</div>
<!-------------------------------------------------
IMAGE CREDITS
------------------------------------------------->
<div class="col-sm-7 p-1">
<div class="card rounded-0 p-2 bg-faded text-center">
<p>
<a href="ARTIST_URL_HERE" class="text-muted tooltipster" title="Avatar by ARTIST" style="text-decoration:none">
<i class="fa-solid fa-image fa-lg"></i>
</a>
<span class="px-1">/</span>
<a href="ARTIST_OR_UNSPLASH_URL_HERE" class="text-muted tooltipster" title="Photo BG by ARTIST" style="text-decoration:none">
<i class="fa-solid fa-camera-retro fa-lg"></i>
</a>
<!-- add more above this line if needed -->
</p>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
RIGHT DECOR DIVIDER
------------------------------------------------->
<div class="col-auto text-center">
<div class="sticky-top" style="top:50%;">
<div class="card p-1 py-3 rounded-0 border-0 ml-n2">
<i class="fa-duotone fa-feather-alt fa-2x faded"></i>
<!-- visit [fontawesome.com] for more icon options & replace [fa-feather-alt]! -->
</div>
</div>
<div class="h-100" style="position:absolute; top:0; right:0; left:0">
<div class="card h-100 rounded-0" style="border-width:0 0 0 10px; border-style:double"></div>
</div>
</div>
</div>
</div>
<!-- CODE ENDS -->
