<!-------------------------------------------------
Break — Custom Coloured 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 ----------- #e88d54
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto" style="font-size:90%; max-width:800px; letter-spacing:0.5px">
<div class="row no-gutters">
<!-------------------------------------------------
NAME HEADER
------------------------------------------------->
<div class="col-12 mx-1">
<div class="card rounded-0 mr-2">
<div class="row no-gutters m-2 bg-faded">
<!-- NAME AND TITLE
--------------------------------------------->
<div class="col-lg col-9">
<div class="justify-content-between p-3 px-lg-4">
<div class="text-uppercase" style="font-size:20px; letter-spacing:4px;">
Name
</div>
<div class="hidden-md-down text-uppercase font-italic my-auto" style="color:#e88d54; font-size:14px; letter-spacing:2px;">
title
</div>
</div>
</div>
<!-- MUSIC
--------------------------------------------->
<!--
→ the music is optional! if you do not want it, delete the [iframe] coding!
-->
<div class="col-lg-2 col" style="margin-top:-8.8px; margin-bottom:-8.5px; margin-right:-8px">
<div class="tooltipster card p-3 rounded-0 h-100"
title="Song — Artist" style="background:#e88d54">
<i class="fas fa-music fa-fw text-white m-auto" style="font-size:25px"></i>
<!--
→ this uses the youtube embed video, replace [cTpvirQ-hPA] with your video ID (found in the url after watch?V=)
→ E.G. https://www.youtube.com/watch?v= → cTpvirQ-hPA ←
→ keep [?controls=0] at the end for a nicer performance!
-->
<iframe src="https://www.youtube.com/embed/cTpvirQ-hPA?controls=0"
frameborder="0"
style="opacity:0; top:-90px; right:35px; position:absolute; height:20em; width:4em"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
PROFILE CONTENT
------------------------------------------------->
<div class="col-12 mt-2">
<div class="row no-gutters">
<!-- IMAGE AND QUOTE
--------------------------------------------->
<div class="col-md-4 mb-lg-0 mb-2 p-1">
<div class="mx-auto card rounded-0 p-2" style="max-width:260px">
<!--
→ best if squared!
-->
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
style="height:230px; object-fit:cover; object-position:top center; background:#e88d54">
</div>
<div class="card mt-2 rounded-0 p-3" style="height:130px; border-width:0 0 0 1px">
<div style="position:absolute; top:20px; right:0; opacity:0.2; color:#e88d54">
<i class="fal fa-quote-right fa-fw fa-3x"></i>
</div>
<div class="text-lg-left text-center font-italic text-monospace my-auto" style="line-height:25px">
Short quote here looks best!
</div>
</div>
</div>
<!-- BASIC INFO
--------------------------------------------->
<div class="col-md-8 p-1 pl-lg-2">
<div class="card rounded-0 h-100 p-2">
<div class="card rounded-0 border-0 bg-faded p-4 h-100">
<div class="row no-gutters" style="letter-spacing:1px">
<div class="col-2 p-1">
<i class="far fa-signature fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">full name</div>
<div class="col-2 p-1">
<i class="far fa-calendar-alt fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">age</div>
<div class="col-2 p-1">
<i class="far fa-briefcase fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">race or species</div>
<hr class="mx-1 w-100">
<div class="col-2 p-1">
<i class="far fa-venus-mars fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">gender</div>
<div class="col-2 p-1">
<i class="far fa-comments-alt fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">pro / nouns</div>
<div class="col-2 p-1">
<i class="far fa-heart fa-fw" style="color:#e88d54"></i>
</div>
<!--
→ if they dont have a partner, delete the heart and brackets C:
-->
<div class="col-10 p-1">orientation (
<a href="LINK_TO_PARTNER" style="color:#e88d54"><i class="fas fa-heart fa-fw"></i></a>
)</div>
<hr class="mx-1 w-100">
<div class="col-2 p-1">
<i class="far fa-chart-pie fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">alignment</div>
<div class="col-2 p-1">
<i class="far fa-paperclip fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">occupation / role</div>
<div class="col-2 p-1">
<i class="far fa-dollar-sign fa-fw" style="color:#e88d54"></i>
</div>
<div class="col-10 p-1">worth / status</div>
<!-- add more above THIS line! -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
CREDITS
→ do NOT hide this. lol.
------------------------------------------------->
<div class="col-12 mt-1">
<div class="card-block p-2 m-1 text-center font-italic text-white small" style="background:#e88d54">
<a href="https://toyhou.se/13288548.-f2u-break" class="text-white text-monospace">code by jiko</a>
</div>
</div>
<!-------------------------------------------------
SUMMARY
------------------------------------------------->
<!--
→ TIP: if you're not ready to fill out a section but don't want to delete it (and lowkey want to save it for later), add [hide] next to the COL or CARD for it to disappear!
-->
<div class="col-12 mt-1">
<div class="row no-gutters flex-row-reverse">
<!-- PERSONALITY
--------------------------------------------->
<div class="col-12 p-1">
<div class="card rounded-0 p-2 mb-2">
<div class="card-block bg-faded p-4">
<div class="text-uppercase text-right" style="color:#e88d54; font-size:24px; letter-spacing:3px">
Summary
</div>
<hr class="mt-1">
<div style="letter-spacing:0.8px; line-height:23px">
<!-- PAGE DOLL HERE
------------------------------------->
<div class="text-center">
<img src="IMG_ADDRESS_HERE"
class="float-sm-right ml-2 mb-3 tooltipster" style="width:200px;"
title="pagedoll by ARTIST @ toyhouse">
</div>
<!-- SUMMARY
------------------------------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed pulvinar proin gravida hendrerit. Donec ac odio tempor orci dapibus ultrices in. Justo eget magna fermentum iaculis eu non diam.</p>
<p>Dolor sed viverra ipsum nunc aliquet. Dictum non consectetur a erat nam at lectus urna. Lobortis mattis aliquam faucibus purus in. Enim tortor at auctor urna nunc id cursus metus aliquam. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. At consectetur lorem donec massa sapien faucibus et molestie.</p>
<hr>
<!-- PREFERENCES
------------------------------------->
<div class="row no-gutters mx-n2">
<!-- LIKES -->
<div class="col-sm-6 pr-lg-3">
<ul class="fa-ul">
<li class="my-1">
<span class="fa-li pr-3"><i class="fas fa-check-square fa-fw" style="color:#e88d54"></i></span>
content
</li>
<li class="my-1">
<span class="fa-li pr-3"><i class="fas fa-check-square fa-fw" style="color:#e88d54"></i></span>
content
</li>
<li class="my-1">
<span class="fa-li pr-3"><i class="fas fa-check-square fa-fw" style="color:#e88d54"></i></span>
content
</li>
<!-- add more above THIS line! -->
</ul>
</div>
<!-- DISLIKES -->
<div class="col-sm-6 pl-lg-3">
<ul class="fa-ul">
<li class="my-1">
<span class="fa-li pr-3"><i class="fas fa-times-square fa-fw" style="color:#e88d54"></i></span>
content
</li>
<li class="my-1">
<span class="fa-li pr-3"><i class="fas fa-times-square fa-fw" style="color:#e88d54"></i></span>
content
</li>
<li class="my-1">
<span class="fa-li pr-3"><i class="fas fa-times-square fa-fw" style="color:#e88d54"></i></span>
content
</li>
<!-- add more above THIS line! -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- STATS
--------------------------------------------->
<div class="col-12 px-1 pb-1">
<div class="card rounded-0 p-2">
<div class="card-block bg-faded p-4" style="letter-spacing:0.8px;">
<div class="row no-gutters my-n3">
<!-- PERSONAL
------------------------------------->
<div class="col-lg-6 pr-lg-3 my-3" style="height:270px; line-height:34px">
<div class="justify-content-between text-monospace">
<span class="text-uppercase">Confidence</span>
<span class="faded" style="color:#e88d54">[ 50% ]</span>
</div>
<div class="progress mb-3 rounded-0" style="height:4px">
<div class="progress-bar" style="background:#e88d54;
width:50%
"></div>
<div class="card border-top-0 border-bottom-0 rounded-0 ml-n2" style="width:12px; border-style:double; border-width:3px"></div>
</div>
<div class="justify-content-between text-monospace">
<span class="text-uppercase">Charisma</span>
<span class="faded" style="color:#e88d54">[ 50% ]</span>
</div>
<div class="progress mb-3 rounded-0" style="height:4px">
<div class="progress-bar" style="background:#e88d54;
width:50%
"></div>
<div class="card border-top-0 border-bottom-0 rounded-0 ml-n2" style="width:12px; border-style:double; border-width:3px"></div>
</div>
<div class="justify-content-between text-monospace">
<span class="text-uppercase">Honesty</span>
<span class="faded" style="color:#e88d54">[ 50% ]</span>
</div>
<div class="progress mb-3 rounded-0" style="height:4px">
<div class="progress-bar" style="background:#e88d54;
width:50%
"></div>
<div class="card border-top-0 border-bottom-0 rounded-0 ml-n2" style="width:12px; border-style:double; border-width:3px"></div>
</div>
<div class="justify-content-between text-monospace">
<span class="text-uppercase">Diligence</span>
<span class="faded" style="color:#e88d54">[ 50% ]</span>
</div>
<div class="progress mb-3 rounded-0" style="height:4px">
<div class="progress-bar" style="background:#e88d54;
width:50%
"></div>
<div class="card border-top-0 border-bottom-0 rounded-0 ml-n2" style="width:12px; border-style:double; border-width:3px"></div>
</div>
<div class="justify-content-between text-monospace">
<span class="text-uppercase">Intelligence</span>
<span class="faded" style="color:#e88d54">[ 50% ]</span>
</div>
<div class="progress mb-3 rounded-0" style="height:4px">
<div class="progress-bar" style="background:#e88d54;
width:50%
"></div>
<div class="card border-top-0 border-bottom-0 rounded-0 ml-n2" style="width:12px; border-style:double; border-width:3px"></div>
</div>
</div>
<!-- TRIVIA
-------------------------------------->
<div class="col-lg-6 pl-lg-3 mt-3" style="margin-bottom:30px">
<div class="card border-0 bg-faded p-0 d-block d-lg-flex" style="min-height:100%;">
<div class="text-uppercase" style="color:#e88d54; font-size:24px; letter-spacing:3px">
Trivia
</div>
<hr class="mt-1 w-100">
<div style="flex:1 1 0; overflow:auto;">
<ul class="ml-n3 mb-0" style="letter-spacing:0.8px; list-style:square">
<li class="my-1">Non blandit massa enim nec dui nunc mattis enim ut.</li>
<li class="my-1">Convallis aenean et tortor at risus viverra adipiscing at in.</li>
<li class="my-1">Et tortor consequat id porta.</li>
<li class="my-1">Neque viverra justo nec ultrices dui sapien eget. Auctor elit sed vulputate mi sit amet mauris commodo.</li>
<li class="my-1">In fermentum posuere urna nec tincidunt praesent. Dictum non consectetur a erat.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
DESIGN CREDITS
------------------------------------------------->
<div class="col-12 mt-1">
<div class="card-block p-2 m-1 text-center font-italic text-white small" style="background:#e88d54">
design by <a href="LINK_TO_DESIGNER" class="text-white text-monospace">DESIGNER</a>
</div>
</div>
<!-------------------------------------------------
DESIGN NOTES
------------------------------------------------->
<div class="col-12 mt-1">
<div class="row no-gutters flex-row-reverse">
<!-- BACKGROUND IMAGE
--------------------------------------------->
<div class="col-lg p-1 mb-lg-0 mb-1">
<div class="card h-100 rounded-0 p-2">
<div class="card-block bg-faded p-0">
<div class="w-100 h-100"style="min-height:410px;
background-image:url(REFERENCE_IMG_HERE);
background-size:cover;
background-position:top center;
background-repeat:no-repeat">
<div class="card text-center rounded-0 border-0" style="position:absolute; top:4px; right:4px">
<a href="LINK_TO_REFERENCE" class="text-reset">
<i class="far fa-paint-brush fa-fw m-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- NOTES
--------------------------------------------->
<div class="col-lg-5 p-1">
<div class="card rounded-0 h-100 p-2 mb-2">
<div class="card-block bg-faded p-4">
<div class="text-uppercase" style="color:#e88d54; font-size:24px; letter-spacing:3px">
Design Notes
</div>
<hr class="mt-1">
<!--
→ this grows with content
-->
<ul class="ml-n4" style="letter-spacing:0.8px; list-style:square">
<li class="my-1">Quis viverra nibh cras pulvinar mattis.</li>
<li class="my-1">Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla.</li>
<li class="my-1">Tincidunt augue interdum velit euismod in pellentesque.</li>
<li class="my-1">Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus.</li>
<li class="my-1">Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
RELATIONSHIPS
------------------------------------------------->
<div class="col-12 mt-0">
<div class="card m-1 rounded-0 p-2">
<div class="card-block bg-faded p-4">
<div class="text-right text-uppercase" style="font-size:24px; letter-spacing:3px; color:#e88d54">
Relationships
</div>
<hr class="mt-1">
<div class="row no-gutters mb-n4">
<!-- RELATION ONE
------------------------------------->
<div class="col-12 mb-4">
<div class="row no-gutters">
<div class="col-sm-4 my-auto pr-1 text-center">
<img src="IMG_ADDRESS_HERE"
class="img-thumbnail rounded-0 p-2 mb-3" style="height:170px; width:170px">
</div>
<div class="col-sm-8 my-auto pl-1">
<div class="justify-content-between" style="font-size:16px;">
<a href="LINK_TO_CHARACTER" style="letter-spacing:2px; color:#e88d54">NAME</a>
<span class="font-italic text-monospace">relation</span>
</div>
<div class="blockquote mt-2" style="border-width:2px; font-size:100%">
<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>
</div>
<!-- RELATION TWO
------------------------------------->
<div class="col-12 mb-4">
<div class="row no-gutters">
<div class="col-sm-4 my-auto pr-1 text-center">
<img src="IMG_ADDRESS_HERE"
class="img-thumbnail rounded-0 p-2 mb-3" style="height:170px; width:170px">
</div>
<div class="col-sm-8 my-auto pl-1">
<div class="justify-content-between" style="font-size:16px;">
<a href="LINK_TO_CHARACTER" style="letter-spacing:2px; color:#e88d54">NAME</a>
<span class="font-italic text-monospace">relation</span>
</div>
<div class="blockquote mt-2" style="border-width:2px; font-size:100%">
<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>
<p>Dolor sed viverra ipsum nunc aliquet. Dictum non consectetur a erat nam at lectus urna. Lobortis mattis aliquam faucibus purus in. Enim tortor at auctor urna nunc id cursus metus aliquam. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. At consectetur lorem donec massa sapien faucibus et molestie.</p>
</div>
</div>
</div>
</div>
<!-- RELATION THREE
------------------------------------->
<div class="col-12 mb-4">
<div class="row no-gutters">
<div class="col-sm-4 my-auto pr-1 text-center">
<img src="IMG_ADDRESS_HERE"
class="img-thumbnail rounded-0 p-2 mb-3" style="height:170px; width:170px">
</div>
<div class="col-sm-8 my-auto pl-1">
<div class="justify-content-between" style="font-size:16px;">
<a href="LINK_TO_CHARACTER" style="letter-spacing:2px; color:#e88d54">NAME</a>
<span class="font-italic text-monospace">relation</span>
</div>
<div class="blockquote mt-2" style="border-width:2px; font-size:100%">
<p>Quis viverra nibh cras pulvinar mattis.</p>
</div>
</div>
</div>
</div>
<!-- add more above THIS line! -->
</div>
</div>
</div>
</div>
</div>
</div><!-- CODE ENDS --->
