Yogurt 2.0
created by:clowniicat
HTMLCustom ColorsBootstrapCharacter
Copy
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
TIP: See those triangles next to the line numbers?
use those to collapse large sections of the code
to make it easier to edit, copy & past and delete
parts!
====================================================
this is the completely bootstrap version so no palette to change colors
==========================================-->
<div class="bg-faded p-3 text-danger" style="border-radius:20px;">
<div class="row no-gutters">
<!--================================
LEFT SIDE
================================-->
<div class="col-lg-8 order-lg-1 order-2">
<div class="bg-light p-2 rounded">
<!--================================
NAV BUTTONS
================================-->
<ul class="nav nav-tabs border-0 row no-gutters mb-1">
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger active" data-toggle="tab" href="#aboutYOGURT">
<i class="fas fa-user"></i> ABOUT
</a>
</li>
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#statsYOGURT">
<i class="fas fa-chart-bar"></i> STATS
</a>
</li>
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#storyYOGURT">
<i class="fas fa-book"></i> STORY
</a>
</li>
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#linksYOGURT">
<i class="fas fa-link"></i> LINKS
</a>
</li>
<li class="col-sm-6 mb-1 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#designYOGURT">
<i class="fas fa-paintbrush"></i> DESIGN
</a>
</li>
<li class="col-sm-6 mb-1 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#triviaYOGURT">
<i class="fas fa-star"></i> TRIVIA
</a>
</li>
</ul>
<!--================================
END OF NAV
================================-->
<div class="tab-content" style="height:350px;overflow-y:auto;overflow-x:hidden">
<i class="fas fa-strawberry text-danger" style="font-size:70px;position:absolute;right:-15px;bottom:-10px;z-index:50;text-shadow: 0 0 2.5px rgba(117,0,0,0.5)"></i>
<div class="bg-danger mb-2" style="height:1px;position:sticky;top:0"></div>
<!--================================
ABOUT SECTION
================================-->
<div class="tab-pane fade active show" id="aboutYOGURT">
<div class="p-1 row no-gutters">
<div class="row no-gutters col-12 order-sm-1 order-2">
<div class="col-sm-6">
<!--================================
BASIC INFO STUFF LEFT COLUMN
no guides, i think its easy enough
to edit
================================-->
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">NAME</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">AGE</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">BIRTHDAY</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">SPECIES</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<div class="col-sm-6">
<!--================================
BASIC INFO STUFF RIGHT COLUMN
================================-->
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">HEIGHT</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">GENDER</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">ORIENTATION</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase text-light bg-danger rounded">PRONOUNS</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 text-danger rounded">content</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<div class="col-12 order-sm-2 order-1 text-danger mb-sm-0 mb-4">
<!--================================
DESCRIPTION STUFF
================================-->
Write a description of your character here, box scrolls. 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.
</div>
</div>
<!--================================
END OF ABOUT SECTION
================================-->
</div>
<!--================================
STATS SECTION
================================-->
<div class="tab-pane fade" id="statsYOGURT">
<div class="p-1">
<div class="row no-gutters">
<div class="col-12 mb-3 mt-2">
<div class="p-2 bg-danger text-light rounded text-right" style="transform:rotate(1deg)">
<div style="border:0.5px dashed;opacity:.5" class="mb-2"></div>
<!--================================
PERSONALITY SECTION
================================-->
write about their personality here, keep it short Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<!--================================
END OF PERSONALITY
================================-->
<div class="col-12 mb-4">
<!--================================
LIKES & DISLIKES
================================-->
<b>LIKES:</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
<br><br>
<b>DISLIKES:</b>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</div>
<!--================================
END OF LIKES & DISLIKES
================================-->
<!--================================
STATS LEFT COLUMN
Edit the width percentage to change
the stats
================================-->
<div class="col-6 pr-1">
<div class="mb-1 text-center font-weight-bold text-uppercase">
INTELLIGENCE
<div class="progress my-2 rounded-0 card bg-light card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar bg-danger rounded"
style="width:50%;"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
EMPATHY
<div class="progress my-2 rounded-0 card bg-light card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar bg-danger rounded"
style="width:50%;"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
PATIENCE
<div class="progress my-2 rounded-0 card bg-light card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar bg-danger rounded"
style="width:50%;"
></div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<!--================================
STATS RIGHT COLUMN
================================-->
<div class="col-6 pl-1">
<div class="mb-1 text-center font-weight-bold text-uppercase">
HUMOUR
<div class="progress my-2 rounded-0 card bg-light card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar bg-danger rounded"
style="width:50%;"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
CONFIDENCE
<div class="progress my-2 rounded-0 card bg-light card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar bg-danger rounded"
style="width:50%;"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
CHARISMA
<div class="progress my-2 rounded-0 card bg-light card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar bg-danger rounded"
style="width:50%;"
></div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--================================
END OF STATS SECTION
================================-->
</div>
<!--================================
STORY SECTION
================================-->
<div class="tab-pane fade" id="storyYOGURT">
<div class="p-1">
<!--================================
WARNINGS
================================-->
<div class="mb-2">
<b>TW/CW</b>: warnings, delete if there arent any
</div>
<!--================================
SUBHEADER 1
================================-->
<div class="mb-4">
<div class="row no-gutters">
<div class="col-auto font-weight-bold" style="font-size:20px">
<i class="far fa-bookmark"></i> SUBHEADER
</div>
<div class="col ml-2">
<hr style="border-style:dashed;border-width:1px;margin-top:15px">
</div>
</div>
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. 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.
</div>
<!--================================
END OF SUBHEADER 1
================================-->
<!--================================
SUBHEADER 2
================================-->
<div class="mb-4">
<div class="row no-gutters">
<div class="col-auto font-weight-bold" style="font-size:20px">
<i class="far fa-bookmark"></i> SUBHEADER
</div>
<div class="col ml-2">
<hr style="border-style:dashed;border-width:1px;margin-top:15px">
</div>
</div>
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. 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.
</div>
<!--================================
END OF SUBHEADER 2
================================-->
</div>
<!--================================
END OF STORY SECTION
================================-->
</div>
<!--================================
LINKS/RELATIONSHIPS SECTION
================================-->
<div class="tab-pane fade" id="linksYOGURT">
<div class="p-1">
<!--================================
RELATION 1
================================-->
<div class="row no-gutters mb-4">
<div class="col-sm-4">
<div class="p-2 bg-danger rounded" style="height:150px">
<!--================================
ICON
================================-->
<div class="rounded h-100" style="background-image:url('https://via.placeholder.com/500/ececec');background-size:cover;background-position:center"></div>
</div>
</div>
<div class="col-sm-8 pl-sm-2">
<div class="mt-sm-0 mt-2 mb-2 text-sm-left text-center faded">
<!--================================
NAME, LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset font-weight-bold text-uppercase">CHARACTER</a> (relationship)
</div>
<div style="height:121px;overflow:auto;font-size:13px">
Describe their relationship here. 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.
</div>
</div>
<!--================================
END OF RELATION 1
================================-->
</div>
<!--================================
RELATION 2 (flipped)
================================-->
<div class="row no-gutters mb-4">
<div class="col-sm-4 order-sm-2">
<div class="p-2 bg-danger rounded" style="height:150px">
<!--================================
ICON
================================-->
<div class="rounded h-100" style="background-image:url('https://via.placeholder.com/500/ececec');background-size:cover;background-position:center"></div>
</div>
</div>
<div class="col-sm-8 pr-sm-2 order-sm-1">
<div class="mt-sm-0 mt-2 mb-2 text-sm-left text-center faded">
<!--================================
NAME, LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset font-weight-bold text-uppercase">CHARACTER</a> (relationship)
</div>
<div style="height:121px;overflow:auto;font-size:13px">
Describe their relationship here. 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.
</div>
</div>
</div>
<!--================================
RELATION 3
================================-->
<div class="row no-gutters mb-4">
<div class="col-sm-4">
<div class="p-2 bg-danger rounded" style="height:150px">
<!--================================
ICON
================================-->
<div class="rounded h-100" style="background-image:url('https://via.placeholder.com/500/ececec');background-size:cover;background-position:center"></div>
</div>
</div>
<div class="col-sm-8 pl-sm-2">
<div class="mt-sm-0 mt-2 mb-2 text-sm-left text-center faded">
<!--================================
NAME, LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset font-weight-bold text-uppercase">CHARACTER</a> (relationship)
</div>
<div style="height:121px;overflow:auto;font-size:13px">
Describe their relationship here. 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.
</div>
</div>
<!--================================
END OF RELATION 3
================================-->
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<!--================================
END OF LINKS/RELATIONSHIPS SECTION
================================-->
</div>
<!--================================
DESIGN SECTION
================================-->
<div class="tab-pane fade" id="designYOGURT">
<div class="p-1">
<div class="row no-gutters">
<div class="col-12 mb-sm-4 mb-2">
<div class="row no-gutters">
<!--================================
COLOUR PALETTE
Don't forget to change this:
title="#HEXCODE"
when you hover over the colour it shows
that text, so change it to the same colour
as the div and maybe add a note too
example:
title="#cc828a HAIR"
================================-->
<div class="col p-2 rounded tooltipster m-1" style="background-color:#cc828a" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#cc828a" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#cc828a" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#cc828a" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#cc828a" title="#HEXCODE" data-toggle="tooltip"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<div class="col-sm-8 pr-sm-2">
<!--================================
DESIGN NOTES SECTION
put another <li> to add more
================================-->
<ul style="margin-left:-10px">
<li>put some design notes here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
</div>
<div class="col-sm-4">
<!--================================
IMAGE
================================-->
<div class="p-2 bg-danger rounded text-light" style="transform:rotate(2deg)">
<div style="border:0.5px dashed;opacity:.5;" class="mb-2"></div>
<img src="https://via.placeholder.com/500/ececec" style="height:250px;object-fit:cover" class="w-100">
</div>
</div>
</div>
</div>
<!--================================
END OF DESIGN SECTION
================================-->
</div>
<!--================================
TRIVIA SECTION
================================-->
<div class="tab-pane fade" id="triviaYOGURT">
<div class="p-1">
<div class="row no-gutters">
<div class="col-12">
<!--================================
LIST
================================-->
<ul style="margin-left:-10px">
<li>put trivia stuff about the character here</li>
<img src="https://via.placeholder.com/500/ececec" style="float:right;width:200px" class="d-none d-sm-block m-1">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
</div>
<div class="col-sm-6 pr-sm-2 mt-2">
<!--================================
INTERESTS
================================-->
<div class="p-2 mb-2 bg-danger rounded text-center font-weight-bold text-light">
INTERESTS
</div>
<div style="height:210px;overflow:auto">
<ul style="margin-left:-10px">
<li>put the character's interests here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
</div>
</div>
<div class="col-sm-6 pl-sm-2 mt-2">
<!--================================
MOODBOARD
================================-->
<div class="p-2 mb-2 bg-danger rounded text-center font-weight-bold text-light">
MOODBOARD
</div>
<div class="row no-gutters">
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/cc828a/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/cc828a/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/cc828a/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/cc828a/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<!--================================
END OF MOODBOARD
================================-->
</div>
</div>
</div>
</div>
</div>
</div>
<!--================================
END OF LEFT SIDE
================================-->
</div>
</div>
<!--================================
RIGHT SIDE
================================-->
<div class="col-lg-4 order-lg-2 order-1 pl-lg-3 mb-lg-0 mb-4">
<div class="text-center">
<!--================================
ICON
================================-->
<img src="https://via.placeholder.com/500/ececec" style="max-width:250px" class="rounded-top w-100">
<!--================================
NAME OR QUOTE OR WHATEVER
================================-->
<div class="p-2 rounded-bottom text-light bg-danger mx-auto mb-2" style="max-width:250px">SILLY BIMGUS</div>
<div class="card border-0 p-2 text-muted overflow-auto" style="height:176px">
<!--================================
WRITE ANYTHING HERE IDK
possible ideas: thoughts they had,
conversation between them and another
character, playlist
================================-->
idk, write whatever here, silly stuff. 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.
</div>
</div>
<!--================================
END OF RIGHT SIDE
================================-->
</div>
</div>
<!--================================
CREDIT, DO NOT REMOVE
================================-->
<a href="https://toyhou.se/clowniicat" class="text-danger pull-right my-1">
<i class="fas fa-star fa-spin"></i>
</a>
<!--================================
END OF CREDIT
================================-->
</div>
<!--================================================================
CODE END!!!
you BINGUS
================================================================-->Copy
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
TIP: See those triangles next to the line numbers?
use those to collapse large sections of the code
to make it easier to edit, copy & past and delete
parts!
====================================================
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Accent colour-----#e88181
Light colour------#ece7e7
Main Box colour---#474040
Box under icon----#373232
Text ^^^^^^^^-----#afa9a9
==========================================-->
<div class="p-3" style="border-radius:20px;;color:#e88181;background-color:#474040">
<div class="row no-gutters">
<!--================================
LEFT SIDE
================================-->
<div class="col-lg-8 order-lg-1 order-2">
<div class="p-2 rounded" style="background-color:#ece7e7">
<!--================================
NAV BUTTONS
================================-->
<ul class="nav nav-tabs border-0 row no-gutters mb-1">
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger active" data-toggle="tab" href="#aboutYOGURT" style="background-color:#e88181;color:#ece7e7">
<i class="fas fa-user"></i> ABOUT
</a>
</li>
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#statsYOGURT" style="background-color:#e88181;color:#ece7e7">
<i class="fas fa-chart-bar"></i> STATS
</a>
</li>
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#storyYOGURT" style="background-color:#e88181;color:#ece7e7">
<i class="fas fa-book"></i> STORY
</a>
</li>
<li class="col-sm-3 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#linksYOGURT" style="background-color:#e88181;color:#ece7e7">
<i class="fas fa-link"></i> LINKS
</a>
</li>
<li class="col-sm-6 mb-1 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#designYOGURT" style="background-color:#e88181;color:#ece7e7"
<i class="fas fa-paintbrush"></i> DESIGN
</a>
</li>
<li class="col-sm-6 mb-1 p-1">
<a class="btn btn-block btn-danger" data-toggle="tab" href="#triviaYOGURT" style="background-color:#e88181;color:#ece7e7">
<i class="fas fa-star"></i> TRIVIA
</a>
</li>
</ul>
<!--================================
END OF NAV
================================-->
<div class="tab-content" style="height:350px;overflow-y:auto;overflow-x:hidden">
<i class="fas fa-strawberry" style="font-size:70px;position:absolute;right:-15px;bottom:-10px;z-index:50;text-shadow: 0 0 2.5px rgba(117,0,0,0.5)"></i>
<div class="bg-danger mb-2" style="height:1px;position:sticky;top:0"></div>
<!--================================
ABOUT SECTION
================================-->
<div class="tab-pane fade active show" id="aboutYOGURT">
<div class="p-1 row no-gutters">
<div class="row no-gutters col-12 order-sm-1 order-2">
<div class="col-sm-6">
<!--================================
BASIC INFO STUFF LEFT COLUMN
no guides, i think its easy enough
to edit
================================-->
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">NAME</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">AGE</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">BIRTHDAY</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">SPECIES</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<div class="col-sm-6">
<!--================================
BASIC INFO STUFF RIGHT COLUMN
================================-->
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">HEIGHT</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">GENDER</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">ORIENTATION</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6">
<div class="p-2 font-weight-bold text-uppercase rounded" style="color:#ece7e7;background-color:#e88181">PRONOUNS</div>
</div>
<div class="col-6">
<div class="p-2 pl-3 rounded" style="color:#e88181">content</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<div class="col-12 order-sm-2 order-1 mb-sm-0 mb-4">
<!--================================
DESCRIPTION STUFF
================================-->
Write a description of your character here, box scrolls. 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.
</div>
</div>
<!--================================
END OF ABOUT SECTION
================================-->
</div>
<!--================================
STATS SECTION
================================-->
<div class="tab-pane fade" id="statsYOGURT">
<div class="p-1">
<div class="row no-gutters">
<div class="col-12 mb-3 mt-2">
<div class="p-2 rounded text-right" style="transform:rotate(1deg);color:#ece7e7;background-color:#e88181">
<div style="border:0.5px dashed;opacity:.5" class="mb-2"></div>
<!--================================
PERSONALITY SECTION
================================-->
write about their personality here, keep it short Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<!--================================
END OF PERSONALITY
================================-->
<div class="col-12 mb-4">
<!--================================
LIKES & DISLIKES
================================-->
<b>LIKES:</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
<br><br>
<b>DISLIKES:</b>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</div>
<!--================================
END OF LIKES & DISLIKES
================================-->
<!--================================
STATS LEFT COLUMN
Edit the width percentage to change
the stats
================================-->
<div class="col-6 pr-1">
<div class="mb-1 text-center font-weight-bold text-uppercase">
INTELLIGENCE
<div class="progress my-2 rounded-0 card bg-transparent card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar rounded"
style="width:50%;
background-color:#e88181"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
EMPATHY
<div class="progress my-2 rounded-0 card bg-transparent card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar rounded"
style="width:50%;
background-color:#e88181"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
PATIENCE
<div class="progress my-2 rounded-0 card bg-transparent card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar rounded"
style="width:50%;
background-color:#e88181"
></div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<!--================================
STATS RIGHT COLUMN
================================-->
<div class="col-6 pl-1">
<div class="mb-1 text-center font-weight-bold text-uppercase">
HUMOUR
<div class="progress my-2 rounded-0 card bg-transparent card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar rounded"
style="width:50%;
background-color:#e88181"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
CONFIDENCE
<div class="progress my-2 rounded-0 card bg-transparent card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar rounded"
style="width:50%;
background-color:#e88181"
></div>
</div>
</div>
<div class="mb-1 text-center font-weight-bold text-uppercase">
CHARISMA
<div class="progress my-2 rounded-0 card bg-transparent card-outline-danger p-1 rounded" style="border-style:dotted dotted solid solid">
<div class="progress-bar rounded"
style="width:50%;
background-color:#e88181"
></div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--================================
END OF STATS SECTION
================================-->
</div>
<!--================================
STORY SECTION
================================-->
<div class="tab-pane fade" id="storyYOGURT">
<div class="p-1">
<!--================================
WARNINGS
================================-->
<div class="mb-2">
<b>TW/CW</b>: warnings, delete if there arent any
</div>
<!--================================
SUBHEADER 1
================================-->
<div class="mb-4">
<div class="row no-gutters">
<div class="col-auto font-weight-bold" style="font-size:20px">
<i class="far fa-bookmark"></i> SUBHEADER
</div>
<div class="col ml-2">
<hr style="border-style:dashed;border-width:1px;margin-top:15px">
</div>
</div>
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. 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.
</div>
<!--================================
END OF SUBHEADER 1
================================-->
<!--================================
SUBHEADER 2
================================-->
<div class="mb-4">
<div class="row no-gutters">
<div class="col-auto font-weight-bold" style="font-size:20px">
<i class="far fa-bookmark"></i> SUBHEADER
</div>
<div class="col ml-2">
<hr style="border-style:dashed;border-width:1px;margin-top:15px">
</div>
</div>
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. 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.
</div>
<!--================================
END OF SUBHEADER 2
================================-->
</div>
<!--================================
END OF STORY SECTION
================================-->
</div>
<!--================================
LINKS/RELATIONSHIPS SECTION
================================-->
<div class="tab-pane fade" id="linksYOGURT">
<div class="p-1">
<!--================================
RELATION 1
================================-->
<div class="row no-gutters mb-4">
<div class="col-sm-4">
<div class="p-2 rounded" style="height:150px;background-color:#e88181">
<!--================================
ICON
================================-->
<div class="rounded h-100" style="background-image:url('https://via.placeholder.com/500/ececec');background-size:cover;background-position:center"></div>
</div>
</div>
<div class="col-sm-8 pl-sm-2">
<div class="mt-sm-0 mt-2 mb-2 text-sm-left text-center faded">
<!--================================
NAME, LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset font-weight-bold text-uppercase">CHARACTER</a> (relationship)
</div>
<div style="height:121px;overflow:auto;font-size:13px">
Describe their relationship here. 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.
</div>
</div>
<!--================================
END OF RELATION 1
================================-->
</div>
<!--================================
RELATION 2 (flipped)
================================-->
<div class="row no-gutters mb-4">
<div class="col-sm-4 order-sm-2">
<div class="p-2 rounded" style="height:150px;background-color:#e88181">
<!--================================
ICON
================================-->
<div class="rounded h-100" style="background-image:url('https://via.placeholder.com/500/ececec');background-size:cover;background-position:center"></div>
</div>
</div>
<div class="col-sm-8 pr-sm-2 order-sm-1">
<div class="mt-sm-0 mt-2 mb-2 text-sm-left text-center faded">
<!--================================
NAME, LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset font-weight-bold text-uppercase">CHARACTER</a> (relationship)
</div>
<div style="height:121px;overflow:auto;font-size:13px">
Describe their relationship here. 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.
</div>
</div>
</div>
<!--================================
RELATION 3
================================-->
<div class="row no-gutters mb-4">
<div class="col-sm-4">
<div class="p-2 rounded" style="height:150px;background-color:#e88181">
<!--================================
ICON
================================-->
<div class="rounded h-100" style="background-image:url('https://via.placeholder.com/500/ececec');background-size:cover;background-position:center"></div>
</div>
</div>
<div class="col-sm-8 pl-sm-2">
<div class="mt-sm-0 mt-2 mb-2 text-sm-left text-center faded">
<!--================================
NAME, LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset font-weight-bold text-uppercase">CHARACTER</a> (relationship)
</div>
<div style="height:121px;overflow:auto;font-size:13px">
Describe their relationship here. 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.
</div>
</div>
<!--================================
END OF RELATION 3
================================-->
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<!--================================
END OF LINKS/RELATIONSHIPS SECTION
================================-->
</div>
<!--================================
DESIGN SECTION
================================-->
<div class="tab-pane fade" id="designYOGURT">
<div class="p-1">
<div class="row no-gutters">
<div class="col-12 mb-sm-4 mb-2">
<div class="row no-gutters">
<!--================================
COLOUR PALETTE
Don't forget to change this:
title="#HEXCODE"
when you hover over the colour it shows
that text, so change it to the same colour
as the div and maybe add a note too
example:
title="#e88181 HAIR"
================================-->
<div class="col p-2 rounded tooltipster m-1" style="background-color:#e88181" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#e88181" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#e88181" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#e88181" title="#HEXCODE" data-toggle="tooltip"></div>
<div class="col p-2 rounded tooltipster m-1" style="background-color:#e88181" title="#HEXCODE" data-toggle="tooltip"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<div class="col-sm-8 pr-sm-2">
<!--================================
DESIGN NOTES SECTION
put another <li> to add more
================================-->
<ul style="margin-left:-10px">
<li>put some design notes here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
</div>
<div class="col-sm-4">
<!--================================
IMAGE
================================-->
<div class="p-2 rounded" style="transform:rotate(2deg);color:#ece7e7;background-color:#e88181">
<div style="border:0.5px dashed;opacity:.5;" class="mb-2"></div>
<img src="https://via.placeholder.com/500/ececec" style="height:250px;object-fit:cover" class="w-100">
</div>
</div>
</div>
</div>
<!--================================
END OF DESIGN SECTION
================================-->
</div>
<!--================================
TRIVIA SECTION
================================-->
<div class="tab-pane fade" id="triviaYOGURT">
<div class="p-1">
<div class="row no-gutters">
<div class="col-12">
<!--================================
LIST
================================-->
<ul style="margin-left:-10px">
<li>put trivia stuff about the character here</li>
<img src="https://via.placeholder.com/500/ececec" style="float:right;width:200px" class="d-none d-sm-block m-1">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
</div>
<div class="col-sm-6 pr-sm-2 mt-2">
<!--================================
INTERESTS
================================-->
<div class="p-2 mb-2 rounded text-center font-weight-bold" style="color:#ece7e7;background-color:#e88181">
INTERESTS
</div>
<div style="height:210px;overflow:auto">
<ul style="margin-left:-10px">
<li>put the character's interests here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
</div>
</div>
<div class="col-sm-6 pl-sm-2 mt-2">
<!--================================
MOODBOARD
================================-->
<div class="p-2 mb-2 rounded text-center font-weight-bold" style="color:#ece7e7;background-color:#e88181">
MOODBOARD
</div>
<div class="row no-gutters">
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/e88181/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/e88181/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/e88181/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<div class="col-6 p-1">
<div
style="background:url('https://via.placeholder.com/500/e88181/fff');
;background-size:cover;background-position:center;height:100px" class="rounded"></div>
</div>
<!--================================
END OF MOODBOARD
================================-->
</div>
</div>
</div>
</div>
</div>
</div>
<!--================================
END OF LEFT SIDE
================================-->
</div>
</div>
<!--================================
RIGHT SIDE
================================-->
<div class="col-lg-4 order-lg-2 order-1 pl-lg-3 mb-lg-0 mb-4">
<div class="text-center">
<!--================================
ICON
================================-->
<img src="https://via.placeholder.com/500/ececec" style="max-width:250px" class="rounded-top w-100">
<!--================================
NAME OR QUOTE OR WHATEVER
================================-->
<div class="p-2 rounded-bottom mx-auto mb-2" style="max-width:250px;color:#ece7e7;background-color:#e88181">SILLY BIMGUS</div>
<div class="rounded p-2 overflow-auto" style="height:176px;background-color:#373232;color:#afa9a9">
<!--================================
WRITE ANYTHING HERE IDK
possible ideas: thoughts they had,
conversation between them and another
character, playlist
================================-->
idk, write whatever here, silly stuff. 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.
</div>
</div>
<!--================================
END OF RIGHT SIDE
================================-->
</div>
</div>
<!--================================
CREDIT, DO NOT REMOVE
================================-->
<a href="https://toyhou.se/clowniicat" class="text-reset pull-right my-1">
<i class="fas fa-star fa-spin"></i>
</a>
<!--================================
END OF CREDIT
================================-->
</div>
<!--================================================================
CODE END!!!
you BINGUS
================================================================-->