<!-------------------------------------------------
[F2U] Axiomatic — Bootstrap 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/# ] !
------------------------------
ACCENTS
→ [-primary]
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="my-md-5 mx-auto" style="max-width:1100px; font-size:95%">
<div class="row no-gutters" style="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" style="padding:3px">
<a class="btn btn-block btn-primary active d-flex h-100" 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" style="padding:3px">
<a class="btn btn-block btn-primary d-flex h-100" 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" style="padding:3px">
<a class="btn btn-block btn-primary d-flex h-100" 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" style="padding:3px">
<a class="btn btn-block btn-primary d-flex h-100" 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" style="padding:3px">
<a class="btn btn-block btn-primary d-flex h-100" 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 bg-faded" style="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">
Lover Is a Day
</div>
</div>
<!-- INSERT MUSIC HERE
--------------------------------------------->
<!--
→ replace [9wiEM0s4aCQ] 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/9wiEM0s4aCQ?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 bg-faded tab-content table-responsive p-3" style="height:540px">
<!-- BASIC INFO
--------------------------------------------->
<div class="tab-pane fade active show" id="axiomaticone">
<div class="my-2 text-primary lead display-4 text-uppercase text-center" style="letter-spacing:3px">
NAME
</div><hr>
<div class="lead text-center text-muted font-italic" style="letter-spacing:0.5px">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</div><hr>
<div class="row no-gutters my-n2">
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">name:</span> full name here
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">nickname:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">age:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">gender:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">species:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">orientation:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">relationship status:</span> content
</div>
<div class="col-sm-6 my-1">
<span class="text-muted mr-2" style="letter-spacing:0.5px">occupation:</span> content
</div>
<!-- add/delete more above THIS line! -->
</div><hr>
<div class="text-muted">
<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>
<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="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="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="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="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 text-primary lead display-4 text-uppercase text-center" style="letter-spacing:3px">
Personality
</div><hr>
<div class="text-muted">
<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>
<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">
<div class="progress bar bg-primary"
style="width:50%">
</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">
<div class="progress bar bg-primary"
style="width:50%">
</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">
<div class="progress bar bg-primary"
style="width:50%">
</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">
<div class="progress bar bg-primary"
style="width:50%">
</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">
<div class="progress bar bg-primary"
style="width:50%">
</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">
<div class="progress bar bg-primary"
style="width:50%">
</div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="row no-gutters">
<div class="col-6 pr-2">
<div class="text-uppercase" style="letter-spacing:1px">
Likes
</div>
<ul class="text-muted mb-0">
<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="text-muted mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add/delete more above THIS line! -->
</ul>
</div>
</div><hr>
<div class="text-uppercase" style="letter-spacing:1px">
Trivia
</div>
<ul class="text-muted mb-0">
<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 text-primary lead display-4 text-uppercase text-center" style="letter-spacing:3px">
Design Notes
</div><hr>
<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 class="text-muted">
<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" style="position:relative">
<div class="card border-0 h-100" style="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 text-primary lead display-4 text-uppercase text-center" style="letter-spacing:3px">
Backstory
</div><hr>
<div class="text-muted">
<!-- 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 text-body" style="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 text-body" style="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 text-body" style="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 text-primary lead display-4 text-uppercase text-center" style="letter-spacing:3px">
Relationships
</div><hr>
<!-- 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="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">Name</a>
</span>
<span class="text-primary faded font-italic" style="letter-spacing:2px; font-size:90%">relation</span>
</div><hr class="my-2">
<div class="text-muted">
<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="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">Name</a>
</span>
<span class="text-primary faded font-italic" style="letter-spacing:2px; font-size:90%">relation</span>
</div><hr class="my-2">
<div class="text-muted">
<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="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">Name</a>
</span>
<span class="text-primary faded font-italic" style="letter-spacing:2px; font-size:90%">relation</span>
</div><hr class="my-2">
<div class="text-muted">
<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>
<!------------------------------------------------
CREDITS
------------------------------------------------->
<div class="col-12 order-4" style="padding:3px">
<div class="small faded text-monospace font-italic">
<a href="LINK_TO_ARTIST" class="text-muted" 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>
</div>