<!---
KEEBLE / by cati/dogboy
NOTES
accent: #C7B78D
(use ctrl+f + replace for accent 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!!
--->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/a425b0eff8eb1fcf061e7d1d50876431/tumblr_inline_n2735wHftz1svwp6w.png) repeat fixed;padding:20px;border-radius:40px;max-width:600px;margin:30px auto 5px;">
<div class="row no-gutters d-flex justify-content-center">
<div class="card col-8 p-3" style="background:none;border:0px;">
<!--- avatar --->
<img class="mx-auto d-block fr-rounded img-thumbnail" style="max-width:110%" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/25986766_AOi.png">
</div>
</div>
<div class="row no-gutters justify-content-between">
<div class="col-md-5 p-2 m-1">
<div class="card" style="background-color:#FFFFFF;height:200px;overflow:auto;border-radius:10px;border:4px solid #C7B78D;">
<div style="border-radius:0px;background-color:#C7B78D;"><p class="text-uppercase m-2 font-weight-bold font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:1px;" align="center">
info</p></div>
<!--- info column --->
<div class="p-2" style="overflow:auto;">
<div class="justify-content-between my-2">
<div><span class="font-weight-bold" style="color:#C7B78D;font-size:12px;letter-spacing:1px;">NAME</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#C7B78D;">
<div class="justify-content-between">
<div><span class="font-weight-bold" style="color:#C7B78D;font-size:12px;letter-spacing:1px;">AGE</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#C7B78D;">
<div class="justify-content-between">
<div><span class="font-weight-bold" style="color:#C7B78D;font-size:12px;letter-spacing:1px;">GENDER</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<hr style="width:95%;background-color:#C7B78D;">
<div class="justify-content-between">
<div><span class="font-weight-bold" style="color:#C7B78D;font-size:12px;letter-spacing:1px;">STATUS</span></div>
<div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-5 p-2 m-1">
<div class="card" style="background-color:#FFFFFF;height:200px;overflow:auto;border-radius:10px;border:4px solid #C7B78D;">
<div style="border-radius:0px;background-color:#C7B78D;"><p class="text-uppercase m-2 font-weight-bold font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:1px;" align="center">
moodboard</p></div>
<div class="row no-gutters p-1" style="overflow:auto;">
<!--- moodboard, credit to FurudBat for the snippet! --->
<div class="col-12 col-md-6 my-2 px-1">
<img class="img-fluid rounded mx-auto d-block" src="https://via.placeholder.com/300x200">
</div>
<div class="col-12 col-md-6 my-2 m px-1">
<img class="img-fluid rounded mx-auto d-block" src="https://via.placeholder.com/300x200">
</div>
<div class="col-12 col-md-6 mb-2 px-1">
<img class="img-fluid rounded mx-auto d-block" src="https://via.placeholder.com/300x200">
</div>
<div class="col-12 col-md-6 mb-2 px-1">
<img class="img-fluid rounded mx-auto d-block" src="https://via.placeholder.com/300x200">
</div>
<div class="col-12 col-md-6 mb-2 px-1">
<img class="img-fluid rounded mx-auto d-block" src="https://via.placeholder.com/300x200">
</div>
<div class="col-12 col-md-6 mb-2 px-1">
<img class="img-fluid rounded mx-auto d-block" src="https://via.placeholder.com/300x200">
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-lg-12 p-2">
<div class="card my-2" style="background-color:#FFFFFF;height:350px;overflow:auto;border-radius:10px;border:4px solid #C7B78D;">
<div style="border-radius:0px;background-color:#C7B78D;"><p class="text-uppercase m-2 font-weight-bold font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:1px;" align="center">
history</p></div>
<div align="center">
<!--- history, you'll have to seperate them out so that it wraps around the image --->
<p class="text-center p-3 font-italic" style="color:#C7B78D;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet.
<img class="m-2 img-responsive my-3" style="height:150px;border:3px solid #C7B78D;border-radius:10%;" align="left" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/25267943_CEG.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
</p>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8522865.keeble-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
