werebeast

Star Charms - Glow in the Dark

Dec 2nd, 2020 (edited)
462
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.    ★ STAR CHARMS - - - - ★
  3.    ★ a free-to-use code - -★
  4.    ★ by werebear - - - -★
  5.  
  6.    RULES
  7.      Please don't remove my credit.
  8.      Feel free to edit as you please.
  9.        - This includes frankensteining, referencing, whatnot.
  10.      If you're feeling kind, I'd appreciate a fave and would love to see if you've used this.
  11.    
  12.    NOTES
  13.      Not WYSIWYG friendly, keep it off.
  14.      Should be relatively mobile friendly.
  15.      The charms will hide on xs displays, as they would otherwise display in a single, very long line.
  16.      Available in custom colors and bootstrap colors.
  17.    
  18.    CUSTOMIZATION
  19.      Use ctrl+F and replace all to change these colors and icons easily.
  20.      As this is the Glow in the Dark one, most of these are similar shades of pale green
  21.      Colors -
  22.        Top text: #7BD371
  23.        Gradient: #03080B, #051A26
  24.        Info box background: rgba(22,22,22,0.25)
  25.          I defined this in rgba instead of hex for translucency.
  26.        Info box accent: #9DE992
  27.        Info box text: #E1FADE
  28.        Other text: #CBF9C5
  29.        Charms: #9CE993
  30.      Icons -
  31.        Name Moon: fad fa-moon-stars
  32.        Name Star: fad fa-stars
  33.        Quotes -
  34.          Left: fad fa-quote-left
  35.          Right: fad fa-quote-right
  36.        Likes: fas fa-heart
  37.          If you're changing this one, change dislikes first.
  38.          If you're not changing dislikes, too, you'll need to change them by hand or it will break the dislikes.
  39.        Dislikes: fas fa-heart-broken
  40.        Charm strands: fad fa-circle
  41.        Charms: fad fa-star
  42.          If you are changing this icon, either change the name one first or fix it after replacing.
  43.          You can remove the animation by deleting fa-pulse from each.
  44.          If you want a smoother animation, change fa-pulse to fa-spin.
  45.  
  46.  ★ Enjoy! ★
  47.    
  48.   -->
  49.    
  50.    
  51.   <!-- Top text begin -->
  52. <div class="container mx-auto w-70" style="max-width:800px">
  53.     <div class="row mx-auto" style="color:#7BD371;font-variant:small-caps;text-align:center">
  54.         <div class="col-sm-6"> <span style="font-size:250%">
  55.     <!-- Name, pronouns, traits! -->
  56.             <i class="fad fa-moon-stars"></i>
  57.               Name
  58.                 <i class="fad fa-stars"></i>
  59.             </span>
  60.             <br>    <span style="font-size:100%">
  61.                 Pro/noun
  62.                 ∙∙
  63.                 Trait
  64.                 ∙∙
  65.                 Trait
  66.                 ∙∙
  67.                 Trait
  68.             </span>
  69.         </div>
  70.     <!-- Quote! --!>
  71.     <!-- If it's too long, it will look weird. -->
  72.     <!-- if you want no quote, delete from here to the next </div>
  73.     and your left side text will appear in the middle, then -->
  74.         <div class="col-sm-6"> <i class="fad fa-quote-left" style="float:left"></i>
  75.             Quotation, n: The act of repeating erroneously the words of another. <i class="fad fa-quote-right" style="float:right"></i>
  76.             <br> <span style="font-size:80%">
  77.             - <i>Ambrose Bierce</i>
  78.           </span>
  79.         </div>
  80.     </div>
  81. </div>
  82.   <!-- Main box -->
  83. <div class="container mx-auto w-70 h-50" style="max-width:800px;color:#CBF9C5;background-image:linear-gradient(to bottom right, #03080B, #051A26);border-radius:40px;padding:2%">
  84.     <!-- Details box  -->
  85.     <div class="row no-gutters" style="background-color:rgba(0,0,0,0.25);border-radius:20px;height:50%;color:#E1FADE;padding:2%">
  86.     <!-- Info form -->
  87.     <!-- If you add any extra lines, you may need to tweak the other parts of this box to prevent it from looking unbalanced.  -->
  88.         <div class="col-sm-4" style="padding-top:2%"> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  89.                         Full Name:
  90.                       </span>
  91.             ?????
  92.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  93.                         Nickname:
  94.                       </span>
  95.             ?????
  96.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  97.                         Species:
  98.                       </span>
  99.             ?????
  100.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  101.                         Age:
  102.                       </span>
  103.             ?????
  104.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  105.                         Birthday:
  106.                       </span>
  107.             ?????
  108.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  109.                         Gender:
  110.                       </span>
  111.             ?????
  112.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  113.                         Orientation:
  114.                       </span>
  115.             ?????
  116.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  117.                         Height:
  118.                       </span>
  119.             ?????
  120.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  121.                         Alignment:
  122.                       </span>
  123.             ?????
  124.             <br> <span style="color:#9DE992;font-weight:bold;padding-right:4px">
  125.                         Job:
  126.                       </span>
  127.             ?????
  128.         </div>
  129.         <div class="col-sm-4">
  130.             <div class="short-div" style="margin:15px">
  131.     <!-- Likes -->
  132.     <!-- Again, may require some fiddling with other elements in the box if you make these much longer.  -->
  133.                <i class="fas fa-heart" style="color:#9DE992"></i> ?????
  134.                 <br> <i class="fas fa-heart" style="color:#9DE992"></i> ?????
  135.                 <br> <i class="fas fa-heart" style="color:#9DE992"></i> ?????
  136.                 <br> <i class="fas fa-heart" style="color:#9DE992"></i> ?????
  137.                 <br>
  138.             </div>
  139.             <i class="fas fa-star" style="font-size:75%;margin-right:6px"></i><i class="fas fa-star"></i><i class="fas fa-star" style="font-size:75%;margin-left:6px"></i>
  140.             <div class="short-div" style="margin:15px">
  141.     <!-- Dislikes  -->
  142.                      <i class="fas fa-heart-broken" style="color:#9DE992"></i> ?????
  143.                 <br> <i class="fas fa-heart-broken" style="color:#9DE992"></i> ?????
  144.                 <br> <i class="fas fa-heart-broken" style="color:#9DE992"></i> ?????
  145.                 <br> <i class="fas fa-heart-broken" style="color:#9DE992"></i> ?????
  146.                 <br>
  147.             </div>
  148.         </div>
  149.         <div class="col-sm-4">
  150.     <!-- Credit! You may relocate and change how it looks, but please leave it intact. --> <span style="position:float;float:right">
  151.                   <a href="" style="text-decoration:none;color:rgba(255,255,255,0.5)"><i class="fas fa-code fa-sm"></i></a>
  152.               </span>
  153.   <!-- Image  -->
  154.   <!-- This looks best with an image with a center focus. -->
  155.             <img src="https://i.imgur.com/eVggWn5.png" class="rounded-circle" style="max-height:225px;padding-top:8%">
  156.         </div>
  157.     </div>
  158.     <!-- Text area -->
  159.     <!-- This will expand to fit your text and looks best if you keep it fairly short. -->
  160.     <div class="row">
  161.         <div class="col-xs-12" style="padding:2%">
  162.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
  163.             <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  164.             <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
  165.         </div>
  166.     </div>
  167. </div>
  168.   <!-- ★ Now the charms! ★ -->
  169.   <!-- These are easily changed out for different ones, see header text for details. -->
  170.   <!-- They will auto-hide on extra small displays as they can't display properly there. -->
  171. <div class="container mx-auto hidden-xs-down w-70" style="max-width:800px;color:#9CE993;text-align:center">
  172.     <div class="row no-gutters">
  173.         <div class="col-sm-1"> <span style="font-size:85%">
  174.                 <i class="fad fa-circle"></i><br>
  175.                 <i class="fad fa-circle"></i><br>
  176.                 <i class="fad fa-circle"></i><br>
  177.                 <i class="fad fa-circle"></i><br>
  178.               </span>
  179.             <span style="font-size:170%">
  180.                 <i class="fad fa-star fa-pulse" style="animation-duration: 7.8s"></i>
  181.               </span>
  182.         </div>
  183.         <div class="col-sm-1"> <span style="font-size:85%">
  184.                 <i class="fad fa-circle"></i><br>
  185.                 <i class="fad fa-circle"></i><br>
  186.                 <i class="fad fa-circle"></i><br>
  187.                 <i class="fad fa-circle"></i><br>
  188.                 <i class="fad fa-circle"></i><br>
  189.                 <i class="fad fa-circle"></i><br>
  190.               </span>
  191.             <span style="font-size:170%">
  192.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7.3s;animation-direction:reverse;"></i>
  193.               </span>
  194.         </div>
  195.         <div class="col-sm-1"> <span style="font-size:85%">
  196.                 <i class="fad fa-circle"></i><br>
  197.                 <i class="fad fa-circle"></i><br>
  198.                 <i class="fad fa-circle"></i><br>
  199.               </span>
  200.             <span style="font-size:170%">
  201.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6.8s"></i>
  202.               </span>
  203.         </div>
  204.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  205.                 <i class="fad fa-circle"></i><br>
  206.                 <i class="fad fa-circle"></i><br>
  207.                 <i class="fad fa-circle"></i><br>
  208.                 <i class="fad fa-circle"></i><br>
  209.                 <i class="fad fa-circle"></i><br>
  210.                 <i class="fad fa-circle"></i><br>
  211.                 <i class="fad fa-circle"></i><br>
  212.               </span>
  213.             <span style="font-size:170%">
  214.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7.5s;animation-direction:reverse;"></i>
  215.               </span>
  216.         </div>
  217.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  218.                 <i class="fad fa-circle"></i><br>
  219.                 <i class="fad fa-circle"></i><br>
  220.                 <i class="fad fa-circle"></i><br>
  221.                 <i class="fad fa-circle"></i><br>
  222.                 <i class="fad fa-circle"></i><br>
  223.               </span>
  224.             <span style="font-size:170%">
  225.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 5.5s;animation-direction:reverse;"></i>
  226.               </span>
  227.         </div>
  228.         <div class="col-sm-1"> <span style="font-size:85%">
  229.                 <i class="fad fa-circle"></i><br>
  230.                 <i class="fad fa-circle"></i><br>
  231.                 <i class="fad fa-circle"></i><br>
  232.                 <i class="fad fa-circle"></i><br>
  233.                 <i class="fad fa-circle"></i><br>
  234.                 <i class="fad fa-circle"></i><br>
  235.               </span>
  236.             <span style="font-size:170%">
  237.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6.5s;"></i>
  238.               </span>
  239.         </div>
  240.         <div class="col-sm-1"> <span style="font-size:85%">
  241.                 <i class="fad fa-circle"></i><br>
  242.                 <i class="fad fa-circle"></i><br>
  243.               </span>
  244.             <span style="font-size:170%">
  245.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7s;animation-direction:reverse;"></i>
  246.               </span>
  247.         </div>
  248.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  249.                 <i class="fad fa-circle"></i><br>
  250.                 <i class="fad fa-circle"></i><br>
  251.                 <i class="fad fa-circle"></i><br>
  252.                 <i class="fad fa-circle"></i><br>
  253.                 <i class="fad fa-circle"></i><br>
  254.               </span>
  255.             <span style="font-size:170%">
  256.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 8s;"></i>
  257.               </span>
  258.         </div>
  259.         <div class="col-sm-1"> <span style="font-size:85%">
  260.                 <i class="fad fa-circle"></i><br>
  261.                 <i class="fad fa-circle"></i><br>
  262.                 <i class="fad fa-circle"></i><br>
  263.                 <i class="fad fa-circle"></i><br>
  264.               </span>
  265.             <span style="font-size:170%">
  266.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6s;"></i>
  267.               </span>
  268.         </div>
  269.     </div>
  270. </div>
  271. </div>
RAW Paste Data