<!-- ------------------------------
VERNAL - Custom Colours Version
(code by jiko, layout by serenevintage)
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
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE brackets or quotation marks!!
GRADIENT (!!)
→ please check out [https://cssgradient.io/] to create your own gradients!
only the SECOND line of css is necessary!
→ background-image: linear-gradient(to right, #ff8177 0%, #fcb69f 100%);
ACCENT COLOUR (best if it's the first colour of the gradient ^)
→ #ff8177
------------------------------- -->
<div class="mx-auto" style="font-size:13px; letter-spacing:0.5px; max-width:650px; overflow-x:hidden">
<div class="row no-gutters" style=" margin:-4px; margin-top:30px">
<!-- ------------------------------
TABS
- i do not recommand adding more
- IF you do, only adding one more is advised
any more will break!
- deleting will not break the format!
------------------------------- -->
<div class="col-lg-7 order-lg-1 order-2">
<div class="card-block p-0">
<ul class="nav row no-gutters text-center mt-4">
<li class="nav-item col-auto mt-1">
<a class="rounded-0 px-3 border-0 btn-block active" data-toggle="tab" href="#vernalone">
<span class="fa-stack fa-2x" style="font-size:17px;">
<i class="fas fa-bookmark fa-flip-vertical fa-3x fa-stack-1x" style="color:#ff8177"></i>
<i class="far fa-user-circle pt-1 text-white fa-stack-1x"></i>
</span>
</a>
</li>
<li class="nav-item col-auto mt-1">
<a class="rounded-0 px-3 border-0 btn-block" data-toggle="tab" href="#vernaltwo">
<span class="fa-stack fa-2x" style="font-size:17px;">
<i class="fas fa-bookmark fa-flip-vertical fa-3x fa-stack-1x" style="color:#ff8177"></i>
<i class="far fa-chart-pie-alt pt-1 text-white fa-stack-1x"></i>
</span>
</a>
</li>
<li class="nav-item col-auto mt-1">
<a class="rounded-0 px-3 border-0 btn-block" data-toggle="tab" href="#vernalthree">
<span class="fa-stack fa-2x" style="font-size:17px;">
<i class="fas fa-bookmark fa-flip-vertical fa-3x fa-stack-1x" style="color:#ff8177"></i>
<i class="far fa-books pt-1 text-white fa-stack-1x"></i>
</span>
</a>
</li>
<li class="nav-item col-auto mt-1">
<a class="rounded-0 px-3 border-0 btn-block" data-toggle="tab" href="#vernalfour">
<span class="fa-stack fa-2x" style="font-size:17px;">
<i class="fas fa-bookmark fa-flip-vertical fa-3x fa-stack-1x" style="color:#ff8177"></i>
<i class="far fa-info-circle pt-1 text-white fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<!-- ------------------------------
CHARACTER IMAGE
- recommanded height is 300px and above!
- works best if subject is in center
BUT you can change the position of the image :D
------------------------------- -->
<div class="col-lg-5 order-lg-3 order-1">
<div class="bg-faded w-100 h-100" style="min-height:280px;
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>
<!-- ------------------------------
CONTENT START!
- plus the gradient name tab!!!
- alternatively, you can use [background-color:#ff8177] instead
if gradients are not your thing
------------------------------- -->
<div class="col-lg-7 order-lg-2 order-3" style="height:445px; overflow:auto">
<div class="card-block p-0 tab-content table-responsive bg-faded h-100">
<!-- --- NAME TAG ------------------------------ -->
<!-- if accent colour is pale, change [text-white] to [text-dark]! -->
<div class="text-uppercase text-white" style="background-image: linear-gradient(to right, #ff8177 0%, #fcb69f 100%);">
<div class="p-2 px-3 lead justify-content-between" style="letter-spacing:0.15em;">
<span>NAME SURNAME</span>
<span class="my-auto"><i class="fas fa-tree-palm"></i></span>
</div>
</div>
<!-- ------------------------------
TAB ONE
- basic info
- likes / dislikes
------------------------------- -->
<div class="tab-pane fade active show" id="vernalone">
<div class="px-4 pt-3">
<!-- --- BASICS ------------------------------ -->
<div class="basics pb-3">
<div class="row no-gutters">
<div class="col-lg-12 px-2">
<span class="text-uppercase pull-left text-muted" style="letter-spacing:1px;">Age</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed;">
</div>
<div class="col-lg-12 px-2">
<span class="text-uppercase pull-left text-muted" style="letter-spacing:1px;">Gender</span>
<span class="pull-right">content (prn/prn)</span>
<hr class="mt-3" style="border-style:dashed;">
</div>
<div class="col-lg-12 px-2">
<span class="text-uppercase pull-left text-muted" style="letter-spacing:1px;">Race</span>
<span class="pull-right">or species</span>
<hr class="mt-3" style="border-style:dashed;">
</div>
<div class="col-lg-12 px-2">
<span class="text-uppercase pull-left text-muted" style="letter-spacing:1px;">Orient.</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed;">
</div>
<div class="col-lg-12 px-2">
<span class="text-uppercase pull-left text-muted" style="letter-spacing:1px;">D.O.B</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed;">
</div>
</div>
</div>
<!-- --- MOODBOARD (DELETABLE IF YOU WANT MORE SPACE FOR INFO) ------------------------------ -->
<!-- i don't recommand adding more images! -->
<div class="moodboard">
<div class="row no-gutters">
<!-- FIRST IMAGE -->
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px; border-radius:10px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position: center;">
</div>
</div>
<!-- SECOND IMAGE -->
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px; border-radius:10px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position: center;">
</div>
</div>
<!-- THIRD IMAGE -->
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px; border-radius:10px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-position: center;">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------
TAB TWO
- personality
- likes and dislikes
------------------------------- -->
<div class="tab-pane fade" id="vernaltwo">
<div class="px-4 pt-3">
<!-- --- PERSONALITY ------------------------------ -->
<div class="personality">
<div class="lead text-uppercase" style="font-size:20px; letter-spacing:0.1em;">
Personality
</div><hr class="mt-1 mb-2" style="border-style:dashed;">
<div class="text-muted text-justify" style="height:140px; overflow:auto">
<p>Eros donec ac odio tempor orci dapibus ultrices in. Nunc sed blandit libero volutpat sed cras.</p>
<p>Vel pharetra vel turpis nunc eget. Posuere urna nec tincidunt praesent semper feugiat. Ac turpis egestas integer eget aliquet nibh. Posuere ac ut consequat semper viverra.</p>
<p>At tempor commodo ullamcorper a. Eleifend mi in nulla posuere sollicitudin aliquam ultrices.</p>
</div>
</div>
<!-- --- PREFERENCES ------------------------------ -->
<div class="preferences pt-3">
<div class="row no-gutters">
<!-- LIKES -->
<div class="col-6 p-1">
<div class="text-uppercase text-center lead pb-2" style="letter-spacing:2px; font-size:16px">
<i class="far fa-check"></i>
</div><ul class="text-muted" style="height:120px; overflow:auto">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- DISLIKES -->
<div class="col-6 p-1">
<div class="text-uppercase text-center lead pb-2" style="letter-spacing:2px; font-size:16px">
<i class="far fa-times"></i>
</div><ul class="text-muted" style="height:120px; overflow:auto">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------
TAB THREE
- background
- or free space
------------------------------- -->
<div class="tab-pane fade" id="vernalthree">
<div class="px-4 pt-3">
<!-- --- BACKGROUND ------------------------------ -->
<div class="background">
<div class="lead text-uppercase" style="font-size:20px; letter-spacing:0.1em;">
Background
</div><hr class="mt-1 mb-2" style="border-style:dashed;">
<div class="text-muted text-justify" style="height:330px; overflow:auto">
<p>I scroll! Weee!</p>
<p>Pulvinar etiam non quam lacus suspendisse faucibus. Risus pretium quam vulputate dignissim suspendisse in est. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id.</p>
<p>Convallis convallis tellus id interdum. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida.</p>
<p>Est placerat in egestas erat imperdiet sed euismod nisi. Lobortis elementum nibh tellus molestie nunc non blandit massa enim.</p>
<p>Enim ut tellus elementum sagittis vitae et. Nascetur ridiculus mus mauris vitae ultricies leo integer. Orci dapibus ultrices in iaculis nunc sed augue lacus viverra.</p>
<p>Porta non pulvinar neque laoreet. Pellentesque eu tincidunt tortor aliquam nulla. Bibendum ut tristique et egestas quis.</p>
</div>
</div>
</div>
</div>
<!-- ------------------------------
TAB FOUR
- design notes + trivia
------------------------------- -->
<div class="tab-pane fade" id="vernalfour">
<div class="px-4 pt-3">
<!-- --- DESIGN NOTES ------------------------------ -->
<div class="design notes pb-3">
<div class="lead text-uppercase" style="font-size:20px; letter-spacing:0.1em;">
Design Notes
</div><hr class="mt-1 mb-2" style="border-style:dashed;">
<div style="height:135px; overflow:auto">
<ul class="text-muted">
<li class="my-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="my-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li class="my-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li class="my-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</li>
<li class="my-2">Excepteur sint occaecat cupidatat non proident.</li>
</ul>
</div>
</div>
<!-- --- TRIVIA ------------------------------ -->
<div class="trivia">
<div class="lead text-uppercase" style="font-size:20px; letter-spacing:0.1em;">
Trivia
</div><hr class="mt-1 mb-2" style="border-style:dashed;">
<div style="height:135px; overflow:auto">
<ul class="text-muted">
<li class="my-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="my-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li class="my-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li class="my-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</li>
<li class="my-2">Excepteur sint occaecat cupidatat non proident.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- don't remove the below! -->
</div>
</div>
</div>
<!-- ------------------------------
CREDITS
- don't delete the below, thanks!
:'3
------------------------------- -->
<div class="small col-lg-12 my-2 ml-3 pt-1 order-lg-4">
<div class="text-right" style="letter-spacing:0.3em;">
<a href="https://toyhou.se/9648400.-f2u-vernal" class="tooltipster"
title="code by jiko" style="text-decoration: none; color:#ff8177">
<i class="far fa-code"></i>
</a> .
<a href="ARTIST LINK HERE" class="tooltipster"
title="art by ARTIST" style="text-decoration: none; color:#ff8177">
<i class="far fa-image"></i>
</a> .
<a href="IMAGE LINK HERE" class="tooltipster"
title="photos by ARTIST" style="text-decoration: none; color:#ff8177">
<i class="far fa-camera"></i>
</a> .
<a href="https://toyhou.se/serenevintage" class="tooltipster"
title="layout by serenevintage" style="text-decoration: none; color:#ff8177">
<i class="far fa-lightbulb"></i>
</a>
</div>
</div>
</div>
