<!-------------------------------------------------
[F2U] Axiomatic — Custom Coloured version.
(code by jiko, f2u custom for nyaar0n)
------------------------------
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/# ] !
------------------------------
COLOURS
→ accent --------------- #7ac1c7
→ background ----------- #cee7e2
→ card ----------------- #fefefe
→ text ----------------- #404040
→ text-muted ----------- #758389
→ border + bg-faded ---- 0,0,0
^ this uses rgba !!
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="my-md-5 mx-auto" style="max-width:1100px; font-size:95%">
<!--
→ don't want the background?
→ delete [p-4 rounded] from the class and [background-color:#HEXCODE;] from the style BELOW
-->
<div class="row no-gutters p-4 rounded" style="background-color:#cee7e2; margin:-4px;">
<!------------------------------------------------
TABS
------------------------------------------------->
<div class="col-lg-1 order-md-3 order-2">
<div class="h-100">
<ul class="nav row no-gutters h-100">
<li class="col-lg-12 col nav-item text-center rounded" style="background-color:#7ac1c7; margin:3px">
<a class="text-white btn btn-block btn-outline-secondary active d-flex h-100 border-0" style="text-decoration:none; box-shadow:none"
data-toggle="tab" href="#axiomaticone">
<i class="fas fa-user fa-fw m-auto" style="font-size:20px"></i></span>
</a>
</li>
<li class="col-lg-12 col nav-item text-center rounded" style="background-color:#7ac1c7; margin:3px">
<a class="text-white btn btn-block btn-outline-secondary d-flex h-100 border-0" style="text-decoration:none; box-shadow:none"
data-toggle="tab" href="#axiomatictwo">
<i class="fas fa-box-heart fa-fw m-auto" style="font-size:20px"></i></span>
</a>
</li>
<li class="col-lg-12 col nav-item text-center rounded" style="background-color:#7ac1c7; margin:3px">
<a class="text-white btn btn-block btn-outline-secondary d-flex h-100 border-0" style="text-decoration:none; box-shadow:none"
data-toggle="tab" href="#axiomaticthree">
<i class="fas fa-palette fa-fw m-auto" style="font-size:20px"></i></span>
</a>
</li>
<li class="col-lg-12 col nav-item text-center rounded" style="background-color:#7ac1c7; margin:3px">
<a class="text-white btn btn-block btn-outline-secondary d-flex h-100 border-0" style="text-decoration:none; box-shadow:none"
data-toggle="tab" href="#axiomaticfour">
<i class="fas fa-books fa-fw m-auto" style="font-size:20px"></i></span>
</a>
</li>
<li class="col-lg-12 col nav-item text-center rounded" style="background-color:#7ac1c7; margin:3px">
<a class="text-white btn btn-block btn-outline-secondary d-flex h-100 border-0" style="text-decoration:none; box-shadow:none"
data-toggle="tab" href="#axiomaticfive">
<i class="fas fa-link fa-fw m-auto" style="font-size:20px"></i></span>
</a>
</li>
</ul>
</div>
</div>
<!------------------------------------------------
FOCAL IMAGE AND MUSIC
------------------------------------------------->
<div class="col-lg-4 order-md-1 order-1" style="padding:3px">
<!-- FOCAL IMAGE
--------------------------------------------->
<div class="card border-0" style="background-color:#7ac1c7; min-height:540px;
/* IMAGE ADDRESS HERE
---------------------------------------- */;
background-image:url(IMG_HERE);
/* SETTINGS
---------------------------------------- */;
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
<!-- MUSIC DECOR
--------------------------------------------->
<div class="mt-auto px-3 py-2 row no-gutters rounded text-white" style="border-top-left-radius:0px; border-top-right-radius:0px; background-color:rgba(0,0,0,0.5)">
<div class="col-auto my-auto">
<i class="far fa-play fa-fw"></i>
</div>
<div class="col mx-3">
<hr style="border-color:rgba(255,255,255,0.2)">
</div>
<div class="col-auto my-auto lead font-italic" style="letter-spacing:1.5px">
baby i
</div>
</div>
<!-- INSERT MUSIC HERE
--------------------------------------------->
<!--
→ replace [jXfawZZyTAE] with your youtube id (found after https://www.youtube.com/watch?v=)
→ keep the [?controls=0] for a nicer preformance !!
-->
<div class="w-100" style="position:absolute; top:490px; right:0; height:49px; overflow:hidden;">
<iframe class="w-100" frameborder="0"
src="https://www.youtube.com/embed/jXfawZZyTAE?controls=0"
style="position:absolute; top:-125px; left:0; height:300px; opacity:0.001">
</iframe>
</div>
</div>
</div>
<!------------------------------------------------
TAB CONTENT
------------------------------------------------->
<div class="col-lg-7 order-md-2 order-3" style="padding:3px">
<div class="card tab-content table-responsive p-3" style="background:#fefefe; border-color:rgba(0,0,0,0.1); color:#404040; height:540px">
<!-- BASIC INFO
--------------------------------------------->
<div class="tab-pane fade active show" id="axiomaticone">
<div class="my-2 lead display-4 text-uppercase text-center" style="color:#7ac1c7; letter-spacing:3px">
Name
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="lead text-center font-italic" style="color:#758389; letter-spacing:0.5px">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="row no-gutters my-n2">
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">name:</span> full name here
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">nickname:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">age:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">gender:</span> content (pro/nouns)
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">race:</span> or species
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">orientation:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">relationship status:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="mr-2" style="color:#758389; letter-spacing:0.5px">occupation:</span> content
</div>
<!-- add/delete more above THIS line! -->
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div style="color:#758389;">
<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><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="row no-gutters text-center m-n1">
<div class="col-lg-3 col-6 p-1">
<div class="card border-0 h-100 w-100" style="background-color:rgba(0,0,0, 0.05); min-height:140px;
background-image:url(IMG_HERE);
background-size:cover;
background-position:center"></div>
</div>
<div class="col-lg-3 col-6 p-1">
<div class="card border-0 h-100 w-100" style="background-color:rgba(0,0,0, 0.05); min-height:140px;
background-image:url(IMG_HERE);
background-size:cover;
background-position:center"></div>
</div>
<div class="col-lg-3 col-6 p-1">
<div class="card border-0 h-100 w-100" style="background-color:rgba(0,0,0, 0.05); min-height:140px;
background-image:url(IMG_HERE);
background-size:cover;
background-position:center"></div>
</div>
<div class="col-lg-3 col-6 p-1">
<div class="card border-0 h-100 w-100" style="background-color:rgba(0,0,0, 0.05); min-height:140px;
background-image:url(IMG_HERE);
background-size:cover;
background-position:center"></div>
</div>
</div>
</div>
<!-- PERSONALITY
--------------------------------------------->
<div class="tab-pane fade" id="axiomatictwo">
<div class="my-2 lead display-4 text-uppercase text-center" style="color:#7ac1c7; letter-spacing:3px">
Personality
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div style="color:#758389">
<p>Nunc vel tortor purus. Quisque sed diam eget urna pretium eleifend vel nec lorem. Praesent pharetra enim at fermentum sagittis. Curabitur ut dignissim ipsum. Curabitur aliquam magna sed ornare bibendum.</p>
<p>Donec rutrum euismod gravida. Curabitur sed pellentesque justo. In consectetur metus vel varius aliquet. Ut placerat arcu quis eros accumsan, eu pretium lorem placerat.</p>
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="row no-gutters m-n2">
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<div class="col-5">
<div class="text-uppercase" style="letter-spacing:1px">
Confidence
</div>
</div>
<div class="col-7">
<div class="progress mt-2" style="height:4px; background-color:rgba(0,0,0, 0.05)">
<div class="progress bar"
style="width:50%;
background-color:#7ac1c7">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<div class="col-5">
<div class="text-uppercase" style="letter-spacing:1px">
Charisma
</div>
</div>
<div class="col-7">
<div class="progress mt-2" style="height:4px; background-color:rgba(0,0,0, 0.05)">
<div class="progress bar"
style="width:50%;
background-color:#7ac1c7">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<div class="col-5">
<div class="text-uppercase" style="letter-spacing:1px">
Honesty
</div>
</div>
<div class="col-7">
<div class="progress mt-2" style="height:4px; background-color:rgba(0,0,0, 0.05)">
<div class="progress bar"
style="width:50%;
background-color:#7ac1c7">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<div class="col-5">
<div class="text-uppercase" style="letter-spacing:1px">
Diligence
</div>
</div>
<div class="col-7">
<div class="progress mt-2" style="height:4px; background-color:rgba(0,0,0, 0.05)">
<div class="progress bar"
style="width:50%;
background-color:#7ac1c7">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<div class="col-5">
<div class="text-uppercase" style="letter-spacing:1px">
Intelligence
</div>
</div>
<div class="col-7">
<div class="progress mt-2" style="height:4px; background-color:rgba(0,0,0, 0.05)">
<div class="progress bar"
style="width:50%;
background-color:#7ac1c7">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 p-2">
<div class="row no-gutters">
<div class="col-5">
<div class="text-uppercase" style="letter-spacing:1px">
Kindness
</div>
</div>
<div class="col-7">
<div class="progress mt-2" style="height:4px; background-color:rgba(0,0,0, 0.05)">
<div class="progress bar"
style="width:50%;
background-color:#7ac1c7">
</div>
</div>
</div>
</div>
</div>
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="row no-gutters">
<div class="col-6 pr-2">
<div class="text-uppercase" style="letter-spacing:1px">
Likes
</div>
<ul class="mb-0" style="color:#758389">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add/delete more above THIS line! -->
</ul>
</div>
<div class="col-6 pr-2">
<div class="text-uppercase" style="letter-spacing:1px">
Dislikes
</div>
<ul class="mb-0" style="color:#758389">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add/delete more above THIS line! -->
</ul>
</div>
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="text-uppercase" style="letter-spacing:1px">
Trivia
</div>
<ul class="mb-0" style="color:#758389">
<li>mauris suscipit bibendum ante in vehicula.</li>
<li>pellentesque facilisis dolor sit amet volutpat sollicitudin.</li>
<li>etiam tempus efficitur ex, congue rhoncus libero porttitor at. Curabitur porta leo risus, eu porta sapien laoreet at. Vivamus in enim eget metus congue rutrum vel eget risus.</li>
<!-- add/delete more above THIS line! -->
</ul>
</div>
<!-- DESIGN NOTES
--------------------------------------------->
<div class="tab-pane fade" id="axiomaticthree">
<div class="my-2 lead display-4 text-uppercase text-center" style="color:#7ac1c7; letter-spacing:3px">
Design Notes
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div class="row no-gutters m-n2">
<!-- NOTES ------------------------------------->
<div class="col-sm-6 p-2">
<!-- PALETTE -->
<div class="row no-gutters mx-n1">
<div class="col p-3 mx-1 card w-100" style="background-color:#000"></div>
<div class="col p-3 mx-1 card w-100" style="background-color:#222"></div>
<div class="col p-3 mx-1 card w-100" style="background-color:#444"></div>
<div class="col p-3 mx-1 card w-100" style="background-color:#666"></div>
<div class="col p-3 mx-1 card w-100" style="background-color:#888"></div>
<!-- add/delete more above THIS line! -->
</div>
<!-- DESIGN NOTES -->
<ul class="mt-3">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add/delete more above THIS line! -->
</ul>
<!-- SUMMARY -->
<div style="color:#758389">
<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>
<!-- REFERENCE IMAGE ------------------------------------->
<div class="col-sm-6 p-2">
<div class="card border-0 h-100" style="background-color:rgba(0,0,0, 0.05); min-height:430px;
background-image:url(IMG_HERE);
background-size:cover;
background-position:center">
</div>
</div>
</div>
</div>
<!-- BACKSTORY
--------------------------------------------->
<div class="tab-pane fade" id="axiomaticfour">
<div class="my-2 lead display-4 text-uppercase text-center" style="color:#7ac1c7; letter-spacing:3px">
Backstory
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<div style="color:#758389">
<!-- PAGEDOLL (add hide in the class to not display it (or just delete it lol)!) -->
<div class="text-center">
<img src="IMG_HERE"
class="m-1 mb-2 float-sm-right" style="max-width:250px">
</div>
<div class="text-uppercase" style="color:#404040; letter-spacing:1px">
<i class="far fa-bookmark mr-1"></i> Subheader
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum tincidunt turpis. Nulla quis interdum lacus, ac porta eros. Nam sed blandit mauris. Etiam faucibus felis sapien, nec consequat metus sollicitudin in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate nunc libero, at eleifend dui cursus vitae.</p>
<div class="text-uppercase" style="color:#404040; letter-spacing:1px">
<i class="far fa-bookmark mr-1"></i> Subheader
</div>
<p>Quisque a orci sollicitudin, volutpat ipsum in, pellentesque libero. Integer venenatis facilisis fringilla. Donec accumsan suscipit leo, vel rutrum tellus elementum ac.</p>
<p>Fusce auctor nisi diam, id molestie neque dapibus nec. Aliquam erat volutpat. Sed nulla sem, consequat eu nulla eu, varius venenatis diam. Morbi ante lorem, mollis a odio a, mollis faucibus lorem. Nam ac commodo tortor.</p>
<div class="text-uppercase" style="color:#404040; letter-spacing:1px">
<i class="far fa-bookmark mr-1"></i> Subheader
</div>
<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>
<!-- add/delete more above THIS line! -->
</div>
</div>
<!-- RELATIONSHIPS
--------------------------------------------->
<div class="tab-pane fade" id="axiomaticfive">
<div class="my-2 lead display-4 text-uppercase text-center" style="color:#7ac1c7; letter-spacing:3px">
Relationships
</div><hr style="border-color:rgba(0,0,0, 0.1)">
<!-- RELATIONSHIP ONE ----------------------------------------->
<div class="row no-gutters my-4">
<div class="col-md-3 pr-2 text-center">
<img src="IMG_HERE"
class="rounded-circle" style="background-color:rgba(0,0,0, 0.05); height:150px; width:150px; object-fit:cover">
</div>
<div class="col-md-9 pl-2">
<div class="lead justify-content-between">
<span class="text-uppercase" style="letter-spacing:2px">
<a href="LINK_TO_CHARACTER" style="color:#7ac1c7">Name</a>
</span>
<span class="faded font-italic" style="color:#7ac1c7; letter-spacing:2px; font-size:90%">relation</span>
</div><hr class="my-2" style="border-color:rgba(0,0,0, 0.1)">
<div style="color:#758389">
<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>
</div>
<!-- RELATIONSHIP TWO ----------------------------------------->
<div class="row no-gutters flex-row-reverse my-4">
<div class="col-md-3 pl-2 text-center">
<img src="IMG_HERE"
class="rounded-circle" style="background-color:rgba(0,0,0, 0.05); height:150px; width:150px; object-fit:cover">
</div>
<div class="col-md-9 pr-2">
<div class="lead justify-content-between">
<span class="text-uppercase" style="letter-spacing:2px">
<a href="LINK_TO_CHARACTER" style="color:#7ac1c7">Name</a>
</span>
<span class="faded font-italic" style="color:#7ac1c7; letter-spacing:2px; font-size:90%">relation</span>
</div><hr class="my-2" style="border-color:rgba(0,0,0, 0.1)">
<div style="color:#758389">
<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>
</div>
<!-- RELATIONSHIP THREE ----------------------------------------->
<div class="row no-gutters my-4">
<div class="col-md-3 pr-2 text-center">
<img src="IMG_HERE"
class="rounded-circle" style="background-color:rgba(0,0,0, 0.05); height:150px; width:150px; object-fit:cover">
</div>
<div class="col-md-9 pl-2">
<div class="lead justify-content-between">
<span class="text-uppercase" style="letter-spacing:2px">
<a href="LINK_TO_CHARACTER" style="color:#7ac1c7">Name</a>
</span>
<span class="faded font-italic" style="color:#7ac1c7; letter-spacing:2px; font-size:90%">relation</span>
</div><hr class="my-2" style="border-color:rgba(0,0,0, 0.1)">
<div style="color:#758389">
<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>
</div>
<!-- add/delete more above THIS line! -->
</div>
</div>
</div>
</div>
<!------------------------------------------------
CREDITS
------------------------------------------------->
<div class="mt-2">
<div class="small faded text-monospace font-italic">
<a href="LINK_TO_ARIST" class="text-muted tooltipster" style="text-decoration:none"
title="art by ARTIST">
<i class="fas fa-image fa-fw"></i>
</a>
|
<a href="https://toyhou.se/13971839." class="text-muted" style="text-decoration:none">
code by jiko
</a>
</div>
</div>
</div>