Hollypool

    
 ------------------------> 
<!-- background image --> <div style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; width:100%; height: 100%; z-index:-10; position: absolute; top:0; bottom:0; left:0; right:0;"></div> 
<!-- navigation container --> <div style="position: fixed; top: 0; z-index: 10"> 
 <!-- navigation bar icon --> <a class="p-2 px-3" style="position: fixed; top: -3px; z-index: 10; background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); border-radius: 0 0 20px 20px" href="#navigation" data-toggle="collapse"> <i class="fas fa-chevron-down" style="color: #c2edfc"></i> <!-- END navigation bar icon --> </a> 
 <!-- navigation box --> <div class="collapse" id="navigation" style="position: relative; top: 50px; transition-duration: 1s"> <div class="p-1 rounded" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2)"> <a href="#basicinfonav" style="color: #ffffff"><div class="px-2 rounded"><i class="far fa-angle-right mr-1 small" style="color: #c2edfc"></i>basic info</div></a> <a href="#designnotesnav" style="color: #ffffff"><div class="px-2 rounded"><i class="far fa-angle-right mr-1 small" style="color: #c2edfc"></i>design notes</div></a> <a href="#relationsnav" style="color: #ffffff"><div class="px-2 rounded"><i class="far fa-angle-right mr-1 small" style="color: #c2edfc"></i>relations</div></a> </div> <!-- END navigation box --> </div> <!-- END navigation container --> </div> 
<!-- !!! NOTE: remove everything between "dangling icons container" and "END dangling icons container" if u don't want the dangling stars in the background --> 
<!-- dangling icons container --> <div style="position: fixed; top: 0; z-index: -3; justify-content: space-around; width: 100%" class="d-flex"> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 4.1s"> <div style="height: 300px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 6.3s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 2.5s"> <div style="height: 500px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 8.6s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 6.3s"> <div style="height: 390px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 4.4s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 5.2s"> <div style="height: 220px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 10.5s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 1.6s"> <div style="height: 460px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 7.9s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 4.7s"> <div style="height: 320px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 6.7s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 3.3s"> <div style="height: 250px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 8.4s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 6.8s"> <div style="height: 520px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 5.8s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 3.6s"> <div style="height: 340px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 8.2s"></i> </div> <!-- dangling icon --> <div class="fa-fade" style="animation-duration: 2.8s"> <div style="height: 430px; width: 2px; border: 1px solid #c2edfc; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1)"></div> <i class="fas fa-star fa-pulse" style="color: #c2edfc; text-shadow: -2px 1px 5px rgba(0,0,0,.3); font-size: 30px; position: relative; right: 16px; top: 10px; animation-duration: 10.4s"></i> </div> </div> <!-- END dangling icons container --> 
<!-- full invisible container --> <div class="text-center mt-5" style="color: #ffffff"> 
<!-- icon image --> <div class="p-2 rounded" style="background-color: rgba(0,0,0,.3); display: inline-block; box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2);"> 
 <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7" class="rounded" style="user-drag: none; -webkit-user-drag: none; user-select: none; height: 150px; width: 150px; object-position: center; object-fit: cover"> 
<!-- END icon image --> </div> 
<br> 
<!-- box under icon image --> <div class="my-3 rounded p-1 px-3 mx-auto" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); display: inline-block"> <!-- name and pronouns --> <div class="text-uppercase" style="font-size: 15px;"> Name_here <i class="fas fa-circle mx-2" style="font-size: 4px; position: relative; bottom: 3px"></i> pronouns <!-- END name and pronouns --> </div> 
 <!-- three words --> <div class="font-italic" style="color: #c2edfc"> adjective / adjective / adjective <!-- END three words --> </div> <!-- END box under icon image --> </div> 
