<!-------------------------------------------------
Telling — Bootstrap 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 img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
COLOUR
→ accent ----------- [ -primary ]
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto text-justify" style="font-size:90%; letter-spacing:0.3px; max-width:800px;">
<!--
→ add [flex-row-reverse] next to the no-gutters if you want them switched around!
-->
<div class="row no-gutters" style="margin:-4px;">
<!-------------------------------------------------
CHARACTER BOX + MUSIC BOX
------------------------------------------------->
<div class="col-lg-4 p-2 order-lg-2 d-flex w-100">
<div class="card-block bg-faded p-0" style="border-bottom-left-radius:15px; border-top-left-radius:15px;">
<!-- NAME / TITLE
--------------------------------------------->
<!--
→ shorter is better!
-->
<div class="card border-0 rounded-0 p-2 text-center bg-primary"style="border-top-left-radius:15px;">
<span class="text-uppercase text-white font-weight-bold"
style="font-size:18px; letter-spacing:3.5px; text-shadow: 3.5px 3.5px rgba(0,0,0,0.2)">
Name
</span>
</div>
<!-- FOCAL IMAGE
--------------------------------------------->
<div class="mb-2" style="min-height:300px;
/* IMAGE OF CHARACTER / VIBES
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;"></div>
<!-- MUSIC BOX
--------------------------------------------->
<div class="row no-gutters p-3 pt-4">
<div class="col-12">
<div class="text-center text-uppercase" style="letter-spacing:3px">Song Title</div>
<div class="text-center text-muted pb-2">Artist</div>
<div class="card border-0 rounded-0 p-1 progress my-2 mb-3" style="height:12px">
<div class="progress-bar"
style="
width:50%;
">
</div>
</div>
</div>
<div class="col">
<p class="text-center" style="font-size:20px"><i class="fas fa-backward"></i></p>
</div>
<div class="col">
<p class="text-center" style="font-size:20px"><i class="fas fa-play"></i></p>
</div>
<div class="col">
<p class="text-center" style="font-size:20px"><i class="fas fa-forward"></i></p>
</div>
<!-- MUSIC
------------------------------------->
<!--
→ this uses the youtube embed video, replace [1IKsmR9yyYs] with your video ID (found in the url after watch?V=)
→ E.G. https://www.youtube.com/watch?v= → 1IKsmR9yyYs ←
→ keep [?controls=0] at the end for a nicer performance!
-->
<iframe src="https://www.youtube.com/embed/1IKsmR9yyYs?controls=0"
class="w-100" frameborder="0"
style="position:absolute; height:100px; margin-top:30px; left:0; opacity:0.0001">
</iframe>
</div>
</div>
</div>
<!-------------------------------------------------
PROFILE
------------------------------------------------->
<div class="col-lg-8 p-2 order-lg-1 w-100">
<!-- TABS
--------------------------------------------->
<div class="card bg-primary border-0 rounded-0 p-2 w-100" style="border-top-right-radius:15px;">
<div class="mx-auto text-center py-1 col-lg-8">
<ul class="nav row">
<li class="nav-item col">
<a class="p-2 text-white active" href="#tellingone"
data-toggle="tab">
<i class="fas fa-user"></i>
</a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#tellingtwo"
data-toggle="tab">
<i class="fas fa-heart"></i>
</a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#tellingthree"
data-toggle="tab">
<i class="fas fa-book-open"></i>
</a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#tellingfour"
data-toggle="tab">
<i class="fas fa-star"></i>
</a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#tellingfive"
data-toggle="tab">
<i class="fas fa-link"></i>
</a>
</li>
<!--（ add/delete more here! the max is six total ）-->
</ul>
</div>
</div>
<div class="table-responsive tab-content bg-faded" style="border-bottom-right-radius:15px; height:470px;">
<!-- BASIC INFO
--------------------------------------------->
<div class="tab-pane fade active show" id="tellingone">
<div class="bg-faded p-3">
<blockquote class="text-uppercase font-weight-bold" style="font-size:12px; letter-spacing:4px; border-width:3px">
01 — Profile
</blockquote><hr>
<div class="row no-gutters m-n2">
<!-- CONTENT
------------------------------------->
<div class="col-lg-6 p-2">
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Name</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Nicknames</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Age</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Gender</span>
<span class="pull-right">content ( prn/prn )</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Height</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Birthdate</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Race</span>
<span class="pull-right">(or species)</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Orientation.</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Occupation</span>
<span class="pull-right">content</span>
</div><hr class="my-2">
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Status</span>
<span class="pull-right">content</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Designer</span>
<span class="pull-right">@ USER</span>
</div>
<div class="p-1">
<span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Worth</span>
<span class="pull-right">$$$</span>
</div><span class="hidden-md-up"><hr class="my-2"></span>
</div>
<!-- DESIGN NOTES
------------------------------------->
<div class="col-lg-6 p-2" style="max-height:370px; 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>
<p>these</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>are</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>design</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>notes!</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>you could do them short</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>or you could do them a bit longer with a description, while also bolding the <b>vital</b> things. but that's your preference! :D</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>this scrolls seperately, so don't worry and go wild yaya!!</p>
</li>
<!-- add / delete more above THIS line! -->
</ul>
</div>
</div>
</div>
</div>
<!-- PERSONALITY + LIKES/DISLIKES
--------------------------------------------->
<div class="tab-pane fade" id="tellingtwo">
<div class="bg-faded p-3">
<blockquote class="text-uppercase font-weight-bold" style="font-size:12px; letter-spacing:4px; border-width:3px">
02 — Personality
</blockquote><hr>
<!-- CONTENT
----------------------------------------->
<div class="text-muted p-1 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet velit felis. Phasellus molestie vestibulum viverra. Etiam a erat tortor. Ut risus orci, suscipit vel orci id, vulputate porttitor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
<p>Vestibulum efficitur fermentum dui nec scelerisque. Mauris vestibulum id nisi placerat interdum. Quisque vel lacus odio. Curabitur nec enim ut felis semper sagittis sit amet sed turpis. In libero eros, malesuada non neque nec, congue vehicula turpis. Nullam dapibus ut neque sed ullamcorper.</p>
<p>Aenean quis lacus sapien. Aenean ex arcu, efficitur ac venenatis a, rhoncus eget nisi. Nam placerat quam at felis volutpat, eu tincidunt ligula auctor. Curabitur ornare urna vitae lectus placerat tincidunt. Maecenas facilisis id orci non cursus. Integer in tempus nibh, in sagittis mauris. Donec ornare velit sed iaculis volutpat.</p>
</div><hr>
<div class="row no-gutters">
<!-- LIKES
----------------------------------------->
<div class="col-6 pr-2">
<div class="card border-0 rounded-0 pl-3 py-2 text-uppercase" style="letter-spacing:3px;">Likes</div>
<ul class="fa-ul text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-check text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-check text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-check text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-check text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
<!-- DISLIKES
----------------------------------------->
<div class="col-6 pl-2">
<div class="card border-0 rounded-0 text-right pr-3 py-2 text-uppercase" style="letter-spacing:3px;">DisLikes</div>
<ul class="fa-ul text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-times text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-times text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-times text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-times text-primary" style="font-size:9px"></i></span>
<p>content</p>
</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
</div>
</div>
</div>
<!-- BACKGROUND
--------------------------------------------->
<div class="tab-pane fade" id="tellingthree">
<div class="bg-faded p-3">
<blockquote class="text-uppercase font-weight-bold" style="font-size:12px; letter-spacing:4px; border-width:3px">
03 — Background
</blockquote><hr>
<div class="text-muted p-1">
<div class="card text-uppercase border-0 rounded-0 px-3 py-2 text-body mt-1 mb-2" style="letter-spacing:3px;">
<p><i class="far fa-bookmark fa-fw mr-2"></i >Subheading</p>
</div>
<p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum. Vivamus sagittis, tellus at dignissim congue, ipsum dui dignissim tortor, ac eleifend arcu lacus lacinia massa. Mauris eget venenatis sapien.</p>
<p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Donec placerat arcu a turpis commodo eleifend. Aenean at odio velit. Morbi accumsan condimentum nunc, vitae semper justo luctus vitae. Ut ac lobortis nunc. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit.</p>
<div class="card text-uppercase border-0 rounded-0 px-3 py-2 text-body mt-1 mb-2" style="letter-spacing:3px">
<p><i class="far fa-bookmark fa-fw mr-2"></i >Subheading</p>
</div>
<p>Maecenas ac pretium quam. Mauris ullamcorper, sapien ac pellentesque egestas, sem urna blandit felis, et scelerisque metus lacus ac diam. Phasellus tincidunt neque elit, quis facilisis odio molestie in. Nulla neque lectus, malesuada vel congue sit amet, tempor quis est. Quisque sit amet nisi nisi.</p>
<div class="card text-uppercase border-0 rounded-0 px-3 py-2 text-body mt-1 mb-2" style="letter-spacing:3px">
<p><i class="far fa-bookmark fa-fw mr-2"></i >Subheading</p>
</div>
<p>Maecenas at felis non justo egestas convallis. Fusce ornare lacus convallis ex laoreet, nec varius libero laoreet. Donec eget mauris ac justo accumsan fermentum. Vestibulum fermentum interdum libero id tempus. Donec auctor ipsum sed lacus blandit ornare.</p>
<p>Nulla non lorem eget massa suscipit consequat. In aliquet augue fermentum facilisis convallis.</p>
<!-- add / delete above THIS line! -->
</div>
</div>
</div>
<!-- TRIVIA
--------------------------------------------->
<div class="tab-pane fade" id="tellingfour">
<div class="bg-faded p-3">
<blockquote class="text-uppercase font-weight-bold" style="font-size:12px; letter-spacing:4px; border-width:3px">
04 — Trivia
</blockquote><hr>
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>Ultrices dui sapien eget mi proin sed. Semper feugiat nibh sed pulvinar proin gravida. Cursus in hac habitasse platea dictumst quisque sagittis purus.</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p>Augue interdum velit euismod in pellentesque. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Sit amet porttitor eget dolor morbi non arcu risus quis.</p>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right text-primary" style="font-size:9px"></i></span>
<p> Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Auctor augue mauris augue neque. Scelerisque fermentum dui faucibus in ornare quam viverra.</p>
</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
</div>
<!-- RELATIONSHIPS
--------------------------------------------->
<div class="tab-pane fade" id="tellingfive">
<div class="bg-faded p-3">
<blockquote class="text-uppercase font-weight-bold" style="font-size:12px; letter-spacing:4px; border-width:3px">
05 — Relationships
</blockquote><hr>
<!-- RELATION ONE
----------------------------------------->
<div class="row no-gutters p-1 py-3">
<!-- IMAGE -------------------------->
<div class="col-5 w-100" style="min-height:200px; border-radius:10px;
/* IMAGE
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-repeat: no-repeat;
background-position: center;"></div>
<!-- DESCRIPTION -------------------->
<div class="col-7 px-3">
<div class="row no-gutters">
<div class="col-6 my-auto text-primary"><span style="font-size:20px">01.</span></div>
<div class="col-6 text-right"><span>
<a href="LINK_TO_CHARACTER" style="font-size:15px">
Name
</a><br>
relationship
</span>
</div>
</div>
<hr class="my-2">
<div class="card border-0 rounded-0 p-3 text-muted" style="max-height:140px; overflow:auto">
<p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.</p>
<p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit. </p>
</div>
</div>
</div>
<!-- RELATION TWO
----------------------------------------->
<div class="row no-gutters p-1 py-3">
<!-- IMAGE -------------------------->
<div class="col-5 w-100" style="min-height:200px; border-radius:10px;
/* IMAGE
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-repeat: no-repeat;
background-position: center;"></div>
<!-- DESCRIPTION -------------------->
<div class="col-7 px-3">
<div class="row no-gutters">
<div class="col-6 my-auto text-primary"><span style="font-size:20px;">02.</span></div>
<div class="col-6 text-right"><span>
<a href="LINK_TO_CHARACTER" style="font-size:15px;">
Name
</a><br>
relationship
</span>
</div>
</div>
<hr class="my-2">
<div class="card border-0 rounded-0 p-3 text-muted" style="max-height:140px; overflow:auto">
<p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.</p>
<p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit. </p>
</div>
</div>
</div>
<!-- add / delete above THIS line! -->
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
CREDITS
DONT REMOVE !!! TY !!! <3
------------------------------------------------->
<div class="p-1 small text-right faded" style="letter-spacing:1px">
<a href="https://toyhou.se/9283486.-f2u-telling"
class="text-muted text-monospace tooltipster" title="code by jiko" style="text-decoration:none">
code by jiko
</a>
<span class="mx-1">|</span>
<a href="LINK_TO_ARTIST"
class="text-muted text-monospace tooltipster" title="image by ARTIST" style="text-decoration:none">
<i class="fas fa-image fa-fw"></i>
</a>
</div>
</div> <!-- CODE ENDS -->
