hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
[F2U] Knightly — Custom Coloured 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 image address links INSIDE brackets or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
ACCENT COLOUR
#c2ac83
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto" style="max-width:1000px; font-size:90%">
<!------------------------------------------------
IMAGE HEADER
------------------------------------------------->
<div class="card border-0 rounded-0" style="min-height:200px;
background-image:url(https://images.unsplash.com/photo-1560536270-b5855082dd85?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);
background-size:cover;
background-position:top;
background-repeat:no-repeat;">
<!-- FILTER -->
<div style="position:absolute; top:0; left:0; right:0; bottom:0">
<div class="w-100" style="height:200px; background-color:#c2ac83; mix-blend-mode:lighten; opacity:0.5;"></div>
</div>
</div>
<!------------------------------------------------
INTRODUCTION
------------------------------------------------->
<div class="card bg-faded rounded-0 p-3 mb-4" style="border-top:5px solid #c2ac83">
<!-- HEADER
---------------------------------------------->
<div class="row no-gutters mb-3">
<!-- BOOKMARK ICON -------------------------------->
<div class="col-sm-auto text-center" style="margin-top:-9px">
<span class="fa-stack fa-3x">
<i class="fa-solid fa-bookmark fa-stack-2x" style="color:#c2ac83; transform:scale(1, 1.4)"></i>
<i class="fa-light fa-dungeon text-white fa-stack-1x" style="font-size:35px"></i>
</span>
</div>
<!-- TITLE + BLURB ----------------------->
<div class="col pl-3 mt-sm-0 mt-5">
<div class="text-sm-left text-center display-4 font-italic my-2" style="font-family:georgia; font-weight:900;">
UNIVERSE
</div>
<div class="text-muted" style="letter-spacing:1px;">
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.
</div>
</div>
</div>
<hr class="w-100">
<!-- SUMMARY
---------------------------------------------->
<!--
→ split your long summary into two (2) equal parts!
-->
<div class="row no-gutters mx-auto text-justify" style="max-width:700px">
<!-- DECOR --------------------------->
<div class="col-auto pl-3 my-n3">
<div class="card rounded-0 h-100 bg-faded" style="border-width:0 10px 0 0; border-style:double"></div>
</div>
<!-- SUMMARY --------------------------->
<div class="col row no-gutters px-3">
<div class="col-sm p-3">
<!-- insert the first five words into the span! -->
<p><span class="text-uppercase text-monospace" style="letter-spacing:1px">Lorem ipsum dolor sit amet</span>, 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.</p>
<p>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque</p>
</div>
<div class="col-sm p-3">
<p>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque</p>
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- DECOR --------------------------->
<div class="col-auto pr-3 my-n3">
<div class="card rounded-0 h-100 bg-faded" style="border-width:0 10px 0 0; border-style:double"></div>
</div>
</div>
<hr class="w-100">
<!-- GENRE TAGS
---------------------------------------------->
<div class="row no-gutters text-uppercase font-italic" style="color:#c2ac83; letter-spacing:1px">
<div class="col-auto p-1">
<div class="card border-0 rounded-0 px-3 p-2">
#genre
</div>
</div>
<div class="col-auto p-1">
<div class="card border-0 rounded-0 px-3 p-2">
#genre
</div>
</div>
<div class="col-auto p-1">
<div class="card border-0 rounded-0 px-3 p-2">
#genre
</div>
</div>
<div class="col-auto p-1">
<div class="card border-0 rounded-0 px-3 p-2">
#genre
</div>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
<!------------------------------------------------
BUTTON LINKS
------------------------------------------------->
<div class="row no-gutters mb-4 mx-n2">
<!-- SIDE IMAGE
---------------------------------------------->
<div class="col-4 p-2">
<div class="w-100" style="min-height:300px; border-radius:0 20px 20px 0;
background-image:url(https://pbs.twimg.com/media/E1QHdW_UcAMdsA9.jpg);
background-size:cover;
background-position:top center;
background-repeat:no-repeat"></div>
</div>
<!-- HEADER
---------------------------------------------->
<div class="col-8 p-2 my-auto">
<div class="text-sm-left text-center display-4 font-italic my-2" style="font-family:georgia; font-weight:900;">
LINKS
</div>
<!-- CLICKIES
---------------------------------------------->
<div class="row no-gutters mx-n2">
<div class="col-sm-6 p-1">
<div style="background-color:#c2ac83;">
<a href="LINK_HERE" class="btn btn-block btn-outline-secondary rounded-0 text-white" style="letter-spacing:1px">
LINK
</a>
</div>
</div>
<div class="col-sm-6 p-1">
<div style="background-color:#c2ac83;">
<a href="LINK_HERE" class="btn btn-block btn-outline-secondary rounded-0 text-white" style="letter-spacing:1px">
LINK
</a>
</div>
</div>
<div class="col-sm-6 p-1">
<div style="background-color:#c2ac83;">
<a href="LINK_HERE" class="btn btn-block btn-outline-secondary rounded-0 text-white" style="letter-spacing:1px">
LINK
</a>
</div>
</div>
<div class="col-sm-6 p-1">
<div style="background-color:#c2ac83;">
<a href="LINK_HERE" class="btn btn-block btn-outline-secondary rounded-0 text-white" style="letter-spacing:1px">
LINK
</a>
</div>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
</div>
<!------------------------------------------------
CHARACTERS / MEMBERS IDK LMAO
------------------------------------------------->
<div class="card bg-faded rounded-0 p-3 mb-4" style="border-left:10px solid #c2ac83; border-right:10px solid #c2ac83">
<div class="row no-gutters">
<!-- CAST (LEFT)
---------------------------------------------->
<div class="col-lg p-3">
<!-- CHARACTER --------------------------->
<div class="row no-gutters mt-0">
<!-- AVATAR -->
<div class="col-5 p-2">
<img src="https://64.media.tumblr.com/dcbb68f6841bce02d856added0552b63/b04f6cf673f04701-06/s250x400/8daf2df908806717592ce019c51c09756162574a.jpg"
class="img-thumbnail rounded-0 p-2" style="height:150px; object-fit:cover;">
</div>
<div class="col-7 p-2 text-justify text-muted">
<!-- NAME LINK -->
<div class="mb-2">
<a href="LINK_HERE" class="text-body" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
NAME
</a>
</div>
<!-- ROLE TAGS ; use as many as you like -->
<div class="text-left">
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role</span>
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role 2</span>
</div>
<!-- SUMMARY -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
<!-- CHARACTER --------------------------->
<div class="row no-gutters mt-4">
<!-- AVATAR -->
<div class="col-5 p-2">
<img src="https://64.media.tumblr.com/dcbb68f6841bce02d856added0552b63/b04f6cf673f04701-06/s250x400/8daf2df908806717592ce019c51c09756162574a.jpg"
class="img-thumbnail rounded-0 p-2" style="height:150px; object-fit:cover;">
</div>
<div class="col-7 p-2 text-justify text-muted">
<!-- NAME LINK -->
<div class="mb-2">
<a href="LINK_HERE" class="text-body" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
NAME
</a>
</div>
<!-- ROLE TAGS ; use as many as you like -->
<div class="text-left">
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role</span>
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role 2</span>
</div>
<!-- SUMMARY -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
<!-- CHARACTER --------------------------->
<div class="row no-gutters mt-4">
<!-- AVATAR -->
<div class="col-5 p-2">
<img src="https://64.media.tumblr.com/dcbb68f6841bce02d856added0552b63/b04f6cf673f04701-06/s250x400/8daf2df908806717592ce019c51c09756162574a.jpg"
class="img-thumbnail rounded-0 p-2" style="height:150px; object-fit:cover;">
</div>
<div class="col-7 p-2 text-justify text-muted">
<!-- NAME LINK -->
<div class="mb-2">
<a href="LINK_HERE" class="text-body" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
NAME
</a>
</div>
<!-- ROLE TAGS ; use as many as you like -->
<div class="text-left">
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role</span>
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role 2</span>
</div>
<!-- SUMMARY -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
<!-- add more ABOVE this line! -->
</div>
<!-- IMAGE DIVDER
---------------------------------------------->
<div class="col-lg-auto p-3 hidden-md-down" style="width:140px;">
<div class="card bg-transparent rounded-0 h-100 px-3" style="border-width:0px 7px; border-style:double; min-height:100px;">
<!-- BOOKMARK ICON --------------------------->
<div class="text-center mb-4 mx-n4" style="margin-top:-23px">
<span class="fa-stack fa-3x">
<i class="fa-solid fa-bookmark fa-stack-2x" style="color:#c2ac83; transform:scale(1, 1.4)"></i>
<i class="fa-light fa-chess-king-piece text-white fa-stack-1x" style="font-size:35px"></i>
</span>
</div>
<!-- IMAGE --------------------------->
<div class="card border-0 rounded-0 h-100 mt-3" style="border-radius:10px;
background-image:url(https://images.unsplash.com/photo-1553434320-e9f5757140b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1527&q=80);
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
<!-- FILTER -->
<div style="position:absolute; top:0; left:0; right:0; bottom:0">
<div class="w-100 h-100" style="border-radius:10px; min-height:100px; background-color:#c2ac83; mix-blend-mode:lighten; opacity:0.5;"></div>
</div>
</div>
</div>
</div>
<!-- CAST (RIGHT)
---------------------------------------------->
<div class="col-lg p-3">
<!-- CHARACTER --------------------------->
<div class="row no-gutters mt-0">
<!-- AVATAR -->
<div class="col-5 p-2">
<img src="https://64.media.tumblr.com/dcbb68f6841bce02d856added0552b63/b04f6cf673f04701-06/s250x400/8daf2df908806717592ce019c51c09756162574a.jpg"
class="img-thumbnail rounded-0 p-2" style="height:150px; object-fit:cover;">
</div>
<div class="col-7 p-2 text-justify text-muted">
<!-- NAME LINK -->
<div class="mb-2">
<a href="LINK_HERE" class="text-body" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
NAME
</a>
</div>
<!-- ROLE TAGS ; use as many as you like -->
<div class="text-left">
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role</span>
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role 2</span>
</div>
<!-- SUMMARY -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
<!-- CHARACTER --------------------------->
<div class="row no-gutters mt-4">
<!-- AVATAR -->
<div class="col-5 p-2">
<img src="https://64.media.tumblr.com/dcbb68f6841bce02d856added0552b63/b04f6cf673f04701-06/s250x400/8daf2df908806717592ce019c51c09756162574a.jpg"
class="img-thumbnail rounded-0 p-2" style="height:150px; object-fit:cover;">
</div>
<div class="col-7 p-2 text-justify text-muted">
<!-- NAME LINK -->
<div class="mb-2">
<a href="LINK_HERE" class="text-body" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
NAME
</a>
</div>
<!-- ROLE TAGS ; use as many as you like -->
<div class="text-left">
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role</span>
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role 2</span>
</div>
<!-- SUMMARY -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
<!-- CHARACTER --------------------------->
<div class="row no-gutters mt-4">
<!-- AVATAR -->
<div class="col-5 p-2">
<img src="https://64.media.tumblr.com/dcbb68f6841bce02d856added0552b63/b04f6cf673f04701-06/s250x400/8daf2df908806717592ce019c51c09756162574a.jpg"
class="img-thumbnail rounded-0 p-2" style="height:150px; object-fit:cover;">
</div>
<div class="col-7 p-2 text-justify text-muted">
<!-- NAME LINK -->
<div class="mb-2">
<a href="LINK_HERE" class="text-body" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
NAME
</a>
</div>
<!-- ROLE TAGS ; use as many as you like -->
<div class="text-left">
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role</span>
<span class="badge text-white rounded-0 m-1 p-1 px-2 text-monospace" style="background-color:#c2ac83; letter-spacing:0.5px; font-weight:600;">role 2</span>
</div>
<!-- SUMMARY -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
</div>
<!------------------------------------------------
ENVIRONMENT
------------------------------------------------->
<div class="mb-4">
<!-- IMAGE
---------------------------------------------->
<div class="d-flex align-items-end flex-column w-100" style="height:500px; border-radius:20px;
background-image:url(https://i.pinimg.com/originals/1d/45/e0/1d45e0c788f23e34fc8bb866c707126e.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat">
<!-- SUMMARY
---------------------------------------------->
<!--
→ this is meant to be a very SHORT blurb of the environment
→ to write more detailed notes, use a different code in a seperate tab!
-->
<div class="mt-auto mx-auto mb-4" style="max-width:250px">
<div class="text-white text-center display-4 font-italic my-2" style="font-family:georgia; font-weight:900; text-shadow:0px 0px 5px rgba(0,0,0,0.9);">
THE CITY
</div>
<div class="card rounded-0 p-3 text-justify font-italic">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Duis sollicitudin</b> elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
<!------------------------------------------------
CREDITS
------------------------------------------------->
<div class="card bg-faded rounded-0 p-3" style="border-bottom:5px solid #c2ac83">
<div class="row no-gutters">
<!-- DECOR
---------------------------------------------->
<div class="col-auto pr-4 my-n3">
<div class="card rounded-0 h-100 bg-faded" style="border-width:0 10px 0 0; border-style:double"></div>
</div>
<!-- CREDITS
---------------------------------------------->
<div class="col">
<div class="row no-gutters my-2">
<!-- YOUR CREDITS ------------------------>
<div class="col-sm text-sm-left text-center mb-sm-0 mb-2">
<div class="my-2" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
CREDITS
</div>
<div class="text-muted" style="letter-spacing:1px">
Icons from <a href="https://fontawesome.com/search" class="text-reset">FontAwesome 6</a><br>
Photos from <a href="https://unsplash.com/" class="text-reset">Unsplash</a><br>
Artwork from <a href="https://myanimelist.net/anime/26243/Owari_no_Seraph" class="text-reset">Owari no Seraph / Seraph of the End</a><br>
<!-- add more ABOVE this line! -->
</div>
</div>
<!-- jiko'S CREDITS ---------------------->
<div class="col-sm text-sm-right text-center">
<div class="my-2" style="font-size:15px; font-family:georgia; font-weight:900; letter-spacing:1px">
CODE
</div>
<div class="text-muted" style="letter-spacing:1px">
<a href="https://toyhou.se/18031597." class="text-reset">
created by jiko
</a>
</div>
</div>
</div>
</div>
<!-- DECOR
---------------------------------------------->
<div class="col-auto pl-4 my-n3">
<div class="card rounded-0 h-100 bg-faded" style="border-width:0 10px 0 0; border-style:double"></div>
</div>
</div>
</div>
<!------------------------------------------------
IMAGE FOOTER
------------------------------------------------->
<div class="card border-0 rounded-0" style="min-height:100px;
background-image:url(https://images.unsplash.com/photo-1560536270-b5855082dd85?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);
background-size:cover;
background-position:bottom;
background-repeat:no-repeat;">
<!-- FILTER -->
<div style="position:absolute; top:0; left:0; right:0; bottom:0">
<div class="w-100" style="height:100px; background-color:#c2ac83; mix-blend-mode:lighten; opacity:0.5;"></div>
</div>
</div>
</div> <!-- code ends -->