<br> 
<!-- more info button --> <div> <a data-toggle="collapse" href="#moreinfo" style="text-decoration: none" title="more info" class="tooltipster" data-placement="left"> <i class="fas fa-chevron-down rounded-circle p-2 px-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); color: #ffffff"></i> </a> <!-- END more info button --> </div> 
<br> 
<!-- !!! NOTE: add 'show' after 'collapse' if u don't want the info to be hidden --> 
<!-- more info container --> <div id="moreinfo" class="collapse" style="transition-duration: 1.5s"> 
 <!-- basic info button --> <a data-toggle="collapse" href="#basicinfo" style="color: #c2edfc; text-decoration: none" class="text-uppercase" id="basicinfonav"> <div class="rounded mx-auto p-1 px-3 pt-2 mb-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); display: inline-block"> basic info <!-- END basic info button --> </div> </a> <br> 
 <!-- basic info container --> <div id="basicinfo" class="collapse show rounded p-1 px-2 mx-auto" style="transition-duration: 1s"> <!-- basics box --> <div class="mx-auto p-1 rounded" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); width: 300px;"> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> species </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> content </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> age </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> content </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> height </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> content </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> sexuality </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> content </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> birthday </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> content </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> occupation </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> content </div> </div> <!-- END basics box --> </div> <!-- invisible likes/dislikes box --> <div class="mt-3"> <div class="row no-gutters mx-auto col-md-6"> <!-- likes --> <div class="col-sm-6 px-2"> <div class="rounded p-2 px-3 pr-4 mb-3 text-left" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2)"> <div class="text-uppercase" style="color: #c2edfc"> <i class="fal fa-heart mx-1"></i> likes </div> <!-- likes bullets --> <ul class="fa-ul my-0"> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> like_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> like_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> like_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> like_here </li> <!-- END likes bullets --> </ul> <!-- END likes --> </div> </div> <!-- dislikes --> <div class="col-sm-6 px-2"> <div class="rounded p-2 px-3 pr-4 mb-3 text-left" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2)"> <div class="text-uppercase" style="color: #c2edfc"> <i class="fal fa-heart-crack mx-1"></i> dislikes </div> <!-- dislikes bullets --> <ul class="fa-ul my-0"> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> dislike_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> dislike_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> dislike_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> dislike_here </li> <!-- END dislikes bullets --> </ul> <!-- END dislikes --> </div> </div> <!-- END invisible likes/dislikes box --> </div> </div> <!-- END basic info container --> </div> <!-- design notes button --> <a data-toggle="collapse" href="#designnotes" style="color: #c2edfc; text-decoration: none" class="text-uppercase" id="designnotesnav"> <div class="rounded mx-auto p-1 px-3 pt-2 mb-3 mt-2" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); display: inline-block"> design notes 
 <!-- END design notes button --> </div> </a> <br> 
 <!-- design notes container --> <div id="designnotes" class="collapse show rounded p-1 px-2 mx-auto" style="transition-duration: 1s"> <!-- design box --> <div class="mx-auto p-1 rounded" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); width: 300px;"> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> designer </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> <a href="LINK_HERE" target="_blank" style="color: #ffffff">designer_name</a> </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> value </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> $$$ </div> </div> <div class="row no-gutters"> <div class="col-auto font-italic text-uppercase p-1" style="color: #c2edfc"> status </div> <div class="col mt-2 p-1"> <hr class="my-1" style="background-color: #c2edfc; opacity: 0.7"> </div> <div class="col-auto p-1 pr-3"> nfs/t </div> </div> <!-- END design box --> </div> <!-- design bullet notes box --> <div class="mx-auto p-1 py-2 rounded my-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); width: 300px;"> <!-- design bullets --> <ul class="fa-ul my-0 text-left"> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> design_note_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> design_note_here </li> <li><span class="fa-li"><i class="fas fa-chevron-right" style="color: #c2edfc; opacity: .7"></i></span> design_note_here </li> <!-- END design bullets --> </ul> <!-- END design bullet notes box --> </div> <!-- END design notes container --> </div> <!-- relations button --> <a data-toggle="collapse" href="#relations" style="color: #c2edfc; text-decoration: none" class="text-uppercase" id="relationsnav"> <div class="rounded mx-auto p-1 px-3 pt-2 my-2 mb-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); display: inline-block"> relations <!-- END relations button --> </div> </a> 
 <!-- relations container --> <div id="relations" class="collapse show rounded p-1 px-2 mx-auto" style="transition-duration: 1s"> <!-- #1 relation box --> <div class="mx-auto p-2 text-left d-flex mb-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); width: 300px;"> <!-- relation image --> <div class="p-1 rounded" style="border: 1px solid #ffffff; display: inline-block"> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7" style="height: 60px; width: 60px; object-position: center; object-fit: cover" class="rounded"> <!-- END relation image --> </div> <!-- relation info --> <div class="mx-3 my-auto"> <a href="LINK_HERE" target="_blank" style="color: #c2edfc"><div style="font-size: 16px"> <span class="font-weight-bold">Name</span> <span class="font-italic" style="opacity: .9"> (relation) </span></div></a> <!-- !!! NOTE: 'far' is an empty heart and 'fas' is a filled heart --> <!-- heart icons --> <div><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="far fa-heart mr-1" style="color: #c2edfc"></i><i class="far fa-heart mr-1" style="color: #c2edfc"></i></div> <!-- END relation info --> </div> <!-- END #1 relation box --> </div> <!-- #2 relation box --> <div class="mx-auto p-2 text-left d-flex mb-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); width: 300px;"> <!-- relation image --> <div class="p-1 rounded" style="border: 1px solid #ffffff; display: inline-block"> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7" style="height: 60px; width: 60px; object-position: center; object-fit: cover" class="rounded"> <!-- END relation image --> </div> <!-- relation info --> <div class="mx-3 my-auto"> <a href="LINK_HERE" target="_blank" style="color: #c2edfc"><div style="font-size: 16px"> <span class="font-weight-bold">Name</span> <span class="font-italic" style="opacity: .9"> (relation) </span></div></a> <!-- !!! NOTE: 'far' is an empty heart and 'fas' is a filled heart --> <!-- heart icons --> <div><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="far fa-heart mr-1" style="color: #c2edfc"></i><i class="far fa-heart mr-1" style="color: #c2edfc"></i></div> <!-- END relation info --> </div> <!-- END #2 relation box --> </div> <!-- #3 relation box --> <div class="mx-auto p-2 text-left d-flex mb-3" style="background-color: rgba(0,0,0,.3); box-shadow: -2px 2px 3px 0 rgba(0,0,0,.5), 0 0px 12px 0 rgba(0,0,0,.2); width: 300px;"> <!-- relation image --> <div class="p-1 rounded" style="border: 1px solid #ffffff; display: inline-block"> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7" style="height: 60px; width: 60px; object-position: center; object-fit: cover" class="rounded"> <!-- END relation image --> </div> <!-- relation info --> <div class="mx-3 my-auto"> <a href="LINK_HERE" target="_blank" style="color: #c2edfc"><div style="font-size: 16px"> <span class="font-weight-bold">Name</span> <span class="font-italic" style="opacity: .9"> (relation) </span></div></a> <!-- !!! NOTE: 'far' is an empty heart and 'fas' is a filled heart --> <!-- heart icons --> <div><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="fas fa-heart mr-1" style="color: #c2edfc"></i><i class="far fa-heart mr-1" style="color: #c2edfc"></i><i class="far fa-heart mr-1" style="color: #c2edfc"></i></div> <!-- END relation info --> </div> <!-- END #3 relation box --> </div> <!-- END relations container --> </div> 
<!-- END more info container --> </div> 
 <!-- credits --> <div> <a class="mx-1" href="LINK_HERE" target="_blank" style="text-decoration: none"><i class="far fa-image tooltipster" title="background image credit" style="color: #c2edfc; text-shadow: -2px 2px 5px rgba(0,0,0,.8)"></i></a> <a class="mx-1" href="https://toyhou.se/Chick_Royal" target="_blank" style="text-decoration: none"><i class="far fa-table-layout tooltipster" title="layout by Chick_Royal" style="color: #c2edfc; text-shadow: -2px 2px 5px rgba(0,0,0,.8)"></i></a> <a class="mx-1" href="https://toyhou.se/teiyoq" target="_blank" style="text-decoration: none"><i class="far fa-feather-pointed tooltipster" title="code by teiyoq" style="color: #c2edfc; text-shadow: -2px 2px 5px rgba(0,0,0,.8)"></i></a> <!-- END credits --> </div> 
<!-- END full invisible container --> </div>