<!---
DARLING / by cati/dogboy
NOTES
accent: #E392A6
bg color: #F7EDF2
(use ctrl+f + replace for accent replacement)
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 pls dont remove my credit!!
- have a nice day!!
--->
<div class="container-fluid" style="background:none;padding:10px;max-width:850px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-lg-5">
<!--- pagedoll, i reccommend using a vertical image --->
<img class="mx-auto d-flex" src="https://i.imgur.com/hxVRsxl.png" style="max-height:420px;">
</div>
<div class="col-lg-7 p-3">
<div class="row no-gutters">
<div class="col-md-8 mt-3">
<!--- name, change the "fa-heart" to whatever icon u want from fontawesome --->
<h3 class="text-uppercase text-center" style="font-size:36px;letter-spacing:2px;color:#E392A6;font-weight:400;">name <i class="fas fa-heart"></i> </h3>
<div class="card" style="border:0px;">
<!--- color palette --->
<div class="row no-gutters p-2" style="height:65px;">
<div class="col-lg-4 m-1" style="background-color:#F6ECEE;min-width:134px;"></div>
<div class="col-lg-4 m-1" style="background-color:#FFF3E6;min-width:134px;"></div>
<div class="col-lg-4 m-1" style="background-color:#6C002B;min-width:134px;"></div>
<div class="col-lg-4 m-1" style="background-color:#DA2F5D;min-width:134px;"></div>
</div>
</div>
</div>
<div class="col-md-4">
<!--- icon --->
<img class="mx-auto d-flex fr-rounded shadow-sm" style="width:125px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28367958_0J8.png">
</div>
</div>
<div class="card mt-3 shadow-sm" style="background:#F7EDF2;height:200px;overflow:auto;border:0px;">
<div class="tab-content">
<div class="tab-pane active show card-block" id="BASICS">
<!--- about --->
<p class="text-center" style="color:#E392A6;font-size:15px;font-weight:300;">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.
<br><br>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>
<div class="tab-pane card-block p-4" id="STATS">
<!--- stats, to change the amount change the "width:xx%;" value. for example, "width:100%;" would be full, and "width:0%;" is none --->
<h3 class="text-uppercase" style="color:#E392A6;font-size:19px;letter-spacing:2px;font-weight:100;"><i class="fas fa-heart" style="color:#E392A6;font-size:15px;"></i> kindness</h3>
<div class="progress" style="height:10px;">
<div class="progress-bar" style="height:10px;background-color:#E392A6;
width:80%;"></div>
</div>
<h3 class="text-uppercase mt-3" style="color:#E392A6;font-size:19px;letter-spacing:2px;font-weight:100;"><i class="fas fa-sparkles" style="color:#E392A6;font-size:15px;"></i> charisma</h3>
<div class="progress" style="height:10px;">
<div class="progress-bar" style="height:10px;background-color:#E392A6;
width:60%;"></div>
</div>
<h3 class="text-uppercase mt-3" style="color:#E392A6;font-size:19px;letter-spacing:2px;font-weight:100;"><i class="fas fa-book-open" style="color:#E392A6;font-size:15px;"></i> intelligence</h3>
<div class="progress" style="height:10px;">
<div class="progress-bar" style="height:10px;background-color:#E392A6;
width:40%;"></div>
</div>
<h3 class="text-uppercase mt-3" style="color:#E392A6;font-size:19px;letter-spacing:2px;font-weight:100;"><i class="fas fa-fist-raised" style="color:#E392A6;font-size:15px;"></i> guts</h3>
<div class="progress" style="height:10px;">
<div class="progress-bar" style="height:10px;background-color:#E392A6;
width:20%;"></div>
</div>
<h3 class="text-uppercase mt-3" style="color:#E392A6;font-size:19px;letter-spacing:2px;font-weight:100;"><i class="fas fa-compass" style="color:#E392A6;font-size:15px;"></i> proficiency</h3>
<div class="progress" style="height:10px;">
<div class="progress-bar" style="height:10px;background-color:#E392A6;
width:0%;"></div>
</div>
</div>
<div class="tab-pane card-block p-4" id="GALLERY">
<div class="col-lg-12">
<div class="row no-gutters">
<!--- aesthetic/gallery images --->
<div class="col-sm-4">
<div class="card mx-auto d-flex" style="background:url('https://i.pinimg.com/originals/d0/c4/ef/d0c4efc30f7e3146fab26130ed72651c.jpg');background-size:cover;background-position:center;border-radius:0px;height:120px;width:120px;"></div>
</div>
<div class="col-sm-4">
<div class="card mx-auto d-flex" style="background:url('https://i.pinimg.com/originals/d0/c4/ef/d0c4efc30f7e3146fab26130ed72651c.jpg');background-size:cover;background-position:center;border-radius:0px;height:120px;width:120px;"></div>
</div>
<div class="col-sm-4">
<div class="card mx-auto d-flex" style="background:url('https://i.pinimg.com/originals/d0/c4/ef/d0c4efc30f7e3146fab26130ed72651c.jpg');background-size:cover;background-position:center;border-radius:0px;height:120px;width:120px;"></div>
</div>
</div>
</div>
<div class="col-lg-12 mt-1">
<div class="row no-gutters">
<!--- aesthetic/gallery images part 2 --->
<div class="col-sm-4">
<div class="card mx-auto d-flex" style="background:url('https://i.pinimg.com/originals/d0/c4/ef/d0c4efc30f7e3146fab26130ed72651c.jpg');background-size:cover;background-position:center;border-radius:0px;height:120px;width:120px;"></div>
</div>
<div class="col-sm-4">
<div class="card mx-auto d-flex" style="background:url('https://i.pinimg.com/originals/d0/c4/ef/d0c4efc30f7e3146fab26130ed72651c.jpg');background-size:cover;background-position:center;border-radius:0px;height:120px;width:120px;"></div>
</div>
<div class="col-sm-4">
<div class="card mx-auto d-flex" style="background:url('https://i.pinimg.com/originals/d0/c4/ef/d0c4efc30f7e3146fab26130ed72651c.jpg');background-size:cover;background-position:center;border-radius:0px;height:120px;width:120px;"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane card-block" id="LINKS">
<!--- relationships --->
<!--- character 1 --->
<div class="col-lg-12 m-2">
<div class="row no-gutters">
<div class="col-lg-8">
<h3 class="text-uppercase text-left" style="font-size:20px;letter-spacing:2px;color:#E392A6;font-weight:500;"><i class="fas fa-heart"></i> NAME</h3>
<hr style="background-color:#E392A6;height:2px;margin-right:10%;">
<p class="p-1" style="color:#E392A6;font-size:14.5px;font-weight:300;height:90px;overflow:auto;">Character relationship description here, it will scroll after writing some. 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 class="col-lg-4 p-1"><img class="mx-auto d-flex fr-rounded shadow-sm" style="width:125px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28269824_lZt.png"></div>
</div>
</div>
<!--- character 2 --->
<div class="col-lg-12 m-2">
<div class="row no-gutters">
<div class="col-lg-8">
<h3 class="text-uppercase text-left" style="font-size:20px;letter-spacing:2px;color:#E392A6;font-weight:500;"><i class="fas fa-user"></i> NAME</h3>
<hr style="background-color:#E392A6;height:2px;margin-right:10%;">
<p class="p-1" style="color:#E392A6;font-size:14.5px;font-weight:300;height:90px;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 class="col-lg-4 p-1"><img class="mx-auto d-flex fr-rounded shadow-sm" style="width:125px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28836368_UC5.png"></div>
</div>
</div>
<!--- character 3 --->
<div class="col-lg-12 m-2">
<div class="row no-gutters">
<div class="col-lg-8">
<h3 class="text-uppercase text-left" style="font-size:20px;letter-spacing:2px;color:#E392A6;font-weight:500;"><i class="fas fa-star"></i> NAME</h3>
<hr style="background-color:#E392A6;height:2px;margin-right:10%;">
<p class="p-1" style="color:#E392A6;font-size:14.5px;font-weight:300;height:90px;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 class="col-lg-4 p-1"><img class="mx-auto d-flex fr-rounded shadow-sm" style="width:125px;" src="https://f2.toyhou.se/file/f2-toyhou-se/characters/8858390?1605359978"></div>
</div>
</div>
<!--- end character 3, to add more highlight this until "character 3" and copy paste directly under --->
</div>
</div>
</div>
<div class="col-lg-12">
<!--- navigation --->
<ul class="nav nav-pills nav-justified mt-2">
<li class="nav-item mr-1 m-1 shadow-sm"><a class="nav-link active" data-toggle="pill" href="#BASICS" style="background-color:#F7EDF2;color:#E392A6;"><i>about</i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#STATS" style="background-color:#F7EDF2;color:#E392A6;"><i>stats</i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#GALLERY" style="background-color:#F7EDF2;color:#E392A6;"><i>gallery</i></a></li>
<li class="nav-item mx-1 m-1 shadow-sm"><a class="nav-link" data-toggle="pill" href="#LINKS" style="background-color:#F7EDF2;color:#E392A6;"><i>links</i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/9060072.darling-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
