CROSSBOW !!'s Ownership

Please read the Characters FAQ for further information on permissions and original ownership!

Current Owner

HolyVacuity
View Ownership Log

Creator

HolyVacuity

Character Permissions

Cannot be transferred for any reason.

Design Terms of Use

HolyVacuity Global Rules
  1.         ♡ Content Boxes:  #FFFDF9
  2.         ♡ Labels (ex: Name, Personality):  #C97153
  3.         ♡ Primary Text:  #93949C
  4.         ♡ Dividers (ex: Horizontal lines, stars between traits):  #DAD8E9
  5.         ♡ Header Gradient: blue-  #8E94B6  |  peach-  #FFC5B6  |  transparent-  rgba(0,0,0,0)
  6.         ♡ Header Text, Glow & HTML Credit:  #FFFFFF
  7.         ♡ Decorative Stars:  #FFDEBB
  8.         ♡ Decorative Stars Shadow:  #AE8DBC
  9.         ♡ Quote Box:  #FFF2EF
  10.         ♡ Quote Text:  #7E799A
  11.  
  12. -->
  13.  
  14. <!-- ♡ Initial Container + Background Image - set to a repeating image by default ♡ -->
  15. <div class="container-fluid" style="max-width:900px; margin:auto; padding:8px; background: url(https://cdn.discordapp.com/attachments/695541426489917470/886893190924361738/unknown.png) repeat fixed; border-radius:1em;">
  16.  
  17.   <!-- ♡ Gradient Header - replace hex codes after "background:" selector to change ♡ -->
  18.   <div class="col row no-gutters mb-1" style="background:linear-gradient(90deg, #8E94B6 0%, #FFC5B6 40%, rgba(0,0,0,0) 80%); margin:auto; padding:5px; border-radius:2em; display:flex; align-items:center; justify-content:space-between;">
  19.     <p style="font-size: 1.4em; margin:5px; text-transform:uppercase; letter-spacing:.2em; color:#FFFFFF; text-shadow: 0px 0px 10px #FFFFFF;">
  20.  
  21.       <!-- ♡ Spinning Star Icon ♡ -->
  22.       <i class="fas fa-star fa-spin"></i>
  23.  
  24.       <!-- ♡ Header Text ♡ -->
  25.       To become stardust
  26.     </p>
  27.     <!-- ♡ Credit ♡ -->
  28.     <a href="https://toyhou.se/nice"><i class="far fa-heart tooltipster" style="position:relative; bottom:16px; font-size:.8em; color:#FFFFFF;" title="HTML by nice"></i></a>
  29.   </div>
  30.  
  31.   <!-- ♡ Basic Info Container ♡ -->
  32.   <div class="row no-gutters">
  33.     <div class="col-lg-5 p-1">
  34.       <div class="p-1 pb-2" style="background-color:#FFFDF9; height:100%; border-radius:1em;">
  35.  
  36.         <!-- ♡ Character Image - 300px by 300px - change URL but keep parentheses ♡ -->
  37.         <div class="my-2" style="background:url(INSERT URL HERE); background-position:center; height:300px; width:300px; border-radius:100em; margin:auto;">
  38.  
  39.           <!-- ♡ Decorative Stars on Character Image ♡ -->
  40.           <i class="fas fa-star" style="position:relative; font-size:2.5em; left:20px; top: 30px; transform:rotate(25deg); color:#FFDEBB; text-shadow: 0px 0px 15px #AE8DBC;"></i>
  41.           <!-- ♡ Smaller Star w/ Credit Feature - change the text in the quotations after title= to change ♡ -->
  42.           <i class="fas fa-star tooltipster" style="position:relative; font-size:1.5em; left:190px; top: 240px; transform:rotate(-25deg); color:#FFDEBB; text-shadow: 0px 0px 15px #AE8DBC;" title="IMAGE CREDIT HERE"></i>
  43.         </div>
  44.  
  45.         <!-- ♡ Quote Box ♡ -->
  46.         <div class="m-2 mx-3 p-2" style="background-color:#FFF2EF; border-radius:.5em; color: #7E799A;">
  47.           <p style="text-align:center; margin:0px; font-size:1.1em; font-weight:500;">
  48.             "Insert quote here."
  49.           </p>
  50.           <p class="px-4" style="text-align:right; font-size:.8em;">—
  51.             Quote source
  52.           </p>
  53.         </div>
  54.  
  55.         <!-- ♡ Basic Information Start ♡ -->
  56.         <!-- ♡ Name ♡ -->
  57.         <div class="col-12 row no-gutters" style="align-items:center;">
  58.           <div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153">› Name</div>
  59.           <div class="col mx-2">
  60.             <hr style="border-top:1px dotted #DAD8E9;">
  61.           </div>
  62.           <div class="col-auto" style="color:#93949C;">placeholder</div>
  63.         </div>
  64.  
  65.         <!-- ♡ Gender ♡ -->
  66.         <div class="col-12 row no-gutters" style="align-items:center;">
  67.           <div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153">› Gender</div>
  68.           <div class="col mx-2">
  69.             <hr style="border-top:1px dotted #DAD8E9;">
  70.           </div>
  71.           <div class="col-auto" style="color:#93949C;">placeholder</div>
  72.         </div>
  73.  
  74.         <!-- ♡ Pronouns ♡ -->
  75.         <div class="col-12 row no-gutters" style="align-items:center;">
  76.           <div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153">› Pronouns</div>
  77.           <div class="col mx-2">
  78.             <hr style="border-top:1px dotted #DAD8E9;">
  79.           </div>
  80.           <div class="col-auto" style="color:#93949C;">placeholder</div>
  81.         </div>
  82.  
  83.         <!-- ♡ Birthday ♡ -->
  84.         <div class="col-12 row no-gutters" style="align-items:center;">
  85.           <div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153">› Birthday</div>
  86.           <div class="col mx-2">
  87.             <hr style="border-top:1px dotted #DAD8E9;">
  88.           </div>
  89.           <div class="col-auto" style="color:#93949C;">placeholder</div>
  90.         </div>
  91.  
  92.         <!-- ♡ Height ♡ -->
  93.         <div class="col-12 row no-gutters" style="align-items:center;">
  94.           <div class="col-auto" style="font-weight:500;text-transform:uppercase; letter-spacing:.1em; color:#C97153">› Height</div>
  95.           <div class="col mx-2">
  96.             <hr style="border-top:1px dotted #DAD8E9;">
  97.           </div>
  98.           <div class="col-auto" style="color:#93949C;">placeholder</div>
  99.         </div>
  100.  
  101.         <!-- ♡ Can add additional rows under here ♡ -->
  102.  
  103.       </div>
  104.     </div>
  105.  
  106.     <!-- ♡ Second Info Column ♡ -->
  107.     <div class="col-lg-7 p-1" style="display:flex; flex-flow:column;">
  108.  
  109.       <!-- ♡ Likes + Dislikes Container ♡ -->
  110.       <div class="p-3 mb-2 col" style="background-color:#FFFDF9; border-radius:1em; flex: 0 1 ;">
  111.         <div class=row>
  112.           <!-- ♡ Likes ♡ -->
  113.           <div class="col-6">
  114.             <p style="text-align:center; font-weight:600; letter-spacing:.3em; text-transform: uppercase; margin-bottom:8px; font-size: 1.1em; color:#C97153;">
  115.               Likes
  116.             </p>
  117.  
  118.             <ul style="font-size:.9em; margin-bottom:0px; color:#93949C;">
  119.               <li class="mb-1">Item one</li>
  120.               <li class="mb-1">Item two</li>
  121.               <li class="mb-1">Item three</li>
  122.               <li class="mb-1">Item four</li>
  123.               <li class="mb-1">Item five</li>
  124.               <!-- ♡ Can add more bullets under here ♡ -->
  125.  
  126.             </ul>
  127.           </div>
  128.  
  129.           <!-- ♡ Dislikes ♡ -->
  130.           <div class="col-6">
  131.             <p style="text-align:center; font-weight:600; letter-spacing:.3em; text-transform: uppercase; margin-bottom:8px; font-size: 1.1em; color:#C97153;">
  132.               Dislikes
  133.             </p>
  134.             <ul style="font-size:.9em; margin-bottom:0px; color:#93949C;">
  135.               <li class="mb-1">Item one</li>
  136.               <li class="mb-1">Item two</li>
  137.               <li class="mb-1">Item three</li>
  138.               <li class="mb-1">Item four</li>
  139.               <li class="mb-1">Item five</li>
  140.               <!-- ♡ Can add more bullets under here ♡ -->
  141.  
  142.             </ul>
  143.           </div>
  144.         </div>
  145.       </div>
  146.  
  147.       <!-- ♡ Changing Container ♡ -->
  148.       <div class="tab-content p-3 col" style="background-color:#FFFDF9; border-radius:1em; flex: 1 1 auto; ">
  149.  
  150.         <!-- ♡ Personality ♡ -->
  151.         <div class="tab-pane fade active show" data-toggle="tab" id="personality">
  152.           <div class="row no-gutters" style="justify-content:space-between; align-items:baseline;">
  153.             <!-- ♡ Personality FA Icon - keep the style if you change the icon ♡ -->
  154.             <i class="fas fa-moon-stars" style="font-size: 1.3em; color:#C97153;"></i>
  155.             <p class="mr-2" style="text-align:center; font-weight:600; letter-spacing:.3em; text-transform: uppercase; margin-bottom:8px; font-size: 1.1em; color:#C97153;">
  156.               Personality
  157.             </p>
  158.           </div>
  159.           <hr class="mb-4" style="margin-top: 5px; border-top: 1px dotted #DAD8E9;">
  160.           <div class="row no-gutters mx-5" style="font-size: 1.1em; letter-spacing:.05em; font-weight:500; justify-content: space-evenly; align-items:baseline; flex-wrap:wrap; line-height:10px; color:#93949C">
  161.  
  162.             <!-- ♡ Traits ♡ -->
  163.             <p>trait</p>
  164.             <i class="fas fa-star" style="font-size:.6em; color:#DAD8E9; margin-left:10px; margin-right:10px;"></i>
  165.             <p>trait</p>
  166.             <i class="fas fa-star" style="font-size:.6em; color:#DAD8E9; margin-left:10px; margin-right:10px;"></i>
  167.             <p>trait</p>
  168.             <i class="fas fa-star" style="font-size:.6em; color:#DAD8E9; margin-left:10px; margin-right:10px;"></i>
  169.             <p>trait</p>
  170.           </div>
  171.  
  172.           <!-- ♡ Personality Content ♡ -->
  173.           <div class="mt-2" style="color:#93949C;">
  174.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit porttitor, elementum eros blandit, vestibulum est. Donec commodo neque eget nibh finibus varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tristique porttitor nibh, efficitur lacinia odio posuere id. Mauris non ullamcorper tortor, nec elementum nulla. Suspendisse hendrerit felis a ligula bibendum, quis auctor ipsum pulvinar. Integer nulla neque, fermentum quis erat id, ullamcorper commodo ex.</p>
  175.             <p>Quisque sed accumsan odio, vitae elementum urna. Aenean et iaculis sem. Mauris rhoncus tristique sem suscipit faucibus.</p>
  176.             <!-- ♡ Can add more paragraph tags under here ♡ -->
  177.  
  178.           </div>
  179.         </div>
  180.  
  181.         <!-- ♡ Overview/Miscellaneous ♡ -->
  182.         <div class="tab-pane fade" data-toggle="tab" id="overview">
  183.           <div class="row no-gutters" style="justify-content:space-between; align-items:baseline;">
  184.             <!-- ♡ Overview/Misc FA Icon - keep the style if you change the icon ♡ -->
  185.             <i class="far fa-rocket" style="font-size: 1.3em; color:#C97153;"></i>
  186.             <p class="mr-2" style="text-align:center; font-weight:600; letter-spacing:.3em; text-transform: uppercase; margin-bottom:8px; font-size: 1.1em; color:#C97153;">
  187.               <!-- ♡ Overview/Misc Title - feel free to pick one/the other or change this! ♡ -->
  188.               Overview | Miscellaneous
  189.             </p>
  190.           </div>
  191.           <hr style="margin-top: 5px; border-top: 1px dotted #DAD8E9;">
  192.  
  193.           <div style="color:#93949C;">
  194.             <!-- ♡ Optional paragraph starts here ♡ -->
  195.             <p>
  196.               Proin porttitor non leo at scelerisque. Sed nec dolor vitae mauris elementum laoreet quis eget nulla. Integer consectetur congue enim. Nulla odio arcu, lacinia luctus sapien eget, dictum volutpat massa. Aenean ut varius leo. Ut porta quam mi, non semper massa congue eleifend. Duis eu dolor condimentum, vehicula nisl vitae, vestibulum arcu. Aliquam vel magna porta, imperdiet ipsum sed, faucibus est. Phasellus ut pretium massa.
  197.             </p>
  198.             <!-- ♡ Optional paragraph ends here ♡ -->
  199.  
  200.             <!-- ♡ Optional list starts Here ♡ -->
  201.             <ul style="margin-bottom:0px; margin-top:10px; color:#93949C;">
  202.               <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  203.               <li class="mb-1">Aenean enim libero, posuere eget orci a, ultrices congue lorem. Suspendisse tincidunt velit ullamcorper ex luctus posuere.</li>
  204.               <li class="mb-1">Donec imperdiet id libero ac feugiat.</li>
  205.               <li class="mb-1">Nunc facilisis lectus velit, id pharetra arcu iaculis vel. Vestibulum vel volutpat diam. Ut convallis tincidunt elit sed viverra.</li>
  206.             </ul>
  207.             <!-- ♡ Optional list ends here ♡ -->
  208.           </div>
  209.         </div>
  210.  
  211.       </div>
  212.     </div>
  213.   </div>
  214. </div>
  215.  
  216. <!-- ♡ Changing Container Buttons ♡ -->
  217. <div style="margin:0px; padding:0px;">
  218.   <ul class="nav" style="justify-content:center; font-size:1.2em;">
  219.     <li class="nav-item">
  220.       <a class="nav-link tooltipster" title="Personality" data-toggle="tab" href="#personality" style="color:#C97153;">
  221.         <!-- ♡ Personality Icon ♡ -->
  222.         <i class="fas fa-moon-stars"></i>
  223.       </a>
  224.     </li>
  225.     <li class="nav-item">
  226.       <a class="nav-link tooltipster" title="Overview" data-toggle="tab" href="#overview" style="color:#C97153;">
  227.         <!-- ♡ Overview Icon ♡ -->
  228.         <i class="far fa-rocket"></i>
  229.       </a>
  230.     </li>
  231.   </ul>
  232. </div>



2185 Users Online 11:32 pm © cyancrows 2017
About FAQ Rules TOS