<!-- ------------------------------------
WHIMSICAL — Bootstrap Version
(code by jiko, layout by cosmical)
RULES
– Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3 thank youu
[ https://toyhou.se/~bulletins/127417.code-rules ]
TIPPY TIPS
– insert your img links INSIDE the brackets or quotation marks!!
------------------------------------- -->
<!-- [ don't like the lowercase aesthetic? just remove text-lowercase <3 ] -->
<div class="mx-auto mt-4 text-justify text-lowercase" style="font-size:12px; letter-spacing:0.3px; max-width:976px;">
<div class="row no-gutters">
<!-- ------------------------------------
BACKGROUND
------------------------------------- -->
<div class="card-block rounded p-3" style="border-top-left-radius:20px; border-bottom-right-radius:20px;
/* BACKGROUND IMAGE
====================================== */;
background-image:url(IMG LINK HERE);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;">
<div class="card-block p-0" style="border-top-left-radius:20px; border-bottom-right-radius:20px">
<div class="row no-gutters">
<!-- ------------------------------------
01 // FOCAL IMAGE
------------------------------------- -->
<div class="col-lg-4 p-1 py-2 order-1">
<div class="rounded card-transparent w-100 h-100" style="border-top-left-radius:20px">
<div class="rounded h-100" style="min-height:280px; border-top-left-radius:20px;
/* CHARACTER IMAGE
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;"></div>
</div>
</div>
<!-- ------------------------------------
02 // NAV BUTTONS
------------------------------------- -->
<div class="col-lg-1 p-1 order-2">
<div class="h-100">
<ul class="nav row no-gutters h-100">
<!-- -- FRONT PAGE
------------------------- -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default border-0 active d-flex h-100"
data-toggle="tab" href="#one">
<i class="fas fa-feather fa-fw m-auto text-primary"></i></span>
</a>
</li>
<!-- -- STORY
------------------------- -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default border-0 d-flex h-100"
data-toggle="tab" href="#two">
<i class="fas fa-cloud fa-fw m-auto text-primary"></i></span>
</a>
</li>
<!-- -- RELATIONSHIPS
------------------------- -->
<li class="col-lg-12 col-4 p-1 nav-item text-center">
<a class="btn btn-default border-0 d-flex h-100"
data-toggle="tab" href="#three">
<i class="fas fa-dove fa-fw m-auto text-primary"></i></span>
</a>
</li>
</ul>
</div>
</div>
<!-- ------------------------------------
03 // CONTENT
------------------------------------- -->
<div class="col-lg-7 p-1 py-2 order-3">
<div class="card border-0 table-responsive tab-content" style="height:500px; border-bottom-right-radius:20px;">
<!-- ------------------------------------
3.1 // SUMMARY
------------------------------------- -->
<div class="tab-pane fade active show" id="one">
<div class="p-3">
<!-- ---- HEADER ---------------------------- -->
<div class="display-4 text-center text-uppercase" style="font-size:22px; letter-spacing:6px;">
<span class="text-primary">˗ˏˋ</span>
Profile
<span class="text-primary">ˎˊ˗</span>
<hr class="w-75 mb-2"></div>
<div class="row no-gutters" style="height:410px; overflow:auto">
<!-- ---- CHARACTER INFO (1) ------------------ -->
<div class="col-lg-6 p-1">
<div class="rounded bg-faded p-3 h-100">
<div style="height:350px; overflow:auto">
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">NAME</span>
<span class="text-muted">content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">ALIAS</span>
<span class="text-muted">content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">AGE</span>
<span class="text-muted">content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">GENDER</span>
<span class="text-muted">content (prn/prn)</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">HEIGHT</span>
<span class="text-muted">content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">ORIENT.</span>
<span class="text-muted">content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">RACE</span>
<span class="text-muted">or species</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">ROLE</span>
<span class="text-muted">or occupation</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">THEME</span>
<span class="text-muted">
( <a href="LINK" style="text-decoration:none;">
<i class="fas fa-music"></i>
</a> )
</span>
</div>
<hr>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">STATUS</span>
<span class="text-muted">content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">DESIGNER</span>
<span class="text-muted">@ user</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary" style="letter-spacing:0.5px;">WORTH</span>
<span class="text-muted">$ $ $</span>
</div>
</div>
</div>
</div>
<!-- ---- CHARACTER INFO (2) ------------------ -->
<div class="col-lg-6 p-1">
<div class="card border-0 row no-gutters">
<!-- ---- PREFERENCESS ------------------ -->
<div class="col-12 pb-1">
<div class="row no-gutters rounded bg-faded p-3">
<!-- LIKES (best if short words!) -->
<div class="col-6 p-1">
<span class="text-primary" style="letter-spacing:0.5px;">
Likes
</span><hr class="my-1">
<div style="height:100px; overflow:auto">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
</ul>
</div>
</div>
<!-- DISLIKES (best if short words!) -->
<div class="col-6 p-1">
<span class="text-primary" style="letter-spacing:0.5px;">
Dislikes
</span><hr class="my-1">
<div style="height:100px; overflow:auto">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>content</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ---- TRIVIA ------------------ -->
<div class="col-12 pt-1">
<div class="rounded bg-faded p-3">
<span class="text-primary" style="letter-spacing:0.5px;">
Trivia
</span><hr class="my-1">
<div style="height:170px; overflow:auto">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>Mi quis hendrerit dolor magna eget est lorem ipsum dolor.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px;"></i></span>
<span>Volutpat blandit aliquam etiam erat velit scelerisque in dictum non.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------------
3.2 // STORY
------------------------------------- -->
<div class="tab-pane fade" id="two">
<div class="p-3">
<!-- ---- HEADER ---------------------------- -->
<div class="display-4 text-center text-uppercase" style="font-size:22px; letter-spacing:6px;">
<span class="text-primary">˗ˏˋ</span>
History
<span class="text-primary">ˎˊ˗</span>
<hr class="w-75 mb-2"></div>
<!-- ---- HEADER ---------------------------- -->
<div class="rounded bg-faded m-1 p-3">
<div class="text-muted" style="height:375px; overflow:auto">
<div class="text-primary pb-1" style="letter-spacing:0.5px;">
<i class="fas fa-bookmark fa-sm pull mr-2"></i> SUB-HEADING ONE
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum tellus pellentesque eu tincidunt tortor aliquam.</p>
<p>Consequat semper viverra nam libero justo laoreet. Quis vel eros donec ac. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc.</p>
<div class="text-primary pb-1 pt-3" style="letter-spacing:0.5px;">
<i class="fa fa-bookmark fa-sm pull mr-2"></i> SUB-HEADING TWO
</div>
<p>
Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Quam adipiscing vitae proin sagittis nisl rhoncus. Gravida neque convallis a cras semper auctor. Enim neque volutpat ac tincidunt vitae semper quis.
</p>
<div class="text-primary pb-1 pt-3" style="letter-spacing:0.5px;">
<i class="fas fa-bookmark fa-sm pull mr-2"></i> SUB-HEADING THREE
</div>
<p>Ullamcorper eget nulla facilisi etiam dignissim. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Donec et odio pellentesque diam. Suspendisse interdum consectetur libero id faucibus.</p>
<p>Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Adipiscing bibendum est ultricies integer quis auctor elit.</p>
<!-- [ add/delete above THIS line! ] -->
</div>
</div>
</div>
</div>
<!-- ------------------------------------
3.3 // RELATIONSHIPS
------------------------------------- -->
<div class="tab-pane fade" id="three">
<div class="p-3">
<!-- ---- HEADER ---------------------------- -->
<div class="display-4 text-center text-uppercase" style="font-size:22px; letter-spacing:6px;">
<span class="text-primary">˗ˏˋ</span>
LINKS
<span class="text-primary">ˎˊ˗</span>
<hr class="w-75 mb-2"></div>
<div class="row no-gutters" style="height:407px; overflow:auto">
<!-- ---- RELATIONSHIP ONE ---------------------------- -->
<div class="col-lg-6 p-3">
<div class="row no-gutters">
<div class="col-2">
<span style="font-size:15px;">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded" style="max-width:50px; max-height:50px">
</span>
</div>
<div class="col-10 text-right">
<a href="LINK" style="font-size:15px;">
Name Surname
</a><br>
relationship
</div>
</div>
<hr class="my-2">
<div class="rounded bg-faded text-muted p-3" style="height:150px; overflow:auto">
<p>Cras pulvinar mattis nunc sed. Pulvinar neque laoreet suspendisse interdum consectetur.</p>
<p>Nulla pellentesque dignissim enim sit amet venenatis urna. Nunc sed velit dignissim sodales ut eu sem integer.</p>
</div>
</div>
<!-- ---- RELATIONSHIP TWO ---------------------------- -->
<div class="col-lg-6 p-3">
<div class="row no-gutters">
<div class="col-2">
<span style="font-size:15px;">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded" style="max-width:50px; max-height:50px">
</span>
</div>
<div class="col-10 text-right">
<a href="LINK" style="font-size:15px;">
Name Surname
</a><br>
relationship
</div>
</div>
<hr class="my-2">
<div class="rounded bg-faded text-muted p-3" style="height:150px; overflow:auto">
<p>Scelerisque varius morbi enim nunc faucibus a pellentesque.</p>
<p>Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque.</p>
</div>
</div>
<!-- ---- RELATIONSHIP THREE ---------------------------- -->
<div class="col-lg-6 p-3">
<div class="row no-gutters">
<div class="col-2">
<span style="font-size:15px;">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded" style="max-width:50px; max-height:50px">
</span>
</div>
<div class="col-10 text-right">
<a href="LINK" style="font-size:15px;">
Name Surname
</a><br>
relationship
</div>
</div>
<hr class="my-2">
<div class="rounded bg-faded text-muted p-3" style="height:150px; overflow:auto">
<p>Fringilla est ullamcorper eget nulla. Ut pharetra sit amet aliquam id. Scelerisque felis imperdiet proin fermentum leo vel orci.</p>
<p>Tortor vitae purus faucibus ornare.</p>
</div>
</div>
<!-- ---- RELATIONSHIP FOUR ---------------------------- -->
<div class="col-lg-6 p-3">
<div class="row no-gutters">
<div class="col-2">
<span style="font-size:15px;">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded" style="max-width:50px; max-height:50px">
</span>
</div>
<div class="col-10 text-right">
<a href="LINK" style="font-size:15px;">
Name Surname
</a><br>
relationship
</div>
</div>
<hr class="my-2">
<div class="rounded bg-faded text-muted p-3" style="height:150px; overflow:auto">
<p>Risus in hendrerit gravida rutrum quisque non tellus.</p>
<p>Urna cursus eget nunc scelerisque viverra mauris in. Sed felis eget velit aliquet sagittis.</p>
</div>
</div>
<!-- [ add/delete above THIS line! ] -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------------
CREDITS
------------------------------------- -->
</div><div class="text-right small py-2" style="letter-spacing:4px">
<a href="https://toyhou.se/9357700.-f2u-whimsical"
data-toggle="tooltip" title="code by jiko" style="text-decoration:none;">
<i class="far fa-code"></i>
</a> .
<a href="ARTIST LINK"
data-toggle="tooltip" title="image by ARTIST" style="text-decoration:none;">
<i class="far fa-image"></i>
</a> .
<a href="https://toyhou.se/cosmical"
data-toggle="tooltip" title="layout by cosmical">
<i class="far fa-lightbulb"></i>
</a>
</div></div>
