<!--
SINGED (F2U)
> i recommend using circlejourney's toyhou.se editor for live editing! (th.circlejourney.net) it makes things so much easier
cracks knuckles ok here we go! editing notes!
> accent color is #cf581b; command+F to replace
> all the images and credits are already in place, u can replace with ur own images if u want!
> i put bigger dividers for the three columns and the tabs in the info card since they were a lil hard to spot
the closest thing i have to terms of service
> dm me on discord (minty#0536) if u have questions or need help with the code
> u can move it around but keep the credit please ty mwah
> have fun coding sillies
-->
<div class="row no-gutters justify-content-center mx-2" style="font-size:88%;">
<!-- CREDIT dont remove pls mwah -->
<div class="col-12 p-2 order-lg-4 text-center">
<a href="www.toyhou.se/queenmintyfresh" target="_blank" title="code by minty!" class="mx-auto far fa-leaf tooltipster text-muted" style="z-index:2;"></a></div>
<!--–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
MAIN / MIDDLE COLUMN
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––-->
<div class="col-lg-3 col-12 m-2 order-lg-2 text-center">
<!-- BEGIN INTRO CARD-->
<div class="card bg-faded rounded-0 text-muted p-0 text-center" style="height:420px;">
<!-- BANNER
replace the link with ur banner's url!-->
<div style="min-height:180px; background-image:url(
https://images.unsplash.com/photo-1517906499777-8480343c0e24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80
); background-position:bottom; background-size:cover; text-align:right">
<!-- END BANNER-->
<!-- BANNER CREDIT-->
<a class="fa fa-image m-1 tooltipster" href="
https://unsplash.com/photos/vRBHwoiN9ug
" target="_blank" style="text-decoration:none; color:rgba(255,255,255,0.5);" title="image credit">
</a><!-- END BANNER CREDIT-->
</div>
<!-- ICON CREDIT-->
<a href="https://unsplash.com/photos/vRBHwoiN9ug" target="_blank" title="image credit" class="tooltipster">
<!-- END ICON CREDIT-->
<!-- CIRCLE ICON-->
<img class="rounded-circle mt-n5 p-1 bg-faded mx-auto mb-2" src="https://images.unsplash.com/photo-1517906499777-8480343c0e24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" style="height:100px; width:100px;"></a>
<!-- END CIRCLE ICON-->
<p style="font-size:160%; font-variant:small-caps; color:#cf581b; letter-spacing:1px">
arson is bad
</p>
pron/ouns
<!-- MUSIC PLAYER-->
<div class="container mt-4 p-0 text-center" style="height:124px">
<!-- YOUTUBE EMBED
NOTE: ONLY replace "BOOGIEBOOGIE" with the string of letters/numbers after "v=" at the end of ur youtube link- otherwise the player won't work!-->
<iframe width="100%" height="160%" src="
https://www.youtube.com/embed/BOOGIEBOOGIE
" frameborder="0" allow="; clipboard-write; picture-in-picture;" style="z-index:1; opacity:0; position:absolute; left:0px"></iframe>
<!-- END YOUTUBE EMBED-->
<div class="px-4 h-100">
<p style="font-variant:small-caps; font-size:120%; letter-spacing:1px;">
song title
</p>
artist
<div class="progress my-2 mx-auto" style="width:80%">
<div class="progress-bar bg-secondary" style="height:2px; width:69%"></div>
</div>
<div class="row no-gutters p-2 justify-content-center">
<i class="fa fa-backward-fast mx-1"></i>
<i class="fa fa-play mx-3" style="color:#cf581b;"></i>
<i class="fa fa-forward-fast mx-1"></i>
</div>
</div>
</div><!--END MUSIC PLAYER-->
</div> <!-- END INTRO CARD-->
</div><!--END MAIN COLUMN-->
<!--–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
LAST COLUMN WOOT WOOT
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––-->
<div class="col-lg-3 col-12 m-2 order-lg-3 text-center">
<!-- QUOTE CARD
NOTE: keep it short! 1-2 lines is best. a longer quote will scroll, but thats just kinda weird yknow-->
<div class="card p-3 rounded-0 bg-faded text-muted" style="height:64px">
<div class="font-italic row no-gutters justify-content-between m-auto w-100">
<i class="fad fa-quote-left my-auto"></i>
<div class="col-10" style="max-height:40px; overflow:auto">
cool funky quote
</div>
<i class="fad fa-quote-right my-auto"></i>
</div>
</div><!-- END QUOTE CARD-->
<!-- LITTLE IMAGES-->
<div class="row no-gutters w-100 justify-content-between" style="height:189px">
<!-- LITTLE IMAGE 1-->
<div class="card my-3 p-0 bg-faded text-muted rounded-0 text-left" style="width:44%;
background-image:url(
https://images.unsplash.com/photo-1635194979898-1854d0ca12f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
); background-position:bottom center; background-size:cover;">
<a class="fa fa-image m-1 tooltipster" title="image credit" href="
https://unsplash.com/photos/UQeIL1j9yPM
" style="text-decoration:none; color:rgba(255,255,255,0.5);" target="_blank"></a>
</div><!-- END LITTLE IMAGE 1-->
<!-- LITTLE IMAGE 2 -->
<div class="card my-3 p-0 bg-faded text-muted rounded-0 text-right" style="width:52%;
background-image:url(
https://images.unsplash.com/photo-1615116437909-2451dff907b5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80
); background-size:cover; background-position:top center">
<a class="fa fa-image m-1 tooltipster" title="image credit" href="
https://unsplash.com/photos/BCNg_iYQRU0
" style="text-decoration:none; color:rgba(255,255,255,0.5);" target="_blank"></a>
</div><!-- END LITTLE IMAGE 2-->
</div><!-- END LITTLE IMAGES-->
<!-- BASICS CARD-->
<div class="card p-2 bg-faded text-muted rounded-0">
<div class="row no-gutters">
<div class="col-6">
<div class="my-2"><span style="font-size:110%; font-variant:small-caps; letter-spacing:1px">
name
</span><br>
...</div>
<div class="my-2"><span style="font-size:110%; font-variant:small-caps; letter-spacing:1px">
aliases
</span><br>
...</div>
<div class="my-2"><span style="font-size:110%; font-variant:small-caps; letter-spacing:1px">
alignment
</span><br>
...</div>
</div>
<div class="col-6">
<div class="my-2"><span style="font-size:110%; font-variant:small-caps; letter-spacing:1px">
age
</span><br>
...</div>
<div class="my-2"><span style="font-size:110%; font-variant:small-caps; letter-spacing:1px">
orientation
</span><br>
...</div>
<div class="my-2"><span style="font-size:110%; font-variant:small-caps; letter-spacing:1px">
occupation
</span><br>
...</div>
</div>
</div>
</div><!-- END BASICS CARD-->
</div> <!--END LAST COLUMN-->
<!--–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
LEFT / BASICS COLUMN
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––-->
<div class="col-lg-3 col-12 m-2 order-lg-1 text-center">
<!-- INFO CARD -->
<div class="card p-0 bg-faded rounded-0 text-muted" style="height:224px">
<!-- TAB BUTTONS-->
<div class="card rounded-0">
<ul class="row no-gutters justify-content-between nav">
<li class="col-3">
<a class="btn btn-default toggle rounded-0 active border-0 p-2 nav-item" style="width:100%" data-toggle="tab" href="#singedone">
<i style="color:#cf581b" class="m-auto fa fa-fire"></i></a>
</li>
<li class="col-3">
<a class="btn btn-default toggle rounded-0 border-0 p-2 nav-item" style="width:100%" data-toggle="tab" href="#singedtwo">
<i style="color:#cf581b" class="m-auto fa fa-heart"></i></a>
</li>
<li class="col-3">
<a class="btn btn-default toggle rounded-0 border-0 p-2 nav-item" style="width:100%" data-toggle="tab" href="#singedthree">
<i style="color:#cf581b" class="m-auto fa fa-books"></i></a>
</li>
<li class="col-3">
<a class="btn btn-default toggle rounded-0 border-0 p-2 nav-item" style="width:100%" data-toggle="tab" href="#singedfour">
<i style="color:#cf581b" class="m-auto fa fa-users"></i></a>
</li>
</ul></div>
<!-- END TAB BUTTONS-->
<div class="row no-gutters tab-content p-0 text-left" style="height:188px; overflow:auto">
<!--–––––––––––––––––––––––––––––––––––
TAB ONE
––––––––––––––––––––––––––––––––––––-->
<div class="tab-pane active show fade p-3" id="singedone">
<p>put whatever u want here, im lazy and cant think of anything oops. oh and this box will scroll btw- for all the tabs, not just this one!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div><!-- TAB ONE-->
<!--–––––––––––––––––––––––––––––––––––
TAB TWO
––––––––––––––––––––––––––––––––––––-->
<div class="tab-pane fade p-3 w-100" id="singedtwo">
<div class="row no-gutters my-1 w-100 justify-content-between">
<div class="col-auto">extrovert</div>
<div class="col mx-2 my-auto">
<div class="progress m-auto w-100">
<div class="progress-bar" style="background-color:#cf581b; width:
50%
; height:2px"></div>
</div></div>
<div class="col-auto">introvert</div>
</div>
<div class="row no-gutters w-100 my-1 justify-content-between">
<div class="col-auto">logical</div>
<div class="col mx-2 my-auto">
<div class="progress m-auto w-100">
<div class="progress-bar" style="background-color:#cf581b; width:
50%
; height:2px"></div>
</div></div>
<div class="col-auto">emotional</div>
</div>
<div class="row no-gutters w-100 my-1 justify-content-between">
<div class="col-auto">active</div>
<div class="col mx-2 my-auto">
<div class="progress m-auto w-100">
<div class="progress-bar" style="background-color:#cf581b; width:
50%
; height:2px"></div>
</div></div>
<div class="col-auto">passive</div>
</div>
<div class="row no-gutters text-center mt-3 justify-content-between">
<!-- LIKES BOX-->
<div class="col-lg-6 col-12">
<div class="card rounded-0 m-1">
<i class="far fa-heart my-2"></i>
<ul style="list-style:none; padding-left:0">
<!-- LIKES-->
<li>cupcakes</li>
<li>fire</li>
<li>arson</li>
<li>hot people (same tbh)</li>
<!-- END LIKES-->
</ul>
</div>
</div><!-- END LIKES BOX-->
<!-- DISLIKES BOX-->
<div class="col-lg-6 col-12">
<div class="card rounded-0 m-1">
<i class="far fa-heart-crack my-2"></i>
<ul style="list-style:none; padding-left:0">
<!-- DISLIKES-->
<li>water</li>
<li>ice</li>
<li>u get the idea</li>
<li>uhhh onions</li>
<!-- END DISLIKES-->
</ul>
</div>
</div><!-- END DISLIKES BOX-->
</div>
</div><!-- END TAB TWO-->
<!--–––––––––––––––––––––––––––––––––––
TAB THREE
––––––––––––––––––––––––––––––––––––-->
<div class="tab-pane fade p-3 w-100" id="singedthree">
<div class="row no-gutters">
<p style="color:#cf581b; font-variant:small-caps; font-size:120%" class="mb-1">backstory section</p>
<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 style="color:#cf581b; font-variant:small-caps; font-size:120%" class="mb-1">backstory section</p>
<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 style="color:#cf581b; font-variant:small-caps; font-size:120%" class="mb-1">backstory section</p>
<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>
<!-- END TAB THREE-->
<!--–––––––––––––––––––––––––––––––––––
TAB THREE
note: it looks best when there's an even number of relationships!
––––––––––––––––––––––––––––––––––––-->
<div class="tab-pane fade p-3 w-100" id="singedfour">
<div class="row no-gutters" style="height:120px;">
<!-- RELATIONSHIP CARD 1-->
<div class="col-lg-12 col-6 p-1 h-100">
<div class="card p-1 px-2 rounded-0 h-100" style="overflow:auto">
<a target="_blank" style="font-variant:small-caps; font-size:120%; color:#cf581b" href="
LINK_HERE
">
name
</a>
<p class="mt-2">short blurb! it'll scroll if it gets too long </p>
</div>
</div>
<!-- END RELATIONSHIP CARD 1-->
<!-- RELATIONSHIP CARD 2-->
<div class="col-lg-12 col-6 p-1 h-100">
<div class="card p-1 px-2 rounded-0 h-100" style="overflow:auto">
<a target="_blank" style="font-variant:small-caps; font-size:120%; color:#cf581b" href="
LINK_HERE
">
name
</a>
<p class="mt-2">short blurb! it'll scroll if it gets too long </p>
</div>
</div>
<!-- END RELATIONSHIP CARD 2-->
<!-- RELATIONSHIP CARD 3-->
<div class="col-lg-12 col-6 p-1 h-100">
<div class="card p-1 px-2 rounded-0 h-100" style="overflow:auto">
<a target="_blank" style="font-variant:small-caps; font-size:120%; color:#cf581b" href="
LINK_HERE
">
name
</a>
<p class="mt-2">short blurb! it'll scroll if it gets too long </p>
</div>
</div>
<!-- END RELATIONSHIP CARD 3-->
<!-- RELATIONSHIP CARD 4-->
<div class="col-lg-12 col-6 p-1 h-100">
<div class="card p-1 px-2 rounded-0 h-100" style="overflow:auto">
<a target="_blank" style="font-variant:small-caps; font-size:120%; color:#cf581b" href="
LINK_HERE
">
name
</a>
<p class="mt-2">short blurb! it'll scroll if it gets too long </p>
</div>
</div>
<!-- END RELATIONSHIP CARD 4-->
</div>
</div>
</div>
</div>
<!-- END INFO CARD-->
<!-- LEFT IMAGE-->
<div class="card p-0 bg-faded rounded-0 text-muted mt-3 text-left" style="border-color:#cf581b ;height:180px; background-image:url(https://images.unsplash.com/photo-1602060770308-c07d79cc0550?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80); background-size:cover; background-position:84% 80%">
<a class="fa fa-image m-1 tooltipster" href="
https://unsplash.com/photos/yf0iFe4Fv0y
" target="_blank" style="text-decoration:none; color:rgba(255,255,255,0.5);" title="image credit">
</a>
</div><!-- END LEFT IMAGE-->
</div> <!-- END LEFT / BASICS COLUMN-->
</div>