<!---
KIRAKIRA DOKI / by cati/dogboy
NOTES
accent: #6D9EEB
icon: fas fa-stars, fas fa-rectangle-wide
(use ctrl+f + replace for accent/icon replacement)
semi-mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel! just keep my credit pwease
- have a nice day!!
GENERAL INSTRUCTIONS
- TO REMOVE THE SPINNING ANIMATION: go to every "fas fa-stars", and remove the part that says "fa-spin"
--->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/b9a5b762edb81670ce011be6a58e480a/tumblr_inline_mvmuledGjd1qid2nw.png) repeat fixed;padding:20px;border-radius:10px;max-width:600px;margin:30px auto 5px;">
<div class="card" style="background:#FFFFFF;border:0px;border-radius:0px;">
<div style="border-radius:0px;background-color:#6D9EEB;">
<div class="d-flex justify-content-between">
<i class="fas fa-star fa-3x p-3 fa-spin" style="color:#FFFFFF"></i>
<!--- quote --->
<p class="text-uppercase m-4 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;" align="center"><i class="fas fa-quote-left" style="color:#FFFFFF" />
quote here!
<i class="fas fa-quote-right" style="color:#FFFFFF" /></p>
<i class="fas fa-star fa-3x p-3 fa-spin" style="color:#FFFFFF"></i>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-6">
<div class="p-1 m-2 pl-3 mt-4">
<!--- info panel --->
<div class="justify-content-between m-1">
<div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">NAME:</span></div>
<div><span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span></div>
</div>
<div class="justify-content-between m-1">
<div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">AGE:</span></div>
<div><span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span></div>
</div>
<div class="justify-content-between m-1">
<div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">GENDER:</span></div>
<div><span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span></div>
</div>
<div class="justify-content-between m-1">
<div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">SPECIE:</span></div>
<span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span>
</div>
<div class="justify-content-between m-1">
<div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">SEXUALITY:</span></div>
<span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span>
</div>
</div>
</div>
<div class="col-md-5">
<!--- avatar --->
<img class="mx-auto d-block fr-rounded mt-3 pull-right" style="width:180px;border:4px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24439687_sy8.gif">
</div>
<div class="col-md-12">
<!--- color palette --->
<div class="justify-content-between p-3">
<i class="fas fa-rectangle-wide fa-6x" style="color: #85C9E9;"></i>
<i class="fas fa-rectangle-wide fa-6x ml-2" style="color: #FD81B0;"></i>
<i class="fas fas fa-rectangle-wide fa-6x ml-2" style="color: #197778;"></i>
<i class="fas fas fa-rectangle-wide fa-6x ml-2" style="color: #F4D2B4;"></i></div>
</div>
</div>
</div>
<div class="justify-content-center">
<div class="card m-4 px-3" style="border-radius:5px;background-color:#6D9EEB;height:40px;color:#FFFFFF;">
<!--- toggle --->
<a data-toggle="collapse" href="#more" style="color:#FFFFFF;"><h3 class="text-uppercase font-italic mt-2" style="font-size:22px;letter-spacing:3px;" align="center">★ kirakira doki! ★</h3></a></div>
</div>
<div class="my-1 collapse" id="more">
<div class="card" style="background:#FFFFFF;border:0px;border-radius:0px;">
<div class="row mx-auto">
<div class="col-12 mt-3">
<div class="row align-items-center">
<i class="fas fa-star fa-2x ml-3 fa-spin" style="color:#6D9EEB"></i>
<div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
<div class="col-lg"><h1 class="font-italic text-uppercase text-center" style="color:#6D9EEB;font-size:25px;letter-spacing:3px;">personality</h1></div>
<div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
<i class="fas fa-star fa-2x mr-3 fa-spin" style="color:#6D9EEB"></i>
</div>
</div>
<div class="col-md-12">
<div class="px-2 pt-2" style="background-color: #FFFFFF;height:200px;overflow: auto;">
<!--- personality icon --->
<img class="fr-rounded m-1" style="width:140px;border:4px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26083937_lhD.png" align="left">
<!--- personality --->
<p class="m-0 text-center" style="color: #6D9EEB;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- stats bars, higher percentage = closer to the right! credit to Eggy for this concept. if you change the name of the stat the width of the overall progress bar will change, so keep that in mind! --->
<div class="col-12 mb-4">
<span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">intro</span>
<span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">extro</span>
<div class="progress rounded-0 mt-3">
<div class="progress-bar" style="color:#6D9EEB;background:none;border-right-width:8px;border-right-style:solid;
width:51%">
</div>
</div>
<br>
<span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">logic</span>
<span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">feelin</span>
<div class="progress rounded-0">
<div class="progress-bar" style="color:#6D9EEB;background:none;border-right-width:8px;border-right-style:solid;
width:52%">
</div>
</div>
<br>
<span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">order</span>
<span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">haste</span>
<div class="progress rounded-0">
<div class="progress-bar" style="color:#6D9EEB;background:none;border-right-width:8px;border-right-style:solid;
width:51%">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<i class="fas fa-star fa-2x ml-3 fa-spin" style="color:#6D9EEB"></i>
<div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
<div class="col-lg"><h1 class="font-italic text-uppercase text-center" style="color:#6D9EEB;font-size:25px;letter-spacing:3px;">TRIVIA</h1></div>
<div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
<i class="fas fa-star fa-2x mr-3 fa-spin" style="color:#6D9EEB"></i>
</div>
</div>
<div class="col-md-12">
<div class="px-2 pt-2" style="background-color: #FFFFFF;height:200px;overflow: auto;">
<!--- trivia icon --->
<img class="fr-rounded m-1" style="width:140px;border:4px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/25593118_RAw.png" align="right">
<!--- trivia --->
<ul class="m-0" style="color: #6D9EEB;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<div class="col-12 mt-3">
<div class="row align-items-center">
<i class="fas fa-star fa-2x ml-3 fa-spin" style="color:#6D9EEB"></i>
<div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
<div class="col-lg"><h1 class="font-italic text-uppercase text-center" style="color:#6D9EEB;font-size:25px;letter-spacing:3px;">Relationships</h1></div>
<div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
<i class="fas fa-star fa-2x mr-3 fa-spin" style="color:#6D9EEB"></i>
</div>
</div>
<!--- character 1 --->
<div class="col-4 mt-3 my-3 text-center">
<img class="fr-rounded" style="width:100px;border:3px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24502570_G6t_7552719.png?1597470245">
<h3 class="font-italic mt-2 text-uppercase text-center" style="color:#6D9EEB;letter-spacing:1px;"><a href="URLHERE" style="color:#6D9EEB;">name</a></h3>
<i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<i class="far fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<p class="m-1" style="color: #6D9EEB;font-size:12px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
</p>
</div>
<!--- character 2 --->
<div class="col-4 mt-3 my-3 text-center">
<img class="fr-rounded" style="width:100px;border:3px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24502570_G6t_7552719.png?1597470245">
<h3 class="font-italic mt-2 text-uppercase text-center" style="color:#6D9EEB;letter-spacing:1px;"><a href="URLHERE" style="color:#6D9EEB;">name</a></h3>
<i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<i class="far fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<p class="m-1" style="color: #6D9EEB;font-size:12px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
</p>
</div>
<!--- character 3, if you want to add more characters highlight until the next </div> and copy+paste! --->
<div class="col-4 mt-3 my-3 text-center">
<img class="fr-rounded" style="width:100px;border:3px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24502570_G6t_7552719.png?1597470245">
<h3 class="font-italic mt-2 text-uppercase text-center" style="color:#6D9EEB;letter-spacing:1px;"><a href="URLHERE" style="color:#6D9EEB;">name</a></h3>
<i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<i class="far fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
<p class="m-1" style="color: #6D9EEB;font-size:12px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
</p>
</div>
</div>
</div>
<div class="p-2" style="background-color:#6D9EEB;">
<!--- credit, dont remove pls! --->
<a class="d-block text-right" href="https://toyhou.se/8534671.kirakira-doki-f2u-html" style="font-size:12px;color:#FFFFFF;letter-spacing:4px;">code by cati <i class="fad fa-rainbow"></i></a>
</div>
</div>
</div>
